diff --git a/.deepsource.toml b/.deepsource.toml
deleted file mode 100644
index 2b40af672d7..00000000000
--- a/.deepsource.toml
+++ /dev/null
@@ -1,23 +0,0 @@
-version = 1
-
-exclude_patterns = [  
-  "bin/**",  
-  "**/node_modules/",  
-  "**/*.min.js"  
-]
-
-[[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/.github/workflows/auto-merge.yml b/.github/workflows/auto-merge.yml
new file mode 100644
index 00000000000..ed381453219
--- /dev/null
+++ b/.github/workflows/auto-merge.yml
@@ -0,0 +1,84 @@
+name: Auto Merge or Create PR on Push
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "sync/**"
+
+env:
+  CURRENT_BRANCH: ${{ github.ref_name }}
+  SOURCE_BRANCH: ${{ secrets.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce"
+  TARGET_BRANCH: ${{ secrets.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop
+  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
+  REVIEWER: ${{ secrets.SYNC_PR_REVIEWER }}
+
+jobs:
+  Check_Branch:
+    runs-on: ubuntu-latest
+    outputs:
+      BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }}
+    steps:
+      - name: Check if current branch matches the secret
+        id: check-branch
+        run: |
+          if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then
+            echo "MATCH=true" >> $GITHUB_OUTPUT
+          else
+            echo "MATCH=false" >> $GITHUB_OUTPUT
+          fi
+
+  Auto_Merge:
+    if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
+    needs: [Check_Branch]
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4.1.1
+        with:
+          fetch-depth: 0 # Fetch all history for all branches and tags
+
+      - name: Setup Git
+        run: |
+          git config user.name "GitHub Actions"
+          git config user.email "actions@github.com"
+
+      - name: Setup GH CLI and Git Config
+        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: Check for merge conflicts
+        id: conflicts
+        run: |
+          git fetch origin $TARGET_BRANCH
+          git checkout $TARGET_BRANCH
+          # Attempt to merge the main branch into the current branch
+          if $(git merge --no-commit --no-ff $SOURCE_BRANCH); then
+            echo "No merge conflicts detected."
+            echo "HAS_CONFLICTS=false" >> $GITHUB_ENV
+          else
+            echo "Merge conflicts detected."
+            echo "HAS_CONFLICTS=true" >> $GITHUB_ENV
+            git merge --abort
+          fi
+
+      - name: Merge Change to Target Branch
+        if: env.HAS_CONFLICTS == 'false'
+        run: |
+          git commit -m "Merge branch '$SOURCE_BRANCH' into $TARGET_BRANCH"
+          git push origin $TARGET_BRANCH
+
+      - name: Create PR to Target Branch
+        if: env.HAS_CONFLICTS == 'true'
+        run: |
+          # Replace 'username' with the actual GitHub username of the reviewer.
+          PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "" --reviewer $REVIEWER)
+          echo "Pull Request created: $PR_URL"
diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index 44bae0efa60..306f929576f 100644
--- a/.github/workflows/build-branch.yml
+++ b/.github/workflows/build-branch.yml
@@ -6,7 +6,6 @@ on:
     branches:
       - master
       - preview
-      - develop
   release:
     types: [released, prereleased]
 
@@ -18,7 +17,7 @@ jobs:
     name: Build-Push Web/Space/API/Proxy Docker Image
     runs-on: ubuntu-latest
     outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }} 
+      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
       gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
       gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
       gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
@@ -74,7 +73,7 @@ jobs:
               - nginx/**
 
   branch_build_push_frontend:
-    if: ${{ needs.branch_build_setup.outputs.build_frontend == 'true' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    if: ${{ needs.branch_build_setup.outputs.build_frontend == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -126,7 +125,7 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
   branch_build_push_space:
-    if: ${{ needs.branch_build_setup.outputs.build_space == 'true' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    if: ${{ needs.branch_build_setup.outputs.build_space == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -178,7 +177,7 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
   branch_build_push_backend:
-    if: ${{ needs.branch_build_setup.outputs.build_backend == 'true' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    if: ${{ needs.branch_build_setup.outputs.build_backend == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -230,7 +229,7 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
   branch_build_push_proxy:
-    if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
+    if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'workflow_dispatch' || github.event_name == 'release' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -280,4 +279,3 @@ jobs:
           DOCKER_BUILDKIT: 1
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
diff --git a/.github/workflows/build-test-pull-request.yml b/.github/workflows/build-test-pull-request.yml
index 83ed41625df..e0014f696f4 100644
--- a/.github/workflows/build-test-pull-request.yml
+++ b/.github/workflows/build-test-pull-request.yml
@@ -1,27 +1,19 @@
-name: Build Pull Request Contents
+name: Build and Lint on Pull Request
 
 on:
+  workflow_dispatch:
   pull_request:
     types: ["opened", "synchronize"]
 
 jobs:
-  build-pull-request-contents:
-    name: Build Pull Request Contents
-    runs-on: ubuntu-20.04
-    permissions:
-      pull-requests: read
-
+  get-changed-files:
+    runs-on: ubuntu-latest
+    outputs:
+      apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}
+      web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
+      space_changed: ${{ steps.changed-files.outputs.deploy_any_changed }}
     steps:
-      - name: Checkout Repository to Actions
-        uses: actions/checkout@v3.3.0
-        with:
-          token: ${{ secrets.ACCESS_TOKEN }}
-
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18.x
-
+      - uses: actions/checkout@v3
       - name: Get changed files
         id: changed-files
         uses: tj-actions/changed-files@v41
@@ -31,17 +23,82 @@ jobs:
               - apiserver/**
             web:
               - web/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
             deploy:
               - space/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+
+  lint-apiserver:
+    needs: get-changed-files
+    runs-on: ubuntu-latest
+    if: needs.get-changed-files.outputs.apiserver_changed == 'true'
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.x' # Specify the Python version you need
+      - name: Install Pylint
+        run: python -m pip install ruff
+      - name: Install Apiserver Dependencies
+        run: cd apiserver && pip install -r requirements.txt
+      - name: Lint apiserver
+        run: ruff check --fix apiserver
+
+  lint-web:
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.web_changed == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - run: yarn install
+      - run: yarn lint --filter=web
 
-      - name: Build Plane's Main App
-        if: steps.changed-files.outputs.web_any_changed == 'true'
-        run: |
-          yarn
-          yarn build --filter=web
+  lint-space:
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.space_changed == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - run: yarn install
+      - run: yarn lint --filter=space
+
+  build-web:
+    needs: lint-web
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - run: yarn install
+      - run: 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
+  build-space:
+    needs: lint-space
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - run: yarn install
+      - run: yarn build --filter=space
diff --git a/.github/workflows/check-version.yml b/.github/workflows/check-version.yml
new file mode 100644
index 00000000000..ca8b6f8b3e0
--- /dev/null
+++ b/.github/workflows/check-version.yml
@@ -0,0 +1,45 @@
+name: Version Change Before Release
+
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check-version:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Get PR Branch version
+        run: echo "PR_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
+
+      - name: Fetch base branch
+        run: git fetch origin master:master
+
+      - name: Get Master Branch version
+        run: |
+          git checkout master
+          echo "MASTER_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
+
+      - name: Get master branch version and compare
+        run: |
+          echo "Comparing versions: PR version is $PR_VERSION, Master version is $MASTER_VERSION"
+          if [ "$PR_VERSION" == "$MASTER_VERSION" ]; then
+            echo "Version in PR branch is the same as in master. Failing the CI."
+            exit 1
+          else
+            echo "Version check passed. Versions are different."
+          fi
+        env:
+          PR_VERSION: ${{ env.PR_VERSION }}
+          MASTER_VERSION: ${{ env.MASTER_VERSION }}
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 9f6ab1bfb5c..d7b94d2456d 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -1,13 +1,13 @@
 name: "CodeQL"
 
 on:
+  workflow_dispatch:
   push:
-    branches: [ 'develop', 'preview', 'master' ]
+    branches: ["develop", "preview", "master"]
   pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ 'develop', 'preview', 'master' ]
+    branches: ["develop", "preview", "master"]
   schedule:
-    - cron: '53 19 * * 5'
+    - cron: "53 19 * * 5"
 
 jobs:
   analyze:
@@ -21,45 +21,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'python', 'javascript' ]
+        language: ["python", "javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Use only 'java' to analyze code written in Java, Kotlin or both
         # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
+      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{matrix.language}}"
diff --git a/.github/workflows/feature-deployment.yml b/.github/workflows/feature-deployment.yml
new file mode 100644
index 00000000000..c5eec3cd3ad
--- /dev/null
+++ b/.github/workflows/feature-deployment.yml
@@ -0,0 +1,199 @@
+name: Feature Preview
+
+on:
+  workflow_dispatch:
+    inputs:
+      web-build:
+        required: false
+        description: 'Build Web'
+        type: boolean
+        default: true
+      space-build:
+        required: false
+        description: 'Build Space'
+        type: boolean
+        default: false
+
+env:
+  BUILD_WEB: ${{ github.event.inputs.web-build }}
+  BUILD_SPACE: ${{ github.event.inputs.space-build }}
+
+jobs:
+  setup-feature-build:
+    name: Feature Build Setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        run: |
+          echo "BUILD_WEB=$BUILD_WEB" 
+          echo "BUILD_SPACE=$BUILD_SPACE"
+    outputs:
+      web-build: ${{ env.BUILD_WEB}} 
+      space-build: ${{env.BUILD_SPACE}}
+
+  feature-build-web:
+    if: ${{ needs.setup-feature-build.outputs.web-build == 'true' }}
+    needs: setup-feature-build
+    name: Feature Build Web
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
+      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      - name: Install AWS cli
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3-pip
+          pip3 install awscli
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: plane
+      - name: Install Dependencies
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn install
+      - name: Build Web
+        id: build-web
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn build --filter=web
+          cd $GITHUB_WORKSPACE
+
+          TAR_NAME="web.tar.gz"
+          tar -czf $TAR_NAME ./plane
+
+          FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
+          aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
+     
+  feature-build-space:
+    if: ${{ needs.setup-feature-build.outputs.space-build == 'true' }}
+    needs: setup-feature-build
+    name: Feature Build Space
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
+      NEXT_PUBLIC_DEPLOY_WITH_NGINX: 1
+      NEXT_PUBLIC_API_BASE_URL: ${{ vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL }}
+    outputs:
+      do-build: ${{ needs.setup-feature-build.outputs.space-build }}
+      s3-url: ${{ steps.build-space.outputs.S3_PRESIGNED_URL }}
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      - name: Install AWS cli
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3-pip
+          pip3 install awscli
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: plane
+      - name: Install Dependencies
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn install
+      - name: Build Space
+        id: build-space
+        run: |
+          cd $GITHUB_WORKSPACE/plane
+          yarn build --filter=space
+          cd $GITHUB_WORKSPACE
+
+          TAR_NAME="space.tar.gz"
+          tar -czf $TAR_NAME ./plane
+
+          FILE_EXPIRY=$(date -u -d "+2 days" +"%Y-%m-%dT%H:%M:%SZ")
+          aws s3 cp $TAR_NAME s3://${{ env.AWS_BUCKET }}/${{github.sha}}/$TAR_NAME --expires $FILE_EXPIRY
+
+  feature-deploy:
+    if: ${{ always() && (needs.setup-feature-build.outputs.web-build == 'true' || needs.setup-feature-build.outputs.space-build == 'true') }}
+    needs: [feature-build-web, feature-build-space]
+    name: Feature Deploy
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ vars.FEATURE_PREVIEW_AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.FEATURE_PREVIEW_AWS_SECRET_ACCESS_KEY }}
+      AWS_BUCKET: ${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}
+      KUBE_CONFIG_FILE: ${{ secrets.FEATURE_PREVIEW_KUBE_CONFIG }}
+    steps:
+      - name: Install AWS cli
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y python3-pip
+          pip3 install awscli
+      - name: Tailscale
+        uses: tailscale/github-action@v2
+        with:
+          oauth-client-id: ${{ secrets.TAILSCALE_OAUTH_CLIENT_ID }}
+          oauth-secret: ${{ secrets.TAILSCALE_OAUTH_SECRET }}
+          tags: tag:ci
+      - name: Kubectl Setup
+        run: |
+          curl -LO "https://dl.k8s.io/release/${{ vars.FEATURE_PREVIEW_KUBE_VERSION }}/bin/linux/amd64/kubectl"
+          chmod +x kubectl
+
+          mkdir -p ~/.kube
+          echo "$KUBE_CONFIG_FILE" > ~/.kube/config
+          chmod 600 ~/.kube/config
+      - name: HELM Setup
+        run: |
+          curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3
+          chmod 700 get_helm.sh
+          ./get_helm.sh
+      - name: App Deploy
+        run: |
+          WEB_S3_URL=""
+          if [ ${{ env.BUILD_WEB }} == true ]; then
+            WEB_S3_URL=$(aws s3 presign s3://${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}/${{github.sha}}/web.tar.gz --expires-in 3600)
+          fi
+
+          SPACE_S3_URL=""
+          if [ ${{ env.BUILD_SPACE }} == true ]; then
+            SPACE_S3_URL=$(aws s3 presign s3://${{ vars.FEATURE_PREVIEW_AWS_BUCKET }}/${{github.sha}}/space.tar.gz --expires-in 3600)
+          fi
+
+          if [ ${{ env.BUILD_WEB }} == true ] || [ ${{ env.BUILD_SPACE }} == true ]; then
+
+            helm --kube-insecure-skip-tls-verify repo add feature-preview ${{ vars.FEATURE_PREVIEW_HELM_CHART_URL }} 
+
+            APP_NAMESPACE="${{ vars.FEATURE_PREVIEW_NAMESPACE }}"
+            DEPLOY_SCRIPT_URL="${{ vars.FEATURE_PREVIEW_DEPLOY_SCRIPT_URL }}"
+
+            METADATA=$(helm --kube-insecure-skip-tls-verify install feature-preview/${{ vars.FEATURE_PREVIEW_HELM_CHART_NAME }} \
+                --generate-name \
+                --namespace $APP_NAMESPACE \
+                --set ingress.primaryDomain=${{vars.FEATURE_PREVIEW_PRIMARY_DOMAIN || 'feature.plane.tools' }} \
+                --set web.image=${{vars.FEATURE_PREVIEW_DOCKER_BASE}} \
+                --set web.enabled=${{ env.BUILD_WEB || false }} \
+                --set web.artifact_url=$WEB_S3_URL \
+                --set space.image=${{vars.FEATURE_PREVIEW_DOCKER_BASE}} \
+                --set space.enabled=${{ env.BUILD_SPACE || false }} \
+                --set space.artifact_url=$SPACE_S3_URL \
+                --set shared_config.deploy_script_url=$DEPLOY_SCRIPT_URL \
+                --set shared_config.api_base_url=${{vars.FEATURE_PREVIEW_NEXT_PUBLIC_API_BASE_URL}} \
+                --output json \
+                --timeout 1000s)
+
+            APP_NAME=$(echo $METADATA | jq -r '.name')
+
+            INGRESS_HOSTNAME=$(kubectl get ingress -n feature-builds --insecure-skip-tls-verify \
+                -o jsonpath='{.items[?(@.metadata.annotations.meta\.helm\.sh\/release-name=="'$APP_NAME'")]}' | \
+                jq -r '.spec.rules[0].host')
+
+            echo "****************************************"
+            echo "APP NAME ::: $APP_NAME"
+            echo "INGRESS HOSTNAME ::: $INGRESS_HOSTNAME"
+            echo "****************************************"
+          fi
diff --git a/.gitignore b/.gitignore
index 0b655bd0e75..3989f43561e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,6 +51,7 @@ staticfiles
 mediafiles
 .env
 .DS_Store
+logs/
 
 node_modules/
 assets/dist/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 148568d76fb..f40c1a244bb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -50,7 +50,6 @@ chmod +x setup.sh
 docker compose -f docker-compose-local.yml up
 ```
 
-
 ## 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.
diff --git a/ENV_SETUP.md b/ENV_SETUP.md
index bfc30019624..df05683efd9 100644
--- a/ENV_SETUP.md
+++ b/ENV_SETUP.md
@@ -53,7 +53,6 @@ NGINX_PORT=80
 NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
 ```
 
-
 ## {PROJECT_FOLDER}/apiserver/.env
 
 ​
diff --git a/README.md b/README.md
index 52ccda474f1..ece8ff1e2f8 100644
--- a/README.md
+++ b/README.md
@@ -17,10 +17,10 @@
 </p>
 
 <p align="center">
-    <a href="http://www.plane.so"><b>Website</b></a> •
-    <a href="https://github.com/makeplane/plane/releases"><b>Releases</b></a> •
-    <a href="https://twitter.com/planepowers"><b>Twitter</b></a> •
-    <a href="https://docs.plane.so/"><b>Documentation</b></a>
+    <a href="https://dub.sh/plane-website-readme"><b>Website</b></a> •
+    <a href="https://git.new/releases"><b>Releases</b></a> •
+    <a href="https://dub.sh/planepowershq"><b>Twitter</b></a> •
+    <a href="https://dub.sh/planedocs"><b>Documentation</b></a>
 </p>
 
 <p>
@@ -40,30 +40,28 @@
     </a>
 </p>
 
-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.
-
+Meet [Plane](https://dub.sh/plane-website-readme). 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 in our upcoming releases.
 
 ## ⚡ Installation
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account where we offer a hosted solution for users.
 
-If you want more control over your data prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/docker-compose).
+If you want more control over your data, prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/docker-compose).
 
-| Installation Methods	      | Documentation Link                                                                                       | 
-|-----------------|----------------------------------------------------------------------------------------------------------|
-| Docker          | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.plane.so/docker-compose)                  |
-| Kubernetes      | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://docs.plane.so/kubernetes)        |
+| Installation Methods | Documentation Link                                                                                                                                           |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.plane.so/self-hosting/methods/docker-compose)         |
+| Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://docs.plane.so/kubernetes) |
 
-`Instance admin` can configure instance settings using our  [God-mode](https://docs.plane.so/instance-admin) feature.
+`Instance admin` can configure instance settings using our [God-mode](https://docs.plane.so/instance-admin) feature.
 
 ## 🚀 Features
 
-- **Issues**: Quickly create issues and add details using a powerful, rich text editor that supports file uploads. Add sub-properties and references to problems for better organization and tracking.
+- **Issues**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to problems for better organization and tracking.
 
-- **Cycles**
+- **Cycles**:
   Keep up your team's momentum with Cycles. Gain insights into your project's progress with burn-down charts and other valuable features.
 
 - **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to track and plan your project's progress easily.
@@ -74,15 +72,13 @@ If you want more control over your data prefer to self-host Plane, please refer
 
 - **Analytics**: Get insights into all your Plane data in real-time. Visualize issue data to spot trends, remove blockers, and progress your work.
 
-- **Drive** (*coming soon*): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
-
-
+- **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
 
-## 🛠️ Contributors Quick Start
+## 🛠️ Quick start for contributors
 
 > Development system must have docker engine installed and running.
 
-Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute
+Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute - 
 
 1. Clone the code locally using:
    ```
@@ -101,10 +97,10 @@ Setting up local environment is extremely easy and straight forward. Follow the
    ./setup.sh
    ```
 5. Open the code on VSCode or similar equivalent IDE.
-6. Review the `.env` files available in various folders. 
+6. Review the `.env` files available in various folders.
    Visit [Environment Setup](./ENV_SETUP.md) to know about various environment variables used in system.
 7. Run the docker command to initiate services:
-    ```
+   ```
    docker compose -f docker-compose-local.yml up -d
    ```
 
@@ -119,6 +115,7 @@ The Plane community can be found on [GitHub Discussions](https://github.com/orgs
 Ask questions, report bugs, join discussions, voice ideas, make feature requests, or share your projects.
 
 ### Repo Activity
+
 ![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
 
 ## 📸 Screenshots
@@ -181,20 +178,21 @@ Ask questions, report bugs, join discussions, voice ideas, make feature requests
 
 ## ⛓️ Security
 
-If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. 
+If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports.
 
 Email squawk@plane.so to disclose any security vulnerabilities.
 
 ## ❤️ Contribute
 
-There are many ways to contribute to Plane, including:  
--   Submitting  [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) and [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+)  for various components.
--   Reviewing  [the documentation](https://docs.plane.so/)  and submitting  [pull requests](https://github.com/makeplane/plane), from fixing typos to adding new features.
--   Speaking or writing about Plane or any other ecosystem integration and  [letting us know](https://discord.com/invite/A92xrEGCge)!
--   Upvoting  [popular feature requests](https://github.com/makeplane/plane/issues)  to show your support.
+There are many ways to contribute to Plane, including:
+
+- Submitting [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) and [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+) for various components.
+- Reviewing [the documentation](https://docs.plane.so/) and submitting [pull requests](https://github.com/makeplane/plane), from fixing typos to adding new features.
+- Speaking or writing about Plane or any other ecosystem integration and [letting us know](https://discord.com/invite/A92xrEGCge)!
+- Upvoting [popular feature requests](https://github.com/makeplane/plane/issues) to show your support.
 
 ### We couldn't have done this without you.
 
 <a href="https://github.com/makeplane/plane/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=makeplane/plane" />
-</a>
\ No newline at end of file
+</a>
diff --git a/apiserver/.env.example b/apiserver/.env.example
index 42b0e32e55f..d8554f400d2 100644
--- a/apiserver/.env.example
+++ b/apiserver/.env.example
@@ -14,10 +14,6 @@ POSTGRES_HOST="plane-db"
 POSTGRES_DB="plane"
 DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}/${POSTGRES_DB}
 
-# Oauth variables
-GOOGLE_CLIENT_ID=""
-GITHUB_CLIENT_ID=""
-GITHUB_CLIENT_SECRET=""
 
 # Redis Settings
 REDIS_HOST="plane-redis"
@@ -34,11 +30,6 @@ AWS_S3_BUCKET_NAME="uploads"
 # Maximum file upload limit
 FILE_SIZE_LIMIT=5242880
 
-# GPT settings
-OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
-OPENAI_API_KEY="sk-" # deprecated
-GPT_ENGINE="gpt-3.5-turbo" # deprecated
-
 # Settings related to Docker
 DOCKERIZED=1 # deprecated
 
@@ -48,19 +39,8 @@ USE_MINIO=1
 # Nginx Configuration
 NGINX_PORT=80
 
-
-# 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"
 
 # Gunicorn Workers
 GUNICORN_WORKERS=2
-
diff --git a/apiserver/Dockerfile.api b/apiserver/Dockerfile.api
index 0e4e0ac501b..34a50334ad4 100644
--- a/apiserver/Dockerfile.api
+++ b/apiserver/Dockerfile.api
@@ -48,8 +48,10 @@ USER root
 RUN apk --no-cache add "bash~=5.2"
 COPY ./bin ./bin/
 
+RUN mkdir -p /code/plane/logs
 RUN chmod +x ./bin/takeoff ./bin/worker ./bin/beat
 RUN chmod -R 777 /code
+RUN chown -R captain:plane /code
 
 USER captain
 
diff --git a/apiserver/Dockerfile.dev b/apiserver/Dockerfile.dev
index bd6684fd5f4..06f15231c6e 100644
--- a/apiserver/Dockerfile.dev
+++ b/apiserver/Dockerfile.dev
@@ -35,6 +35,7 @@ RUN addgroup -S plane && \
 
 COPY . .
 
+RUN mkdir -p /code/plane/logs
 RUN chown -R captain.plane /code
 RUN chmod -R +x /code/bin
 RUN chmod -R 777 /code
diff --git a/apiserver/back_migration.py b/apiserver/back_migration.py
index a0e45416a45..328b9db2be3 100644
--- a/apiserver/back_migration.py
+++ b/apiserver/back_migration.py
@@ -182,7 +182,7 @@ def update_label_color():
         labels = Label.objects.filter(color="")
         updated_labels = []
         for label in labels:
-            label.color = "#" + "%06x" % random.randint(0, 0xFFFFFF)
+            label.color = f"#{random.randint(0, 0xFFFFFF+1):06X}"
             updated_labels.append(label)
 
         Label.objects.bulk_update(updated_labels, ["color"], batch_size=100)
diff --git a/apiserver/bin/takeoff b/apiserver/bin/takeoff
index efea53f8749..5a1da1570a1 100755
--- a/apiserver/bin/takeoff
+++ b/apiserver/bin/takeoff
@@ -21,11 +21,15 @@ SIGNATURE=$(echo "$HOSTNAME$MAC_ADDRESS$CPU_INFO$MEMORY_INFO$DISK_INFO" | sha256
 export MACHINE_SIGNATURE=$SIGNATURE
 
 # Register instance
-python manage.py register_instance $MACHINE_SIGNATURE
+python manage.py register_instance "$MACHINE_SIGNATURE"
+
 # Load the configuration variable
 python manage.py configure_instance
 
 # Create the default bucket
 python manage.py create_bucket
 
-exec gunicorn -w $GUNICORN_WORKERS -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:${PORT:-8000} --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
+# Clear Cache before starting to remove stale values
+python manage.py clear_cache
+
+exec gunicorn -w "$GUNICORN_WORKERS" -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:"${PORT:-8000}" --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
diff --git a/apiserver/bin/takeoff.local b/apiserver/bin/takeoff.local
index 8f62370ecf4..3194009b2c4 100755
--- a/apiserver/bin/takeoff.local
+++ b/apiserver/bin/takeoff.local
@@ -21,12 +21,15 @@ SIGNATURE=$(echo "$HOSTNAME$MAC_ADDRESS$CPU_INFO$MEMORY_INFO$DISK_INFO" | sha256
 export MACHINE_SIGNATURE=$SIGNATURE
 
 # Register instance
-python manage.py register_instance $MACHINE_SIGNATURE
+python manage.py register_instance "$MACHINE_SIGNATURE"
 # Load the configuration variable
 python manage.py configure_instance
 
 # Create the default bucket
 python manage.py create_bucket
 
+# Clear Cache before starting to remove stale values
+python manage.py clear_cache
+
 python manage.py runserver 0.0.0.0:8000 --settings=plane.settings.local
 
diff --git a/apiserver/package.json b/apiserver/package.json
index 060944406ca..2474aa2f299 100644
--- a/apiserver/package.json
+++ b/apiserver/package.json
@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.16.0"
+  "version": "0.17.0"
 }
diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 4c8d6e815b1..c78b109efdf 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -1,31 +1,33 @@
-from lxml import html
-
+from django.core.exceptions import ValidationError
+from django.core.validators import URLValidator
 
 # Django imports
 from django.utils import timezone
+from lxml import html
 
 #  Third party imports
 from rest_framework import serializers
 
 # Module imports
 from plane.db.models import (
-    User,
     Issue,
-    State,
+    IssueActivity,
     IssueAssignee,
-    Label,
+    IssueAttachment,
+    IssueComment,
     IssueLabel,
     IssueLink,
-    IssueComment,
-    IssueAttachment,
-    IssueActivity,
+    Label,
     ProjectMember,
+    State,
+    User,
 )
+
 from .base import BaseSerializer
-from .cycle import CycleSerializer, CycleLiteSerializer
-from .module import ModuleSerializer, ModuleLiteSerializer
-from .user import UserLiteSerializer
+from .cycle import CycleLiteSerializer, CycleSerializer
+from .module import ModuleLiteSerializer, ModuleSerializer
 from .state import StateLiteSerializer
+from .user import UserLiteSerializer
 
 
 class IssueSerializer(BaseSerializer):
@@ -78,7 +80,7 @@ def validate(self, data):
                 data["description_html"] = parsed_str
 
         except Exception as e:
-            raise serializers.ValidationError(f"Invalid HTML: {str(e)}")
+            raise serializers.ValidationError("Invalid HTML passed")
 
         # Validate assignees are from project
         if data.get("assignees", []):
@@ -284,6 +286,20 @@ class Meta:
             "updated_at",
         ]
 
+    def validate_url(self, value):
+        # Check URL format
+        validate_url = URLValidator()
+        try:
+            validate_url(value)
+        except ValidationError:
+            raise serializers.ValidationError("Invalid URL format.")
+
+        # Check URL scheme
+        if not value.startswith(("http://", "https://")):
+            raise serializers.ValidationError("Invalid URL scheme.")
+
+        return value
+
     # Validation if url already exists
     def create(self, validated_data):
         if IssueLink.objects.filter(
@@ -295,6 +311,17 @@ def create(self, validated_data):
             )
         return IssueLink.objects.create(**validated_data)
 
+    def update(self, instance, validated_data):
+        if IssueLink.objects.filter(
+            url=validated_data.get("url"),
+            issue_id=instance.issue_id,
+        ).exists():
+            raise serializers.ValidationError(
+                {"error": "URL already exists for this Issue"}
+            )
+
+        return super().update(instance, validated_data)
+
 
 class IssueAttachmentSerializer(BaseSerializer):
     class Meta:
@@ -340,7 +367,7 @@ def validate(self, data):
                 data["comment_html"] = parsed_str
 
         except Exception as e:
-            raise serializers.ValidationError(f"Invalid HTML: {str(e)}")
+            raise serializers.ValidationError("Invalid HTML passed")
         return data
 
 
diff --git a/apiserver/plane/api/serializers/project.py b/apiserver/plane/api/serializers/project.py
index 342cc1a81da..9dd4c9b85f3 100644
--- a/apiserver/plane/api/serializers/project.py
+++ b/apiserver/plane/api/serializers/project.py
@@ -6,8 +6,6 @@
     Project,
     ProjectIdentifier,
     WorkspaceMember,
-    State,
-    Estimate,
 )
 from .base import BaseSerializer
 
diff --git a/apiserver/plane/api/urls/cycle.py b/apiserver/plane/api/urls/cycle.py
index 593e501bf98..0a775454bc5 100644
--- a/apiserver/plane/api/urls/cycle.py
+++ b/apiserver/plane/api/urls/cycle.py
@@ -4,6 +4,7 @@
     CycleAPIEndpoint,
     CycleIssueAPIEndpoint,
     TransferCycleIssueAPIEndpoint,
+    CycleArchiveUnarchiveAPIEndpoint,
 )
 
 urlpatterns = [
@@ -32,4 +33,14 @@
         TransferCycleIssueAPIEndpoint.as_view(),
         name="transfer-issues",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:pk>/archive/",
+        CycleArchiveUnarchiveAPIEndpoint.as_view(),
+        name="cycle-archive-unarchive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-cycles/",
+        CycleArchiveUnarchiveAPIEndpoint.as_view(),
+        name="cycle-archive-unarchive",
+    ),
 ]
diff --git a/apiserver/plane/api/urls/module.py b/apiserver/plane/api/urls/module.py
index 4309f44e968..a131f4d4f92 100644
--- a/apiserver/plane/api/urls/module.py
+++ b/apiserver/plane/api/urls/module.py
@@ -1,6 +1,10 @@
 from django.urls import path
 
-from plane.api.views import ModuleAPIEndpoint, ModuleIssueAPIEndpoint
+from plane.api.views import (
+    ModuleAPIEndpoint,
+    ModuleIssueAPIEndpoint,
+    ModuleArchiveUnarchiveAPIEndpoint,
+)
 
 urlpatterns = [
     path(
@@ -23,4 +27,14 @@
         ModuleIssueAPIEndpoint.as_view(),
         name="module-issues",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:pk>/archive/",
+        ModuleArchiveUnarchiveAPIEndpoint.as_view(),
+        name="module-archive-unarchive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-modules/",
+        ModuleArchiveUnarchiveAPIEndpoint.as_view(),
+        name="module-archive-unarchive",
+    ),
 ]
diff --git a/apiserver/plane/api/urls/project.py b/apiserver/plane/api/urls/project.py
index 1ed450c8614..490371ccab1 100644
--- a/apiserver/plane/api/urls/project.py
+++ b/apiserver/plane/api/urls/project.py
@@ -1,6 +1,9 @@
 from django.urls import path
 
-from plane.api.views import ProjectAPIEndpoint
+from plane.api.views import (
+    ProjectAPIEndpoint,
+    ProjectArchiveUnarchiveAPIEndpoint,
+)
 
 urlpatterns = [
     path(
@@ -13,4 +16,9 @@
         ProjectAPIEndpoint.as_view(),
         name="project",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archive/",
+        ProjectArchiveUnarchiveAPIEndpoint.as_view(),
+        name="project-archive-unarchive",
+    ),
 ]
diff --git a/apiserver/plane/api/views/__init__.py b/apiserver/plane/api/views/__init__.py
index 0da79566f45..574ec69b6a9 100644
--- a/apiserver/plane/api/views/__init__.py
+++ b/apiserver/plane/api/views/__init__.py
@@ -1,4 +1,4 @@
-from .project import ProjectAPIEndpoint
+from .project import ProjectAPIEndpoint, ProjectArchiveUnarchiveAPIEndpoint
 
 from .state import StateAPIEndpoint
 
@@ -14,8 +14,13 @@
     CycleAPIEndpoint,
     CycleIssueAPIEndpoint,
     TransferCycleIssueAPIEndpoint,
+    CycleArchiveUnarchiveAPIEndpoint,
 )
 
-from .module import ModuleAPIEndpoint, ModuleIssueAPIEndpoint
+from .module import (
+    ModuleAPIEndpoint,
+    ModuleIssueAPIEndpoint,
+    ModuleArchiveUnarchiveAPIEndpoint,
+)
 
 from .inbox import InboxIssueAPIEndpoint
diff --git a/apiserver/plane/api/views/base.py b/apiserver/plane/api/views/base.py
index edb89f9b187..0cf5e8731c8 100644
--- a/apiserver/plane/api/views/base.py
+++ b/apiserver/plane/api/views/base.py
@@ -1,27 +1,26 @@
 # Python imports
-import zoneinfo
-import json
 from urllib.parse import urlparse
 
+import zoneinfo
 
 # Django imports
 from django.conf import settings
-from django.db import IntegrityError
 from django.core.exceptions import ObjectDoesNotExist, ValidationError
+from django.db import IntegrityError
 from django.utils import timezone
+from rest_framework import status
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
 
 # Third party imports
 from rest_framework.views import APIView
-from rest_framework.response import Response
-from rest_framework.permissions import IsAuthenticated
-from rest_framework import status
-from sentry_sdk import capture_exception
 
 # Module imports
 from plane.api.middleware.api_authentication import APIKeyAuthentication
 from plane.api.rate_limit import ApiKeyRateThrottle
-from plane.utils.paginator import BasePaginator
 from plane.bgtasks.webhook_task import send_webhook
+from plane.utils.exception_logger import log_exception
+from plane.utils.paginator import BasePaginator
 
 
 class TimezoneMixin:
@@ -107,27 +106,23 @@ def handle_exception(self, exc):
 
             if isinstance(e, ValidationError):
                 return Response(
-                    {
-                        "error": "The provided payload is not valid please try with a valid payload"
-                    },
+                    {"error": "Please provide valid detail"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
             if isinstance(e, ObjectDoesNotExist):
                 return Response(
-                    {"error": f"The required object does not exist."},
+                    {"error": "The requested resource does not exist."},
                     status=status.HTTP_404_NOT_FOUND,
                 )
 
             if isinstance(e, KeyError):
                 return Response(
-                    {"error": f" The required key does not exist."},
+                    {"error": "The required key does not exist."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            if settings.DEBUG:
-                print(e)
-            capture_exception(e)
+            log_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_500_INTERNAL_SERVER_ERROR,
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index 84931f46be9..637d713c319 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -2,7 +2,7 @@
 import json
 
 # Django imports
-from django.db.models import Q, Count, Sum, Prefetch, F, OuterRef, Func
+from django.db.models import Q, Count, Sum, F, OuterRef, Func
 from django.utils import timezone
 from django.core import serializers
 
@@ -140,7 +140,9 @@ def get_queryset(self):
 
     def get(self, request, slug, project_id, pk=None):
         if pk:
-            queryset = self.get_queryset().get(pk=pk)
+            queryset = (
+                self.get_queryset().filter(archived_at__isnull=True).get(pk=pk)
+            )
             data = CycleSerializer(
                 queryset,
                 fields=self.fields,
@@ -150,7 +152,9 @@ def get(self, request, slug, project_id, pk=None):
                 data,
                 status=status.HTTP_200_OK,
             )
-        queryset = self.get_queryset()
+        queryset = (
+            self.get_queryset().filter(archived_at__isnull=True)
+        )
         cycle_view = request.GET.get("cycle_view", "all")
 
         # Current Cycle
@@ -291,6 +295,11 @@ def patch(self, request, slug, project_id, pk):
         cycle = Cycle.objects.get(
             workspace__slug=slug, project_id=project_id, pk=pk
         )
+        if cycle.archived_at:
+            return Response(
+                {"error": "Archived cycle cannot be edited"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
 
         request_data = request.data
 
@@ -321,7 +330,9 @@ def patch(self, request, slug, project_id, pk):
                 and Cycle.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get("external_source", cycle.external_source),
+                    external_source=request.data.get(
+                        "external_source", cycle.external_source
+                    ),
                     external_id=request.data.get("external_id"),
                 ).exists()
             ):
@@ -366,6 +377,139 @@ def delete(self, request, slug, project_id, pk):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
+class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get_queryset(self):
+        return (
+            Cycle.objects.filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
+            .filter(archived_at__isnull=False)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("owned_by")
+            .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",
+                        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",
+                        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",
+                        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",
+                        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",
+                        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",
+                        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",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .order_by(self.kwargs.get("order_by", "-created_at"))
+            .distinct()
+        )
+
+    def get(self, request, slug, project_id):
+        return self.paginate(
+            request=request,
+            queryset=(self.get_queryset()),
+            on_results=lambda cycles: CycleSerializer(
+                cycles,
+                many=True,
+                fields=self.fields,
+                expand=self.expand,
+            ).data,
+        )
+
+    def post(self, request, slug, project_id, pk):
+        cycle = Cycle.objects.get(
+            pk=pk, project_id=project_id, workspace__slug=slug
+        )
+        cycle.archived_at = timezone.now()
+        cycle.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def delete(self, request, slug, project_id, pk):
+        cycle = Cycle.objects.get(
+            pk=pk, project_id=project_id, workspace__slug=slug
+        )
+        cycle.archived_at = None
+        cycle.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
 class CycleIssueAPIEndpoint(WebhookMixin, BaseAPIView):
     """
     This viewset automatically provides `list`, `create`,
diff --git a/apiserver/plane/api/views/inbox.py b/apiserver/plane/api/views/inbox.py
index c1079345ac2..fb36ea2a940 100644
--- a/apiserver/plane/api/views/inbox.py
+++ b/apiserver/plane/api/views/inbox.py
@@ -119,7 +119,7 @@ def post(self, request, slug, project_id):
             )
 
         # Check for valid priority
-        if not request.data.get("issue", {}).get("priority", "none") in [
+        if request.data.get("issue", {}).get("priority", "none") not in [
             "low",
             "medium",
             "high",
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index bf3313779c2..4b59dc02076 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -1,22 +1,22 @@
 # Python imports
 import json
-from itertools import chain
+
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Django imports
 from django.db import IntegrityError
 from django.db.models import (
-    OuterRef,
-    Func,
-    Q,
-    F,
     Case,
-    When,
-    Value,
     CharField,
-    Max,
     Exists,
+    F,
+    Func,
+    Max,
+    OuterRef,
+    Q,
+    Value,
+    When,
 )
-from django.core.serializers.json import DjangoJSONEncoder
 from django.utils import timezone
 
 # Third party imports
@@ -24,31 +24,32 @@
 from rest_framework.response import Response
 
 # Module imports
-from .base import BaseAPIView, WebhookMixin
+from plane.api.serializers import (
+    IssueActivitySerializer,
+    IssueCommentSerializer,
+    IssueLinkSerializer,
+    IssueSerializer,
+    LabelSerializer,
+)
 from plane.app.permissions import (
     ProjectEntityPermission,
-    ProjectMemberPermission,
     ProjectLitePermission,
+    ProjectMemberPermission,
 )
+from plane.bgtasks.issue_activites_task import issue_activity
 from plane.db.models import (
     Issue,
+    IssueActivity,
     IssueAttachment,
+    IssueComment,
     IssueLink,
-    Project,
     Label,
+    Project,
     ProjectMember,
-    IssueComment,
-    IssueActivity,
-)
-from plane.bgtasks.issue_activites_task import issue_activity
-from plane.api.serializers import (
-    IssueSerializer,
-    LabelSerializer,
-    IssueLinkSerializer,
-    IssueCommentSerializer,
-    IssueActivitySerializer,
 )
 
+from .base import BaseAPIView, WebhookMixin
+
 
 class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
     """
@@ -356,6 +357,7 @@ def get_queryset(self):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .select_related("project")
             .select_related("workspace")
             .select_related("parent")
@@ -488,6 +490,7 @@ def get_queryset(self):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .order_by(self.kwargs.get("order_by", "-created_at"))
             .distinct()
         )
@@ -617,6 +620,7 @@ def get_queryset(self):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .select_related("workspace", "project", "issue", "actor")
             .annotate(
                 is_member=Exists(
@@ -653,7 +657,6 @@ def get(self, request, slug, project_id, issue_id, pk=None):
         )
 
     def post(self, request, slug, project_id, issue_id):
-
         # Validation check if the issue already exists
         if (
             request.data.get("external_id")
@@ -679,7 +682,6 @@ def post(self, request, slug, project_id, issue_id):
                 status=status.HTTP_409_CONFLICT,
             )
 
-
         serializer = IssueCommentSerializer(data=request.data)
         if serializer.is_valid():
             serializer.save(
@@ -717,7 +719,10 @@ def patch(self, request, slug, project_id, issue_id, pk):
         # Validation check if the issue already exists
         if (
             request.data.get("external_id")
-            and (issue_comment.external_id != str(request.data.get("external_id")))
+            and (
+                issue_comment.external_id
+                != str(request.data.get("external_id"))
+            )
             and IssueComment.objects.filter(
                 project_id=project_id,
                 workspace__slug=slug,
@@ -735,7 +740,6 @@ def patch(self, request, slug, project_id, issue_id, pk):
                 status=status.HTTP_409_CONFLICT,
             )
 
-
         serializer = IssueCommentSerializer(
             issue_comment, data=request.data, partial=True
         )
@@ -792,6 +796,7 @@ def get(self, request, slug, project_id, issue_id, pk=None):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .select_related("actor", "workspace", "issue", "project")
         ).order_by(request.GET.get("order_by", "created_at"))
 
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 2e5bb85e2b7..643221dcabe 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -67,6 +67,7 @@ def get_queryset(self):
                         issue_module__issue__archived_at__isnull=True,
                         issue_module__issue__is_draft=False,
                     ),
+                    distinct=True,
                 ),
             )
             .annotate(
@@ -77,6 +78,7 @@ def get_queryset(self):
                         issue_module__issue__archived_at__isnull=True,
                         issue_module__issue__is_draft=False,
                     ),
+                    distinct=True,
                 )
             )
             .annotate(
@@ -87,6 +89,7 @@ def get_queryset(self):
                         issue_module__issue__archived_at__isnull=True,
                         issue_module__issue__is_draft=False,
                     ),
+                    distinct=True,
                 )
             )
             .annotate(
@@ -97,6 +100,7 @@ def get_queryset(self):
                         issue_module__issue__archived_at__isnull=True,
                         issue_module__issue__is_draft=False,
                     ),
+                    distinct=True,
                 )
             )
             .annotate(
@@ -107,6 +111,7 @@ def get_queryset(self):
                         issue_module__issue__archived_at__isnull=True,
                         issue_module__issue__is_draft=False,
                     ),
+                    distinct=True,
                 )
             )
             .annotate(
@@ -117,6 +122,7 @@ def get_queryset(self):
                         issue_module__issue__archived_at__isnull=True,
                         issue_module__issue__is_draft=False,
                     ),
+                    distinct=True,
                 )
             )
             .order_by(self.kwargs.get("order_by", "-created_at"))
@@ -165,6 +171,11 @@ def patch(self, request, slug, project_id, pk):
         module = Module.objects.get(
             pk=pk, project_id=project_id, workspace__slug=slug
         )
+        if module.archived_at:
+            return Response(
+                {"error": "Archived module cannot be edited"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         serializer = ModuleSerializer(
             module,
             data=request.data,
@@ -178,7 +189,9 @@ def patch(self, request, slug, project_id, pk):
                 and Module.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get("external_source", module.external_source),
+                    external_source=request.data.get(
+                        "external_source", module.external_source
+                    ),
                     external_id=request.data.get("external_id"),
                 ).exists()
             ):
@@ -195,7 +208,9 @@ def patch(self, request, slug, project_id, pk):
 
     def get(self, request, slug, project_id, pk=None):
         if pk:
-            queryset = self.get_queryset().get(pk=pk)
+            queryset = (
+                self.get_queryset().filter(archived_at__isnull=True).get(pk=pk)
+            )
             data = ModuleSerializer(
                 queryset,
                 fields=self.fields,
@@ -207,7 +222,7 @@ def get(self, request, slug, project_id, pk=None):
             )
         return self.paginate(
             request=request,
-            queryset=(self.get_queryset()),
+            queryset=(self.get_queryset().filter(archived_at__isnull=True)),
             on_results=lambda modules: ModuleSerializer(
                 modules,
                 many=True,
@@ -277,6 +292,7 @@ def get_queryset(self):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .select_related("project")
             .select_related("workspace")
             .select_related("module")
@@ -444,3 +460,123 @@ def delete(self, request, slug, project_id, module_id, issue_id):
             epoch=int(timezone.now().timestamp()),
         )
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class ModuleArchiveUnarchiveAPIEndpoint(BaseAPIView):
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get_queryset(self):
+        return (
+            Module.objects.filter(project_id=self.kwargs.get("project_id"))
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(archived_at__isnull=False)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("lead")
+            .prefetch_related("members")
+            .prefetch_related(
+                Prefetch(
+                    "link_module",
+                    queryset=ModuleLink.objects.select_related(
+                        "module", "created_by"
+                    ),
+                )
+            )
+            .annotate(
+                total_issues=Count(
+                    "issue_module",
+                    filter=Q(
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="completed",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                cancelled_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="cancelled",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                started_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="started",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                unstarted_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="unstarted",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="backlog",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .order_by(self.kwargs.get("order_by", "-created_at"))
+        )
+
+    def get(self, request, slug, project_id):
+        return self.paginate(
+            request=request,
+            queryset=(self.get_queryset()),
+            on_results=lambda modules: ModuleSerializer(
+                modules,
+                many=True,
+                fields=self.fields,
+                expand=self.expand,
+            ).data,
+        )
+
+    def post(self, request, slug, project_id, pk):
+        module = Module.objects.get(
+            pk=pk, project_id=project_id, workspace__slug=slug
+        )
+        module.archived_at = timezone.now()
+        module.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def delete(self, request, slug, project_id, pk):
+        module = Module.objects.get(
+            pk=pk, project_id=project_id, workspace__slug=slug
+        )
+        module.archived_at = None
+        module.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index cb1f7dc7bc0..e0bce5514a2 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -1,4 +1,5 @@
 # Django imports
+from django.utils import timezone
 from django.db import IntegrityError
 from django.db.models import Exists, OuterRef, Q, F, Func, Subquery, Prefetch
 
@@ -11,7 +12,6 @@
 from plane.db.models import (
     Workspace,
     Project,
-    ProjectFavorite,
     ProjectMember,
     ProjectDeployBoard,
     State,
@@ -40,7 +40,10 @@ def get_queryset(self):
         return (
             Project.objects.filter(workspace__slug=self.kwargs.get("slug"))
             .filter(
-                Q(project_projectmember__member=self.request.user)
+                Q(
+                    project_projectmember__member=self.request.user,
+                    project_projectmember__is_active=True,
+                )
                 | Q(network=2)
             )
             .select_related(
@@ -150,7 +153,7 @@ def post(self, request, slug):
                 serializer.save()
 
                 # Add the user as Administrator to the project
-                project_member = ProjectMember.objects.create(
+                _ = ProjectMember.objects.create(
                     project_id=serializer.data["id"],
                     member=request.user,
                     role=20,
@@ -245,12 +248,12 @@ def post(self, request, slug):
                     {"name": "The project name is already taken"},
                     status=status.HTTP_410_GONE,
                 )
-        except Workspace.DoesNotExist as e:
+        except Workspace.DoesNotExist:
             return Response(
                 {"error": "Workspace does not exist"},
                 status=status.HTTP_404_NOT_FOUND,
             )
-        except ValidationError as e:
+        except ValidationError:
             return Response(
                 {"identifier": "The project identifier is already taken"},
                 status=status.HTTP_410_GONE,
@@ -261,6 +264,12 @@ def patch(self, request, slug, project_id=None):
             workspace = Workspace.objects.get(slug=slug)
             project = Project.objects.get(pk=project_id)
 
+            if project.archived_at:
+                return Response(
+                    {"error": "Archived project cannot be updated"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
             serializer = ProjectSerializer(
                 project,
                 data={**request.data},
@@ -307,7 +316,7 @@ def patch(self, request, slug, project_id=None):
                 {"error": "Project does not exist"},
                 status=status.HTTP_404_NOT_FOUND,
             )
-        except ValidationError as e:
+        except ValidationError:
             return Response(
                 {"identifier": "The project identifier is already taken"},
                 status=status.HTTP_410_GONE,
@@ -317,3 +326,22 @@ def delete(self, request, slug, project_id):
         project = Project.objects.get(pk=project_id, workspace__slug=slug)
         project.delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class ProjectArchiveUnarchiveAPIEndpoint(BaseAPIView):
+
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    def post(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project.archived_at = timezone.now()
+        project.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def delete(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project.archived_at = None
+        project.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/api/views/state.py b/apiserver/plane/api/views/state.py
index ec10f9babe1..4ee899831fb 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -28,6 +28,7 @@ def get_queryset(self):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .filter(~Q(name="Triage"))
             .select_related("project")
             .select_related("workspace")
@@ -66,8 +67,10 @@ def post(self, request, slug, project_id):
 
                 serializer.save(project_id=project_id)
                 return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError as e:
+            return Response(
+                serializer.errors, status=status.HTTP_400_BAD_REQUEST
+            )
+        except IntegrityError:
             state = State.objects.filter(
                 workspace__slug=slug,
                 project_id=project_id,
@@ -136,7 +139,9 @@ def patch(self, request, slug, project_id, state_id=None):
                 and State.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get("external_source", state.external_source),
+                    external_source=request.data.get(
+                        "external_source", state.external_source
+                    ),
                     external_id=request.data.get("external_id"),
                 ).exists()
             ):
diff --git a/apiserver/plane/app/serializers/__init__.py b/apiserver/plane/app/serializers/__init__.py
index 9bdd4baaf9d..22673dabceb 100644
--- a/apiserver/plane/app/serializers/__init__.py
+++ b/apiserver/plane/app/serializers/__init__.py
@@ -86,16 +86,6 @@
 
 from .api import APITokenSerializer, APITokenReadSerializer
 
-from .integration import (
-    IntegrationSerializer,
-    WorkspaceIntegrationSerializer,
-    GithubIssueSyncSerializer,
-    GithubRepositorySerializer,
-    GithubRepositorySyncSerializer,
-    GithubCommentSyncSerializer,
-    SlackProjectSyncSerializer,
-)
-
 from .importer import ImporterSerializer
 
 from .page import (
@@ -121,7 +111,10 @@
 
 from .analytic import AnalyticViewSerializer
 
-from .notification import NotificationSerializer, UserNotificationPreferenceSerializer
+from .notification import (
+    NotificationSerializer,
+    UserNotificationPreferenceSerializer,
+)
 
 from .exporter import ExporterHistorySerializer
 
diff --git a/apiserver/plane/app/serializers/cycle.py b/apiserver/plane/app/serializers/cycle.py
index a273b349c3d..13d321780d8 100644
--- a/apiserver/plane/app/serializers/cycle.py
+++ b/apiserver/plane/app/serializers/cycle.py
@@ -11,6 +11,7 @@
     CycleUserProperties,
 )
 
+
 class CycleWriteSerializer(BaseSerializer):
     def validate(self, data):
         if (
@@ -30,6 +31,7 @@ class Meta:
             "workspace",
             "project",
             "owned_by",
+            "archived_at",
         ]
 
 
@@ -47,7 +49,6 @@ class CycleSerializer(BaseSerializer):
     # active | draft | upcoming | completed
     status = serializers.CharField(read_only=True)
 
-
     class Meta:
         model = Cycle
         fields = [
diff --git a/apiserver/plane/app/serializers/dashboard.py b/apiserver/plane/app/serializers/dashboard.py
index 8fca3c9064b..b0ed8841beb 100644
--- a/apiserver/plane/app/serializers/dashboard.py
+++ b/apiserver/plane/app/serializers/dashboard.py
@@ -18,9 +18,4 @@ class WidgetSerializer(BaseSerializer):
 
     class Meta:
         model = Widget
-        fields = [
-            "id",
-            "key",
-            "is_visible",
-            "widget_filters"
-        ]
\ No newline at end of file
+        fields = ["id", "key", "is_visible", "widget_filters"]
diff --git a/apiserver/plane/app/serializers/estimate.py b/apiserver/plane/app/serializers/estimate.py
index 6753900803e..d28f38c75ab 100644
--- a/apiserver/plane/app/serializers/estimate.py
+++ b/apiserver/plane/app/serializers/estimate.py
@@ -74,5 +74,3 @@ class Meta:
             "name",
             "description",
         ]
-
-
diff --git a/apiserver/plane/app/serializers/integration/__init__.py b/apiserver/plane/app/serializers/integration/__init__.py
deleted file mode 100644
index 112ff02d162..00000000000
--- a/apiserver/plane/app/serializers/integration/__init__.py
+++ /dev/null
@@ -1,8 +0,0 @@
-from .base import IntegrationSerializer, WorkspaceIntegrationSerializer
-from .github import (
-    GithubRepositorySerializer,
-    GithubRepositorySyncSerializer,
-    GithubIssueSyncSerializer,
-    GithubCommentSyncSerializer,
-)
-from .slack import SlackProjectSyncSerializer
diff --git a/apiserver/plane/app/serializers/integration/base.py b/apiserver/plane/app/serializers/integration/base.py
deleted file mode 100644
index 01e484ed027..00000000000
--- a/apiserver/plane/app/serializers/integration/base.py
+++ /dev/null
@@ -1,22 +0,0 @@
-# Module imports
-from plane.app.serializers import BaseSerializer
-from plane.db.models import Integration, WorkspaceIntegration
-
-
-class IntegrationSerializer(BaseSerializer):
-    class Meta:
-        model = Integration
-        fields = "__all__"
-        read_only_fields = [
-            "verified",
-        ]
-
-
-class WorkspaceIntegrationSerializer(BaseSerializer):
-    integration_detail = IntegrationSerializer(
-        read_only=True, source="integration"
-    )
-
-    class Meta:
-        model = WorkspaceIntegration
-        fields = "__all__"
diff --git a/apiserver/plane/app/serializers/integration/github.py b/apiserver/plane/app/serializers/integration/github.py
deleted file mode 100644
index 850bccf1b3a..00000000000
--- a/apiserver/plane/app/serializers/integration/github.py
+++ /dev/null
@@ -1,45 +0,0 @@
-# Module imports
-from plane.app.serializers import BaseSerializer
-from plane.db.models import (
-    GithubIssueSync,
-    GithubRepository,
-    GithubRepositorySync,
-    GithubCommentSync,
-)
-
-
-class GithubRepositorySerializer(BaseSerializer):
-    class Meta:
-        model = GithubRepository
-        fields = "__all__"
-
-
-class GithubRepositorySyncSerializer(BaseSerializer):
-    repo_detail = GithubRepositorySerializer(source="repository")
-
-    class Meta:
-        model = GithubRepositorySync
-        fields = "__all__"
-
-
-class GithubIssueSyncSerializer(BaseSerializer):
-    class Meta:
-        model = GithubIssueSync
-        fields = "__all__"
-        read_only_fields = [
-            "project",
-            "workspace",
-            "repository_sync",
-        ]
-
-
-class GithubCommentSyncSerializer(BaseSerializer):
-    class Meta:
-        model = GithubCommentSync
-        fields = "__all__"
-        read_only_fields = [
-            "project",
-            "workspace",
-            "repository_sync",
-            "issue_sync",
-        ]
diff --git a/apiserver/plane/app/serializers/integration/slack.py b/apiserver/plane/app/serializers/integration/slack.py
deleted file mode 100644
index 9c461c5b9b5..00000000000
--- a/apiserver/plane/app/serializers/integration/slack.py
+++ /dev/null
@@ -1,14 +0,0 @@
-# Module imports
-from plane.app.serializers import BaseSerializer
-from plane.db.models import SlackProjectSync
-
-
-class SlackProjectSyncSerializer(BaseSerializer):
-    class Meta:
-        model = SlackProjectSync
-        fields = "__all__"
-        read_only_fields = [
-            "project",
-            "workspace",
-            "workspace_integration",
-        ]
diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index 411c5b73f88..fc0e6f838ce 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -1,5 +1,7 @@
 # Django imports
 from django.utils import timezone
+from django.core.validators import URLValidator
+from django.core.exceptions import ValidationError
 
 # Third Party imports
 from rest_framework import serializers
@@ -7,7 +9,7 @@
 # Module imports
 from .base import BaseSerializer, DynamicBaseSerializer
 from .user import UserLiteSerializer
-from .state import StateSerializer, StateLiteSerializer
+from .state import StateLiteSerializer
 from .project import ProjectLiteSerializer
 from .workspace import WorkspaceLiteSerializer
 from plane.db.models import (
@@ -31,7 +33,6 @@
     IssueVote,
     IssueRelation,
     State,
-    Project,
 )
 
 
@@ -432,6 +433,20 @@ class Meta:
             "issue",
         ]
 
+    def validate_url(self, value):
+        # Check URL format
+        validate_url = URLValidator()
+        try:
+            validate_url(value)
+        except ValidationError:
+            raise serializers.ValidationError("Invalid URL format.")
+
+        # Check URL scheme
+        if not value.startswith(('http://', 'https://')):
+            raise serializers.ValidationError("Invalid URL scheme.")
+
+        return value
+
     # Validation if url already exists
     def create(self, validated_data):
         if IssueLink.objects.filter(
@@ -443,9 +458,19 @@ def create(self, validated_data):
             )
         return IssueLink.objects.create(**validated_data)
 
+    def update(self, instance, validated_data):
+        if IssueLink.objects.filter(
+            url=validated_data.get("url"),
+            issue_id=instance.issue_id,
+        ).exists():
+            raise serializers.ValidationError(
+                {"error": "URL already exists for this Issue"}
+            )
+
+        return super().update(instance, validated_data)
 
-class IssueLinkLiteSerializer(BaseSerializer):
 
+class IssueLinkLiteSerializer(BaseSerializer):
     class Meta:
         model = IssueLink
         fields = [
@@ -476,7 +501,6 @@ class Meta:
 
 
 class IssueAttachmentLiteSerializer(DynamicBaseSerializer):
-
     class Meta:
         model = IssueAttachment
         fields = [
@@ -505,13 +529,12 @@ class Meta:
 
 
 class IssueReactionLiteSerializer(DynamicBaseSerializer):
-
     class Meta:
         model = IssueReaction
         fields = [
             "id",
-            "actor_id",
-            "issue_id",
+            "actor",
+            "issue",
             "reaction",
         ]
 
@@ -601,15 +624,18 @@ class IssueSerializer(DynamicBaseSerializer):
     # ids
     cycle_id = serializers.PrimaryKeyRelatedField(read_only=True)
     module_ids = serializers.ListField(
-        child=serializers.UUIDField(), required=False,
+        child=serializers.UUIDField(),
+        required=False,
     )
 
     # Many to many
     label_ids = serializers.ListField(
-        child=serializers.UUIDField(), required=False,
+        child=serializers.UUIDField(),
+        required=False,
     )
     assignee_ids = serializers.ListField(
-        child=serializers.UUIDField(), required=False,
+        child=serializers.UUIDField(),
+        required=False,
     )
 
     # Count items
@@ -649,19 +675,7 @@ class Meta:
         read_only_fields = fields
 
 
-class IssueDetailSerializer(IssueSerializer):
-    description_html = serializers.CharField()
-    is_subscribed = serializers.BooleanField(read_only=True)
-
-    class Meta(IssueSerializer.Meta):
-        fields = IssueSerializer.Meta.fields + [
-            "description_html",
-            "is_subscribed",
-        ]
-
-
 class IssueLiteSerializer(DynamicBaseSerializer):
-
     class Meta:
         model = Issue
         fields = [
diff --git a/apiserver/plane/app/serializers/module.py b/apiserver/plane/app/serializers/module.py
index 4aabfc50efd..dfdd265cd92 100644
--- a/apiserver/plane/app/serializers/module.py
+++ b/apiserver/plane/app/serializers/module.py
@@ -3,7 +3,6 @@
 
 # Module imports
 from .base import BaseSerializer, DynamicBaseSerializer
-from .user import UserLiteSerializer
 from .project import ProjectLiteSerializer
 
 from plane.db.models import (
@@ -40,6 +39,7 @@ class Meta:
             "updated_by",
             "created_at",
             "updated_at",
+            "archived_at",
         ]
 
     def to_representation(self, instance):
@@ -142,7 +142,6 @@ class Meta:
 
 
 class ModuleLinkSerializer(BaseSerializer):
-
     class Meta:
         model = ModuleLink
         fields = "__all__"
@@ -215,13 +214,12 @@ class Meta:
         read_only_fields = fields
 
 
-
 class ModuleDetailSerializer(ModuleSerializer):
-
     link_module = ModuleLinkSerializer(read_only=True, many=True)
+    sub_issues = serializers.IntegerField(read_only=True)
 
     class Meta(ModuleSerializer.Meta):
-        fields = ModuleSerializer.Meta.fields + ['link_module']
+        fields = ModuleSerializer.Meta.fields + ["link_module", "sub_issues"]
 
 
 class ModuleFavoriteSerializer(BaseSerializer):
diff --git a/apiserver/plane/app/serializers/notification.py b/apiserver/plane/app/serializers/notification.py
index 2152fcf0f9c..c6713a3540d 100644
--- a/apiserver/plane/app/serializers/notification.py
+++ b/apiserver/plane/app/serializers/notification.py
@@ -15,7 +15,6 @@ class Meta:
 
 
 class UserNotificationPreferenceSerializer(BaseSerializer):
-
     class Meta:
         model = UserNotificationPreference
         fields = "__all__"
diff --git a/apiserver/plane/app/serializers/page.py b/apiserver/plane/app/serializers/page.py
index a0f5986d69f..4dfe6ea9d65 100644
--- a/apiserver/plane/app/serializers/page.py
+++ b/apiserver/plane/app/serializers/page.py
@@ -3,7 +3,7 @@
 
 # Module imports
 from .base import BaseSerializer
-from .issue import IssueFlatSerializer, LabelLiteSerializer
+from .issue import LabelLiteSerializer
 from .workspace import WorkspaceLiteSerializer
 from .project import ProjectLiteSerializer
 from plane.db.models import (
@@ -12,8 +12,6 @@
     PageFavorite,
     PageLabel,
     Label,
-    Issue,
-    Module,
 )
 
 
diff --git a/apiserver/plane/app/serializers/project.py b/apiserver/plane/app/serializers/project.py
index 999233442a4..a0c2318e381 100644
--- a/apiserver/plane/app/serializers/project.py
+++ b/apiserver/plane/app/serializers/project.py
@@ -95,14 +95,19 @@ class Meta:
             "identifier",
             "name",
             "cover_image",
-            "icon_prop",
-            "emoji",
+            "logo_props",
             "description",
         ]
         read_only_fields = fields
 
 
 class ProjectListSerializer(DynamicBaseSerializer):
+    total_issues = serializers.IntegerField(read_only=True)
+    archived_issues = serializers.IntegerField(read_only=True)
+    archived_sub_issues = serializers.IntegerField(read_only=True)
+    draft_issues = serializers.IntegerField(read_only=True)
+    draft_sub_issues = serializers.IntegerField(read_only=True)
+    sub_issues = serializers.IntegerField(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
     total_members = serializers.IntegerField(read_only=True)
     total_cycles = serializers.IntegerField(read_only=True)
diff --git a/apiserver/plane/app/serializers/user.py b/apiserver/plane/app/serializers/user.py
index 8cd48827e13..d6c15ee7fa9 100644
--- a/apiserver/plane/app/serializers/user.py
+++ b/apiserver/plane/app/serializers/user.py
@@ -4,7 +4,6 @@
 # Module import
 from .base import BaseSerializer
 from plane.db.models import User, Workspace, WorkspaceMemberInvite
-from plane.license.models import InstanceAdmin, Instance
 
 
 class UserSerializer(BaseSerializer):
@@ -99,13 +98,13 @@ def get_workspace(self, obj):
             ).first()
             return {
                 "last_workspace_id": obj.last_workspace_id,
-                "last_workspace_slug": workspace.slug
-                if workspace is not None
-                else "",
+                "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 "",
+                "fallback_workspace_slug": (
+                    workspace.slug if workspace is not None else ""
+                ),
                 "invites": workspace_invites,
             }
         else:
@@ -120,12 +119,16 @@ def get_workspace(self, obj):
             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,
+                "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,
             }
 
diff --git a/apiserver/plane/app/serializers/webhook.py b/apiserver/plane/app/serializers/webhook.py
index 95ca149ffa4..175dea3047d 100644
--- a/apiserver/plane/app/serializers/webhook.py
+++ b/apiserver/plane/app/serializers/webhook.py
@@ -1,5 +1,4 @@
 # Python imports
-import urllib
 import socket
 import ipaddress
 from urllib.parse import urlparse
diff --git a/apiserver/plane/app/urls/__init__.py b/apiserver/plane/app/urls/__init__.py
index f2b11f12761..40b96687d33 100644
--- a/apiserver/plane/app/urls/__init__.py
+++ b/apiserver/plane/app/urls/__init__.py
@@ -6,9 +6,7 @@
 from .dashboard import urlpatterns as dashboard_urls
 from .estimate import urlpatterns as estimate_urls
 from .external import urlpatterns as external_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
@@ -32,9 +30,7 @@
     *dashboard_urls,
     *estimate_urls,
     *external_urls,
-    *importer_urls,
     *inbox_urls,
-    *integration_urls,
     *issue_urls,
     *module_urls,
     *notification_urls,
diff --git a/apiserver/plane/app/urls/cycle.py b/apiserver/plane/app/urls/cycle.py
index 740b0ab4386..2e1779420da 100644
--- a/apiserver/plane/app/urls/cycle.py
+++ b/apiserver/plane/app/urls/cycle.py
@@ -8,6 +8,7 @@
     CycleFavoriteViewSet,
     TransferCycleIssueEndpoint,
     CycleUserPropertiesEndpoint,
+    CycleArchiveUnarchiveEndpoint,
 )
 
 
@@ -90,4 +91,14 @@
         CycleUserPropertiesEndpoint.as_view(),
         name="cycle-user-filters",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/cycles/<uuid:cycle_id>/archive/",
+        CycleArchiveUnarchiveEndpoint.as_view(),
+        name="cycle-archive-unarchive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-cycles/",
+        CycleArchiveUnarchiveEndpoint.as_view(),
+        name="cycle-archive-unarchive",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/external.py b/apiserver/plane/app/urls/external.py
index 774e6fb7cd3..8db87a24928 100644
--- a/apiserver/plane/app/urls/external.py
+++ b/apiserver/plane/app/urls/external.py
@@ -2,7 +2,6 @@
 
 
 from plane.app.views import UnsplashEndpoint
-from plane.app.views import ReleaseNotesEndpoint
 from plane.app.views import GPTIntegrationEndpoint
 
 
@@ -12,11 +11,6 @@
         UnsplashEndpoint.as_view(),
         name="unsplash",
     ),
-    path(
-        "release-notes/",
-        ReleaseNotesEndpoint.as_view(),
-        name="release-notes",
-    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/ai-assistant/",
         GPTIntegrationEndpoint.as_view(),
diff --git a/apiserver/plane/app/urls/importer.py b/apiserver/plane/app/urls/importer.py
deleted file mode 100644
index f3a018d7894..00000000000
--- a/apiserver/plane/app/urls/importer.py
+++ /dev/null
@@ -1,37 +0,0 @@
-from django.urls import path
-
-
-from plane.app.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/app/urls/integration.py b/apiserver/plane/app/urls/integration.py
deleted file mode 100644
index cf3f82d5a49..00000000000
--- a/apiserver/plane/app/urls/integration.py
+++ /dev/null
@@ -1,150 +0,0 @@
-from django.urls import path
-
-
-from plane.app.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/app/urls/issue.py b/apiserver/plane/app/urls/issue.py
index 4ee70450b37..0d3b9e0634c 100644
--- a/apiserver/plane/app/urls/issue.py
+++ b/apiserver/plane/app/urls/issue.py
@@ -1,30 +1,26 @@
 from django.urls import path
 
-
 from plane.app.views import (
-    IssueListEndpoint,
-    IssueViewSet,
-    LabelViewSet,
     BulkCreateIssueLabelsEndpoint,
     BulkDeleteIssuesEndpoint,
-    BulkImportIssuesEndpoint,
-    UserWorkSpaceIssues,
     SubIssuesEndpoint,
     IssueLinkViewSet,
     IssueAttachmentEndpoint,
+    CommentReactionViewSet,
     ExportIssuesEndpoint,
     IssueActivityEndpoint,
+    IssueArchiveViewSet,
     IssueCommentViewSet,
-    IssueSubscriberViewSet,
+    IssueDraftViewSet,
+    IssueListEndpoint,
     IssueReactionViewSet,
-    CommentReactionViewSet,
-    IssueUserDisplayPropertyEndpoint,
-    IssueArchiveViewSet,
     IssueRelationViewSet,
-    IssueDraftViewSet,
+    IssueSubscriberViewSet,
+    IssueUserDisplayPropertyEndpoint,
+    IssueViewSet,
+    LabelViewSet,
 )
 
-
 urlpatterns = [
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issues/list/",
@@ -85,18 +81,7 @@
         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",
-    ),
-    # deprecated endpoint TODO: remove once confirmed
-    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(),
diff --git a/apiserver/plane/app/urls/module.py b/apiserver/plane/app/urls/module.py
index 5e9f4f1230c..a730fcd5054 100644
--- a/apiserver/plane/app/urls/module.py
+++ b/apiserver/plane/app/urls/module.py
@@ -6,8 +6,8 @@
     ModuleIssueViewSet,
     ModuleLinkViewSet,
     ModuleFavoriteViewSet,
-    BulkImportModulesEndpoint,
     ModuleUserPropertiesEndpoint,
+    ModuleArchiveUnarchiveEndpoint,
 )
 
 
@@ -106,14 +106,19 @@
         ),
         name="user-favorite-module",
     ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-import-modules/<str:service>/",
-        BulkImportModulesEndpoint.as_view(),
-        name="bulk-modules-create",
-    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/user-properties/",
         ModuleUserPropertiesEndpoint.as_view(),
         name="cycle-user-filters",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/modules/<uuid:module_id>/archive/",
+        ModuleArchiveUnarchiveEndpoint.as_view(),
+        name="module-archive-unarchive",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-modules/",
+        ModuleArchiveUnarchiveEndpoint.as_view(),
+        name="module-archive-unarchive",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/project.py b/apiserver/plane/app/urls/project.py
index f8ecac4c068..7ea636df8e9 100644
--- a/apiserver/plane/app/urls/project.py
+++ b/apiserver/plane/app/urls/project.py
@@ -14,6 +14,7 @@
     ProjectPublicCoverImagesEndpoint,
     ProjectDeployBoardViewSet,
     UserProjectRolesEndpoint,
+    ProjectArchiveUnarchiveEndpoint,
 )
 
 
@@ -175,4 +176,9 @@
         ),
         name="project-deploy-board",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archive/",
+        ProjectArchiveUnarchiveEndpoint.as_view(),
+        name="project-archive-unarchive",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/workspace.py b/apiserver/plane/app/urls/workspace.py
index a70ff18e535..8b21bb9e1b2 100644
--- a/apiserver/plane/app/urls/workspace.py
+++ b/apiserver/plane/app/urls/workspace.py
@@ -22,6 +22,7 @@
     WorkspaceUserPropertiesEndpoint,
     WorkspaceStatesEndpoint,
     WorkspaceEstimatesEndpoint,
+    ExportWorkspaceUserActivityEndpoint,
     WorkspaceModulesEndpoint,
     WorkspaceCyclesEndpoint,
 )
@@ -191,6 +192,11 @@
         WorkspaceUserActivityEndpoint.as_view(),
         name="workspace-user-activity",
     ),
+    path(
+        "workspaces/<str:slug>/user-activity/<uuid:user_id>/export/",
+        ExportWorkspaceUserActivityEndpoint.as_view(),
+        name="export-workspace-user-activity",
+    ),
     path(
         "workspaces/<str:slug>/user-profile/<uuid:user_id>/",
         WorkspaceUserProfileEndpoint.as_view(),
diff --git a/apiserver/plane/app/urls_deprecated.py b/apiserver/plane/app/urls_deprecated.py
deleted file mode 100644
index 2a47285aa21..00000000000
--- a/apiserver/plane/app/urls_deprecated.py
+++ /dev/null
@@ -1,1810 +0,0 @@
-from django.urls import path
-
-from rest_framework_simplejwt.views import TokenRefreshView
-
-# Create your urls here.
-
-from plane.app.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,
-    PageLogEndpoint,
-    SubPagesEndpoint,
-    PageFavoriteViewSet,
-    CreateIssueFromBlockEndpoint,
-    ## 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>/archive/",
-        PageViewSet.as_view(
-            {
-                "post": "archive",
-            }
-        ),
-        name="project-page-archive",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/unarchive/",
-        PageViewSet.as_view(
-            {
-                "post": "unarchive",
-            }
-        ),
-        name="project-page-unarchive",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-pages/",
-        PageViewSet.as_view(
-            {
-                "get": "archive_list",
-            }
-        ),
-        name="project-pages",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/lock/",
-        PageViewSet.as_view(
-            {
-                "post": "lock",
-            }
-        ),
-        name="project-pages",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/unlock/",
-        PageViewSet.as_view(
-            {
-                "post": "unlock",
-            }
-        ),
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/transactions/",
-        PageLogEndpoint.as_view(),
-        name="page-transactions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/transactions/<uuid:transaction>/",
-        PageLogEndpoint.as_view(),
-        name="page-transactions",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/sub-pages/",
-        SubPagesEndpoint.as_view(),
-        name="sub-page",
-    ),
-    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",
-    ),
-    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/",
-        CreateIssueFromBlockEndpoint.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/app/views/__init__.py b/apiserver/plane/app/views/__init__.py
index d4a13e49749..2cdab312cec 100644
--- a/apiserver/plane/app/views/__init__.py
+++ b/apiserver/plane/app/views/__init__.py
@@ -1,19 +1,27 @@
-from .project import (
+from .project.base import (
     ProjectViewSet,
-    ProjectMemberViewSet,
-    UserProjectInvitationsViewset,
-    ProjectInvitationsViewset,
-    AddTeamToProjectEndpoint,
     ProjectIdentifierEndpoint,
-    ProjectJoinEndpoint,
     ProjectUserViewsEndpoint,
-    ProjectMemberUserEndpoint,
     ProjectFavoritesViewSet,
     ProjectPublicCoverImagesEndpoint,
     ProjectDeployBoardViewSet,
+    ProjectArchiveUnarchiveEndpoint,
+)
+
+from .project.invite import (
+    UserProjectInvitationsViewset,
+    ProjectInvitationsViewset,
+    ProjectJoinEndpoint,
+)
+
+from .project.member import (
+    ProjectMemberViewSet,
+    AddTeamToProjectEndpoint,
+    ProjectMemberUserEndpoint,
     UserProjectRolesEndpoint,
 )
-from .user import (
+
+from .user.base import (
     UserEndpoint,
     UpdateUserOnBoardedEndpoint,
     UpdateUserTourCompletedEndpoint,
@@ -24,70 +32,122 @@
 
 from .base import BaseAPIView, BaseViewSet, WebhookMixin
 
-from .workspace import (
+from .workspace.base import (
     WorkSpaceViewSet,
     UserWorkSpacesEndpoint,
     WorkSpaceAvailabilityCheckEndpoint,
-    WorkspaceJoinEndpoint,
+    UserWorkspaceDashboardEndpoint,
+    WorkspaceThemeViewSet,
+    ExportWorkspaceUserActivityEndpoint
+)
+
+from .workspace.member import (
     WorkSpaceMemberViewSet,
     TeamMemberViewSet,
+    WorkspaceMemberUserEndpoint,
+    WorkspaceProjectMemberEndpoint,
+    WorkspaceMemberUserViewsEndpoint,
+)
+from .workspace.invite import (
     WorkspaceInvitationsViewset,
+    WorkspaceJoinEndpoint,
     UserWorkspaceInvitationsViewSet,
+)
+from .workspace.label import (
+    WorkspaceLabelsEndpoint,
+)
+from .workspace.state import (
+    WorkspaceStatesEndpoint,
+)
+from .workspace.user import (
     UserLastProjectWithWorkspaceEndpoint,
-    WorkspaceMemberUserEndpoint,
-    WorkspaceMemberUserViewsEndpoint,
-    UserActivityGraphEndpoint,
-    UserIssueCompletedGraphEndpoint,
-    UserWorkspaceDashboardEndpoint,
-    WorkspaceThemeViewSet,
-    WorkspaceUserProfileStatsEndpoint,
-    WorkspaceUserActivityEndpoint,
-    WorkspaceUserProfileEndpoint,
     WorkspaceUserProfileIssuesEndpoint,
-    WorkspaceLabelsEndpoint,
-    WorkspaceProjectMemberEndpoint,
     WorkspaceUserPropertiesEndpoint,
-    WorkspaceStatesEndpoint,
+    WorkspaceUserProfileEndpoint,
+    WorkspaceUserActivityEndpoint,
+    WorkspaceUserProfileStatsEndpoint,
+    UserActivityGraphEndpoint,
+    UserIssueCompletedGraphEndpoint,
+)
+from .workspace.estimate import (
     WorkspaceEstimatesEndpoint,
+)
+from .workspace.module import (
     WorkspaceModulesEndpoint,
+)
+from .workspace.cycle import (
     WorkspaceCyclesEndpoint,
 )
-from .state import StateViewSet
-from .view import (
+
+from .state.base import StateViewSet
+from .view.base import (
     GlobalViewViewSet,
     GlobalViewIssuesViewSet,
     IssueViewViewSet,
     IssueViewFavoriteViewSet,
 )
-from .cycle import (
+from .cycle.base import (
     CycleViewSet,
-    CycleIssueViewSet,
     CycleDateCheckEndpoint,
     CycleFavoriteViewSet,
     TransferCycleIssueEndpoint,
+    CycleArchiveUnarchiveEndpoint,
     CycleUserPropertiesEndpoint,
 )
-from .asset import FileAssetEndpoint, UserAssetsEndpoint, FileAssetViewSet
-from .issue import (
+from .cycle.issue import (
+    CycleIssueViewSet,
+)
+
+from .asset.base import FileAssetEndpoint, UserAssetsEndpoint, FileAssetViewSet
+from .issue.base import (
     IssueListEndpoint,
     IssueViewSet,
-    WorkSpaceIssuesEndpoint,
-    IssueActivityEndpoint,
-    IssueCommentViewSet,
     IssueUserDisplayPropertyEndpoint,
-    LabelViewSet,
     BulkDeleteIssuesEndpoint,
-    UserWorkSpaceIssues,
-    SubIssuesEndpoint,
-    IssueLinkViewSet,
-    BulkCreateIssueLabelsEndpoint,
-    IssueAttachmentEndpoint,
+)
+
+from .issue.activity import (
+    IssueActivityEndpoint,
+)
+
+from .issue.archive import (
     IssueArchiveViewSet,
-    IssueSubscriberViewSet,
+)
+
+from .issue.attachment import (
+    IssueAttachmentEndpoint,
+)
+
+from .issue.comment import (
+    IssueCommentViewSet,
     CommentReactionViewSet,
-    IssueReactionViewSet,
+)
+
+from .issue.draft import IssueDraftViewSet
+
+from .issue.label import (
+    LabelViewSet,
+    BulkCreateIssueLabelsEndpoint,
+)
+
+from .issue.link import (
+    IssueLinkViewSet,
+)
+
+from .issue.relation import (
     IssueRelationViewSet,
-    IssueDraftViewSet,
+)
+
+from .issue.reaction import (
+    IssueReactionViewSet,
+)
+
+from .issue.sub_issue import (
+    SubIssuesEndpoint,
+)
+
+from .issue.subscriber import (
+    IssueSubscriberViewSet,
 )
 
 from .auth_extended import (
@@ -106,36 +166,22 @@
     MagicSignInEndpoint,
 )
 
-from .module import (
+from .module.base import (
     ModuleViewSet,
-    ModuleIssueViewSet,
     ModuleLinkViewSet,
     ModuleFavoriteViewSet,
+    ModuleArchiveUnarchiveEndpoint,
     ModuleUserPropertiesEndpoint,
 )
 
-from .api import ApiTokenEndpoint
-
-from .integration import (
-    WorkspaceIntegrationViewSet,
-    IntegrationViewSet,
-    GithubIssueSyncViewSet,
-    GithubRepositorySyncViewSet,
-    GithubCommentSyncViewSet,
-    GithubRepositoriesEndpoint,
-    BulkCreateGithubIssueSyncEndpoint,
-    SlackProjectSyncViewSet,
+from .module.issue import (
+    ModuleIssueViewSet,
 )
 
-from .importer import (
-    ServiceIssueImportSummaryEndpoint,
-    ImportServiceEndpoint,
-    UpdateServiceImportStatusEndpoint,
-    BulkImportIssuesEndpoint,
-    BulkImportModulesEndpoint,
-)
+from .api import ApiTokenEndpoint
+
 
-from .page import (
+from .page.base import (
     PageViewSet,
     PageFavoriteViewSet,
     PageLogEndpoint,
@@ -145,20 +191,19 @@
 from .search import GlobalSearchEndpoint, IssueSearchEndpoint
 
 
-from .external import (
+from .external.base import (
     GPTIntegrationEndpoint,
-    ReleaseNotesEndpoint,
     UnsplashEndpoint,
 )
 
-from .estimate import (
+from .estimate.base import (
     ProjectEstimatePointEndpoint,
     BulkEstimatePointEndpoint,
 )
 
-from .inbox import InboxViewSet, InboxIssueViewSet
+from .inbox.base import InboxViewSet, InboxIssueViewSet
 
-from .analytic import (
+from .analytic.base import (
     AnalyticsEndpoint,
     AnalyticViewViewset,
     SavedAnalyticEndpoint,
@@ -166,24 +211,23 @@
     DefaultAnalyticsEndpoint,
 )
 
-from .notification import (
+from .notification.base import (
     NotificationViewSet,
     UnreadNotificationEndpoint,
     MarkAllReadNotificationViewSet,
     UserNotificationPreferenceEndpoint,
 )
 
-from .exporter import ExportIssuesEndpoint
+from .exporter.base import ExportIssuesEndpoint
 
 from .config import ConfigurationEndpoint, MobileConfigurationEndpoint
 
-from .webhook import (
+from .webhook.base import (
     WebhookEndpoint,
     WebhookLogsEndpoint,
     WebhookSecretRegenerateEndpoint,
 )
 
-from .dashboard import (
-    DashboardEndpoint,
-    WidgetsEndpoint
-)
\ No newline at end of file
+from .dashboard.base import DashboardEndpoint, WidgetsEndpoint
+
+from .error_404 import custom_404_view
diff --git a/apiserver/plane/app/views/analytic.py b/apiserver/plane/app/views/analytic/base.py
similarity index 97%
rename from apiserver/plane/app/views/analytic.py
rename to apiserver/plane/app/views/analytic/base.py
index 6eb914b236e..8e0d3220da9 100644
--- a/apiserver/plane/app/views/analytic.py
+++ b/apiserver/plane/app/views/analytic/base.py
@@ -1,5 +1,5 @@
 # Django imports
-from django.db.models import Count, Sum, F, Q
+from django.db.models import Count, Sum, F
 from django.db.models.functions import ExtractMonth
 from django.utils import timezone
 
@@ -10,7 +10,7 @@
 # Module imports
 from plane.app.views import BaseAPIView, BaseViewSet
 from plane.app.permissions import WorkSpaceAdminPermission
-from plane.db.models import Issue, AnalyticView, Workspace, State, Label
+from plane.db.models import Issue, AnalyticView, Workspace
 from plane.app.serializers import AnalyticViewSerializer
 from plane.utils.analytics_plot import build_graph_plot
 from plane.bgtasks.analytic_plot_export import analytic_export_task
@@ -51,8 +51,8 @@ def get(self, request, slug):
         if (
             not x_axis
             or not y_axis
-            or not x_axis in valid_xaxis_segment
-            or not y_axis in valid_yaxis
+            or x_axis not in valid_xaxis_segment
+            or y_axis not in valid_yaxis
         ):
             return Response(
                 {
@@ -266,8 +266,8 @@ def post(self, request, slug):
         if (
             not x_axis
             or not y_axis
-            or not x_axis in valid_xaxis_segment
-            or not y_axis in valid_yaxis
+            or x_axis not in valid_xaxis_segment
+            or y_axis not in valid_yaxis
         ):
             return Response(
                 {
diff --git a/apiserver/plane/app/views/api.py b/apiserver/plane/app/views/api.py
index 86a29c7fa50..6cd349b0748 100644
--- a/apiserver/plane/app/views/api.py
+++ b/apiserver/plane/app/views/api.py
@@ -43,7 +43,7 @@ def post(self, request, slug):
         )
 
     def get(self, request, slug, pk=None):
-        if pk == None:
+        if pk is None:
             api_tokens = APIToken.objects.filter(
                 user=request.user, workspace__slug=slug
             )
diff --git a/apiserver/plane/app/views/asset.py b/apiserver/plane/app/views/asset/base.py
similarity index 98%
rename from apiserver/plane/app/views/asset.py
rename to apiserver/plane/app/views/asset/base.py
index fb559061011..6de4a4ee7f0 100644
--- a/apiserver/plane/app/views/asset.py
+++ b/apiserver/plane/app/views/asset/base.py
@@ -4,7 +4,7 @@
 from rest_framework.parsers import MultiPartParser, FormParser, JSONParser
 
 # Module imports
-from .base import BaseAPIView, BaseViewSet
+from ..base import BaseAPIView, BaseViewSet
 from plane.db.models import FileAsset, Workspace
 from plane.app.serializers import FileAssetSerializer
 
diff --git a/apiserver/plane/app/views/auth_extended.py b/apiserver/plane/app/views/auth_extended.py
index 29cb43e3865..896f4170f22 100644
--- a/apiserver/plane/app/views/auth_extended.py
+++ b/apiserver/plane/app/views/auth_extended.py
@@ -16,7 +16,6 @@
 from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode
 from django.core.validators import validate_email
 from django.core.exceptions import ValidationError
-from django.conf import settings
 
 ## Third Party Imports
 from rest_framework import status
@@ -172,7 +171,7 @@ def post(self, request, uidb64, token):
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
             )
 
-        except DjangoUnicodeDecodeError as indentifier:
+        except DjangoUnicodeDecodeError:
             return Response(
                 {"error": "token is not valid, please check the new one"},
                 status=status.HTTP_401_UNAUTHORIZED,
diff --git a/apiserver/plane/app/views/authentication.py b/apiserver/plane/app/views/authentication.py
index c2b3e0b7e4e..7d898f971cf 100644
--- a/apiserver/plane/app/views/authentication.py
+++ b/apiserver/plane/app/views/authentication.py
@@ -7,7 +7,6 @@
 from django.utils import timezone
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
-from django.conf import settings
 from django.contrib.auth.hashers import make_password
 
 # Third party imports
@@ -65,7 +64,7 @@ def post(self, request):
         email = email.strip().lower()
         try:
             validate_email(email)
-        except ValidationError as e:
+        except ValidationError:
             return Response(
                 {"error": "Please provide a valid email address."},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -151,7 +150,7 @@ def post(self, request):
         email = email.strip().lower()
         try:
             validate_email(email)
-        except ValidationError as e:
+        except ValidationError:
             return Response(
                 {"error": "Please provide a valid email address."},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -238,9 +237,11 @@ def post(self, request):
             [
                 WorkspaceMember(
                     workspace_id=project_member_invite.workspace_id,
-                    role=project_member_invite.role
-                    if project_member_invite.role in [5, 10, 15]
-                    else 15,
+                    role=(
+                        project_member_invite.role
+                        if project_member_invite.role in [5, 10, 15]
+                        else 15
+                    ),
                     member=user,
                     created_by_id=project_member_invite.created_by_id,
                 )
@@ -254,9 +255,11 @@ def post(self, request):
             [
                 ProjectMember(
                     workspace_id=project_member_invite.workspace_id,
-                    role=project_member_invite.role
-                    if project_member_invite.role in [5, 10, 15]
-                    else 15,
+                    role=(
+                        project_member_invite.role
+                        if project_member_invite.role in [5, 10, 15]
+                        else 15
+                    ),
                     member=user,
                     created_by_id=project_member_invite.created_by_id,
                 )
@@ -392,9 +395,11 @@ def post(self, request):
                     [
                         WorkspaceMember(
                             workspace_id=project_member_invite.workspace_id,
-                            role=project_member_invite.role
-                            if project_member_invite.role in [5, 10, 15]
-                            else 15,
+                            role=(
+                                project_member_invite.role
+                                if project_member_invite.role in [5, 10, 15]
+                                else 15
+                            ),
                             member=user,
                             created_by_id=project_member_invite.created_by_id,
                         )
@@ -408,9 +413,11 @@ def post(self, request):
                     [
                         ProjectMember(
                             workspace_id=project_member_invite.workspace_id,
-                            role=project_member_invite.role
-                            if project_member_invite.role in [5, 10, 15]
-                            else 15,
+                            role=(
+                                project_member_invite.role
+                                if project_member_invite.role in [5, 10, 15]
+                                else 15
+                            ),
                             member=user,
                             created_by_id=project_member_invite.created_by_id,
                         )
diff --git a/apiserver/plane/app/views/base.py b/apiserver/plane/app/views/base.py
index fa1e7559b06..1908cfdc951 100644
--- a/apiserver/plane/app/views/base.py
+++ b/apiserver/plane/app/views/base.py
@@ -1,30 +1,27 @@
 # Python imports
 import zoneinfo
-import json
+from django.conf import settings
+from django.core.exceptions import ObjectDoesNotExist, ValidationError
+from django.db import IntegrityError
 
 # Django imports
 from django.urls import resolve
-from django.conf import settings
 from django.utils import timezone
-from django.db import IntegrityError
-from django.core.exceptions import ObjectDoesNotExist, ValidationError
-from django.core.serializers.json import DjangoJSONEncoder
+from django_filters.rest_framework import DjangoFilterBackend
 
 # 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
 from rest_framework.permissions import IsAuthenticated
-from sentry_sdk import capture_exception
-from django_filters.rest_framework import DjangoFilterBackend
+from rest_framework.response import Response
+from rest_framework.views import APIView
+from rest_framework.viewsets import ModelViewSet
 
 # Module imports
-from plane.utils.paginator import BasePaginator
 from plane.bgtasks.webhook_task import send_webhook
+from plane.utils.exception_logger import log_exception
+from plane.utils.paginator import BasePaginator
 
 
 class TimezoneMixin:
@@ -90,7 +87,7 @@ def get_queryset(self):
         try:
             return self.model.objects.all()
         except Exception as e:
-            capture_exception(e)
+            log_exception(e)
             raise APIException(
                 "Please check the view", status.HTTP_400_BAD_REQUEST
             )
@@ -119,18 +116,18 @@ def handle_exception(self, exc):
 
             if isinstance(e, ObjectDoesNotExist):
                 return Response(
-                    {"error": f"The required object does not exist."},
+                    {"error": "The required object does not exist."},
                     status=status.HTTP_404_NOT_FOUND,
                 )
 
             if isinstance(e, KeyError):
-                capture_exception(e)
+                log_exception(e)
                 return Response(
-                    {"error": f"The required key does not exist."},
+                    {"error": "The required key does not exist."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            capture_exception(e)
+            log_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_500_INTERNAL_SERVER_ERROR,
@@ -226,19 +223,17 @@ def handle_exception(self, exc):
 
             if isinstance(e, ObjectDoesNotExist):
                 return Response(
-                    {"error": f"The required object does not exist."},
+                    {"error": "The required object does not exist."},
                     status=status.HTTP_404_NOT_FOUND,
                 )
 
             if isinstance(e, KeyError):
                 return Response(
-                    {"error": f"The required key does not exist."},
+                    {"error": "The required key does not exist."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            if settings.DEBUG:
-                print(e)
-            capture_exception(e)
+            log_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_500_INTERNAL_SERVER_ERROR,
diff --git a/apiserver/plane/app/views/config.py b/apiserver/plane/app/views/config.py
index b2a27252cba..066f606b99f 100644
--- a/apiserver/plane/app/views/config.py
+++ b/apiserver/plane/app/views/config.py
@@ -2,7 +2,6 @@
 import os
 
 # Django imports
-from django.conf import settings
 
 # Third party imports
 from rest_framework.permissions import AllowAny
@@ -12,13 +11,14 @@
 # Module imports
 from .base import BaseAPIView
 from plane.license.utils.instance_value import get_configuration_value
-
+from plane.utils.cache import cache_response
 
 class ConfigurationEndpoint(BaseAPIView):
     permission_classes = [
         AllowAny,
     ]
 
+    @cache_response(60 * 60 * 2, user=False)
     def get(self, request):
         # Get all the configuration
         (
@@ -136,6 +136,7 @@ class MobileConfigurationEndpoint(BaseAPIView):
         AllowAny,
     ]
 
+    @cache_response(60 * 60 * 2, user=False)
     def get(self, request):
         (
             GOOGLE_CLIENT_ID,
diff --git a/apiserver/plane/app/views/cycle.py b/apiserver/plane/app/views/cycle/base.py
similarity index 81%
rename from apiserver/plane/app/views/cycle.py
rename to apiserver/plane/app/views/cycle/base.py
index 85e1e9f2e84..d323a0f631f 100644
--- a/apiserver/plane/app/views/cycle.py
+++ b/apiserver/plane/app/views/cycle/base.py
@@ -1,63 +1,56 @@
 # Python imports
 import json
 
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+
 # Django imports
 from django.db.models import (
-    Func,
-    F,
-    Q,
+    Case,
+    CharField,
+    Count,
     Exists,
+    F,
+    Func,
     OuterRef,
-    Count,
     Prefetch,
-    Sum,
-    Case,
-    When,
+    Q,
+    UUIDField,
     Value,
-    CharField,
+    When,
 )
-from django.core import serializers
-from django.utils import timezone
-from django.utils.decorators import method_decorator
-from django.views.decorators.gzip import gzip_page
-from django.contrib.postgres.aggregates import ArrayAgg
-from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
 from django.db.models.functions import Coalesce
+from django.utils import timezone
+from rest_framework import status
 
 # Third party imports
 from rest_framework.response import Response
-from rest_framework import status
 
-# Module imports
-from . import BaseViewSet, BaseAPIView, WebhookMixin
-from plane.app.serializers import (
-    CycleSerializer,
-    CycleIssueSerializer,
-    CycleFavoriteSerializer,
-    IssueSerializer,
-    CycleWriteSerializer,
-    CycleUserPropertiesSerializer,
-)
 from plane.app.permissions import (
     ProjectEntityPermission,
     ProjectLitePermission,
 )
+from plane.app.serializers import (
+    CycleFavoriteSerializer,
+    CycleSerializer,
+    CycleUserPropertiesSerializer,
+    CycleWriteSerializer,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
 from plane.db.models import (
-    User,
     Cycle,
+    CycleFavorite,
     CycleIssue,
+    CycleUserProperties,
     Issue,
-    CycleFavorite,
-    IssueLink,
-    IssueAttachment,
     Label,
-    CycleUserProperties,
+    User,
 )
-from plane.bgtasks.issue_activites_task import issue_activity
-from plane.utils.issue_filters import issue_filters
 from plane.utils.analytics_plot import burndown_plot
 
+# Module imports
+from .. import BaseAPIView, BaseViewSet, WebhookMixin
+
 
 class CycleViewSet(WebhookMixin, BaseViewSet):
     serializer_class = CycleSerializer
@@ -89,6 +82,7 @@ def get_queryset(self):
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
+            .filter(project__archived_at__isnull=True)
             .select_related("project", "workspace", "owned_by")
             .prefetch_related(
                 Prefetch(
@@ -109,7 +103,8 @@ def get_queryset(self):
             .annotate(is_favorite=Exists(favorite_subquery))
             .annotate(
                 total_issues=Count(
-                    "issue_cycle",
+                    "issue_cycle__issue__id",
+                    distinct=True,
                     filter=Q(
                         issue_cycle__issue__archived_at__isnull=True,
                         issue_cycle__issue__is_draft=False,
@@ -118,7 +113,8 @@ def get_queryset(self):
             )
             .annotate(
                 completed_issues=Count(
-                    "issue_cycle__issue__state__group",
+                    "issue_cycle__issue__id",
+                    distinct=True,
                     filter=Q(
                         issue_cycle__issue__state__group="completed",
                         issue_cycle__issue__archived_at__isnull=True,
@@ -128,7 +124,8 @@ def get_queryset(self):
             )
             .annotate(
                 cancelled_issues=Count(
-                    "issue_cycle__issue__state__group",
+                    "issue_cycle__issue__id",
+                    distinct=True,
                     filter=Q(
                         issue_cycle__issue__state__group="cancelled",
                         issue_cycle__issue__archived_at__isnull=True,
@@ -138,7 +135,8 @@ def get_queryset(self):
             )
             .annotate(
                 started_issues=Count(
-                    "issue_cycle__issue__state__group",
+                    "issue_cycle__issue__id",
+                    distinct=True,
                     filter=Q(
                         issue_cycle__issue__state__group="started",
                         issue_cycle__issue__archived_at__isnull=True,
@@ -148,7 +146,8 @@ def get_queryset(self):
             )
             .annotate(
                 unstarted_issues=Count(
-                    "issue_cycle__issue__state__group",
+                    "issue_cycle__issue__id",
+                    distinct=True,
                     filter=Q(
                         issue_cycle__issue__state__group="unstarted",
                         issue_cycle__issue__archived_at__isnull=True,
@@ -158,7 +157,8 @@ def get_queryset(self):
             )
             .annotate(
                 backlog_issues=Count(
-                    "issue_cycle__issue__state__group",
+                    "issue_cycle__issue__id",
+                    distinct=True,
                     filter=Q(
                         issue_cycle__issue__state__group="backlog",
                         issue_cycle__issue__archived_at__isnull=True,
@@ -202,7 +202,7 @@ def get_queryset(self):
         )
 
     def list(self, request, slug, project_id):
-        queryset = self.get_queryset()
+        queryset = self.get_queryset().filter(archived_at__isnull=True)
         cycle_view = request.GET.get("cycle_view", "all")
 
         # Update the order by
@@ -403,8 +403,8 @@ def create(self, request, slug, project_id):
                         "progress_snapshot",
                         # meta fields
                         "is_favorite",
-                        "total_issues",
                         "cancelled_issues",
+                        "total_issues",
                         "completed_issues",
                         "started_issues",
                         "unstarted_issues",
@@ -427,11 +427,15 @@ def create(self, request, slug, project_id):
             )
 
     def partial_update(self, request, slug, project_id, pk):
-        queryset = (
-            self.get_queryset()
-            .filter(workspace__slug=slug, project_id=project_id, pk=pk)
+        queryset = self.get_queryset().filter(
+            workspace__slug=slug, project_id=project_id, pk=pk
         )
         cycle = queryset.first()
+        if cycle.archived_at:
+            return Response(
+                {"error": "Archived cycle cannot be updated"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         request_data = request.data
 
         if (
@@ -489,10 +493,22 @@ def partial_update(self, request, slug, project_id, pk):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(pk=pk)
+        queryset = (
+            self.get_queryset().filter(archived_at__isnull=True).filter(pk=pk)
+        )
         data = (
             self.get_queryset()
             .filter(pk=pk)
+            .annotate(
+                sub_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("project_id"),
+                    parent__isnull=False,
+                    issue_cycle__cycle_id=pk,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
             .values(
                 # necessary fields
                 "id",
@@ -509,6 +525,7 @@ def retrieve(self, request, slug, project_id, pk):
                 "external_source",
                 "external_id",
                 "progress_snapshot",
+                "sub_issues",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -662,273 +679,194 @@ def destroy(self, request, slug, project_id, pk):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class CycleIssueViewSet(WebhookMixin, BaseViewSet):
-    serializer_class = CycleIssueSerializer
-    model = CycleIssue
-
-    webhook_event = "cycle_issue"
-    bulk = True
+class CycleArchiveUnarchiveEndpoint(BaseAPIView):
 
     permission_classes = [
         ProjectEntityPermission,
     ]
 
-    filterset_fields = [
-        "issue__labels__id",
-        "issue__assignees__id",
-    ]
-
     def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("issue_id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .filter(workspace__slug=self.kwargs.get("slug"))
+        favorite_subquery = CycleFavorite.objects.filter(
+            user=self.request.user,
+            cycle_id=OuterRef("pk"),
+            project_id=self.kwargs.get("project_id"),
+            workspace__slug=self.kwargs.get("slug"),
+        )
+        return (
+            Cycle.objects.filter(workspace__slug=self.kwargs.get("slug"))
             .filter(project_id=self.kwargs.get("project_id"))
+            .filter(archived_at__isnull=False)
             .filter(
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
             )
-            .filter(cycle_id=self.kwargs.get("cycle_id"))
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("cycle")
-            .select_related("issue", "issue__state", "issue__project")
-            .prefetch_related("issue__assignees", "issue__labels")
-            .distinct()
-        )
-
-    @method_decorator(gzip_page)
-    def list(self, request, slug, project_id, cycle_id):
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
-        order_by = request.GET.get("order_by", "created_at")
-        filters = issue_filters(request.query_params, "GET")
-        queryset = (
-            Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id)
-            .filter(project_id=project_id)
-            .filter(workspace__slug=slug)
-            .filter(**filters)
-            .select_related("workspace", "project", "state", "parent")
+            .filter(project__archived_at__isnull=True)
+            .select_related("project", "workspace", "owned_by")
+            .prefetch_related(
+                Prefetch(
+                    "issue_cycle__issue__assignees",
+                    queryset=User.objects.only(
+                        "avatar", "first_name", "id"
+                    ).distinct(),
+                )
+            )
             .prefetch_related(
-                "assignees",
-                "labels",
-                "issue_module__module",
-                "issue_cycle__cycle",
+                Prefetch(
+                    "issue_cycle__issue__labels",
+                    queryset=Label.objects.only(
+                        "name", "color", "id"
+                    ).distinct(),
+                )
             )
-            .order_by(order_by)
-            .filter(**filters)
-            .annotate(cycle_id=F("issue_cycle__cycle_id"))
+            .annotate(is_favorite=Exists(favorite_subquery))
             .annotate(
-                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
+                completed_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
             )
             .annotate(
-                attachment_count=IssueAttachment.objects.filter(
-                    issue=OuterRef("id")
+                cancelled_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
             .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
+                started_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
             .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
+                unstarted_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
                     ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
                     ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
+                )
+            )
+            .annotate(
+                status=Case(
+                    When(
+                        Q(start_date__lte=timezone.now())
+                        & Q(end_date__gte=timezone.now()),
+                        then=Value("CURRENT"),
+                    ),
+                    When(
+                        start_date__gt=timezone.now(), then=Value("UPCOMING")
+                    ),
+                    When(end_date__lt=timezone.now(), then=Value("COMPLETED")),
+                    When(
+                        Q(start_date__isnull=True) & Q(end_date__isnull=True),
+                        then=Value("DRAFT"),
+                    ),
+                    default=Value("DRAFT"),
+                    output_field=CharField(),
+                )
+            )
+            .annotate(
+                assignee_ids=Coalesce(
                     ArrayAgg(
-                        "issue_module__module_id",
+                        "issue_cycle__issue__assignees__id",
                         distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
+                        filter=~Q(
+                            issue_cycle__issue__assignees__id__isnull=True
+                        )
+                        & Q(
+                            issue_cycle__issue__assignees__member_project__is_active=True
+                        ),
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
-                ),
+                )
             )
-            .order_by(order_by)
+            .order_by("-is_favorite", "name")
+            .distinct()
         )
-        if self.fields:
-            issues = IssueSerializer(
-                queryset, many=True, fields=fields if fields else None
-            ).data
-        else:
-            issues = queryset.values(
+
+    def get(self, request, slug, project_id):
+        queryset = (
+            self.get_queryset()
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .values(
+                # necessary fields
                 "id",
+                "workspace_id",
+                "project_id",
+                # model fields
                 "name",
-                "state_id",
-                "sort_order",
-                "completed_at",
-                "estimate_point",
-                "priority",
+                "description",
                 "start_date",
-                "target_date",
-                "sequence_id",
-                "project_id",
-                "parent_id",
-                "cycle_id",
-                "module_ids",
-                "label_ids",
+                "end_date",
+                "owned_by_id",
+                "view_props",
+                "sort_order",
+                "external_source",
+                "external_id",
+                "progress_snapshot",
+                # meta fields
+                "total_issues",
+                "is_favorite",
+                "cancelled_issues",
+                "completed_issues",
+                "started_issues",
+                "unstarted_issues",
+                "backlog_issues",
                 "assignee_ids",
-                "sub_issues_count",
-                "created_at",
-                "updated_at",
-                "created_by",
-                "updated_by",
-                "attachment_count",
-                "link_count",
-                "is_draft",
+                "status",
                 "archived_at",
             )
-        return Response(issues, status=status.HTTP_200_OK)
-
-    def create(self, request, slug, project_id, cycle_id):
-        issues = request.data.get("issues", [])
-
-        if not issues:
-            return Response(
-                {"error": "Issues are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        ).order_by("-is_favorite", "-created_at")
+        return Response(queryset, status=status.HTTP_200_OK)
 
+    def post(self, request, slug, project_id, 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,
-            )
-
-        # Get all CycleIssues already created
-        cycle_issues = list(
-            CycleIssue.objects.filter(
-                ~Q(cycle_id=cycle_id), issue_id__in=issues
-            )
+            pk=cycle_id, project_id=project_id, workspace__slug=slug
         )
-        existing_issues = [
-            str(cycle_issue.issue_id) for cycle_issue in cycle_issues
-        ]
-        new_issues = list(set(issues) - set(existing_issues))
-
-        # New issues to create
-        created_records = CycleIssue.objects.bulk_create(
-            [
-                CycleIssue(
-                    project_id=project_id,
-                    workspace_id=cycle.workspace_id,
-                    created_by_id=request.user.id,
-                    updated_by_id=request.user.id,
-                    cycle_id=cycle_id,
-                    issue_id=issue,
-                )
-                for issue in new_issues
-            ],
-            batch_size=10,
-        )
-
-        # Updated Issues
-        updated_records = []
-        update_cycle_issue_activity = []
-        # Iterate over each cycle_issue in cycle_issues
-        for cycle_issue in cycle_issues:
-            # Update the cycle_issue's cycle_id
-            cycle_issue.cycle_id = cycle_id
-            # Add the modified cycle_issue to the records_to_update list
-            updated_records.append(cycle_issue)
-            # Record the update activity
-            update_cycle_issue_activity.append(
-                {
-                    "old_cycle_id": str(cycle_issue.cycle_id),
-                    "new_cycle_id": str(cycle_id),
-                    "issue_id": str(cycle_issue.issue_id),
-                }
-            )
-
-        # Update the cycle issues
-        CycleIssue.objects.bulk_update(updated_records, ["cycle_id"], batch_size=100)
-        # 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=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", created_records
-                    ),
-                }
-            ),
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
+        cycle.archived_at = timezone.now()
+        cycle.save()
+        return Response(
+            {"archived_at": str(cycle.archived_at)},
+            status=status.HTTP_200_OK,
         )
-        return Response({"message": "success"}, status=status.HTTP_201_CREATED)
 
-    def destroy(self, request, slug, project_id, cycle_id, issue_id):
-        cycle_issue = CycleIssue.objects.get(
-            issue_id=issue_id,
-            workspace__slug=slug,
-            project_id=project_id,
-            cycle_id=cycle_id,
-        )
-        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(issue_id),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
+    def delete(self, request, slug, project_id, cycle_id):
+        cycle = Cycle.objects.get(
+            pk=cycle_id, project_id=project_id, workspace__slug=slug
         )
-        cycle_issue.delete()
+        cycle.archived_at = None
+        cycle.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
diff --git a/apiserver/plane/app/views/cycle/issue.py b/apiserver/plane/app/views/cycle/issue.py
new file mode 100644
index 00000000000..2a5505dd055
--- /dev/null
+++ b/apiserver/plane/app/views/cycle/issue.py
@@ -0,0 +1,314 @@
+# Python imports
+import json
+
+# Django imports
+from django.db.models import (
+    Func,
+    F,
+    Q,
+    OuterRef,
+    Value,
+    UUIDField,
+)
+from django.core import serializers
+from django.utils import timezone
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models.functions import Coalesce
+
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet, WebhookMixin
+from plane.app.serializers import (
+    IssueSerializer,
+    CycleIssueSerializer,
+)
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import (
+    Cycle,
+    CycleIssue,
+    Issue,
+    IssueLink,
+    IssueAttachment,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+from plane.utils.issue_filters import issue_filters
+
+
+class CycleIssueViewSet(WebhookMixin, BaseViewSet):
+    serializer_class = CycleIssueSerializer
+    model = CycleIssue
+
+    webhook_event = "cycle_issue"
+    bulk = True
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    filterset_fields = [
+        "issue__labels__id",
+        "issue__assignees__id",
+    ]
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("issue_id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
+            .filter(project__archived_at__isnull=True)
+            .filter(cycle_id=self.kwargs.get("cycle_id"))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("cycle")
+            .select_related("issue", "issue__state", "issue__project")
+            .prefetch_related("issue__assignees", "issue__labels")
+            .distinct()
+        )
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id, cycle_id):
+        fields = [
+            field
+            for field in request.GET.get("fields", "").split(",")
+            if field
+        ]
+        order_by = request.GET.get("order_by", "created_at")
+        filters = issue_filters(request.query_params, "GET")
+        queryset = (
+            Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id)
+            .filter(project_id=project_id)
+            .filter(workspace__slug=slug)
+            .filter(**filters)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related(
+                "assignees",
+                "labels",
+                "issue_module__module",
+                "issue_cycle__cycle",
+            )
+            .order_by(order_by)
+            .filter(**filters)
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .order_by(order_by)
+        )
+        if self.fields:
+            issues = IssueSerializer(
+                queryset, many=True, fields=fields if fields else None
+            ).data
+        else:
+            issues = queryset.values(
+                "id",
+                "name",
+                "state_id",
+                "sort_order",
+                "completed_at",
+                "estimate_point",
+                "priority",
+                "start_date",
+                "target_date",
+                "sequence_id",
+                "project_id",
+                "parent_id",
+                "cycle_id",
+                "module_ids",
+                "label_ids",
+                "assignee_ids",
+                "sub_issues_count",
+                "created_at",
+                "updated_at",
+                "created_by",
+                "updated_by",
+                "attachment_count",
+                "link_count",
+                "is_draft",
+                "archived_at",
+            )
+        return Response(issues, status=status.HTTP_200_OK)
+
+    def create(self, request, slug, project_id, cycle_id):
+        issues = request.data.get("issues", [])
+
+        if not 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
+        )
+
+        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(
+                ~Q(cycle_id=cycle_id), issue_id__in=issues
+            )
+        )
+        existing_issues = [
+            str(cycle_issue.issue_id) for cycle_issue in cycle_issues
+        ]
+        new_issues = list(set(issues) - set(existing_issues))
+
+        # New issues to create
+        created_records = CycleIssue.objects.bulk_create(
+            [
+                CycleIssue(
+                    project_id=project_id,
+                    workspace_id=cycle.workspace_id,
+                    created_by_id=request.user.id,
+                    updated_by_id=request.user.id,
+                    cycle_id=cycle_id,
+                    issue_id=issue,
+                )
+                for issue in new_issues
+            ],
+            batch_size=10,
+        )
+
+        # Updated Issues
+        updated_records = []
+        update_cycle_issue_activity = []
+        # Iterate over each cycle_issue in cycle_issues
+        for cycle_issue in cycle_issues:
+            # Update the cycle_issue's cycle_id
+            cycle_issue.cycle_id = cycle_id
+            # Add the modified cycle_issue to the records_to_update list
+            updated_records.append(cycle_issue)
+            # Record the update activity
+            update_cycle_issue_activity.append(
+                {
+                    "old_cycle_id": str(cycle_issue.cycle_id),
+                    "new_cycle_id": str(cycle_id),
+                    "issue_id": str(cycle_issue.issue_id),
+                }
+            )
+
+        # Update the cycle issues
+        CycleIssue.objects.bulk_update(
+            updated_records, ["cycle_id"], batch_size=100
+        )
+        # 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=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", created_records
+                    ),
+                }
+            ),
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        return Response({"message": "success"}, status=status.HTTP_201_CREATED)
+
+    def destroy(self, request, slug, project_id, cycle_id, issue_id):
+        cycle_issue = CycleIssue.objects.get(
+            issue_id=issue_id,
+            workspace__slug=slug,
+            project_id=project_id,
+            cycle_id=cycle_id,
+        )
+        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(issue_id),
+            project_id=str(self.kwargs.get("project_id", None)),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        cycle_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/dashboard.py b/apiserver/plane/app/views/dashboard/base.py
similarity index 84%
rename from apiserver/plane/app/views/dashboard.py
rename to apiserver/plane/app/views/dashboard/base.py
index 62ce0d910fe..33b3cf9d5b9 100644
--- a/apiserver/plane/app/views/dashboard.py
+++ b/apiserver/plane/app/views/dashboard/base.py
@@ -9,15 +9,15 @@
     F,
     Exists,
     OuterRef,
-    Max,
     Subquery,
     JSONField,
     Func,
     Prefetch,
+    IntegerField,
 )
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
+from django.db.models import UUIDField
 from django.db.models.functions import Coalesce
 from django.utils import timezone
 
@@ -26,7 +26,7 @@
 from rest_framework import status
 
 # Module imports
-from . import BaseAPIView
+from .. import BaseAPIView
 from plane.db.models import (
     Issue,
     IssueActivity,
@@ -38,6 +38,7 @@
     IssueLink,
     IssueAttachment,
     IssueRelation,
+    User,
 )
 from plane.app.serializers import (
     IssueActivitySerializer,
@@ -148,7 +149,8 @@ def dashboard_assigned_issues(self, request, slug):
                 ArrayAgg(
                     "assignees__id",
                     distinct=True,
-                    filter=~Q(assignees__id__isnull=True),
+                    filter=~Q(assignees__id__isnull=True)
+                    & Q(assignees__member_project__is_active=True),
                 ),
                 Value([], output_field=ArrayField(UUIDField())),
             ),
@@ -212,11 +214,11 @@ def dashboard_assigned_issues(self, request, slug):
     if issue_type == "overdue":
         overdue_issues_count = assigned_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__lt=timezone.now()
+            target_date__lt=timezone.now(),
         ).count()
         overdue_issues = assigned_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__lt=timezone.now()
+            target_date__lt=timezone.now(),
         )[:5]
         return Response(
             {
@@ -231,11 +233,11 @@ def dashboard_assigned_issues(self, request, slug):
     if issue_type == "upcoming":
         upcoming_issues_count = assigned_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__gte=timezone.now()
+            target_date__gte=timezone.now(),
         ).count()
         upcoming_issues = assigned_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__gte=timezone.now()
+            target_date__gte=timezone.now(),
         )[:5]
         return Response(
             {
@@ -302,7 +304,8 @@ def dashboard_created_issues(self, request, slug):
                 ArrayAgg(
                     "assignees__id",
                     distinct=True,
-                    filter=~Q(assignees__id__isnull=True),
+                    filter=~Q(assignees__id__isnull=True)
+                    & Q(assignees__member_project__is_active=True),
                 ),
                 Value([], output_field=ArrayField(UUIDField())),
             ),
@@ -365,11 +368,11 @@ def dashboard_created_issues(self, request, slug):
     if issue_type == "overdue":
         overdue_issues_count = created_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__lt=timezone.now()
+            target_date__lt=timezone.now(),
         ).count()
         overdue_issues = created_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__lt=timezone.now()
+            target_date__lt=timezone.now(),
         )[:5]
         return Response(
             {
@@ -382,11 +385,11 @@ def dashboard_created_issues(self, request, slug):
     if issue_type == "upcoming":
         upcoming_issues_count = created_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__gte=timezone.now()
+            target_date__gte=timezone.now(),
         ).count()
         upcoming_issues = created_issues.filter(
             state__group__in=["backlog", "unstarted", "started"],
-            target_date__gte=timezone.now()
+            target_date__gte=timezone.now(),
         )[:5]
         return Response(
             {
@@ -470,6 +473,7 @@ def dashboard_recent_activity(self, request, slug):
         workspace__slug=slug,
         project__project_projectmember__member=request.user,
         project__project_projectmember__is_active=True,
+        project__archived_at__isnull=True,
         actor=request.user,
     ).select_related("actor", "workspace", "issue", "project")[:8]
 
@@ -485,6 +489,7 @@ def dashboard_recent_projects(self, request, slug):
             workspace__slug=slug,
             project__project_projectmember__member=request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
             actor=request.user,
         )
         .values_list("project_id", flat=True)
@@ -499,11 +504,14 @@ def dashboard_recent_projects(self, request, slug):
         additional_projects = Project.objects.filter(
             project_projectmember__member=request.user,
             project_projectmember__is_active=True,
+            archived_at__isnull=True,
             workspace__slug=slug,
         ).exclude(id__in=unique_project_ids)
 
         # Append additional project IDs to the existing list
-        unique_project_ids.update(additional_projects.values_list("id", flat=True))
+        unique_project_ids.update(
+            additional_projects.values_list("id", flat=True)
+        )
 
     return Response(
         list(unique_project_ids)[:4],
@@ -512,90 +520,99 @@ def dashboard_recent_projects(self, request, slug):
 
 
 def dashboard_recent_collaborators(self, request, slug):
-    # Fetch all project IDs where the user belongs to
-    user_projects = Project.objects.filter(
-        project_projectmember__member=request.user,
-        project_projectmember__is_active=True,
-        workspace__slug=slug,
-    ).values_list("id", flat=True)
-
-    # Fetch all users who have performed an activity in the projects where the user exists
-    users_with_activities = (
+    # Subquery to count activities for each project member
+    activity_count_subquery = (
         IssueActivity.objects.filter(
             workspace__slug=slug,
-            project_id__in=user_projects,
+            actor=OuterRef("member"),
+            project__project_projectmember__member=request.user,
+            project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
         )
         .values("actor")
-        .exclude(actor=request.user)
-        .annotate(num_activities=Count("actor"))
-        .order_by("-num_activities")
-    )[:7]
-
-    # Get the count of active issues for each user in users_with_activities
-    users_with_active_issues = []
-    for user_activity in users_with_activities:
-        user_id = user_activity["actor"]
-        active_issue_count = Issue.objects.filter(
-            assignees__in=[user_id],
-            state__group__in=["unstarted", "started"],
-        ).count()
-        users_with_active_issues.append(
-            {"user_id": user_id, "active_issue_count": active_issue_count}
+        .annotate(num_activities=Count("pk"))
+        .values("num_activities")
+    )
+
+    # Get all project members and annotate them with activity counts
+    project_members_with_activities = (
+        ProjectMember.objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+            project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
+        )
+        .annotate(
+            num_activities=Coalesce(
+                Subquery(activity_count_subquery),
+                Value(0),
+                output_field=IntegerField(),
+            ),
+            is_current_user=Case(
+                When(member=request.user, then=Value(0)),
+                default=Value(1),
+                output_field=IntegerField(),
+            ),
+        )
+        .values_list("member", flat=True)
+        .order_by("is_current_user", "-num_activities")
+        .distinct()
+    )
+    search = request.query_params.get("search", None)
+    if search:
+        project_members_with_activities = (
+            project_members_with_activities.filter(
+                Q(member__display_name__icontains=search)
+                | Q(member__first_name__icontains=search)
+                | Q(member__last_name__icontains=search)
+            )
         )
 
-    # Insert the logged-in user's ID and their active issue count at the beginning
-    active_issue_count = Issue.objects.filter(
-        assignees__in=[request.user],
-        state__group__in=["unstarted", "started"],
-    ).count()
+    return self.paginate(
+        request=request,
+        queryset=project_members_with_activities,
+        controller=self.get_results_controller,
+    )
 
-    if users_with_activities.count() < 7:
-        # Calculate the additional collaborators needed
-        additional_collaborators_needed = 7 - users_with_activities.count()
-
-        # Fetch additional collaborators from the project_member table
-        additional_collaborators = list(
-            set(
-                ProjectMember.objects.filter(
-                    ~Q(member=request.user),
-                    project_id__in=user_projects,
-                    workspace__slug=slug,
-                )
-                .exclude(
-                    member__in=[
-                        user["actor"] for user in users_with_activities
-                    ]
+
+class DashboardEndpoint(BaseAPIView):
+    def get_results_controller(self, project_members_with_activities):
+        user_active_issue_counts = (
+            User.objects.filter(id__in=project_members_with_activities)
+            .annotate(
+                active_issue_count=Count(
+                    Case(
+                        When(
+                            issue_assignee__issue__state__group__in=[
+                                "unstarted",
+                                "started",
+                            ],
+                            then=1,
+                        ),
+                        output_field=IntegerField(),
+                    )
                 )
-                .values_list("member", flat=True)
             )
+            .values("active_issue_count", user_id=F("id"))
         )
+        # Create a dictionary to store the active issue counts by user ID
+        active_issue_counts_dict = {
+            user["user_id"]: user["active_issue_count"]
+            for user in user_active_issue_counts
+        }
 
-        additional_collaborators = additional_collaborators[
-            :additional_collaborators_needed
+        # Preserve the sequence of project members with activities
+        paginated_results = [
+            {
+                "user_id": member_id,
+                "active_issue_count": active_issue_counts_dict.get(
+                    member_id, 0
+                ),
+            }
+            for member_id in project_members_with_activities
         ]
+        return paginated_results
 
-        # Append additional collaborators to the list
-        for collaborator_id in additional_collaborators:
-            active_issue_count = Issue.objects.filter(
-                assignees__in=[collaborator_id],
-                state__group__in=["unstarted", "started"],
-            ).count()
-            users_with_active_issues.append(
-                {
-                    "user_id": str(collaborator_id),
-                    "active_issue_count": active_issue_count,
-                }
-            )
-
-    users_with_active_issues.insert(
-        0,
-        {"user_id": request.user.id, "active_issue_count": active_issue_count},
-    )
-
-    return Response(users_with_active_issues, status=status.HTTP_200_OK)
-
-
-class DashboardEndpoint(BaseAPIView):
     def create(self, request, slug):
         serializer = DashboardSerializer(data=request.data)
         if serializer.is_valid():
@@ -622,7 +639,9 @@ def get(self, request, slug, dashboard_id=None):
             dashboard_type = request.GET.get("dashboard_type", None)
             if dashboard_type == "home":
                 dashboard, created = Dashboard.objects.get_or_create(
-                    type_identifier=dashboard_type, owned_by=request.user, is_default=True
+                    type_identifier=dashboard_type,
+                    owned_by=request.user,
+                    is_default=True,
                 )
 
                 if created:
@@ -639,7 +658,9 @@ def get(self, request, slug, dashboard_id=None):
 
                     updated_dashboard_widgets = []
                     for widget_key in widgets_to_fetch:
-                        widget = Widget.objects.filter(key=widget_key).values_list("id", flat=True)
+                        widget = Widget.objects.filter(
+                            key=widget_key
+                        ).values_list("id", flat=True)
                         if widget:
                             updated_dashboard_widgets.append(
                                 DashboardWidget(
diff --git a/apiserver/plane/app/views/error_404.py b/apiserver/plane/app/views/error_404.py
new file mode 100644
index 00000000000..3c31474e0a5
--- /dev/null
+++ b/apiserver/plane/app/views/error_404.py
@@ -0,0 +1,5 @@
+# views.py
+from django.http import JsonResponse
+
+def custom_404_view(request, exception=None):
+    return JsonResponse({"error": "Page not found."}, status=404)
diff --git a/apiserver/plane/app/views/estimate.py b/apiserver/plane/app/views/estimate/base.py
similarity index 94%
rename from apiserver/plane/app/views/estimate.py
rename to apiserver/plane/app/views/estimate/base.py
index 3402bb06864..7ac3035a956 100644
--- a/apiserver/plane/app/views/estimate.py
+++ b/apiserver/plane/app/views/estimate/base.py
@@ -3,7 +3,7 @@
 from rest_framework import status
 
 # Module imports
-from .base import BaseViewSet, BaseAPIView
+from ..base import BaseViewSet, BaseAPIView
 from plane.app.permissions import ProjectEntityPermission
 from plane.db.models import Project, Estimate, EstimatePoint
 from plane.app.serializers import (
@@ -11,7 +11,7 @@
     EstimatePointSerializer,
     EstimateReadSerializer,
 )
-
+from plane.utils.cache import invalidate_cache
 
 class ProjectEstimatePointEndpoint(BaseAPIView):
     permission_classes = [
@@ -49,6 +49,7 @@ def list(self, request, slug, project_id):
         serializer = EstimateReadSerializer(estimates, many=True)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
+    @invalidate_cache(path="/api/workspaces/:slug/estimates/", url_params=True, user=False)
     def create(self, request, slug, project_id):
         if not request.data.get("estimate", False):
             return Response(
@@ -114,6 +115,7 @@ def retrieve(self, request, slug, project_id, estimate_id):
             status=status.HTTP_200_OK,
         )
 
+    @invalidate_cache(path="/api/workspaces/:slug/estimates/", url_params=True, user=False)
     def partial_update(self, request, slug, project_id, estimate_id):
         if not request.data.get("estimate", False):
             return Response(
@@ -182,6 +184,7 @@ def partial_update(self, request, slug, project_id, estimate_id):
             status=status.HTTP_200_OK,
         )
 
+    @invalidate_cache(path="/api/workspaces/:slug/estimates/", url_params=True, user=False)
     def destroy(self, request, slug, project_id, estimate_id):
         estimate = Estimate.objects.get(
             pk=estimate_id, workspace__slug=slug, project_id=project_id
diff --git a/apiserver/plane/app/views/exporter.py b/apiserver/plane/app/views/exporter/base.py
similarity index 88%
rename from apiserver/plane/app/views/exporter.py
rename to apiserver/plane/app/views/exporter/base.py
index 179de81f97e..698d9eb997f 100644
--- a/apiserver/plane/app/views/exporter.py
+++ b/apiserver/plane/app/views/exporter/base.py
@@ -3,7 +3,7 @@
 from rest_framework import status
 
 # Module imports
-from . import BaseAPIView
+from .. import BaseAPIView
 from plane.app.permissions import WorkSpaceAdminPermission
 from plane.bgtasks.export_task import issue_export_task
 from plane.db.models import Project, ExporterHistory, Workspace
@@ -29,7 +29,10 @@ def post(self, request, slug):
         if provider in ["csv", "xlsx", "json"]:
             if not project_ids:
                 project_ids = Project.objects.filter(
-                    workspace__slug=slug
+                    workspace__slug=slug,
+                    project_projectmember__member=request.user,
+                    project_projectmember__is_active=True,
+                    archived_at__isnull=True,
                 ).values_list("id", flat=True)
                 project_ids = [str(project_id) for project_id in project_ids]
 
@@ -50,7 +53,7 @@ def post(self, request, slug):
             )
             return Response(
                 {
-                    "message": f"Once the export is ready you will be able to download it"
+                    "message": "Once the export is ready you will be able to download it"
                 },
                 status=status.HTTP_200_OK,
             )
diff --git a/apiserver/plane/app/views/external.py b/apiserver/plane/app/views/external/base.py
similarity index 91%
rename from apiserver/plane/app/views/external.py
rename to apiserver/plane/app/views/external/base.py
index 618c65e3ccb..2d5d2c7aa4b 100644
--- a/apiserver/plane/app/views/external.py
+++ b/apiserver/plane/app/views/external/base.py
@@ -8,17 +8,15 @@
 from rest_framework import status
 
 # Django imports
-from django.conf import settings
 
 # Module imports
-from .base import BaseAPIView
+from ..base import BaseAPIView
 from plane.app.permissions import ProjectEntityPermission
 from plane.db.models import Workspace, Project
 from plane.app.serializers import (
     ProjectLiteSerializer,
     WorkspaceLiteSerializer,
 )
-from plane.utils.integrations.github import get_release_notes
 from plane.license.utils.instance_value import get_configuration_value
 
 
@@ -85,12 +83,6 @@ def post(self, request, slug, project_id):
         )
 
 
-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):
         (UNSPLASH_ACCESS_KEY,) = get_configuration_value(
diff --git a/apiserver/plane/app/views/importer.py b/apiserver/plane/app/views/importer.py
deleted file mode 100644
index a15ed36b761..00000000000
--- a/apiserver/plane/app/views/importer.py
+++ /dev/null
@@ -1,558 +0,0 @@
-# Python imports
-import uuid
-
-# Third party imports
-from rest_framework import status
-from rest_framework.response import Response
-
-# Django imports
-from django.db.models import Max, Q
-
-# Module imports
-from plane.app.views import BaseAPIView
-from plane.db.models import (
-    WorkspaceIntegration,
-    Importer,
-    APIToken,
-    Project,
-    State,
-    IssueSequence,
-    Issue,
-    IssueActivity,
-    IssueComment,
-    IssueLink,
-    IssueLabel,
-    Workspace,
-    IssueAssignee,
-    Module,
-    ModuleLink,
-    ModuleIssue,
-    Label,
-)
-from plane.app.serializers import (
-    ImporterSerializer,
-    IssueFlatSerializer,
-    ModuleSerializer,
-)
-from plane.utils.integrations.github import get_github_repo_details
-from plane.utils.importers.jira import (
-    jira_project_issue_summary,
-    is_allowed_hostname,
-)
-from plane.bgtasks.importer_task import service_importer
-from plane.utils.html_processor import strip_tags
-from plane.app.permissions import WorkSpaceAdminPermission
-
-
-class ServiceIssueImportSummaryEndpoint(BaseAPIView):
-    def get(self, request, slug, service):
-        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
-            )
-
-            access_tokens_url = workspace_integration.metadata.get(
-                "access_tokens_url", False
-            )
-
-            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,
-                )
-
-            issue_count, labels, collaborators = get_github_repo_details(
-                access_tokens_url, owner, repo
-            )
-            return Response(
-                {
-                    "issue_count": issue_count,
-                    "labels": labels,
-                    "collaborators": collaborators,
-                },
-                status=status.HTTP_200_OK,
-            )
-
-        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):
-        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 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,
-            )
-
-            service_importer.delay(service, importer.id)
-            serializer = ImporterSerializer(importer)
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-        if service == "jira":
-            data = request.data.get("data", False)
-            metadata = request.data.get("metadata", False)
-            config = request.data.get("config", False)
-
-            cloud_hostname = metadata.get("cloud_hostname", False)
-
-            if not cloud_hostname:
-                return Response(
-                    {"error": "Cloud hostname is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if not is_allowed_hostname(cloud_hostname):
-                return Response(
-                    {"error": "Hostname is not a valid hostname."},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            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,
-                )
-
-            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):
-        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):
-        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)
-
-    def patch(self, request, slug, service, pk):
-        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):
-        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):
-        # 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
-            ).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", [])
-
-        if not len(issues_data):
-            return Response(
-                {"error": "Issue data is required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # 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,
-                )
-            )
-
-            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)
-            ]
-        )
-
-        return Response(
-            {"issues": IssueFlatSerializer(issues, many=True).data},
-            status=status.HTTP_201_CREATED,
-        )
-
-
-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,
-        )
-
-        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,
-            )
diff --git a/apiserver/plane/app/views/inbox.py b/apiserver/plane/app/views/inbox/base.py
similarity index 97%
rename from apiserver/plane/app/views/inbox.py
rename to apiserver/plane/app/views/inbox/base.py
index ed32a14febf..710aa10a227 100644
--- a/apiserver/plane/app/views/inbox.py
+++ b/apiserver/plane/app/views/inbox/base.py
@@ -15,7 +15,7 @@
 from rest_framework.response import Response
 
 # Module imports
-from .base import BaseViewSet
+from ..base import BaseViewSet
 from plane.app.permissions import ProjectBasePermission, ProjectLitePermission
 from plane.db.models import (
     Inbox,
@@ -146,7 +146,8 @@ def get_queryset(self):
                     ArrayAgg(
                         "assignees__id",
                         distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 ),
@@ -213,7 +214,7 @@ def create(self, request, slug, project_id, inbox_id):
             )
 
         # Check for valid priority
-        if not request.data.get("issue", {}).get("priority", "none") in [
+        if request.data.get("issue", {}).get("priority", "none") not in [
             "low",
             "medium",
             "high",
@@ -428,8 +429,11 @@ def retrieve(self, request, slug, project_id, inbox_id, issue_id):
             )
         ).first()
         if issue is None:
-            return Response({"error": "Requested object was not found"}, status=status.HTTP_404_NOT_FOUND)
-        
+            return Response(
+                {"error": "Requested object was not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
         serializer = IssueDetailSerializer(issue)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
diff --git a/apiserver/plane/app/views/integration/__init__.py b/apiserver/plane/app/views/integration/__init__.py
deleted file mode 100644
index ea20d96eafd..00000000000
--- a/apiserver/plane/app/views/integration/__init__.py
+++ /dev/null
@@ -1,9 +0,0 @@
-from .base import IntegrationViewSet, WorkspaceIntegrationViewSet
-from .github import (
-    GithubRepositorySyncViewSet,
-    GithubIssueSyncViewSet,
-    BulkCreateGithubIssueSyncEndpoint,
-    GithubCommentSyncViewSet,
-    GithubRepositoriesEndpoint,
-)
-from .slack import SlackProjectSyncViewSet
diff --git a/apiserver/plane/app/views/integration/base.py b/apiserver/plane/app/views/integration/base.py
deleted file mode 100644
index d757fe47126..00000000000
--- a/apiserver/plane/app/views/integration/base.py
+++ /dev/null
@@ -1,181 +0,0 @@
-# Python improts
-import uuid
-import requests
-
-# Django imports
-from django.contrib.auth.hashers import make_password
-
-# Third party imports
-from rest_framework.response import Response
-from rest_framework import status
-from sentry_sdk import capture_exception
-
-# Module imports
-from plane.app.views import BaseViewSet
-from plane.db.models import (
-    Integration,
-    WorkspaceIntegration,
-    Workspace,
-    User,
-    WorkspaceMember,
-    APIToken,
-)
-from plane.app.serializers import (
-    IntegrationSerializer,
-    WorkspaceIntegrationSerializer,
-)
-from plane.utils.integrations.github import (
-    get_github_metadata,
-    delete_github_installation,
-)
-from plane.app.permissions import WorkSpaceAdminPermission
-from plane.utils.integrations.slack import slack_oauth
-
-
-class IntegrationViewSet(BaseViewSet):
-    serializer_class = IntegrationSerializer
-    model = Integration
-
-    def create(self, request):
-        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": "Verified integrations cannot be updated"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        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)
-
-    def destroy(self, request, pk):
-        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)
-
-
-class WorkspaceIntegrationViewSet(BaseViewSet):
-    serializer_class = WorkspaceIntegrationSerializer
-    model = WorkspaceIntegration
-
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
-
-    def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("integration")
-        )
-
-    def create(self, request, slug, provider):
-        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":
-            code = request.data.get("code", False)
-
-            if not code:
-                return Response(
-                    {"error": "Code is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            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": "Slack could not be installed. 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 "",
-        )
-
-        # Create an API Token for the bot user
-        api_token = APIToken.objects.create(
-            user=bot_user,
-            user_type=1,  # bot user
-            workspace=workspace,
-        )
-
-        workspace_integration = WorkspaceIntegration.objects.create(
-            workspace=workspace,
-            integration=integration,
-            actor=bot_user,
-            api_token=api_token,
-            metadata=metadata,
-            config=config,
-        )
-
-        # 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,
-        )
-
-    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/app/views/integration/github.py b/apiserver/plane/app/views/integration/github.py
deleted file mode 100644
index 2d37c64b078..00000000000
--- a/apiserver/plane/app/views/integration/github.py
+++ /dev/null
@@ -1,202 +0,0 @@
-# Third party imports
-from rest_framework import status
-from rest_framework.response import Response
-from sentry_sdk import capture_exception
-
-# Module imports
-from plane.app.views import BaseViewSet, BaseAPIView
-from plane.db.models import (
-    GithubIssueSync,
-    GithubRepositorySync,
-    GithubRepository,
-    WorkspaceIntegration,
-    ProjectMember,
-    Label,
-    GithubCommentSync,
-    Project,
-)
-from plane.app.serializers import (
-    GithubIssueSyncSerializer,
-    GithubRepositorySyncSerializer,
-    GithubCommentSyncSerializer,
-)
-from plane.utils.integrations.github import get_github_repos
-from plane.app.permissions import (
-    ProjectBasePermission,
-    ProjectEntityPermission,
-)
-
-
-class GithubRepositoriesEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
-    def get(self, request, slug, workspace_integration_id):
-        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,
-            )
-
-        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 = [
-        ProjectBasePermission,
-    ]
-
-    serializer_class = GithubRepositorySyncSerializer
-    model = GithubRepositorySync
-
-    def perform_create(self, serializer):
-        serializer.save(project_id=self.kwargs.get("project_id"))
-
-    def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-        )
-
-    def create(self, request, slug, project_id, workspace_integration_id):
-        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,
-            )
-
-        # Get the workspace integration
-        workspace_integration = WorkspaceIntegration.objects.get(
-            pk=workspace_integration_id
-        )
-
-        # 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,
-        )
-
-        # Create a Label for github
-        label = Label.objects.filter(
-            name="GitHub",
-            project_id=project_id,
-        ).first()
-
-        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 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,
-        )
-
-        # Add bot as a member in the project
-        _ = ProjectMember.objects.get_or_create(
-            member=workspace_integration.actor, role=20, project_id=project_id
-        )
-
-        # Return Response
-        return Response(
-            GithubRepositorySyncSerializer(repo_sync).data,
-            status=status.HTTP_201_CREATED,
-        )
-
-
-class GithubIssueSyncViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    serializer_class = GithubIssueSyncSerializer
-    model = GithubIssueSync
-
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            repository_sync_id=self.kwargs.get("repo_sync_id"),
-        )
-
-
-class BulkCreateGithubIssueSyncEndpoint(BaseAPIView):
-    def post(self, request, slug, project_id, repo_sync_id):
-        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)
-
-
-class GithubCommentSyncViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    serializer_class = GithubCommentSyncSerializer
-    model = GithubCommentSync
-
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            issue_sync_id=self.kwargs.get("issue_sync_id"),
-        )
diff --git a/apiserver/plane/app/views/integration/slack.py b/apiserver/plane/app/views/integration/slack.py
deleted file mode 100644
index c22ee3e52bd..00000000000
--- a/apiserver/plane/app/views/integration/slack.py
+++ /dev/null
@@ -1,96 +0,0 @@
-# Django import
-from django.db import IntegrityError
-
-# Third party imports
-from rest_framework import status
-from rest_framework.response import Response
-from sentry_sdk import capture_exception
-
-# Module imports
-from plane.app.views import BaseViewSet, BaseAPIView
-from plane.db.models import (
-    SlackProjectSync,
-    WorkspaceIntegration,
-    ProjectMember,
-)
-from plane.app.serializers import SlackProjectSyncSerializer
-from plane.app.permissions import (
-    ProjectBasePermission,
-    ProjectEntityPermission,
-)
-from plane.utils.integrations.slack import slack_oauth
-
-
-class SlackProjectSyncViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-    serializer_class = SlackProjectSyncSerializer
-    model = SlackProjectSync
-
-    def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(
-                workspace__slug=self.kwargs.get("slug"),
-                project_id=self.kwargs.get("project_id"),
-            )
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-        )
-
-    def create(self, request, slug, project_id, workspace_integration_id):
-        try:
-            code = request.data.get("code", False)
-
-            if not code:
-                return Response(
-                    {"error": "Code is required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            slack_response = slack_oauth(code=code)
-
-            workspace_integration = WorkspaceIntegration.objects.get(
-                workspace__slug=slug, pk=workspace_integration_id
-            )
-
-            workspace_integration = WorkspaceIntegration.objects.get(
-                pk=workspace_integration_id, workspace__slug=slug
-            )
-            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,
-                project_id=project_id,
-            )
-            _ = 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": "Slack could not be installed. Please try again later"
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
diff --git a/apiserver/plane/app/views/issue.py b/apiserver/plane/app/views/issue.py
deleted file mode 100644
index 14e0b6a9aa9..00000000000
--- a/apiserver/plane/app/views/issue.py
+++ /dev/null
@@ -1,2450 +0,0 @@
-# Python imports
-import json
-import random
-from itertools import chain
-
-# Django imports
-from django.utils import timezone
-from django.db.models import (
-    Prefetch,
-    OuterRef,
-    Func,
-    F,
-    Q,
-    Case,
-    Value,
-    CharField,
-    When,
-    Exists,
-    Max,
-)
-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 import IntegrityError
-from django.contrib.postgres.aggregates import ArrayAgg
-from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
-from django.db.models.functions import Coalesce
-
-# Third Party imports
-from rest_framework.response import Response
-from rest_framework import status
-from rest_framework.parsers import MultiPartParser, FormParser
-
-# Module imports
-from . import BaseViewSet, BaseAPIView, WebhookMixin
-from plane.app.serializers import (
-    IssueActivitySerializer,
-    IssueCommentSerializer,
-    IssuePropertySerializer,
-    IssueSerializer,
-    IssueCreateSerializer,
-    LabelSerializer,
-    IssueFlatSerializer,
-    IssueLinkSerializer,
-    IssueLiteSerializer,
-    IssueAttachmentSerializer,
-    IssueSubscriberSerializer,
-    ProjectMemberLiteSerializer,
-    IssueReactionSerializer,
-    CommentReactionSerializer,
-    IssueRelationSerializer,
-    RelatedIssueSerializer,
-    IssueDetailSerializer,
-)
-from plane.app.permissions import (
-    ProjectEntityPermission,
-    WorkSpaceAdminPermission,
-    ProjectMemberPermission,
-    ProjectLitePermission,
-)
-from plane.db.models import (
-    Project,
-    Issue,
-    IssueActivity,
-    IssueComment,
-    IssueProperty,
-    Label,
-    IssueLink,
-    IssueAttachment,
-    IssueSubscriber,
-    ProjectMember,
-    IssueReaction,
-    CommentReaction,
-    IssueRelation,
-)
-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 collections import defaultdict
-
-
-class IssueListEndpoint(BaseAPIView):
-
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def get(self, request, slug, project_id):
-        issue_ids = request.GET.get("issues", False)
-
-        if not issue_ids:
-            return Response(
-                {"error": "Issues are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        issue_ids = [issue_id for issue_id in issue_ids.split(",") if issue_id != ""]
-
-        queryset = (
-            Issue.issue_objects.filter(
-                workspace__slug=slug, project_id=project_id, pk__in=issue_ids
-            )
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_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")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-        ).distinct()
-
-        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 = queryset.filter(**filters)
-
-        # 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)
-
-        if self.fields or self.expand:
-            issues = IssueSerializer(
-                queryset, many=True, fields=self.fields, expand=self.expand
-            ).data
-        else:
-            issues = issue_queryset.values(
-                "id",
-                "name",
-                "state_id",
-                "sort_order",
-                "completed_at",
-                "estimate_point",
-                "priority",
-                "start_date",
-                "target_date",
-                "sequence_id",
-                "project_id",
-                "parent_id",
-                "cycle_id",
-                "module_ids",
-                "label_ids",
-                "assignee_ids",
-                "sub_issues_count",
-                "created_at",
-                "updated_at",
-                "created_by",
-                "updated_by",
-                "attachment_count",
-                "link_count",
-                "is_draft",
-                "archived_at",
-            )
-        return Response(issues, status=status.HTTP_200_OK)
-
-
-class IssueViewSet(WebhookMixin, BaseViewSet):
-    def get_serializer_class(self):
-        return (
-            IssueCreateSerializer
-            if self.action in ["create", "update", "partial_update"]
-            else IssueSerializer
-        )
-
-    model = Issue
-    webhook_event = "issue"
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    search_fields = [
-        "name",
-    ]
-
-    filterset_fields = [
-        "state__name",
-        "assignees__id",
-        "workspace__id",
-    ]
-
-    def get_queryset(self):
-        return (
-            Issue.issue_objects.filter(
-                project_id=self.kwargs.get("project_id")
-            )
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_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")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-        ).distinct()
-
-    @method_decorator(gzip_page)
-    def list(self, request, slug, project_id):
-        filters = issue_filters(request.query_params, "GET")
-        order_by_param = request.GET.get("order_by", "-created_at")
-
-        issue_queryset = self.get_queryset().filter(**filters)
-        # Custom ordering for priority and state
-        priority_order = ["urgent", "high", "medium", "low", "none"]
-        state_order = [
-            "backlog",
-            "unstarted",
-            "started",
-            "completed",
-            "cancelled",
-        ]
-
-        # 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)
-
-        # Only use serializer when expand or fields else return by values
-        if self.expand or self.fields:
-            issues = IssueSerializer(
-                issue_queryset,
-                many=True,
-                fields=self.fields,
-                expand=self.expand,
-            ).data
-        else:
-            issues = issue_queryset.values(
-                "id",
-                "name",
-                "state_id",
-                "sort_order",
-                "completed_at",
-                "estimate_point",
-                "priority",
-                "start_date",
-                "target_date",
-                "sequence_id",
-                "project_id",
-                "parent_id",
-                "cycle_id",
-                "module_ids",
-                "label_ids",
-                "assignee_ids",
-                "sub_issues_count",
-                "created_at",
-                "updated_at",
-                "created_by",
-                "updated_by",
-                "attachment_count",
-                "link_count",
-                "is_draft",
-                "archived_at",
-            )
-        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()
-
-            # 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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            issue = (
-                self.get_queryset()
-                .filter(pk=serializer.data["id"])
-                .values(
-                    "id",
-                    "name",
-                    "state_id",
-                    "sort_order",
-                    "completed_at",
-                    "estimate_point",
-                    "priority",
-                    "start_date",
-                    "target_date",
-                    "sequence_id",
-                    "project_id",
-                    "parent_id",
-                    "cycle_id",
-                    "module_ids",
-                    "label_ids",
-                    "assignee_ids",
-                    "sub_issues_count",
-                    "created_at",
-                    "updated_at",
-                    "created_by",
-                    "updated_by",
-                    "attachment_count",
-                    "link_count",
-                    "is_draft",
-                    "archived_at",
-                )
-                .first()
-            )
-            return Response(issue, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def retrieve(self, request, slug, project_id, pk=None):
-        issue = (
-            self.get_queryset()
-            .filter(pk=pk)
-            .prefetch_related(
-                Prefetch(
-                    "issue_reactions",
-                    queryset=IssueReaction.objects.select_related(
-                        "issue", "actor"
-                    ),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_attachment",
-                    queryset=IssueAttachment.objects.select_related("issue"),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_link",
-                    queryset=IssueLink.objects.select_related("created_by"),
-                )
-            )
-            .annotate(
-                is_subscribed=Exists(
-                    IssueSubscriber.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        issue_id=OuterRef("pk"),
-                        subscriber=request.user,
-                    )
-                )
-            )
-        ).first()
-        if not issue:
-            return Response(
-                {"error": "The required object does not exist."},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-
-        serializer = IssueDetailSerializer(issue, expand=self.expand)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-    def partial_update(self, request, slug, project_id, pk=None):
-        issue = self.get_queryset().filter(pk=pk).first()
-
-        if not issue:
-            return Response(
-                {"error": "Issue not found"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-
-        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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            issue = self.get_queryset().filter(pk=pk).first()
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        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
-        )
-        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={},
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-# TODO: deprecated remove once confirmed
-class UserWorkSpaceIssues(BaseAPIView):
-    @method_decorator(gzip_page)
-    def get(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 = (
-            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")
-            )
-            .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(),
-                )
-            ).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)
-
-
-# TODO: deprecated remove once confirmed
-class WorkSpaceIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
-
-    @method_decorator(gzip_page)
-    def get(self, request, slug):
-        issues = (
-            Issue.issue_objects.filter(workspace__slug=slug)
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .order_by("-created_at")
-        )
-        serializer = IssueSerializer(issues, many=True)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class IssueActivityEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    @method_decorator(gzip_page)
-    def get(self, request, slug, project_id, issue_id):
-        filters = {}
-        if request.GET.get("created_at__gt", None) is not None:
-            filters = {"created_at__gt": request.GET.get("created_at__gt")}
-
-        issue_activities = (
-            IssueActivity.objects.filter(issue_id=issue_id)
-            .filter(
-                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-                workspace__slug=slug,
-            )
-            .filter(**filters)
-            .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,
-                project__project_projectmember__is_active=True,
-                workspace__slug=slug,
-            )
-            .filter(**filters)
-            .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
-
-        if request.GET.get("activity_type", None) == "issue-property":
-            return Response(issue_activities, status=status.HTTP_200_OK)
-
-        if request.GET.get("activity_type", None) == "issue-comment":
-            return Response(issue_comments, status=status.HTTP_200_OK)
-
-        result_list = sorted(
-            chain(issue_activities, issue_comments),
-            key=lambda instance: instance["created_at"],
-        )
-
-        return Response(result_list, status=status.HTTP_200_OK)
-
-
-class IssueCommentViewSet(WebhookMixin, BaseViewSet):
-    serializer_class = IssueCommentSerializer
-    model = IssueComment
-    webhook_event = "issue_comment"
-    permission_classes = [
-        ProjectLitePermission,
-    ]
-
-    filterset_fields = [
-        "issue__id",
-        "workspace__id",
-    ]
-
-    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(issue_id=self.kwargs.get("issue_id"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .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,
-                        is_active=True,
-                    )
-                )
-            )
-            .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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def 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,
-        )
-        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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            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_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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class IssueUserDisplayPropertyEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectLitePermission,
-    ]
-
-    def patch(self, request, slug, project_id):
-        issue_property = IssueProperty.objects.get(
-            user=request.user,
-            project_id=project_id,
-        )
-
-        issue_property.filters = request.data.get(
-            "filters", issue_property.filters
-        )
-        issue_property.display_filters = request.data.get(
-            "display_filters", issue_property.display_filters
-        )
-        issue_property.display_properties = request.data.get(
-            "display_properties", issue_property.display_properties
-        )
-        issue_property.save()
-        serializer = IssuePropertySerializer(issue_property)
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-    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):
-    serializer_class = LabelSerializer
-    model = Label
-    permission_classes = [
-        ProjectMemberPermission,
-    ]
-
-    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(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("parent")
-            .distinct()
-            .order_by("sort_order")
-        )
-
-
-class BulkDeleteIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def delete(self, request, slug, project_id):
-        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
-        )
-
-        total_issues = len(issues)
-
-        issues.delete()
-
-        return Response(
-            {"message": f"{total_issues} issues were deleted"},
-            status=status.HTTP_200_OK,
-        )
-
-
-class SubIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    @method_decorator(gzip_page)
-    def get(self, request, slug, project_id, issue_id):
-        sub_issues = (
-            Issue.issue_objects.filter(
-                parent_id=issue_id, workspace__slug=slug
-            )
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_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")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-            .annotate(state_group=F("state__group"))
-        )
-
-        # create's a dict with state group name with their respective issue id's
-        result = defaultdict(list)
-        for sub_issue in sub_issues:
-            result[sub_issue.state_group].append(str(sub_issue.id))
-
-        sub_issues = sub_issues.values(
-            "id",
-            "name",
-            "state_id",
-            "sort_order",
-            "completed_at",
-            "estimate_point",
-            "priority",
-            "start_date",
-            "target_date",
-            "sequence_id",
-            "project_id",
-            "parent_id",
-            "cycle_id",
-            "module_ids",
-            "label_ids",
-            "assignee_ids",
-            "sub_issues_count",
-            "created_at",
-            "updated_at",
-            "created_by",
-            "updated_by",
-            "attachment_count",
-            "link_count",
-            "is_draft",
-            "archived_at",
-        )
-        return Response(
-            {
-                "sub_issues": sub_issues,
-                "state_distribution": result,
-            },
-            status=status.HTTP_200_OK,
-        )
-
-    # Assign multiple sub issues
-    def post(self, request, slug, project_id, issue_id):
-        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,
-            )
-
-        sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
-
-        for sub_issue in sub_issues:
-            sub_issue.parent = parent_issue
-
-        _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
-
-        updated_sub_issues = Issue.issue_objects.filter(
-            id__in=sub_issue_ids
-        ).annotate(state_group=F("state__group"))
-
-        # 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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            for sub_issue_id in sub_issue_ids
-        ]
-
-        # create's a dict with state group name with their respective issue id's
-        result = defaultdict(list)
-        for sub_issue in updated_sub_issues:
-            result[sub_issue.state_group].append(str(sub_issue.id))
-
-        serializer = IssueSerializer(
-            updated_sub_issues,
-            many=True,
-        )
-        return Response(
-            {
-                "sub_issues": serializer.data,
-                "state_distribution": result,
-            },
-            status=status.HTTP_200_OK,
-        )
-
-
-class IssueLinkViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    model = IssueLink
-    serializer_class = IssueLinkSerializer
-
-    def get_queryset(self):
-        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"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .order_by("-created_at")
-            .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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def 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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        issue_link.delete()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class BulkCreateIssueLabelsEndpoint(BaseAPIView):
-    def post(self, request, slug, project_id):
-        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,
-        )
-
-
-class IssueAttachmentEndpoint(BaseAPIView):
-    serializer_class = IssueAttachmentSerializer
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-    model = IssueAttachment
-    parser_classes = (MultiPartParser, FormParser)
-
-    def post(self, request, slug, project_id, issue_id):
-        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,
-                ),
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-    def get(self, request, slug, project_id, issue_id):
-        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):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-    serializer_class = IssueFlatSerializer
-    model = Issue
-
-    def get_queryset(self):
-        return (
-            Issue.objects.annotate(
-                sub_issues_count=Issue.objects.filter(parent=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .filter(archived_at__isnull=False)
-            .filter(project_id=self.kwargs.get("project_id"))
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_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")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-        )
-
-    @method_decorator(gzip_page)
-    def list(self, request, slug, project_id):
-        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)
-
-        # 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)
-
-        issue_queryset = (
-            issue_queryset
-            if show_sub_issues == "true"
-            else issue_queryset.filter(parent__isnull=True)
-        )
-        if self.expand or self.fields:
-            issues = IssueSerializer(
-                issue_queryset,
-                many=True,
-                fields=self.fields,
-            ).data
-        else:
-            issues = issue_queryset.values(
-                "id",
-                "name",
-                "state_id",
-                "sort_order",
-                "completed_at",
-                "estimate_point",
-                "priority",
-                "start_date",
-                "target_date",
-                "sequence_id",
-                "project_id",
-                "parent_id",
-                "cycle_id",
-                "module_ids",
-                "label_ids",
-                "assignee_ids",
-                "sub_issues_count",
-                "created_at",
-                "updated_at",
-                "created_by",
-                "updated_by",
-                "attachment_count",
-                "link_count",
-                "is_draft",
-                "archived_at",
-            )
-        return Response(issues, status=status.HTTP_200_OK)
-
-    def retrieve(self, request, slug, project_id, pk=None):
-        issue = (
-            self.get_queryset()
-            .filter(pk=pk)
-            .prefetch_related(
-                Prefetch(
-                    "issue_reactions",
-                    queryset=IssueReaction.objects.select_related(
-                        "issue", "actor"
-                    ),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_attachment",
-                    queryset=IssueAttachment.objects.select_related("issue"),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_link",
-                    queryset=IssueLink.objects.select_related("created_by"),
-                )
-            )
-            .annotate(
-                is_subscribed=Exists(
-                    IssueSubscriber.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        issue_id=OuterRef("pk"),
-                        subscriber=request.user,
-                    )
-                )
-            )
-        ).first()
-        if not issue:
-            return Response(
-                {"error": "The required object does not exist."},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        serializer = IssueDetailSerializer(issue, expand=self.expand)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-    def archive(self, request, slug, project_id, pk=None):
-        issue = Issue.issue_objects.get(
-            workspace__slug=slug,
-            project_id=project_id,
-            pk=pk,
-        )
-        if issue.state.group not in ["completed", "cancelled"]:
-            return Response(
-                {"error": "Can only archive completed or cancelled state group issue"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        issue_activity.delay(
-            type="issue.activity.updated",
-            requested_data=json.dumps({"archived_at": str(timezone.now().date()), "automation": False}),
-            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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        issue.archived_at = timezone.now().date()
-        issue.save()
-
-        return Response({"archived_at": str(issue.archived_at)}, status=status.HTTP_200_OK)
-    
-
-    def unarchive(self, request, slug, project_id, pk=None):
-        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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        issue.archived_at = None
-        issue.save()
-
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class IssueSubscriberViewSet(BaseViewSet):
-    serializer_class = IssueSubscriberSerializer
-    model = IssueSubscriber
-
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def get_permissions(self):
-        if self.action in ["subscribe", "unsubscribe", "subscription_status"]:
-            self.permission_classes = [
-                ProjectLitePermission,
-            ]
-        else:
-            self.permission_classes = [
-                ProjectEntityPermission,
-            ]
-
-        return super(IssueSubscriberViewSet, self).get_permissions()
-
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            issue_id=self.kwargs.get("issue_id"),
-        )
-
-    def get_queryset(self):
-        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"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .order_by("-created_at")
-            .distinct()
-        )
-
-    def list(self, request, slug, project_id, issue_id):
-        members = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            project_id=project_id,
-            is_active=True,
-        ).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):
-        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):
-        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,
-        )
-        serializer = IssueSubscriberSerializer(subscriber)
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-    def unsubscribe(self, request, slug, project_id, issue_id):
-        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):
-        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):
-    serializer_class = IssueReactionSerializer
-    model = IssueReaction
-    permission_classes = [
-        ProjectLitePermission,
-    ]
-
-    def get_queryset(self):
-        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"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .order_by("-created_at")
-            .distinct()
-        )
-
-    def create(self, request, slug, project_id, issue_id):
-        serializer = IssueReactionSerializer(data=request.data)
-        if serializer.is_valid():
-            serializer.save(
-                issue_id=issue_id,
-                project_id=project_id,
-                actor=request.user,
-            )
-            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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def 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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        issue_reaction.delete()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class CommentReactionViewSet(BaseViewSet):
-    serializer_class = CommentReactionSerializer
-    model = CommentReaction
-    permission_classes = [
-        ProjectLitePermission,
-    ]
-
-    def get_queryset(self):
-        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"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .order_by("-created_at")
-            .distinct()
-        )
-
-    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,
-            )
-            issue_activity.delay(
-                type="comment_reaction.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=None,
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        comment_reaction.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(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,
-                project__project_projectmember__is_active=True,
-            )
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("issue")
-            .distinct()
-        )
-
-    def list(self, request, slug, project_id, issue_id):
-        issue_relations = (
-            IssueRelation.objects.filter(
-                Q(issue_id=issue_id) | Q(related_issue=issue_id)
-            )
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("issue")
-            .order_by("-created_at")
-            .distinct()
-        )
-
-        blocking_issues = issue_relations.filter(
-            relation_type="blocked_by", related_issue_id=issue_id
-        )
-        blocked_by_issues = issue_relations.filter(
-            relation_type="blocked_by", issue_id=issue_id
-        )
-        duplicate_issues = issue_relations.filter(
-            issue_id=issue_id, relation_type="duplicate"
-        )
-        duplicate_issues_related = issue_relations.filter(
-            related_issue_id=issue_id, relation_type="duplicate"
-        )
-        relates_to_issues = issue_relations.filter(
-            issue_id=issue_id, relation_type="relates_to"
-        )
-        relates_to_issues_related = issue_relations.filter(
-            related_issue_id=issue_id, relation_type="relates_to"
-        )
-
-        blocked_by_issues_serialized = IssueRelationSerializer(
-            blocked_by_issues, many=True
-        ).data
-        duplicate_issues_serialized = IssueRelationSerializer(
-            duplicate_issues, many=True
-        ).data
-        relates_to_issues_serialized = IssueRelationSerializer(
-            relates_to_issues, many=True
-        ).data
-
-        # revere relation for blocked by issues
-        blocking_issues_serialized = RelatedIssueSerializer(
-            blocking_issues, many=True
-        ).data
-        # reverse relation for duplicate issues
-        duplicate_issues_related_serialized = RelatedIssueSerializer(
-            duplicate_issues_related, many=True
-        ).data
-        # reverse relation for related issues
-        relates_to_issues_related_serialized = RelatedIssueSerializer(
-            relates_to_issues_related, many=True
-        ).data
-
-        response_data = {
-            "blocking": blocking_issues_serialized,
-            "blocked_by": blocked_by_issues_serialized,
-            "duplicate": duplicate_issues_serialized
-            + duplicate_issues_related_serialized,
-            "relates_to": relates_to_issues_serialized
-            + relates_to_issues_related_serialized,
-        }
-
-        return Response(response_data, status=status.HTTP_200_OK)
-
-    def create(self, request, slug, project_id, issue_id):
-        relation_type = request.data.get("relation_type", None)
-        issues = request.data.get("issues", [])
-        project = Project.objects.get(pk=project_id)
-
-        issue_relation = IssueRelation.objects.bulk_create(
-            [
-                IssueRelation(
-                    issue_id=(
-                        issue if relation_type == "blocking" else issue_id
-                    ),
-                    related_issue_id=(
-                        issue_id if relation_type == "blocking" else issue
-                    ),
-                    relation_type=(
-                        "blocked_by"
-                        if relation_type == "blocking"
-                        else relation_type
-                    ),
-                    project_id=project_id,
-                    workspace_id=project.workspace_id,
-                    created_by=request.user,
-                    updated_by=request.user,
-                )
-                for issue in issues
-            ],
-            batch_size=10,
-            ignore_conflicts=True,
-        )
-
-        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()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-
-        if relation_type == "blocking":
-            return Response(
-                RelatedIssueSerializer(issue_relation, many=True).data,
-                status=status.HTTP_201_CREATED,
-            )
-        else:
-            return Response(
-                IssueRelationSerializer(issue_relation, many=True).data,
-                status=status.HTTP_201_CREATED,
-            )
-
-    def remove_relation(self, request, slug, project_id, issue_id):
-        relation_type = request.data.get("relation_type", None)
-        related_issue = request.data.get("related_issue", None)
-
-        if relation_type == "blocking":
-            issue_relation = IssueRelation.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                issue_id=related_issue,
-                related_issue_id=issue_id,
-            )
-        else:
-            issue_relation = IssueRelation.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                issue_id=issue_id,
-                related_issue_id=related_issue,
-            )
-        current_instance = json.dumps(
-            IssueRelationSerializer(issue_relation).data,
-            cls=DjangoJSONEncoder,
-        )
-        issue_relation.delete()
-        issue_activity.delay(
-            type="issue_relation.activity.deleted",
-            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=current_instance,
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class IssueDraftViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-    serializer_class = IssueFlatSerializer
-    model = Issue
-
-    def get_queryset(self):
-        return (
-            Issue.objects.filter(project_id=self.kwargs.get("project_id"))
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(is_draft=True)
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_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")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-        ).distinct()
-
-    @method_decorator(gzip_page)
-    def list(self, request, slug, project_id):
-        filters = issue_filters(request.query_params, "GET")
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
-
-        # 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)
-
-        # 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)
-
-        # Only use serializer when expand else return by values
-        if self.expand or self.fields:
-            issues = IssueSerializer(
-                issue_queryset,
-                many=True,
-                fields=self.fields,
-                expand=self.expand,
-            ).data
-        else:
-            issues = issue_queryset.values(
-                "id",
-                "name",
-                "state_id",
-                "sort_order",
-                "completed_at",
-                "estimate_point",
-                "priority",
-                "start_date",
-                "target_date",
-                "sequence_id",
-                "project_id",
-                "parent_id",
-                "cycle_id",
-                "module_ids",
-                "label_ids",
-                "assignee_ids",
-                "sub_issues_count",
-                "created_at",
-                "updated_at",
-                "created_by",
-                "updated_by",
-                "attachment_count",
-                "link_count",
-                "is_draft",
-                "archived_at",
-            )
-        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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            issue = (
-                self.get_queryset().filter(pk=serializer.data["id"]).first()
-            )
-            return Response(
-                IssueSerializer(issue).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 = self.get_queryset().filter(pk=pk).first()
-
-        if not issue:
-            return Response(
-                {"error": "Issue does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-
-        serializer = IssueCreateSerializer(issue, data=request.data, partial=True)
-
-        if serializer.is_valid():
-            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()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def retrieve(self, request, slug, project_id, pk=None):
-        issue = (
-            self.get_queryset()
-            .filter(pk=pk)
-            .prefetch_related(
-                Prefetch(
-                    "issue_reactions",
-                    queryset=IssueReaction.objects.select_related(
-                        "issue", "actor"
-                    ),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_attachment",
-                    queryset=IssueAttachment.objects.select_related("issue"),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_link",
-                    queryset=IssueLink.objects.select_related("created_by"),
-                )
-            )
-            .annotate(
-                is_subscribed=Exists(
-                    IssueSubscriber.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        issue_id=OuterRef("pk"),
-                        subscriber=request.user,
-                    )
-                )
-            )
-        ).first()
-
-        if not issue:
-            return Response(
-                {"error": "The required object does not exist."},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        serializer = IssueDetailSerializer(issue, expand=self.expand)
-        return Response(serializer.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
-        )
-        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={},
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/activity.py b/apiserver/plane/app/views/issue/activity.py
new file mode 100644
index 00000000000..6815b254ed7
--- /dev/null
+++ b/apiserver/plane/app/views/issue/activity.py
@@ -0,0 +1,87 @@
+# Python imports
+from itertools import chain
+
+# Django imports
+from django.db.models import (
+    Prefetch,
+    Q,
+)
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseAPIView
+from plane.app.serializers import (
+    IssueActivitySerializer,
+    IssueCommentSerializer,
+)
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import (
+    IssueActivity,
+    IssueComment,
+    CommentReaction,
+)
+
+
+class IssueActivityEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    @method_decorator(gzip_page)
+    def get(self, request, slug, project_id, issue_id):
+        filters = {}
+        if request.GET.get("created_at__gt", None) is not None:
+            filters = {"created_at__gt": request.GET.get("created_at__gt")}
+
+        issue_activities = (
+            IssueActivity.objects.filter(issue_id=issue_id)
+            .filter(
+                ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+                workspace__slug=slug,
+            )
+            .filter(**filters)
+            .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,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+                workspace__slug=slug,
+            )
+            .filter(**filters)
+            .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
+
+        if request.GET.get("activity_type", None) == "issue-property":
+            return Response(issue_activities, status=status.HTTP_200_OK)
+
+        if request.GET.get("activity_type", None) == "issue-comment":
+            return Response(issue_comments, status=status.HTTP_200_OK)
+
+        result_list = sorted(
+            chain(issue_activities, issue_comments),
+            key=lambda instance: instance["created_at"],
+        )
+
+        return Response(result_list, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/issue/archive.py b/apiserver/plane/app/views/issue/archive.py
new file mode 100644
index 00000000000..d9274ae4fa3
--- /dev/null
+++ b/apiserver/plane/app/views/issue/archive.py
@@ -0,0 +1,348 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.db.models import (
+    Prefetch,
+    OuterRef,
+    Func,
+    F,
+    Q,
+    Case,
+    Value,
+    CharField,
+    When,
+    Exists,
+    Max,
+    UUIDField,
+)
+from django.core.serializers.json import DjangoJSONEncoder
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models.functions import Coalesce
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet
+from plane.app.serializers import (
+    IssueSerializer,
+    IssueFlatSerializer,
+    IssueDetailSerializer,
+)
+from plane.app.permissions import (
+    ProjectEntityPermission,
+)
+from plane.db.models import (
+    Issue,
+    IssueLink,
+    IssueAttachment,
+    IssueSubscriber,
+    IssueReaction,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+from plane.utils.issue_filters import issue_filters
+
+
+class IssueArchiveViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+    serializer_class = IssueFlatSerializer
+    model = Issue
+
+    def get_queryset(self):
+        return (
+            Issue.objects.annotate(
+                sub_issues_count=Issue.objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(archived_at__isnull=False)
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+        )
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id):
+        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)
+
+        # 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)
+
+        issue_queryset = (
+            issue_queryset
+            if show_sub_issues == "true"
+            else issue_queryset.filter(parent__isnull=True)
+        )
+        if self.expand or self.fields:
+            issues = IssueSerializer(
+                issue_queryset,
+                many=True,
+                fields=self.fields,
+            ).data
+        else:
+            issues = issue_queryset.values(
+                "id",
+                "name",
+                "state_id",
+                "sort_order",
+                "completed_at",
+                "estimate_point",
+                "priority",
+                "start_date",
+                "target_date",
+                "sequence_id",
+                "project_id",
+                "parent_id",
+                "cycle_id",
+                "module_ids",
+                "label_ids",
+                "assignee_ids",
+                "sub_issues_count",
+                "created_at",
+                "updated_at",
+                "created_by",
+                "updated_by",
+                "attachment_count",
+                "link_count",
+                "is_draft",
+                "archived_at",
+            )
+        return Response(issues, status=status.HTTP_200_OK)
+
+    def retrieve(self, request, slug, project_id, pk=None):
+        issue = (
+            self.get_queryset()
+            .filter(pk=pk)
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related(
+                        "issue", "actor"
+                    ),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_attachment",
+                    queryset=IssueAttachment.objects.select_related("issue"),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_link",
+                    queryset=IssueLink.objects.select_related("created_by"),
+                )
+            )
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        issue_id=OuterRef("pk"),
+                        subscriber=request.user,
+                    )
+                )
+            )
+        ).first()
+        if not issue:
+            return Response(
+                {"error": "The required object does not exist."},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+        serializer = IssueDetailSerializer(issue, expand=self.expand)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def archive(self, request, slug, project_id, pk=None):
+        issue = Issue.issue_objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            pk=pk,
+        )
+        if issue.state.group not in ["completed", "cancelled"]:
+            return Response(
+                {
+                    "error": "Can only archive completed or cancelled state group issue"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        issue_activity.delay(
+            type="issue.activity.updated",
+            requested_data=json.dumps(
+                {
+                    "archived_at": str(timezone.now().date()),
+                    "automation": False,
+                }
+            ),
+            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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        issue.archived_at = timezone.now().date()
+        issue.save()
+
+        return Response(
+            {"archived_at": str(issue.archived_at)}, status=status.HTTP_200_OK
+        )
+
+    def unarchive(self, request, slug, project_id, pk=None):
+        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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        issue.archived_at = None
+        issue.save()
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/attachment.py b/apiserver/plane/app/views/issue/attachment.py
new file mode 100644
index 00000000000..c2b8ad6ff7b
--- /dev/null
+++ b/apiserver/plane/app/views/issue/attachment.py
@@ -0,0 +1,73 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+from rest_framework.parsers import MultiPartParser, FormParser
+
+# Module imports
+from .. import BaseAPIView
+from plane.app.serializers import IssueAttachmentSerializer
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import IssueAttachment
+from plane.bgtasks.issue_activites_task import issue_activity
+
+
+class IssueAttachmentEndpoint(BaseAPIView):
+    serializer_class = IssueAttachmentSerializer
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+    model = IssueAttachment
+    parser_classes = (MultiPartParser, FormParser)
+
+    def post(self, request, slug, project_id, issue_id):
+        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,
+                ),
+                epoch=int(timezone.now().timestamp()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def get(self, request, slug, project_id, issue_id):
+        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)
diff --git a/apiserver/plane/app/views/issue/base.py b/apiserver/plane/app/views/issue/base.py
new file mode 100644
index 00000000000..a27f52c748a
--- /dev/null
+++ b/apiserver/plane/app/views/issue/base.py
@@ -0,0 +1,661 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.db.models import (
+    Prefetch,
+    OuterRef,
+    Func,
+    F,
+    Q,
+    Case,
+    Value,
+    CharField,
+    When,
+    Exists,
+    Max,
+)
+from django.core.serializers.json import DjangoJSONEncoder
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models import UUIDField
+from django.db.models.functions import Coalesce
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet, BaseAPIView, WebhookMixin
+from plane.app.serializers import (
+    IssuePropertySerializer,
+    IssueSerializer,
+    IssueCreateSerializer,
+    IssueDetailSerializer,
+)
+from plane.app.permissions import (
+    ProjectEntityPermission,
+    ProjectLitePermission,
+)
+from plane.db.models import (
+    Project,
+    Issue,
+    IssueProperty,
+    IssueLink,
+    IssueAttachment,
+    IssueSubscriber,
+    IssueReaction,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+from plane.utils.issue_filters import issue_filters
+
+
+class IssueListEndpoint(BaseAPIView):
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get(self, request, slug, project_id):
+        issue_ids = request.GET.get("issues", False)
+
+        if not issue_ids:
+            return Response(
+                {"error": "Issues are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        issue_ids = [
+            issue_id for issue_id in issue_ids.split(",") if issue_id != ""
+        ]
+
+        queryset = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug, project_id=project_id, pk__in=issue_ids
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+        ).distinct()
+
+        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 = queryset.filter(**filters)
+
+        # 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)
+
+        if self.fields or self.expand:
+            issues = IssueSerializer(
+                queryset, many=True, fields=self.fields, expand=self.expand
+            ).data
+        else:
+            issues = issue_queryset.values(
+                "id",
+                "name",
+                "state_id",
+                "sort_order",
+                "completed_at",
+                "estimate_point",
+                "priority",
+                "start_date",
+                "target_date",
+                "sequence_id",
+                "project_id",
+                "parent_id",
+                "cycle_id",
+                "module_ids",
+                "label_ids",
+                "assignee_ids",
+                "sub_issues_count",
+                "created_at",
+                "updated_at",
+                "created_by",
+                "updated_by",
+                "attachment_count",
+                "link_count",
+                "is_draft",
+                "archived_at",
+            )
+        return Response(issues, status=status.HTTP_200_OK)
+
+
+class IssueViewSet(WebhookMixin, BaseViewSet):
+    def get_serializer_class(self):
+        return (
+            IssueCreateSerializer
+            if self.action in ["create", "update", "partial_update"]
+            else IssueSerializer
+        )
+
+    model = Issue
+    webhook_event = "issue"
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    search_fields = [
+        "name",
+    ]
+
+    filterset_fields = [
+        "state__name",
+        "assignees__id",
+        "workspace__id",
+    ]
+
+    def get_queryset(self):
+        return (
+            Issue.issue_objects.filter(
+                project_id=self.kwargs.get("project_id")
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+        ).distinct()
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id):
+        filters = issue_filters(request.query_params, "GET")
+        order_by_param = request.GET.get("order_by", "-created_at")
+
+        issue_queryset = self.get_queryset().filter(**filters)
+        # Custom ordering for priority and state
+        priority_order = ["urgent", "high", "medium", "low", "none"]
+        state_order = [
+            "backlog",
+            "unstarted",
+            "started",
+            "completed",
+            "cancelled",
+        ]
+
+        # 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)
+
+        # Only use serializer when expand or fields else return by values
+        if self.expand or self.fields:
+            issues = IssueSerializer(
+                issue_queryset,
+                many=True,
+                fields=self.fields,
+                expand=self.expand,
+            ).data
+        else:
+            issues = issue_queryset.values(
+                "id",
+                "name",
+                "state_id",
+                "sort_order",
+                "completed_at",
+                "estimate_point",
+                "priority",
+                "start_date",
+                "target_date",
+                "sequence_id",
+                "project_id",
+                "parent_id",
+                "cycle_id",
+                "module_ids",
+                "label_ids",
+                "assignee_ids",
+                "sub_issues_count",
+                "created_at",
+                "updated_at",
+                "created_by",
+                "updated_by",
+                "attachment_count",
+                "link_count",
+                "is_draft",
+                "archived_at",
+            )
+        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()
+
+            # 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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            issue = (
+                self.get_queryset()
+                .filter(pk=serializer.data["id"])
+                .values(
+                    "id",
+                    "name",
+                    "state_id",
+                    "sort_order",
+                    "completed_at",
+                    "estimate_point",
+                    "priority",
+                    "start_date",
+                    "target_date",
+                    "sequence_id",
+                    "project_id",
+                    "parent_id",
+                    "cycle_id",
+                    "module_ids",
+                    "label_ids",
+                    "assignee_ids",
+                    "sub_issues_count",
+                    "created_at",
+                    "updated_at",
+                    "created_by",
+                    "updated_by",
+                    "attachment_count",
+                    "link_count",
+                    "is_draft",
+                    "archived_at",
+                )
+                .first()
+            )
+            return Response(issue, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def retrieve(self, request, slug, project_id, pk=None):
+        issue = (
+            self.get_queryset()
+            .filter(pk=pk)
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related(
+                        "issue", "actor"
+                    ),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_attachment",
+                    queryset=IssueAttachment.objects.select_related("issue"),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_link",
+                    queryset=IssueLink.objects.select_related("created_by"),
+                )
+            )
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        issue_id=OuterRef("pk"),
+                        subscriber=request.user,
+                    )
+                )
+            )
+        ).first()
+        if not issue:
+            return Response(
+                {"error": "The required object does not exist."},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        serializer = IssueDetailSerializer(issue, expand=self.expand)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def partial_update(self, request, slug, project_id, pk=None):
+        issue = self.get_queryset().filter(pk=pk).first()
+
+        if not issue:
+            return Response(
+                {"error": "Issue not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            issue = self.get_queryset().filter(pk=pk).first()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        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
+        )
+        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={},
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class IssueUserDisplayPropertyEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def patch(self, request, slug, project_id):
+        issue_property = IssueProperty.objects.get(
+            user=request.user,
+            project_id=project_id,
+        )
+
+        issue_property.filters = request.data.get(
+            "filters", issue_property.filters
+        )
+        issue_property.display_filters = request.data.get(
+            "display_filters", issue_property.display_filters
+        )
+        issue_property.display_properties = request.data.get(
+            "display_properties", issue_property.display_properties
+        )
+        issue_property.save()
+        serializer = IssuePropertySerializer(issue_property)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    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 BulkDeleteIssuesEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def delete(self, request, slug, project_id):
+        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
+        )
+
+        total_issues = len(issues)
+
+        issues.delete()
+
+        return Response(
+            {"message": f"{total_issues} issues were deleted"},
+            status=status.HTTP_200_OK,
+        )
diff --git a/apiserver/plane/app/views/issue/comment.py b/apiserver/plane/app/views/issue/comment.py
new file mode 100644
index 00000000000..0d61f132576
--- /dev/null
+++ b/apiserver/plane/app/views/issue/comment.py
@@ -0,0 +1,221 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.db.models import Exists
+from django.core.serializers.json import DjangoJSONEncoder
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet, WebhookMixin
+from plane.app.serializers import (
+    IssueCommentSerializer,
+    CommentReactionSerializer,
+)
+from plane.app.permissions import ProjectLitePermission
+from plane.db.models import (
+    IssueComment,
+    ProjectMember,
+    CommentReaction,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+
+
+class IssueCommentViewSet(WebhookMixin, BaseViewSet):
+    serializer_class = IssueCommentSerializer
+    model = IssueComment
+    webhook_event = "issue_comment"
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    filterset_fields = [
+        "issue__id",
+        "workspace__id",
+    ]
+
+    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(issue_id=self.kwargs.get("issue_id"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .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,
+                        is_active=True,
+                    )
+                )
+            )
+            .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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def 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,
+        )
+        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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            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_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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class CommentReactionViewSet(BaseViewSet):
+    serializer_class = CommentReactionSerializer
+    model = CommentReaction
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def get_queryset(self):
+        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"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .order_by("-created_at")
+            .distinct()
+        )
+
+    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,
+            )
+            issue_activity.delay(
+                type="comment_reaction.activity.created",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=None,
+                project_id=str(project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        comment_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/draft.py b/apiserver/plane/app/views/issue/draft.py
new file mode 100644
index 00000000000..e1c6962d896
--- /dev/null
+++ b/apiserver/plane/app/views/issue/draft.py
@@ -0,0 +1,365 @@
+# Python imports
+import json
+
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.core.serializers.json import DjangoJSONEncoder
+from django.db.models import (
+    Case,
+    CharField,
+    Exists,
+    F,
+    Func,
+    Max,
+    OuterRef,
+    Prefetch,
+    Q,
+    UUIDField,
+    Value,
+    When,
+)
+from django.db.models.functions import Coalesce
+
+# Django imports
+from django.utils import timezone
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+from rest_framework import status
+
+# Third Party imports
+from rest_framework.response import Response
+
+from plane.app.permissions import ProjectEntityPermission
+from plane.app.serializers import (
+    IssueCreateSerializer,
+    IssueDetailSerializer,
+    IssueFlatSerializer,
+    IssueSerializer,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+from plane.db.models import (
+    Issue,
+    IssueAttachment,
+    IssueLink,
+    IssueReaction,
+    IssueSubscriber,
+    Project,
+)
+from plane.utils.issue_filters import issue_filters
+
+# Module imports
+from .. import BaseViewSet
+
+
+class IssueDraftViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+    serializer_class = IssueFlatSerializer
+    model = Issue
+
+    def get_queryset(self):
+        return (
+            Issue.objects.filter(project_id=self.kwargs.get("project_id"))
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(is_draft=True)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+        ).distinct()
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id):
+        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)
+
+        # 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)
+
+        # Only use serializer when expand else return by values
+        if self.expand or self.fields:
+            issues = IssueSerializer(
+                issue_queryset,
+                many=True,
+                fields=self.fields,
+                expand=self.expand,
+            ).data
+        else:
+            issues = issue_queryset.values(
+                "id",
+                "name",
+                "state_id",
+                "sort_order",
+                "completed_at",
+                "estimate_point",
+                "priority",
+                "start_date",
+                "target_date",
+                "sequence_id",
+                "project_id",
+                "parent_id",
+                "cycle_id",
+                "module_ids",
+                "label_ids",
+                "assignee_ids",
+                "sub_issues_count",
+                "created_at",
+                "updated_at",
+                "created_by",
+                "updated_by",
+                "attachment_count",
+                "link_count",
+                "is_draft",
+                "archived_at",
+            )
+        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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            issue = (
+                self.get_queryset().filter(pk=serializer.data["id"]).first()
+            )
+            return Response(
+                IssueSerializer(issue).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 = self.get_queryset().filter(pk=pk).first()
+
+        if not issue:
+            return Response(
+                {"error": "Issue does not exist"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        serializer = IssueCreateSerializer(
+            issue, data=request.data, partial=True
+        )
+
+        if serializer.is_valid():
+            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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def retrieve(self, request, slug, project_id, pk=None):
+        issue = (
+            self.get_queryset()
+            .filter(pk=pk)
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related(
+                        "issue", "actor"
+                    ),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_attachment",
+                    queryset=IssueAttachment.objects.select_related("issue"),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_link",
+                    queryset=IssueLink.objects.select_related("created_by"),
+                )
+            )
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        issue_id=OuterRef("pk"),
+                        subscriber=request.user,
+                    )
+                )
+            )
+        ).first()
+
+        if not issue:
+            return Response(
+                {"error": "The required object does not exist."},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+        serializer = IssueDetailSerializer(issue, expand=self.expand)
+        return Response(serializer.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
+        )
+        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={},
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/label.py b/apiserver/plane/app/views/issue/label.py
new file mode 100644
index 00000000000..c5dc35809e9
--- /dev/null
+++ b/apiserver/plane/app/views/issue/label.py
@@ -0,0 +1,105 @@
+# Python imports
+import random
+
+# Django imports
+from django.db import IntegrityError
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet, BaseAPIView
+from plane.app.serializers import LabelSerializer
+from plane.app.permissions import (
+    ProjectMemberPermission,
+)
+from plane.db.models import (
+    Project,
+    Label,
+)
+from plane.utils.cache import invalidate_cache
+
+
+class LabelViewSet(BaseViewSet):
+    serializer_class = LabelSerializer
+    model = Label
+    permission_classes = [
+        ProjectMemberPermission,
+    ]
+
+    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(project__project_projectmember__member=self.request.user)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("parent")
+            .distinct()
+            .order_by("sort_order")
+        )
+
+    @invalidate_cache(
+        path="/api/workspaces/:slug/labels/", url_params=True, user=False
+    )
+    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,
+            )
+
+    @invalidate_cache(
+        path="/api/workspaces/:slug/labels/", url_params=True, user=False
+    )
+    def partial_update(self, request, *args, **kwargs):
+        return super().partial_update(request, *args, **kwargs)
+
+    @invalidate_cache(
+        path="/api/workspaces/:slug/labels/", url_params=True, user=False
+    )
+    def destroy(self, request, *args, **kwargs):
+        return super().destroy(request, *args, **kwargs)
+
+
+class BulkCreateIssueLabelsEndpoint(BaseAPIView):
+    def post(self, request, slug, project_id):
+        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=f"#{random.randint(0, 0xFFFFFF+1):06X}",
+                    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,
+        )
diff --git a/apiserver/plane/app/views/issue/link.py b/apiserver/plane/app/views/issue/link.py
new file mode 100644
index 00000000000..c965a7d4d11
--- /dev/null
+++ b/apiserver/plane/app/views/issue/link.py
@@ -0,0 +1,121 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet
+from plane.app.serializers import IssueLinkSerializer
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import IssueLink
+from plane.bgtasks.issue_activites_task import issue_activity
+
+
+class IssueLinkViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    model = IssueLink
+    serializer_class = IssueLinkSerializer
+
+    def get_queryset(self):
+        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"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .order_by("-created_at")
+            .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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def 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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        issue_link.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/reaction.py b/apiserver/plane/app/views/issue/reaction.py
new file mode 100644
index 00000000000..da8f6ebb581
--- /dev/null
+++ b/apiserver/plane/app/views/issue/reaction.py
@@ -0,0 +1,90 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet
+from plane.app.serializers import IssueReactionSerializer
+from plane.app.permissions import ProjectLitePermission
+from plane.db.models import IssueReaction
+from plane.bgtasks.issue_activites_task import issue_activity
+
+
+class IssueReactionViewSet(BaseViewSet):
+    serializer_class = IssueReactionSerializer
+    model = IssueReaction
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def get_queryset(self):
+        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"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .order_by("-created_at")
+            .distinct()
+        )
+
+    def create(self, request, slug, project_id, issue_id):
+        serializer = IssueReactionSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(
+                issue_id=issue_id,
+                project_id=project_id,
+                actor=request.user,
+            )
+            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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    def 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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        issue_reaction.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/relation.py b/apiserver/plane/app/views/issue/relation.py
new file mode 100644
index 00000000000..eb5aff9af66
--- /dev/null
+++ b/apiserver/plane/app/views/issue/relation.py
@@ -0,0 +1,205 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.db.models import Q
+from django.core.serializers.json import DjangoJSONEncoder
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet
+from plane.app.serializers import (
+    IssueRelationSerializer,
+    RelatedIssueSerializer,
+)
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import (
+    Project,
+    IssueRelation,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+
+
+class IssueRelationViewSet(BaseViewSet):
+    serializer_class = IssueRelationSerializer
+    model = IssueRelation
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    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(issue_id=self.kwargs.get("issue_id"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("issue")
+            .distinct()
+        )
+
+    def list(self, request, slug, project_id, issue_id):
+        issue_relations = (
+            IssueRelation.objects.filter(
+                Q(issue_id=issue_id) | Q(related_issue=issue_id)
+            )
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("issue")
+            .order_by("-created_at")
+            .distinct()
+        )
+
+        blocking_issues = issue_relations.filter(
+            relation_type="blocked_by", related_issue_id=issue_id
+        )
+        blocked_by_issues = issue_relations.filter(
+            relation_type="blocked_by", issue_id=issue_id
+        )
+        duplicate_issues = issue_relations.filter(
+            issue_id=issue_id, relation_type="duplicate"
+        )
+        duplicate_issues_related = issue_relations.filter(
+            related_issue_id=issue_id, relation_type="duplicate"
+        )
+        relates_to_issues = issue_relations.filter(
+            issue_id=issue_id, relation_type="relates_to"
+        )
+        relates_to_issues_related = issue_relations.filter(
+            related_issue_id=issue_id, relation_type="relates_to"
+        )
+
+        blocked_by_issues_serialized = IssueRelationSerializer(
+            blocked_by_issues, many=True
+        ).data
+        duplicate_issues_serialized = IssueRelationSerializer(
+            duplicate_issues, many=True
+        ).data
+        relates_to_issues_serialized = IssueRelationSerializer(
+            relates_to_issues, many=True
+        ).data
+
+        # revere relation for blocked by issues
+        blocking_issues_serialized = RelatedIssueSerializer(
+            blocking_issues, many=True
+        ).data
+        # reverse relation for duplicate issues
+        duplicate_issues_related_serialized = RelatedIssueSerializer(
+            duplicate_issues_related, many=True
+        ).data
+        # reverse relation for related issues
+        relates_to_issues_related_serialized = RelatedIssueSerializer(
+            relates_to_issues_related, many=True
+        ).data
+
+        response_data = {
+            "blocking": blocking_issues_serialized,
+            "blocked_by": blocked_by_issues_serialized,
+            "duplicate": duplicate_issues_serialized
+            + duplicate_issues_related_serialized,
+            "relates_to": relates_to_issues_serialized
+            + relates_to_issues_related_serialized,
+        }
+
+        return Response(response_data, status=status.HTTP_200_OK)
+
+    def create(self, request, slug, project_id, issue_id):
+        relation_type = request.data.get("relation_type", None)
+        issues = request.data.get("issues", [])
+        project = Project.objects.get(pk=project_id)
+
+        issue_relation = IssueRelation.objects.bulk_create(
+            [
+                IssueRelation(
+                    issue_id=(
+                        issue if relation_type == "blocking" else issue_id
+                    ),
+                    related_issue_id=(
+                        issue_id if relation_type == "blocking" else issue
+                    ),
+                    relation_type=(
+                        "blocked_by"
+                        if relation_type == "blocking"
+                        else relation_type
+                    ),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for issue in issues
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        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()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+
+        if relation_type == "blocking":
+            return Response(
+                RelatedIssueSerializer(issue_relation, many=True).data,
+                status=status.HTTP_201_CREATED,
+            )
+        else:
+            return Response(
+                IssueRelationSerializer(issue_relation, many=True).data,
+                status=status.HTTP_201_CREATED,
+            )
+
+    def remove_relation(self, request, slug, project_id, issue_id):
+        relation_type = request.data.get("relation_type", None)
+        related_issue = request.data.get("related_issue", None)
+
+        if relation_type == "blocking":
+            issue_relation = IssueRelation.objects.get(
+                workspace__slug=slug,
+                project_id=project_id,
+                issue_id=related_issue,
+                related_issue_id=issue_id,
+            )
+        else:
+            issue_relation = IssueRelation.objects.get(
+                workspace__slug=slug,
+                project_id=project_id,
+                issue_id=issue_id,
+                related_issue_id=related_issue,
+            )
+        current_instance = json.dumps(
+            IssueRelationSerializer(issue_relation).data,
+            cls=DjangoJSONEncoder,
+        )
+        issue_relation.delete()
+        issue_activity.delay(
+            type="issue_relation.activity.deleted",
+            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=current_instance,
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/issue/sub_issue.py b/apiserver/plane/app/views/issue/sub_issue.py
new file mode 100644
index 00000000000..da479e0e99e
--- /dev/null
+++ b/apiserver/plane/app/views/issue/sub_issue.py
@@ -0,0 +1,196 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.db.models import (
+    OuterRef,
+    Func,
+    F,
+    Q,
+    Value,
+    UUIDField,
+)
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models.functions import Coalesce
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseAPIView
+from plane.app.serializers import IssueSerializer
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import (
+    Issue,
+    IssueLink,
+    IssueAttachment,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+from collections import defaultdict
+
+
+class SubIssuesEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    @method_decorator(gzip_page)
+    def get(self, request, slug, project_id, issue_id):
+        sub_issues = (
+            Issue.issue_objects.filter(
+                parent_id=issue_id, workspace__slug=slug
+            )
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .annotate(state_group=F("state__group"))
+        )
+
+        # create's a dict with state group name with their respective issue id's
+        result = defaultdict(list)
+        for sub_issue in sub_issues:
+            result[sub_issue.state_group].append(str(sub_issue.id))
+
+        sub_issues = sub_issues.values(
+            "id",
+            "name",
+            "state_id",
+            "sort_order",
+            "completed_at",
+            "estimate_point",
+            "priority",
+            "start_date",
+            "target_date",
+            "sequence_id",
+            "project_id",
+            "parent_id",
+            "cycle_id",
+            "module_ids",
+            "label_ids",
+            "assignee_ids",
+            "sub_issues_count",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+            "attachment_count",
+            "link_count",
+            "is_draft",
+            "archived_at",
+        )
+        return Response(
+            {
+                "sub_issues": sub_issues,
+                "state_distribution": result,
+            },
+            status=status.HTTP_200_OK,
+        )
+
+    # Assign multiple sub issues
+    def post(self, request, slug, project_id, issue_id):
+        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,
+            )
+
+        sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
+
+        for sub_issue in sub_issues:
+            sub_issue.parent = parent_issue
+
+        _ = Issue.objects.bulk_update(sub_issues, ["parent"], batch_size=10)
+
+        updated_sub_issues = Issue.issue_objects.filter(
+            id__in=sub_issue_ids
+        ).annotate(state_group=F("state__group"))
+
+        # 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()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            for sub_issue_id in sub_issue_ids
+        ]
+
+        # create's a dict with state group name with their respective issue id's
+        result = defaultdict(list)
+        for sub_issue in updated_sub_issues:
+            result[sub_issue.state_group].append(str(sub_issue.id))
+
+        serializer = IssueSerializer(
+            updated_sub_issues,
+            many=True,
+        )
+        return Response(
+            {
+                "sub_issues": serializer.data,
+                "state_distribution": result,
+            },
+            status=status.HTTP_200_OK,
+        )
diff --git a/apiserver/plane/app/views/issue/subscriber.py b/apiserver/plane/app/views/issue/subscriber.py
new file mode 100644
index 00000000000..dc727de285e
--- /dev/null
+++ b/apiserver/plane/app/views/issue/subscriber.py
@@ -0,0 +1,125 @@
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet
+from plane.app.serializers import (
+    IssueSubscriberSerializer,
+    ProjectMemberLiteSerializer,
+)
+from plane.app.permissions import (
+    ProjectEntityPermission,
+    ProjectLitePermission,
+)
+from plane.db.models import (
+    IssueSubscriber,
+    ProjectMember,
+)
+
+
+class IssueSubscriberViewSet(BaseViewSet):
+    serializer_class = IssueSubscriberSerializer
+    model = IssueSubscriber
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get_permissions(self):
+        if self.action in ["subscribe", "unsubscribe", "subscription_status"]:
+            self.permission_classes = [
+                ProjectLitePermission,
+            ]
+        else:
+            self.permission_classes = [
+                ProjectEntityPermission,
+            ]
+
+        return super(IssueSubscriberViewSet, self).get_permissions()
+
+    def perform_create(self, serializer):
+        serializer.save(
+            project_id=self.kwargs.get("project_id"),
+            issue_id=self.kwargs.get("issue_id"),
+        )
+
+    def get_queryset(self):
+        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"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .order_by("-created_at")
+            .distinct()
+        )
+
+    def list(self, request, slug, project_id, issue_id):
+        members = ProjectMember.objects.filter(
+            workspace__slug=slug,
+            project_id=project_id,
+            is_active=True,
+        ).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):
+        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):
+        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,
+        )
+        serializer = IssueSubscriberSerializer(subscriber)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    def unsubscribe(self, request, slug, project_id, issue_id):
+        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):
+        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
+        )
diff --git a/apiserver/plane/app/views/module.py b/apiserver/plane/app/views/module/base.py
similarity index 69%
rename from apiserver/plane/app/views/module.py
rename to apiserver/plane/app/views/module/base.py
index 3b52db64f9e..3fe3a078acb 100644
--- a/apiserver/plane/app/views/module.py
+++ b/apiserver/plane/app/views/module/base.py
@@ -1,51 +1,57 @@
 # Python imports
 import json
 
-# Django Imports
-from django.utils import timezone
-from django.db.models import Prefetch, F, OuterRef, Func, Exists, Count, Q
-from django.utils.decorators import method_decorator
-from django.views.decorators.gzip import gzip_page
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
+from django.db.models import (
+    Count,
+    Exists,
+    F,
+    Func,
+    IntegerField,
+    OuterRef,
+    Prefetch,
+    Q,
+    Subquery,
+    UUIDField,
+    Value,
+)
 from django.db.models.functions import Coalesce
 
+# Django Imports
+from django.utils import timezone
+from rest_framework import status
+
 # Third party imports
 from rest_framework.response import Response
-from rest_framework import status
 
-# Module imports
-from . import BaseViewSet, BaseAPIView, WebhookMixin
-from plane.app.serializers import (
-    ModuleWriteSerializer,
-    ModuleSerializer,
-    ModuleIssueSerializer,
-    ModuleLinkSerializer,
-    ModuleFavoriteSerializer,
-    IssueSerializer,
-    ModuleUserPropertiesSerializer,
-    ModuleDetailSerializer,
-)
 from plane.app.permissions import (
     ProjectEntityPermission,
     ProjectLitePermission,
 )
+from plane.app.serializers import (
+    ModuleDetailSerializer,
+    ModuleFavoriteSerializer,
+    ModuleLinkSerializer,
+    ModuleSerializer,
+    ModuleUserPropertiesSerializer,
+    ModuleWriteSerializer,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
 from plane.db.models import (
+    Issue,
     Module,
+    ModuleFavorite,
     ModuleIssue,
-    Project,
-    Issue,
     ModuleLink,
-    ModuleFavorite,
-    IssueLink,
-    IssueAttachment,
     ModuleUserProperties,
+    Project,
 )
-from plane.bgtasks.issue_activites_task import issue_activity
-from plane.utils.issue_filters import issue_filters
 from plane.utils.analytics_plot import burndown_plot
 
+# Module imports
+from .. import BaseAPIView, BaseViewSet, WebhookMixin
+
 
 class ModuleViewSet(WebhookMixin, BaseViewSet):
     model = Module
@@ -68,6 +74,59 @@ def get_queryset(self):
             project_id=self.kwargs.get("project_id"),
             workspace__slug=self.kwargs.get("slug"),
         )
+        cancelled_issues = (
+            Issue.issue_objects.filter(
+                state__group="cancelled",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        completed_issues = (
+            Issue.issue_objects.filter(
+                state__group="completed",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        started_issues = (
+            Issue.issue_objects.filter(
+                state__group="started",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        unstarted_issues = (
+            Issue.issue_objects.filter(
+                state__group="unstarted",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        backlog_issues = (
+            Issue.issue_objects.filter(
+                state__group="backlog",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        total_issues = (
+            Issue.issue_objects.filter(
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
         return (
             super()
             .get_queryset()
@@ -87,62 +146,39 @@ def get_queryset(self):
                 )
             )
             .annotate(
-                total_issues=Count(
-                    "issue_module",
-                    filter=Q(
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                ),
+                completed_issues=Coalesce(
+                    Subquery(completed_issues[:1]),
+                    Value(0, output_field=IntegerField()),
+                )
             )
             .annotate(
-                completed_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="completed",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
+                cancelled_issues=Coalesce(
+                    Subquery(cancelled_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                cancelled_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="cancelled",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
+                started_issues=Coalesce(
+                    Subquery(started_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                started_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="started",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
+                unstarted_issues=Coalesce(
+                    Subquery(unstarted_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                unstarted_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="unstarted",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
+                backlog_issues=Coalesce(
+                    Subquery(backlog_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                backlog_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="backlog",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
+                total_issues=Coalesce(
+                    Subquery(total_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
@@ -190,9 +226,9 @@ def create(self, request, slug, project_id):
                     "external_id",
                     # computed fields
                     "is_favorite",
-                    "total_issues",
                     "cancelled_issues",
                     "completed_issues",
+                    "total_issues",
                     "started_issues",
                     "unstarted_issues",
                     "backlog_issues",
@@ -204,7 +240,7 @@ def create(self, request, slug, project_id):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def list(self, request, slug, project_id):
-        queryset = self.get_queryset()
+        queryset = self.get_queryset().filter(archived_at__isnull=True)
         if self.fields:
             modules = ModuleSerializer(
                 queryset,
@@ -231,8 +267,8 @@ def list(self, request, slug, project_id):
                 "external_source",
                 "external_id",
                 # computed fields
-                "is_favorite",
                 "total_issues",
+                "is_favorite",
                 "cancelled_issues",
                 "completed_issues",
                 "started_issues",
@@ -244,7 +280,21 @@ def list(self, request, slug, project_id):
         return Response(modules, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(pk=pk)
+        queryset = (
+            self.get_queryset()
+            .filter(archived_at__isnull=True)
+            .filter(pk=pk)
+            .annotate(
+                sub_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("project_id"),
+                    parent__isnull=False,
+                    issue_module__module_id=pk,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        )
 
         assignee_distribution = (
             Issue.objects.filter(
@@ -345,9 +395,11 @@ def retrieve(self, request, slug, project_id, pk):
             "completion_chart": {},
         }
 
-        if queryset.first().start_date and queryset.first().target_date:
+        # Fetch the modules
+        modules = queryset.first()
+        if modules and modules.start_date and modules.target_date:
             data["distribution"]["completion_chart"] = burndown_plot(
-                queryset=queryset.first(),
+                queryset=modules,
                 slug=slug,
                 project_id=project_id,
                 module_id=pk,
@@ -359,14 +411,20 @@ def retrieve(self, request, slug, project_id, pk):
         )
 
     def partial_update(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(pk=pk)
+        module = self.get_queryset().filter(pk=pk)
+
+        if module.first().archived_at:
+            return Response(
+                {"error": "Archived module cannot be updated"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         serializer = ModuleWriteSerializer(
-            queryset.first(), data=request.data, partial=True
+            module.first(), data=request.data, partial=True
         )
 
         if serializer.is_valid():
             serializer.save()
-            module = queryset.values(  
+            module = module.values(
                 # Required fields
                 "id",
                 "workspace_id",
@@ -387,10 +445,10 @@ def partial_update(self, request, slug, project_id, pk):
                 "external_id",
                 # computed fields
                 "is_favorite",
-                "total_issues",
                 "cancelled_issues",
                 "completed_issues",
                 "started_issues",
+                "total_issues",
                 "unstarted_issues",
                 "backlog_issues",
                 "created_at",
@@ -426,260 +484,196 @@ def destroy(self, request, slug, project_id, pk):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
-    serializer_class = ModuleIssueSerializer
-    model = ModuleIssue
-    webhook_event = "module_issue"
-    bulk = True
-
-    filterset_fields = [
-        "issue__labels__id",
-        "issue__assignees__id",
+class ModuleLinkViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
     ]
 
+    model = ModuleLink
+    serializer_class = ModuleLinkSerializer
+
+    def perform_create(self, serializer):
+        serializer.save(
+            project_id=self.kwargs.get("project_id"),
+            module_id=self.kwargs.get("module_id"),
+        )
+
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(project_id=self.kwargs.get("project_id"))
+            .filter(module_id=self.kwargs.get("module_id"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .order_by("-created_at")
+            .distinct()
+        )
+
+
+class ModuleArchiveUnarchiveEndpoint(BaseAPIView):
+
     permission_classes = [
         ProjectEntityPermission,
     ]
 
     def get_queryset(self):
+        favorite_subquery = ModuleFavorite.objects.filter(
+            user=self.request.user,
+            module_id=OuterRef("pk"),
+            project_id=self.kwargs.get("project_id"),
+            workspace__slug=self.kwargs.get("slug"),
+        )
         return (
-            Issue.issue_objects.filter(
-                project_id=self.kwargs.get("project_id"),
-                workspace__slug=self.kwargs.get("slug"),
-                issue_module__module_id=self.kwargs.get("module_id"),
+            Module.objects.filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(archived_at__isnull=False)
+            .annotate(is_favorite=Exists(favorite_subquery))
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("lead")
+            .prefetch_related("members")
+            .prefetch_related(
+                Prefetch(
+                    "link_module",
+                    queryset=ModuleLink.objects.select_related(
+                        "module", "created_by"
+                    ),
+                )
             )
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_id"))
             .annotate(
-                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
+                total_issues=Count(
+                    "issue_module",
+                    filter=Q(
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                ),
             )
             .annotate(
-                attachment_count=IssueAttachment.objects.filter(
-                    issue=OuterRef("id")
+                completed_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="completed",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
             .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
+                cancelled_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="cancelled",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
             .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
+                started_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="started",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
                     ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                unstarted_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="unstarted",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
                     ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
+                    distinct=True,
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="backlog",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                member_ids=Coalesce(
                     ArrayAgg(
-                        "issue_module__module_id",
+                        "members__id",
                         distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
+                        filter=~Q(members__id__isnull=True),
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-        ).distinct()
-
-    @method_decorator(gzip_page)
-    def list(self, request, slug, project_id, module_id):
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
-        filters = issue_filters(request.query_params, "GET")
-        issue_queryset = self.get_queryset().filter(**filters)
-        if self.fields or self.expand:
-            issues = IssueSerializer(
-                issue_queryset, many=True, fields=fields if fields else None
-            ).data
-        else:
-            issues = issue_queryset.values(
-                "id",
-                "name",
-                "state_id",
-                "sort_order",
-                "completed_at",
-                "estimate_point",
-                "priority",
-                "start_date",
-                "target_date",
-                "sequence_id",
-                "project_id",
-                "parent_id",
-                "cycle_id",
-                "module_ids",
-                "label_ids",
-                "assignee_ids",
-                "sub_issues_count",
-                "created_at",
-                "updated_at",
-                "created_by",
-                "updated_by",
-                "attachment_count",
-                "link_count",
-                "is_draft",
-                "archived_at",
-            )
-        return Response(issues, status=status.HTTP_200_OK)
-
-    # create multiple issues inside a module
-    def create_module_issues(self, request, slug, project_id, module_id):
-        issues = request.data.get("issues", [])
-        if not issues:
-            return Response(
-                {"error": "Issues are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        project = Project.objects.get(pk=project_id)
-        _ = ModuleIssue.objects.bulk_create(
-            [
-                ModuleIssue(
-                    issue_id=str(issue),
-                    module_id=module_id,
-                    project_id=project_id,
-                    workspace_id=project.workspace_id,
-                    created_by=request.user,
-                    updated_by=request.user,
                 )
-                for issue in issues
-            ],
-            batch_size=10,
-            ignore_conflicts=True,
-        )
-        # Bulk Update the activity
-        _ = [
-            issue_activity.delay(
-                type="module.activity.created",
-                requested_data=json.dumps({"module_id": str(module_id)}),
-                actor_id=str(request.user.id),
-                issue_id=str(issue),
-                project_id=project_id,
-                current_instance=None,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            for issue in issues
-        ]
-        return Response({"message": "success"}, status=status.HTTP_201_CREATED)
-
-    # create multiple module inside an issue
-    def create_issue_modules(self, request, slug, project_id, issue_id):
-        modules = request.data.get("modules", [])
-        if not modules:
-            return Response(
-                {"error": "Modules are required"},
-                status=status.HTTP_400_BAD_REQUEST,
             )
-
-        project = Project.objects.get(pk=project_id)
-        _ = ModuleIssue.objects.bulk_create(
-            [
-                ModuleIssue(
-                    issue_id=issue_id,
-                    module_id=module,
-                    project_id=project_id,
-                    workspace_id=project.workspace_id,
-                    created_by=request.user,
-                    updated_by=request.user,
-                )
-                for module in modules
-            ],
-            batch_size=10,
-            ignore_conflicts=True,
+            .order_by("-is_favorite", "-created_at")
         )
-        # Bulk Update the activity
-        _ = [
-            issue_activity.delay(
-                type="module.activity.created",
-                requested_data=json.dumps({"module_id": module}),
-                actor_id=str(request.user.id),
-                issue_id=issue_id,
-                project_id=project_id,
-                current_instance=None,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            for module in modules
-        ]
-
-        return Response({"message": "success"}, status=status.HTTP_201_CREATED)
 
-    def destroy(self, request, slug, project_id, module_id, issue_id):
-        module_issue = ModuleIssue.objects.get(
-            workspace__slug=slug,
-            project_id=project_id,
-            module_id=module_id,
-            issue_id=issue_id,
-        )
-        issue_activity.delay(
-            type="module.activity.deleted",
-            requested_data=json.dumps({"module_id": str(module_id)}),
-            actor_id=str(request.user.id),
-            issue_id=str(issue_id),
-            project_id=str(project_id),
-            current_instance=json.dumps(
-                {"module_name": module_issue.module.name}
-            ),
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        module_issue.delete()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class ModuleLinkViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    model = ModuleLink
-    serializer_class = ModuleLinkSerializer
+    def get(self, request, slug, project_id):
+        queryset = self.get_queryset()
+        modules = queryset.values(  # Required fields
+            "id",
+            "workspace_id",
+            "project_id",
+            # Model fields
+            "name",
+            "description",
+            "description_text",
+            "description_html",
+            "start_date",
+            "target_date",
+            "status",
+            "lead_id",
+            "member_ids",
+            "view_props",
+            "sort_order",
+            "external_source",
+            "external_id",
+            # computed fields
+            "total_issues",
+            "is_favorite",
+            "cancelled_issues",
+            "completed_issues",
+            "started_issues",
+            "unstarted_issues",
+            "backlog_issues",
+            "created_at",
+            "updated_at",
+            "archived_at",
+        )
+        return Response(modules, status=status.HTTP_200_OK)
 
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"),
-            module_id=self.kwargs.get("module_id"),
+    def post(self, request, slug, project_id, module_id):
+        module = Module.objects.get(
+            pk=module_id, project_id=project_id, workspace__slug=slug
+        )
+        module.archived_at = timezone.now()
+        module.save()
+        return Response(
+            {"archived_at": str(module.archived_at)},
+            status=status.HTTP_200_OK,
         )
 
-    def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-            .filter(module_id=self.kwargs.get("module_id"))
-            .filter(
-                project__project_projectmember__member=self.request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .order_by("-created_at")
-            .distinct()
+    def delete(self, request, slug, project_id, module_id):
+        module = Module.objects.get(
+            pk=module_id, project_id=project_id, workspace__slug=slug
         )
+        module.archived_at = None
+        module.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ModuleFavoriteViewSet(BaseViewSet):
diff --git a/apiserver/plane/app/views/module/issue.py b/apiserver/plane/app/views/module/issue.py
new file mode 100644
index 00000000000..d2643334079
--- /dev/null
+++ b/apiserver/plane/app/views/module/issue.py
@@ -0,0 +1,260 @@
+# Python imports
+import json
+
+# Django Imports
+from django.utils import timezone
+from django.db.models import F, OuterRef, Func, Q
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models import Value, UUIDField
+from django.db.models.functions import Coalesce
+
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .. import BaseViewSet, WebhookMixin
+from plane.app.serializers import (
+    ModuleIssueSerializer,
+    IssueSerializer,
+)
+from plane.app.permissions import ProjectEntityPermission
+from plane.db.models import (
+    ModuleIssue,
+    Project,
+    Issue,
+    IssueLink,
+    IssueAttachment,
+)
+from plane.bgtasks.issue_activites_task import issue_activity
+from plane.utils.issue_filters import issue_filters
+
+
+class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
+    serializer_class = ModuleIssueSerializer
+    model = ModuleIssue
+    webhook_event = "module_issue"
+    bulk = True
+
+    filterset_fields = [
+        "issue__labels__id",
+        "issue__assignees__id",
+    ]
+
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get_queryset(self):
+        return (
+            Issue.issue_objects.filter(
+                project_id=self.kwargs.get("project_id"),
+                workspace__slug=self.kwargs.get("slug"),
+                issue_module__module_id=self.kwargs.get("module_id"),
+            )
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+        ).distinct()
+
+    @method_decorator(gzip_page)
+    def list(self, request, slug, project_id, module_id):
+        fields = [
+            field
+            for field in request.GET.get("fields", "").split(",")
+            if field
+        ]
+        filters = issue_filters(request.query_params, "GET")
+        issue_queryset = self.get_queryset().filter(**filters)
+        if self.fields or self.expand:
+            issues = IssueSerializer(
+                issue_queryset, many=True, fields=fields if fields else None
+            ).data
+        else:
+            issues = issue_queryset.values(
+                "id",
+                "name",
+                "state_id",
+                "sort_order",
+                "completed_at",
+                "estimate_point",
+                "priority",
+                "start_date",
+                "target_date",
+                "sequence_id",
+                "project_id",
+                "parent_id",
+                "cycle_id",
+                "module_ids",
+                "label_ids",
+                "assignee_ids",
+                "sub_issues_count",
+                "created_at",
+                "updated_at",
+                "created_by",
+                "updated_by",
+                "attachment_count",
+                "link_count",
+                "is_draft",
+                "archived_at",
+            )
+        return Response(issues, status=status.HTTP_200_OK)
+
+    # create multiple issues inside a module
+    def create_module_issues(self, request, slug, project_id, module_id):
+        issues = request.data.get("issues", [])
+        if not issues:
+            return Response(
+                {"error": "Issues are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        project = Project.objects.get(pk=project_id)
+        _ = ModuleIssue.objects.bulk_create(
+            [
+                ModuleIssue(
+                    issue_id=str(issue),
+                    module_id=module_id,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for issue in issues
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+        # Bulk Update the activity
+        _ = [
+            issue_activity.delay(
+                type="module.activity.created",
+                requested_data=json.dumps({"module_id": str(module_id)}),
+                actor_id=str(request.user.id),
+                issue_id=str(issue),
+                project_id=project_id,
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            for issue in issues
+        ]
+        return Response({"message": "success"}, status=status.HTTP_201_CREATED)
+
+    # create multiple module inside an issue
+    def create_issue_modules(self, request, slug, project_id, issue_id):
+        modules = request.data.get("modules", [])
+        if not modules:
+            return Response(
+                {"error": "Modules are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        project = Project.objects.get(pk=project_id)
+        _ = ModuleIssue.objects.bulk_create(
+            [
+                ModuleIssue(
+                    issue_id=issue_id,
+                    module_id=module,
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    created_by=request.user,
+                    updated_by=request.user,
+                )
+                for module in modules
+            ],
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+        # Bulk Update the activity
+        _ = [
+            issue_activity.delay(
+                type="module.activity.created",
+                requested_data=json.dumps({"module_id": module}),
+                actor_id=str(request.user.id),
+                issue_id=issue_id,
+                project_id=project_id,
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            for module in modules
+        ]
+
+        return Response({"message": "success"}, status=status.HTTP_201_CREATED)
+
+    def destroy(self, request, slug, project_id, module_id, issue_id):
+        module_issue = ModuleIssue.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            module_id=module_id,
+            issue_id=issue_id,
+        )
+        issue_activity.delay(
+            type="module.activity.deleted",
+            requested_data=json.dumps({"module_id": str(module_id)}),
+            actor_id=str(request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=json.dumps(
+                {"module_name": module_issue.module.name}
+            ),
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+        module_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/notification.py b/apiserver/plane/app/views/notification/base.py
similarity index 98%
rename from apiserver/plane/app/views/notification.py
rename to apiserver/plane/app/views/notification/base.py
index ebe8e508220..8dae618dbcf 100644
--- a/apiserver/plane/app/views/notification.py
+++ b/apiserver/plane/app/views/notification/base.py
@@ -8,7 +8,7 @@
 from plane.utils.paginator import BasePaginator
 
 # Module imports
-from .base import BaseViewSet, BaseAPIView
+from ..base import BaseViewSet, BaseAPIView
 from plane.db.models import (
     Notification,
     IssueAssignee,
@@ -17,7 +17,10 @@
     WorkspaceMember,
     UserNotificationPreference,
 )
-from plane.app.serializers import NotificationSerializer, UserNotificationPreferenceSerializer
+from plane.app.serializers import (
+    NotificationSerializer,
+    UserNotificationPreferenceSerializer,
+)
 
 
 class NotificationViewSet(BaseViewSet, BasePaginator):
diff --git a/apiserver/plane/app/views/oauth.py b/apiserver/plane/app/views/oauth.py
index 8152fb0eee4..48630175ab3 100644
--- a/apiserver/plane/app/views/oauth.py
+++ b/apiserver/plane/app/views/oauth.py
@@ -5,7 +5,6 @@
 
 # Django imports
 from django.utils import timezone
-from django.conf import settings
 
 # Third Party modules
 from rest_framework.response import Response
@@ -250,9 +249,11 @@ def post(self, request):
                 [
                     WorkspaceMember(
                         workspace_id=project_member_invite.workspace_id,
-                        role=project_member_invite.role
-                        if project_member_invite.role in [5, 10, 15]
-                        else 15,
+                        role=(
+                            project_member_invite.role
+                            if project_member_invite.role in [5, 10, 15]
+                            else 15
+                        ),
                         member=user,
                         created_by_id=project_member_invite.created_by_id,
                     )
@@ -266,9 +267,11 @@ def post(self, request):
                 [
                     ProjectMember(
                         workspace_id=project_member_invite.workspace_id,
-                        role=project_member_invite.role
-                        if project_member_invite.role in [5, 10, 15]
-                        else 15,
+                        role=(
+                            project_member_invite.role
+                            if project_member_invite.role in [5, 10, 15]
+                            else 15
+                        ),
                         member=user,
                         created_by_id=project_member_invite.created_by_id,
                     )
@@ -391,9 +394,11 @@ def post(self, request):
                 [
                     WorkspaceMember(
                         workspace_id=project_member_invite.workspace_id,
-                        role=project_member_invite.role
-                        if project_member_invite.role in [5, 10, 15]
-                        else 15,
+                        role=(
+                            project_member_invite.role
+                            if project_member_invite.role in [5, 10, 15]
+                            else 15
+                        ),
                         member=user,
                         created_by_id=project_member_invite.created_by_id,
                     )
@@ -407,9 +412,11 @@ def post(self, request):
                 [
                     ProjectMember(
                         workspace_id=project_member_invite.workspace_id,
-                        role=project_member_invite.role
-                        if project_member_invite.role in [5, 10, 15]
-                        else 15,
+                        role=(
+                            project_member_invite.role
+                            if project_member_invite.role in [5, 10, 15]
+                            else 15
+                        ),
                         member=user,
                         created_by_id=project_member_invite.created_by_id,
                     )
diff --git a/apiserver/plane/app/views/page.py b/apiserver/plane/app/views/page/base.py
similarity index 96%
rename from apiserver/plane/app/views/page.py
rename to apiserver/plane/app/views/page/base.py
index 7ecf22fa847..d60d78500ce 100644
--- a/apiserver/plane/app/views/page.py
+++ b/apiserver/plane/app/views/page/base.py
@@ -1,25 +1,32 @@
 # Python imports
-from datetime import date, datetime, timedelta
+from datetime import datetime
 
 # Django imports
 from django.db import connection
 from django.db.models import Exists, OuterRef, Q
-from django.utils import timezone
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
+
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
 
 from plane.app.permissions import ProjectEntityPermission
-from plane.app.serializers import (IssueLiteSerializer, PageFavoriteSerializer,
-                                   PageLogSerializer, PageSerializer,
-                                   SubPageSerializer)
-from plane.db.models import (Issue, IssueActivity, IssueAssignee, Page,
-                             PageFavorite, PageLog, ProjectMember)
+from plane.app.serializers import (
+    PageFavoriteSerializer,
+    PageLogSerializer,
+    PageSerializer,
+    SubPageSerializer,
+)
+from plane.db.models import (
+    Page,
+    PageFavorite,
+    PageLog,
+    ProjectMember,
+)
 
 # Module imports
-from .base import BaseAPIView, BaseViewSet
+from ..base import BaseAPIView, BaseViewSet
 
 
 def unarchive_archive_page_and_descendants(page_id, archived_at):
@@ -63,6 +70,7 @@ def get_queryset(self):
             .filter(
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
             )
             .filter(parent__isnull=True)
             .filter(Q(owned_by=self.request.user) | Q(access=0))
diff --git a/apiserver/plane/app/views/project.py b/apiserver/plane/app/views/project.py
deleted file mode 100644
index 6f9b2618e19..00000000000
--- a/apiserver/plane/app/views/project.py
+++ /dev/null
@@ -1,1139 +0,0 @@
-# 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,
-    F,
-    Func,
-    Subquery,
-)
-from django.core.validators import validate_email
-from django.conf import settings
-from django.utils import timezone
-
-# Third Party imports
-from rest_framework.response import Response
-from rest_framework import status
-from rest_framework import serializers
-from rest_framework.permissions import AllowAny
-
-# Module imports
-from .base import BaseViewSet, BaseAPIView, WebhookMixin
-from plane.app.serializers import (
-    ProjectSerializer,
-    ProjectListSerializer,
-    ProjectMemberSerializer,
-    ProjectDetailSerializer,
-    ProjectMemberInviteSerializer,
-    ProjectFavoriteSerializer,
-    ProjectDeployBoardSerializer,
-    ProjectMemberAdminSerializer,
-    ProjectMemberRoleSerializer,
-)
-
-from plane.app.permissions import (
-    WorkspaceUserPermission,
-    ProjectBasePermission,
-    ProjectMemberPermission,
-    ProjectLitePermission,
-)
-
-from plane.db.models import (
-    Project,
-    ProjectMember,
-    Workspace,
-    ProjectMemberInvite,
-    User,
-    WorkspaceMember,
-    State,
-    TeamMember,
-    ProjectFavorite,
-    ProjectIdentifier,
-    Module,
-    Cycle,
-    Inbox,
-    ProjectDeployBoard,
-    IssueProperty,
-)
-
-from plane.bgtasks.project_invitation_task import project_invitation
-
-
-class ProjectViewSet(WebhookMixin, BaseViewSet):
-    serializer_class = ProjectListSerializer
-    model = Project
-    webhook_event = "project"
-
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
-    def get_queryset(self):
-        sort_order = ProjectMember.objects.filter(
-            member=self.request.user,
-            project_id=OuterRef("pk"),
-            workspace__slug=self.kwargs.get("slug"),
-            is_active=True,
-        ).values("sort_order")
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(
-                Q(project_projectmember__member=self.request.user)
-                | Q(network=2)
-            )
-            .select_related(
-                "workspace",
-                "workspace__owner",
-                "default_assignee",
-                "project_lead",
-            )
-            .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(
-                        member=self.request.user,
-                        project_id=OuterRef("pk"),
-                        workspace__slug=self.kwargs.get("slug"),
-                        is_active=True,
-                    )
-                )
-            )
-            .annotate(
-                total_members=ProjectMember.objects.filter(
-                    project_id=OuterRef("id"),
-                    member__is_bot=False,
-                    is_active=True,
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                total_cycles=Cycle.objects.filter(project_id=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                total_modules=Module.objects.filter(project_id=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                member_role=ProjectMember.objects.filter(
-                    project_id=OuterRef("pk"),
-                    member_id=self.request.user.id,
-                    is_active=True,
-                ).values("role")
-            )
-            .annotate(
-                is_deployed=Exists(
-                    ProjectDeployBoard.objects.filter(
-                        project_id=OuterRef("pk"),
-                        workspace__slug=self.kwargs.get("slug"),
-                    )
-                )
-            )
-            .annotate(sort_order=Subquery(sort_order))
-            .prefetch_related(
-                Prefetch(
-                    "project_projectmember",
-                    queryset=ProjectMember.objects.filter(
-                        workspace__slug=self.kwargs.get("slug"),
-                        is_active=True,
-                    ).select_related("member"),
-                    to_attr="members_list",
-                )
-            )
-            .distinct()
-        )
-
-    def list(self, request, slug):
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
-        projects = (
-            self.get_queryset()
-            .order_by("sort_order", "name")
-        )
-        if 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,
-            )
-        projects = ProjectListSerializer(
-            projects, many=True, fields=fields if fields else None
-        ).data
-        return Response(projects, status=status.HTTP_200_OK)
-
-    def create(self, request, slug):
-        try:
-            workspace = Workspace.objects.get(slug=slug)
-
-            serializer = ProjectSerializer(
-                data={**request.data}, context={"workspace_id": workspace.id}
-            )
-            if serializer.is_valid():
-                serializer.save()
-
-                # Add the user as Administrator to the project
-                _ = 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"]
-                ) != str(request.user.id):
-                    ProjectMember.objects.create(
-                        project_id=serializer.data["id"],
-                        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 = [
-                    {
-                        "name": "Backlog",
-                        "color": "#A3A3A3",
-                        "sequence": 15000,
-                        "group": "backlog",
-                        "default": True,
-                    },
-                    {
-                        "name": "Todo",
-                        "color": "#3A3A3A",
-                        "sequence": 25000,
-                        "group": "unstarted",
-                    },
-                    {
-                        "name": "In Progress",
-                        "color": "#F59E0B",
-                        "sequence": 35000,
-                        "group": "started",
-                    },
-                    {
-                        "name": "Done",
-                        "color": "#16A34A",
-                        "sequence": 45000,
-                        "group": "completed",
-                    },
-                    {
-                        "name": "Cancelled",
-                        "color": "#EF4444",
-                        "sequence": 55000,
-                        "group": "cancelled",
-                    },
-                ]
-
-                State.objects.bulk_create(
-                    [
-                        State(
-                            name=state["name"],
-                            color=state["color"],
-                            project=serializer.instance,
-                            sequence=state["sequence"],
-                            workspace=serializer.instance.workspace,
-                            group=state["group"],
-                            default=state.get("default", False),
-                            created_by=request.user,
-                        )
-                        for state in states
-                    ]
-                )
-
-                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,
-            )
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"name": "The project name is already taken"},
-                    status=status.HTTP_410_GONE,
-                )
-        except Workspace.DoesNotExist as e:
-            return Response(
-                {"error": "Workspace does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except serializers.ValidationError as e:
-            return Response(
-                {"identifier": "The project identifier is already taken"},
-                status=status.HTTP_410_GONE,
-            )
-
-    def partial_update(self, request, slug, pk=None):
-        try:
-            workspace = Workspace.objects.get(slug=slug)
-
-            project = Project.objects.get(pk=pk)
-
-            serializer = ProjectSerializer(
-                project,
-                data={**request.data},
-                context={"workspace_id": workspace.id},
-                partial=True,
-            )
-
-            if serializer.is_valid():
-                serializer.save()
-                if serializer.data["inbox_view"]:
-                    Inbox.objects.get_or_create(
-                        name=f"{project.name} Inbox",
-                        project=project,
-                        is_default=True,
-                    )
-
-                    # Create the triage state in Backlog group
-                    State.objects.get_or_create(
-                        name="Triage",
-                        group="backlog",
-                        description="Default state for managing all Inbox Issues",
-                        project_id=pk,
-                        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
-            )
-
-        except IntegrityError as e:
-            if "already exists" in str(e):
-                return Response(
-                    {"name": "The project name is already taken"},
-                    status=status.HTTP_410_GONE,
-                )
-        except (Project.DoesNotExist, Workspace.DoesNotExist):
-            return Response(
-                {"error": "Project does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        except serializers.ValidationError as e:
-            return Response(
-                {"identifier": "The project identifier is already taken"},
-                status=status.HTTP_410_GONE,
-            )
-
-
-class ProjectInvitationsViewset(BaseViewSet):
-    serializer_class = ProjectMemberInviteSerializer
-    model = ProjectMemberInvite
-
-    search_fields = []
-
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
-    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"))
-            .select_related("project")
-            .select_related("workspace", "workspace__owner")
-        )
-
-    def create(self, request, slug, project_id):
-        emails = request.data.get("emails", [])
-
-        # Check if email is provided
-        if not emails:
-            return Response(
-                {"error": "Emails are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        requesting_user = ProjectMember.objects.get(
-            workspace__slug=slug,
-            project_id=project_id,
-            member_id=request.user.id,
-        )
-
-        # Check if any invited user has an higher role
-        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)
-
-        project_invitations = []
-        for email in emails:
-            try:
-                validate_email(email.get("email"))
-                project_invitations.append(
-                    ProjectMemberInvite(
-                        email=email.get("email").strip().lower(),
-                        project_id=project_id,
-                        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,
-                )
-
-        # Create workspace member invite
-        project_invitations = ProjectMemberInvite.objects.bulk_create(
-            project_invitations, batch_size=10, ignore_conflicts=True
-        )
-        current_site = request.META.get("HTTP_ORIGIN")
-
-        # Send invitations
-        for invitation in project_invitations:
-            project_invitations.delay(
-                invitation.email,
-                project_id,
-                invitation.token,
-                current_site,
-                request.user.email,
-            )
-
-        return Response(
-            {
-                "message": "Email sent successfully",
-            },
-            status=status.HTTP_200_OK,
-        )
-
-
-class UserProjectInvitationsViewset(BaseViewSet):
-    serializer_class = ProjectMemberInviteSerializer
-    model = ProjectMemberInvite
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(email=self.request.user.email)
-            .select_related("workspace", "workspace__owner", "project")
-        )
-
-    def create(self, request, slug):
-        project_ids = request.data.get("project_ids", [])
-
-        # Get the workspace user role
-        workspace_member = WorkspaceMember.objects.get(
-            member=request.user,
-            workspace__slug=slug,
-            is_active=True,
-        )
-
-        workspace_role = workspace_member.role
-        workspace = workspace_member.workspace
-
-        # If the user was already part of workspace
-        _ = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            project_id__in=project_ids,
-            member=request.user,
-        ).update(is_active=True)
-
-        ProjectMember.objects.bulk_create(
-            [
-                ProjectMember(
-                    project_id=project_id,
-                    member=request.user,
-                    role=15 if workspace_role >= 15 else 10,
-                    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 ProjectJoinEndpoint(BaseAPIView):
-    permission_classes = [
-        AllowAny,
-    ]
-
-    def post(self, request, slug, project_id, pk):
-        project_invite = ProjectMemberInvite.objects.get(
-            pk=pk,
-            project_id=project_id,
-            workspace__slug=slug,
-        )
-
-        email = request.data.get("email", "")
-
-        if email == "" or project_invite.email != email:
-            return Response(
-                {"error": "You do not have permission to join the project"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-
-        if project_invite.responded_at is None:
-            project_invite.accepted = request.data.get("accepted", False)
-            project_invite.responded_at = timezone.now()
-            project_invite.save()
-
-            if project_invite.accepted:
-                # Check if the user account exists
-                user = User.objects.filter(email=email).first()
-
-                # Check if user is a part of workspace
-                workspace_member = WorkspaceMember.objects.filter(
-                    workspace__slug=slug, member=user
-                ).first()
-                # Add him to workspace
-                if workspace_member is None:
-                    _ = WorkspaceMember.objects.create(
-                        workspace_id=project_invite.workspace_id,
-                        member=user,
-                        role=15
-                        if project_invite.role >= 15
-                        else project_invite.role,
-                    )
-                else:
-                    # Else make him active
-                    workspace_member.is_active = True
-                    workspace_member.save()
-
-                # Check if the user was already a member of project then activate the user
-                project_member = ProjectMember.objects.filter(
-                    workspace_id=project_invite.workspace_id, member=user
-                ).first()
-                if project_member is None:
-                    # Create a Project Member
-                    _ = ProjectMember.objects.create(
-                        workspace_id=project_invite.workspace_id,
-                        member=user,
-                        role=project_invite.role,
-                    )
-                else:
-                    project_member.is_active = True
-                    project_member.role = project_member.role
-                    project_member.save()
-
-                return Response(
-                    {"message": "Project Invitation Accepted"},
-                    status=status.HTTP_200_OK,
-                )
-
-            return Response(
-                {"message": "Project Invitation was not accepted"},
-                status=status.HTTP_200_OK,
-            )
-
-        return Response(
-            {"error": "You have already responded to the invitation request"},
-            status=status.HTTP_400_BAD_REQUEST,
-        )
-
-    def get(self, request, slug, project_id, pk):
-        project_invitation = ProjectMemberInvite.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
-        serializer = ProjectMemberInviteSerializer(project_invitation)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class ProjectMemberViewSet(BaseViewSet):
-    serializer_class = ProjectMemberAdminSerializer
-    model = ProjectMember
-    permission_classes = [
-        ProjectMemberPermission,
-    ]
-
-    def get_permissions(self):
-        if self.action == "leave":
-            self.permission_classes = [
-                ProjectLitePermission,
-            ]
-        else:
-            self.permission_classes = [
-                ProjectMemberPermission,
-            ]
-
-        return super(ProjectMemberViewSet, self).get_permissions()
-
-    search_fields = [
-        "member__display_name",
-        "member__first_name",
-    ]
-
-    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(member__is_bot=False)
-            .filter()
-            .select_related("project")
-            .select_related("member")
-            .select_related("workspace", "workspace__owner")
-        )
-
-    def create(self, request, slug, project_id):
-        members = request.data.get("members", [])
-
-        # get the project
-        project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-        if not len(members):
-            return Response(
-                {"error": "Atleast one member is required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        bulk_project_members = []
-        bulk_issue_props = []
-
-        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")
-        )
-
-        bulk_project_members = []
-        member_roles = {member.get("member_id"): member.get("role") for member in members}
-        # Update roles in the members array based on the member_roles dictionary
-        for project_member in  ProjectMember.objects.filter(project_id=project_id, member_id__in=[member.get("member_id") for member in members]):
-            project_member.role = member_roles[str(project_member.member_id)]
-            project_member.is_active = True
-            bulk_project_members.append(project_member)
-
-        # Update the roles of the existing members
-        ProjectMember.objects.bulk_update(
-            bulk_project_members, ["is_active", "role"], batch_size=100
-        )
-
-        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,
-                )
-            )
-            bulk_issue_props.append(
-                IssueProperty(
-                    user_id=member.get("member_id"),
-                    project_id=project_id,
-                    workspace_id=project.workspace_id,
-                )
-            )
-
-        project_members = ProjectMember.objects.bulk_create(
-            bulk_project_members,
-            batch_size=10,
-            ignore_conflicts=True,
-        )
-
-        _ = IssueProperty.objects.bulk_create(
-            bulk_issue_props, batch_size=10, ignore_conflicts=True
-        )
-
-        project_members = ProjectMember.objects.filter(project_id=project_id, member_id__in=[member.get("member_id") for member in members])
-        serializer = ProjectMemberRoleSerializer(project_members, many=True)
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-    def list(self, request, slug, project_id):
-        # Get the list of project members for the project
-        project_members = ProjectMember.objects.filter(
-            project_id=project_id,
-            workspace__slug=slug,
-            member__is_bot=False,
-            is_active=True,
-        ).select_related("project", "member", "workspace")
-
-        serializer = ProjectMemberRoleSerializer(
-            project_members, fields=("id", "member", "role"), many=True
-        )
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-    def partial_update(self, request, slug, project_id, pk):
-        project_member = ProjectMember.objects.get(
-            pk=pk,
-            workspace__slug=slug,
-            project_id=project_id,
-            is_active=True,
-        )
-        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,
-            is_active=True,
-        )
-        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,
-            )
-
-        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,
-            member__is_bot=False,
-            is_active=True,
-        )
-        # check requesting user role
-        requesting_project_member = ProjectMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            project_id=project_id,
-            is_active=True,
-        )
-        # User cannot remove himself
-        if str(project_member.id) == str(requesting_project_member.id):
-            return Response(
-                {
-                    "error": "You cannot remove yourself from the workspace. Please use leave workspace"
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        # User cannot deactivate higher role
-        if requesting_project_member.role < project_member.role:
-            return Response(
-                {
-                    "error": "You cannot remove a user having role higher than you"
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        project_member.is_active = False
-        project_member.save()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-    def leave(self, request, slug, project_id):
-        project_member = ProjectMember.objects.get(
-            workspace__slug=slug,
-            project_id=project_id,
-            member=request.user,
-            is_active=True,
-        )
-
-        # Check if the leaving user is the only admin of the project
-        if (
-            project_member.role == 20
-            and not ProjectMember.objects.filter(
-                workspace__slug=slug,
-                project_id=project_id,
-                role=20,
-                is_active=True,
-            ).count()
-            > 1
-        ):
-            return Response(
-                {
-                    "error": "You cannot leave the project as your the only admin of the project you will have to either delete the project or create an another admin",
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        # Deactivate the user
-        project_member.is_active = False
-        project_member.save()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class AddTeamToProjectEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
-    def post(self, request, slug, project_id):
-        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,
-            )
-
-        workspace = Workspace.objects.get(slug=slug)
-
-        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,
-                )
-            )
-            issue_props.append(
-                IssueProperty(
-                    project_id=project_id,
-                    user_id=member,
-                    workspace=workspace,
-                    created_by=request.user,
-                )
-            )
-
-        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 ProjectIdentifierEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
-    def get(self, request, slug):
-        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")
-
-        return Response(
-            {"exists": len(exists), "identifiers": exists},
-            status=status.HTTP_200_OK,
-        )
-
-    def delete(self, request, slug):
-        name = request.data.get("name", "").strip().upper()
-
-        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,
-            )
-
-        ProjectIdentifier.objects.filter(
-            name=name, workspace__slug=slug
-        ).delete()
-
-        return Response(
-            status=status.HTTP_204_NO_CONTENT,
-        )
-
-
-class ProjectUserViewsEndpoint(BaseAPIView):
-    def post(self, request, slug, project_id):
-        project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-        project_member = ProjectMember.objects.filter(
-            member=request.user,
-            project=project,
-            is_active=True,
-        ).first()
-
-        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
-
-        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()
-
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class ProjectMemberUserEndpoint(BaseAPIView):
-    def get(self, request, slug, project_id):
-        project_member = ProjectMember.objects.get(
-            project_id=project_id,
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-        serializer = ProjectMemberSerializer(project_member)
-
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class ProjectFavoritesViewSet(BaseViewSet):
-    serializer_class = ProjectFavoriteSerializer
-    model = ProjectFavorite
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(user=self.request.user)
-            .select_related(
-                "project", "project__project_lead", "project__default_assignee"
-            )
-            .select_related("workspace", "workspace__owner")
-        )
-
-    def perform_create(self, serializer):
-        serializer.save(user=self.request.user)
-
-    def create(self, request, slug):
-        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):
-        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 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_STORAGE_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_STORAGE_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
-                    )
-
-        return Response(files, status=status.HTTP_200_OK)
-
-
-class ProjectDeployBoardViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectMemberPermission,
-    ]
-    serializer_class = ProjectDeployBoardSerializer
-    model = ProjectDeployBoard
-
-    def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(
-                workspace__slug=self.kwargs.get("slug"),
-                project_id=self.kwargs.get("project_id"),
-            )
-            .select_related("project")
-        )
-
-    def create(self, request, slug, project_id):
-        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.save()
-
-        serializer = ProjectDeployBoardSerializer(project_deploy_board)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class UserProjectRolesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceUserPermission,
-    ]
-
-    def get(self, request, slug):
-        project_members = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            member_id=request.user.id,
-        ).values("project_id", "role")
-
-        project_members = {
-            str(member["project_id"]): member["role"]
-            for member in project_members
-        }
-        return Response(project_members, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/project/base.py b/apiserver/plane/app/views/project/base.py
new file mode 100644
index 00000000000..1672cd47ca0
--- /dev/null
+++ b/apiserver/plane/app/views/project/base.py
@@ -0,0 +1,652 @@
+# Python imports
+import boto3
+
+# Django imports
+from django.db import IntegrityError
+from django.db.models import (
+    Prefetch,
+    Q,
+    Exists,
+    OuterRef,
+    F,
+    Func,
+    Subquery,
+)
+from django.conf import settings
+from django.utils import timezone
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+from rest_framework import serializers
+from rest_framework.permissions import AllowAny
+
+# Module imports
+from plane.app.views.base import BaseViewSet, BaseAPIView, WebhookMixin
+from plane.app.serializers import (
+    ProjectSerializer,
+    ProjectListSerializer,
+    ProjectFavoriteSerializer,
+    ProjectDeployBoardSerializer,
+)
+
+from plane.app.permissions import (
+    ProjectBasePermission,
+    ProjectMemberPermission,
+)
+
+from plane.db.models import (
+    Project,
+    ProjectMember,
+    Workspace,
+    State,
+    ProjectFavorite,
+    ProjectIdentifier,
+    Module,
+    Cycle,
+    Inbox,
+    ProjectDeployBoard,
+    IssueProperty,
+    Issue,
+)
+from plane.utils.cache import cache_response
+
+
+class ProjectViewSet(WebhookMixin, BaseViewSet):
+    serializer_class = ProjectListSerializer
+    model = Project
+    webhook_event = "project"
+
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    def get_queryset(self):
+        sort_order = ProjectMember.objects.filter(
+            member=self.request.user,
+            project_id=OuterRef("pk"),
+            workspace__slug=self.kwargs.get("slug"),
+            is_active=True,
+        ).values("sort_order")
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(
+                Q(
+                    project_projectmember__member=self.request.user,
+                    project_projectmember__is_active=True,
+                )
+                | Q(network=2)
+            )
+            .select_related(
+                "workspace",
+                "workspace__owner",
+                "default_assignee",
+                "project_lead",
+            )
+            .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(
+                        member=self.request.user,
+                        project_id=OuterRef("pk"),
+                        workspace__slug=self.kwargs.get("slug"),
+                        is_active=True,
+                    )
+                )
+            )
+            .annotate(
+                total_members=ProjectMember.objects.filter(
+                    project_id=OuterRef("id"),
+                    member__is_bot=False,
+                    is_active=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                total_cycles=Cycle.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                total_modules=Module.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                member_role=ProjectMember.objects.filter(
+                    project_id=OuterRef("pk"),
+                    member_id=self.request.user.id,
+                    is_active=True,
+                ).values("role")
+            )
+            .annotate(
+                is_deployed=Exists(
+                    ProjectDeployBoard.objects.filter(
+                        project_id=OuterRef("pk"),
+                        workspace__slug=self.kwargs.get("slug"),
+                    )
+                )
+            )
+            .annotate(sort_order=Subquery(sort_order))
+            .prefetch_related(
+                Prefetch(
+                    "project_projectmember",
+                    queryset=ProjectMember.objects.filter(
+                        workspace__slug=self.kwargs.get("slug"),
+                        is_active=True,
+                    ).select_related("member"),
+                    to_attr="members_list",
+                )
+            )
+            .distinct()
+        )
+
+    def list(self, request, slug):
+        fields = [
+            field
+            for field in request.GET.get("fields", "").split(",")
+            if field
+        ]
+        projects = self.get_queryset().order_by("sort_order", "name")
+        if 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,
+            )
+        projects = ProjectListSerializer(
+            projects, many=True, fields=fields if fields else None
+        ).data
+        return Response(projects, status=status.HTTP_200_OK)
+
+    def retrieve(self, request, slug, pk):
+        project = (
+            self.get_queryset()
+            .filter(archived_at__isnull=True)
+            .filter(pk=pk)
+            .annotate(
+                total_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    parent__isnull=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues=Issue.issue_objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    parent__isnull=False,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                archived_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    archived_at__isnull=False,
+                    parent__isnull=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                archived_sub_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    archived_at__isnull=False,
+                    parent__isnull=False,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                draft_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    is_draft=True,
+                    parent__isnull=True,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                draft_sub_issues=Issue.objects.filter(
+                    project_id=self.kwargs.get("pk"),
+                    is_draft=True,
+                    parent__isnull=False,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+        ).first()
+
+        serializer = ProjectListSerializer(project)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def create(self, request, slug):
+        try:
+            workspace = Workspace.objects.get(slug=slug)
+
+            serializer = ProjectSerializer(
+                data={**request.data}, context={"workspace_id": workspace.id}
+            )
+            if serializer.is_valid():
+                serializer.save()
+
+                # Add the user as Administrator to the project
+                _ = 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"]
+                ) != str(request.user.id):
+                    ProjectMember.objects.create(
+                        project_id=serializer.data["id"],
+                        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 = [
+                    {
+                        "name": "Backlog",
+                        "color": "#A3A3A3",
+                        "sequence": 15000,
+                        "group": "backlog",
+                        "default": True,
+                    },
+                    {
+                        "name": "Todo",
+                        "color": "#3A3A3A",
+                        "sequence": 25000,
+                        "group": "unstarted",
+                    },
+                    {
+                        "name": "In Progress",
+                        "color": "#F59E0B",
+                        "sequence": 35000,
+                        "group": "started",
+                    },
+                    {
+                        "name": "Done",
+                        "color": "#16A34A",
+                        "sequence": 45000,
+                        "group": "completed",
+                    },
+                    {
+                        "name": "Cancelled",
+                        "color": "#EF4444",
+                        "sequence": 55000,
+                        "group": "cancelled",
+                    },
+                ]
+
+                State.objects.bulk_create(
+                    [
+                        State(
+                            name=state["name"],
+                            color=state["color"],
+                            project=serializer.instance,
+                            sequence=state["sequence"],
+                            workspace=serializer.instance.workspace,
+                            group=state["group"],
+                            default=state.get("default", False),
+                            created_by=request.user,
+                        )
+                        for state in states
+                    ]
+                )
+
+                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,
+            )
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"name": "The project name is already taken"},
+                    status=status.HTTP_410_GONE,
+                )
+        except Workspace.DoesNotExist:
+            return Response(
+                {"error": "Workspace does not exist"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+        except serializers.ValidationError:
+            return Response(
+                {"identifier": "The project identifier is already taken"},
+                status=status.HTTP_410_GONE,
+            )
+
+    def partial_update(self, request, slug, pk=None):
+        try:
+            workspace = Workspace.objects.get(slug=slug)
+
+            project = Project.objects.get(pk=pk)
+
+            if project.archived_at:
+                return Response(
+                    {"error": "Archived projects cannot be updated"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            serializer = ProjectSerializer(
+                project,
+                data={**request.data},
+                context={"workspace_id": workspace.id},
+                partial=True,
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                if serializer.data["inbox_view"]:
+                    Inbox.objects.get_or_create(
+                        name=f"{project.name} Inbox",
+                        project=project,
+                        is_default=True,
+                    )
+
+                    # Create the triage state in Backlog group
+                    State.objects.get_or_create(
+                        name="Triage",
+                        group="backlog",
+                        description="Default state for managing all Inbox Issues",
+                        project_id=pk,
+                        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
+            )
+
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"name": "The project name is already taken"},
+                    status=status.HTTP_410_GONE,
+                )
+        except (Project.DoesNotExist, Workspace.DoesNotExist):
+            return Response(
+                {"error": "Project does not exist"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+        except serializers.ValidationError:
+            return Response(
+                {"identifier": "The project identifier is already taken"},
+                status=status.HTTP_410_GONE,
+            )
+
+
+class ProjectArchiveUnarchiveEndpoint(BaseAPIView):
+
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    def post(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project.archived_at = timezone.now()
+        project.save()
+        return Response(
+            {"archived_at": str(project.archived_at)},
+            status=status.HTTP_200_OK,
+        )
+
+    def delete(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+        project.archived_at = None
+        project.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class ProjectIdentifierEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    def get(self, request, slug):
+        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")
+
+        return Response(
+            {"exists": len(exists), "identifiers": exists},
+            status=status.HTTP_200_OK,
+        )
+
+    def delete(self, request, slug):
+        name = request.data.get("name", "").strip().upper()
+
+        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,
+            )
+
+        ProjectIdentifier.objects.filter(
+            name=name, workspace__slug=slug
+        ).delete()
+
+        return Response(
+            status=status.HTTP_204_NO_CONTENT,
+        )
+
+
+class ProjectUserViewsEndpoint(BaseAPIView):
+    def post(self, request, slug, project_id):
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        project_member = ProjectMember.objects.filter(
+            member=request.user,
+            project=project,
+            is_active=True,
+        ).first()
+
+        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
+
+        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()
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class ProjectFavoritesViewSet(BaseViewSet):
+    serializer_class = ProjectFavoriteSerializer
+    model = ProjectFavorite
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(user=self.request.user)
+            .select_related(
+                "project", "project__project_lead", "project__default_assignee"
+            )
+            .select_related("workspace", "workspace__owner")
+        )
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)
+
+    def create(self, request, slug):
+        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):
+        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 ProjectPublicCoverImagesEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    # Cache the below api for 24 hours
+    @cache_response(60 * 60 * 24, user=False)
+    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_STORAGE_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_STORAGE_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
+                    )
+
+        return Response(files, status=status.HTTP_200_OK)
+
+
+class ProjectDeployBoardViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectMemberPermission,
+    ]
+    serializer_class = ProjectDeployBoardSerializer
+    model = ProjectDeployBoard
+
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(
+                workspace__slug=self.kwargs.get("slug"),
+                project_id=self.kwargs.get("project_id"),
+            )
+            .select_related("project")
+        )
+
+    def create(self, request, slug, project_id):
+        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.save()
+
+        serializer = ProjectDeployBoardSerializer(project_deploy_board)
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/project/invite.py b/apiserver/plane/app/views/project/invite.py
new file mode 100644
index 00000000000..d199a877004
--- /dev/null
+++ b/apiserver/plane/app/views/project/invite.py
@@ -0,0 +1,286 @@
+# Python imports
+import jwt
+from datetime import datetime
+
+# Django imports
+from django.core.exceptions import ValidationError
+from django.core.validators import validate_email
+from django.conf import settings
+from django.utils import timezone
+
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+from rest_framework.permissions import AllowAny
+
+# Module imports
+from .base import BaseViewSet, BaseAPIView
+from plane.app.serializers import ProjectMemberInviteSerializer
+
+from plane.app.permissions import ProjectBasePermission
+
+from plane.db.models import (
+    ProjectMember,
+    Workspace,
+    ProjectMemberInvite,
+    User,
+    WorkspaceMember,
+    IssueProperty,
+)
+
+
+class ProjectInvitationsViewset(BaseViewSet):
+    serializer_class = ProjectMemberInviteSerializer
+    model = ProjectMemberInvite
+
+    search_fields = []
+
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    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"))
+            .select_related("project")
+            .select_related("workspace", "workspace__owner")
+        )
+
+    def create(self, request, slug, project_id):
+        emails = request.data.get("emails", [])
+
+        # Check if email is provided
+        if not emails:
+            return Response(
+                {"error": "Emails are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        requesting_user = ProjectMember.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            member_id=request.user.id,
+        )
+
+        # Check if any invited user has an higher role
+        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)
+
+        project_invitations = []
+        for email in emails:
+            try:
+                validate_email(email.get("email"))
+                project_invitations.append(
+                    ProjectMemberInvite(
+                        email=email.get("email").strip().lower(),
+                        project_id=project_id,
+                        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,
+                )
+
+        # Create workspace member invite
+        project_invitations = ProjectMemberInvite.objects.bulk_create(
+            project_invitations, batch_size=10, ignore_conflicts=True
+        )
+        current_site = request.META.get("HTTP_ORIGIN")
+
+        # Send invitations
+        for invitation in project_invitations:
+            project_invitations.delay(
+                invitation.email,
+                project_id,
+                invitation.token,
+                current_site,
+                request.user.email,
+            )
+
+        return Response(
+            {
+                "message": "Email sent successfully",
+            },
+            status=status.HTTP_200_OK,
+        )
+
+
+class UserProjectInvitationsViewset(BaseViewSet):
+    serializer_class = ProjectMemberInviteSerializer
+    model = ProjectMemberInvite
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(email=self.request.user.email)
+            .select_related("workspace", "workspace__owner", "project")
+        )
+
+    def create(self, request, slug):
+        project_ids = request.data.get("project_ids", [])
+
+        # Get the workspace user role
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user,
+            workspace__slug=slug,
+            is_active=True,
+        )
+
+        workspace_role = workspace_member.role
+        workspace = workspace_member.workspace
+
+        # If the user was already part of workspace
+        _ = ProjectMember.objects.filter(
+            workspace__slug=slug,
+            project_id__in=project_ids,
+            member=request.user,
+        ).update(is_active=True)
+
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project_id=project_id,
+                    member=request.user,
+                    role=15 if workspace_role >= 15 else 10,
+                    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 ProjectJoinEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+
+    def post(self, request, slug, project_id, pk):
+        project_invite = ProjectMemberInvite.objects.get(
+            pk=pk,
+            project_id=project_id,
+            workspace__slug=slug,
+        )
+
+        email = request.data.get("email", "")
+
+        if email == "" or project_invite.email != email:
+            return Response(
+                {"error": "You do not have permission to join the project"},
+                status=status.HTTP_403_FORBIDDEN,
+            )
+
+        if project_invite.responded_at is None:
+            project_invite.accepted = request.data.get("accepted", False)
+            project_invite.responded_at = timezone.now()
+            project_invite.save()
+
+            if project_invite.accepted:
+                # Check if the user account exists
+                user = User.objects.filter(email=email).first()
+
+                # Check if user is a part of workspace
+                workspace_member = WorkspaceMember.objects.filter(
+                    workspace__slug=slug, member=user
+                ).first()
+                # Add him to workspace
+                if workspace_member is None:
+                    _ = WorkspaceMember.objects.create(
+                        workspace_id=project_invite.workspace_id,
+                        member=user,
+                        role=(
+                            15
+                            if project_invite.role >= 15
+                            else project_invite.role
+                        ),
+                    )
+                else:
+                    # Else make him active
+                    workspace_member.is_active = True
+                    workspace_member.save()
+
+                # Check if the user was already a member of project then activate the user
+                project_member = ProjectMember.objects.filter(
+                    workspace_id=project_invite.workspace_id, member=user
+                ).first()
+                if project_member is None:
+                    # Create a Project Member
+                    _ = ProjectMember.objects.create(
+                        workspace_id=project_invite.workspace_id,
+                        member=user,
+                        role=project_invite.role,
+                    )
+                else:
+                    project_member.is_active = True
+                    project_member.role = project_member.role
+                    project_member.save()
+
+                return Response(
+                    {"message": "Project Invitation Accepted"},
+                    status=status.HTTP_200_OK,
+                )
+
+            return Response(
+                {"message": "Project Invitation was not accepted"},
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(
+            {"error": "You have already responded to the invitation request"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
+
+    def get(self, request, slug, project_id, pk):
+        project_invitation = ProjectMemberInvite.objects.get(
+            workspace__slug=slug, project_id=project_id, pk=pk
+        )
+        serializer = ProjectMemberInviteSerializer(project_invitation)
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/project/member.py b/apiserver/plane/app/views/project/member.py
new file mode 100644
index 00000000000..187dfc8d05c
--- /dev/null
+++ b/apiserver/plane/app/views/project/member.py
@@ -0,0 +1,349 @@
+# Third Party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from .base import BaseViewSet, BaseAPIView
+from plane.app.serializers import (
+    ProjectMemberSerializer,
+    ProjectMemberAdminSerializer,
+    ProjectMemberRoleSerializer,
+)
+
+from plane.app.permissions import (
+    ProjectBasePermission,
+    ProjectMemberPermission,
+    ProjectLitePermission,
+    WorkspaceUserPermission,
+)
+
+from plane.db.models import (
+    Project,
+    ProjectMember,
+    Workspace,
+    TeamMember,
+    IssueProperty,
+)
+
+
+class ProjectMemberViewSet(BaseViewSet):
+    serializer_class = ProjectMemberAdminSerializer
+    model = ProjectMember
+    permission_classes = [
+        ProjectMemberPermission,
+    ]
+
+    def get_permissions(self):
+        if self.action == "leave":
+            self.permission_classes = [
+                ProjectLitePermission,
+            ]
+        else:
+            self.permission_classes = [
+                ProjectMemberPermission,
+            ]
+
+        return super(ProjectMemberViewSet, self).get_permissions()
+
+    search_fields = [
+        "member__display_name",
+        "member__first_name",
+    ]
+
+    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(member__is_bot=False)
+            .filter()
+            .select_related("project")
+            .select_related("member")
+            .select_related("workspace", "workspace__owner")
+        )
+
+    def create(self, request, slug, project_id):
+        members = request.data.get("members", [])
+
+        # get the project
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        if not len(members):
+            return Response(
+                {"error": "Atleast one member is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        bulk_project_members = []
+        bulk_issue_props = []
+
+        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")
+        )
+
+        bulk_project_members = []
+        member_roles = {
+            member.get("member_id"): member.get("role") for member in members
+        }
+        # Update roles in the members array based on the member_roles dictionary
+        for project_member in ProjectMember.objects.filter(
+            project_id=project_id,
+            member_id__in=[member.get("member_id") for member in members],
+        ):
+            project_member.role = member_roles[str(project_member.member_id)]
+            project_member.is_active = True
+            bulk_project_members.append(project_member)
+
+        # Update the roles of the existing members
+        ProjectMember.objects.bulk_update(
+            bulk_project_members, ["is_active", "role"], batch_size=100
+        )
+
+        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
+                    ),
+                )
+            )
+            bulk_issue_props.append(
+                IssueProperty(
+                    user_id=member.get("member_id"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                )
+            )
+
+        project_members = ProjectMember.objects.bulk_create(
+            bulk_project_members,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        _ = IssueProperty.objects.bulk_create(
+            bulk_issue_props, batch_size=10, ignore_conflicts=True
+        )
+
+        project_members = ProjectMember.objects.filter(
+            project_id=project_id,
+            member_id__in=[member.get("member_id") for member in members],
+        )
+        serializer = ProjectMemberRoleSerializer(project_members, many=True)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    def list(self, request, slug, project_id):
+        # Get the list of project members for the project
+        project_members = ProjectMember.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            member__is_bot=False,
+            is_active=True,
+        ).select_related("project", "member", "workspace")
+
+        serializer = ProjectMemberRoleSerializer(
+            project_members, fields=("id", "member", "role"), many=True
+        )
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def partial_update(self, request, slug, project_id, pk):
+        project_member = ProjectMember.objects.get(
+            pk=pk,
+            workspace__slug=slug,
+            project_id=project_id,
+            is_active=True,
+        )
+        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,
+            is_active=True,
+        )
+        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,
+            )
+
+        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,
+            member__is_bot=False,
+            is_active=True,
+        )
+        # check requesting user role
+        requesting_project_member = ProjectMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            project_id=project_id,
+            is_active=True,
+        )
+        # User cannot remove himself
+        if str(project_member.id) == str(requesting_project_member.id):
+            return Response(
+                {
+                    "error": "You cannot remove yourself from the workspace. Please use leave workspace"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        # User cannot deactivate higher role
+        if requesting_project_member.role < project_member.role:
+            return Response(
+                {
+                    "error": "You cannot remove a user having role higher than you"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        project_member.is_active = False
+        project_member.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def leave(self, request, slug, project_id):
+        project_member = ProjectMember.objects.get(
+            workspace__slug=slug,
+            project_id=project_id,
+            member=request.user,
+            is_active=True,
+        )
+
+        # Check if the leaving user is the only admin of the project
+        if (
+            project_member.role == 20
+            and not ProjectMember.objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+                role=20,
+                is_active=True,
+            ).count()
+            > 1
+        ):
+            return Response(
+                {
+                    "error": "You cannot leave the project as your the only admin of the project you will have to either delete the project or create an another admin",
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        # Deactivate the user
+        project_member.is_active = False
+        project_member.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class AddTeamToProjectEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    def post(self, request, slug, project_id):
+        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,
+            )
+
+        workspace = Workspace.objects.get(slug=slug)
+
+        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,
+                )
+            )
+            issue_props.append(
+                IssueProperty(
+                    project_id=project_id,
+                    user_id=member,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+            )
+
+        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 ProjectMemberUserEndpoint(BaseAPIView):
+    def get(self, request, slug, project_id):
+        project_member = ProjectMember.objects.get(
+            project_id=project_id,
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+        serializer = ProjectMemberSerializer(project_member)
+
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+class UserProjectRolesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceUserPermission,
+    ]
+
+    def get(self, request, slug):
+        project_members = ProjectMember.objects.filter(
+            workspace__slug=slug,
+            member_id=request.user.id,
+        ).values("project_id", "role")
+
+        project_members = {
+            str(member["project_id"]): member["role"]
+            for member in project_members
+        }
+        return Response(project_members, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/search.py b/apiserver/plane/app/views/search.py
index a2ed1c015ad..4a4ffd826d8 100644
--- a/apiserver/plane/app/views/search.py
+++ b/apiserver/plane/app/views/search.py
@@ -50,6 +50,7 @@ def filter_projects(self, query, slug, project_id, workspace_search):
                 q,
                 project_projectmember__member=self.request.user,
                 project_projectmember__is_active=True,
+                archived_at__isnull=True,
                 workspace__slug=slug,
             )
             .distinct()
@@ -72,6 +73,7 @@ def filter_issues(self, query, slug, project_id, workspace_search):
             q,
             project__project_projectmember__member=self.request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
             workspace__slug=slug,
         )
 
@@ -97,6 +99,7 @@ def filter_cycles(self, query, slug, project_id, workspace_search):
             q,
             project__project_projectmember__member=self.request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
             workspace__slug=slug,
         )
 
@@ -121,6 +124,7 @@ def filter_modules(self, query, slug, project_id, workspace_search):
             q,
             project__project_projectmember__member=self.request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
             workspace__slug=slug,
         )
 
@@ -145,6 +149,7 @@ def filter_pages(self, query, slug, project_id, workspace_search):
             q,
             project__project_projectmember__member=self.request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
             workspace__slug=slug,
         )
 
@@ -169,6 +174,7 @@ def filter_views(self, query, slug, project_id, workspace_search):
             q,
             project__project_projectmember__member=self.request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
             workspace__slug=slug,
         )
 
@@ -235,6 +241,7 @@ def get(self, request, slug, project_id):
         cycle = request.query_params.get("cycle", "false")
         module = request.query_params.get("module", False)
         sub_issue = request.query_params.get("sub_issue", "false")
+        target_date = request.query_params.get("target_date", True)
 
         issue_id = request.query_params.get("issue_id", False)
 
@@ -242,6 +249,7 @@ def get(self, request, slug, project_id):
             workspace__slug=slug,
             project__project_projectmember__member=self.request.user,
             project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True
         )
 
         if workspace_search == "false":
@@ -253,7 +261,8 @@ def get(self, request, slug, project_id):
         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), ~Q(parent_id=issue_id))
+                ~Q(pk=issue_id), ~Q(pk=issue.parent_id), ~Q(parent_id=issue_id)
+            )
         if issue_relation == "true" and issue_id:
             issue = Issue.issue_objects.get(pk=issue_id)
             issues = issues.filter(
@@ -273,6 +282,9 @@ def get(self, request, slug, project_id):
         if module:
             issues = issues.exclude(issue_module__module=module)
 
+        if target_date == "none":
+            issues = issues.filter(target_date__isnull=True)
+
         return Response(
             issues.values(
                 "name",
diff --git a/apiserver/plane/app/views/state.py b/apiserver/plane/app/views/state/base.py
similarity index 89%
rename from apiserver/plane/app/views/state.py
rename to apiserver/plane/app/views/state/base.py
index 34b3d1dcc01..7b09044906d 100644
--- a/apiserver/plane/app/views/state.py
+++ b/apiserver/plane/app/views/state/base.py
@@ -9,14 +9,13 @@
 from rest_framework import status
 
 # Module imports
-from . import BaseViewSet, BaseAPIView
+from .. import BaseViewSet
 from plane.app.serializers import StateSerializer
 from plane.app.permissions import (
     ProjectEntityPermission,
-    WorkspaceEntityPermission,
 )
 from plane.db.models import State, Issue
-
+from plane.utils.cache import invalidate_cache
 
 class StateViewSet(BaseViewSet):
     serializer_class = StateSerializer
@@ -34,6 +33,7 @@ def get_queryset(self):
             .filter(
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
             )
             .filter(~Q(name="Triage"))
             .select_related("project")
@@ -41,6 +41,7 @@ def get_queryset(self):
             .distinct()
         )
 
+    @invalidate_cache(path="workspaces/:slug/states/", url_params=True, user=False)
     def create(self, request, slug, project_id):
         serializer = StateSerializer(data=request.data)
         if serializer.is_valid():
@@ -61,6 +62,7 @@ def list(self, request, slug, project_id):
             return Response(state_dict, status=status.HTTP_200_OK)
         return Response(states, status=status.HTTP_200_OK)
 
+    @invalidate_cache(path="workspaces/:slug/states/", url_params=True, user=False)
     def mark_as_default(self, request, slug, project_id, pk):
         # Select all the states which are marked as default
         _ = State.objects.filter(
@@ -71,6 +73,7 @@ def mark_as_default(self, request, slug, project_id, pk):
         ).update(default=True)
         return Response(status=status.HTTP_204_NO_CONTENT)
 
+    @invalidate_cache(path="workspaces/:slug/states/", url_params=True, user=False)
     def destroy(self, request, slug, project_id, pk):
         state = State.objects.get(
             ~Q(name="Triage"),
diff --git a/apiserver/plane/app/views/user.py b/apiserver/plane/app/views/user/base.py
similarity index 89%
rename from apiserver/plane/app/views/user.py
rename to apiserver/plane/app/views/user/base.py
index 7764e3b9753..4d69d1cf27c 100644
--- a/apiserver/plane/app/views/user.py
+++ b/apiserver/plane/app/views/user/base.py
@@ -1,25 +1,24 @@
+# Django imports
+from django.db.models import Case, Count, IntegerField, Q, When
+
 # Third party imports
-from rest_framework.response import Response
 from rest_framework import status
-
+from rest_framework.response import Response
 
 # Module imports
 from plane.app.serializers import (
-    UserSerializer,
     IssueActivitySerializer,
     UserMeSerializer,
     UserMeSettingsSerializer,
+    UserSerializer,
 )
-
-from plane.app.views.base import BaseViewSet, BaseAPIView
-from plane.db.models import User, IssueActivity, WorkspaceMember, ProjectMember
+from plane.app.views.base import BaseAPIView, BaseViewSet
+from plane.db.models import IssueActivity, ProjectMember, User, WorkspaceMember
 from plane.license.models import Instance, InstanceAdmin
+from plane.utils.cache import cache_response, invalidate_cache
 from plane.utils.paginator import BasePaginator
 
 
-from django.db.models import Q, F, Count, Case, When, IntegerField
-
-
 class UserEndpoint(BaseViewSet):
     serializer_class = UserSerializer
     model = User
@@ -27,6 +26,7 @@ class UserEndpoint(BaseViewSet):
     def get_object(self):
         return self.request.user
 
+    @cache_response(60 * 60)
     def retrieve(self, request):
         serialized_data = UserMeSerializer(request.user).data
         return Response(
@@ -34,10 +34,12 @@ def retrieve(self, request):
             status=status.HTTP_200_OK,
         )
 
+    @cache_response(60 * 60)
     def retrieve_user_settings(self, request):
         serialized_data = UserMeSettingsSerializer(request.user).data
         return Response(serialized_data, status=status.HTTP_200_OK)
 
+    @cache_response(60 * 60)
     def retrieve_instance_admin(self, request):
         instance = Instance.objects.first()
         is_admin = InstanceAdmin.objects.filter(
@@ -47,6 +49,11 @@ def retrieve_instance_admin(self, request):
             {"is_instance_admin": is_admin}, status=status.HTTP_200_OK
         )
 
+    @invalidate_cache(path="/api/users/me/")
+    def partial_update(self, request, *args, **kwargs):
+        return super().partial_update(request, *args, **kwargs)
+
+    @invalidate_cache(path="/api/users/me/")
     def deactivate(self, request):
         # Check all workspace user is active
         user = self.get_object()
@@ -145,6 +152,8 @@ def deactivate(self, request):
 
 
 class UpdateUserOnBoardedEndpoint(BaseAPIView):
+
+    @invalidate_cache(path="/api/users/me/")
     def patch(self, request):
         user = User.objects.get(pk=request.user.id, is_active=True)
         user.is_onboarded = request.data.get("is_onboarded", False)
@@ -155,6 +164,8 @@ def patch(self, request):
 
 
 class UpdateUserTourCompletedEndpoint(BaseAPIView):
+
+    @invalidate_cache(path="/api/users/me/")
     def patch(self, request):
         user = User.objects.get(pk=request.user.id, is_active=True)
         user.is_tour_completed = request.data.get("is_tour_completed", False)
@@ -165,6 +176,7 @@ def patch(self, request):
 
 
 class UserActivityEndpoint(BaseAPIView, BasePaginator):
+
     def get(self, request):
         queryset = IssueActivity.objects.filter(
             actor=request.user
diff --git a/apiserver/plane/app/views/view.py b/apiserver/plane/app/views/view/base.py
similarity index 96%
rename from apiserver/plane/app/views/view.py
rename to apiserver/plane/app/views/view/base.py
index ade445fae80..45e7bd29cf7 100644
--- a/apiserver/plane/app/views/view.py
+++ b/apiserver/plane/app/views/view/base.py
@@ -15,18 +15,15 @@
 from django.views.decorators.gzip import gzip_page
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
+from django.db.models import UUIDField
 from django.db.models.functions import Coalesce
-from django.contrib.postgres.aggregates import ArrayAgg
-from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
 
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
 
 # Module imports
-from . import BaseViewSet
+from .. import BaseViewSet
 from plane.app.serializers import (
     IssueViewSerializer,
     IssueSerializer,
@@ -128,7 +125,8 @@ def get_queryset(self):
                     ArrayAgg(
                         "assignees__id",
                         distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 ),
@@ -146,11 +144,6 @@ def get_queryset(self):
     @method_decorator(gzip_page)
     def list(self, request, slug):
         filters = issue_filters(request.query_params, "GET")
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
 
         # Custom ordering for priority and state
         priority_order = ["urgent", "high", "medium", "low", "none"]
@@ -290,6 +283,7 @@ def get_queryset(self):
             .filter(
                 project__project_projectmember__member=self.request.user,
                 project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
             )
             .select_related("project")
             .select_related("workspace")
diff --git a/apiserver/plane/app/views/webhook.py b/apiserver/plane/app/views/webhook/base.py
similarity index 98%
rename from apiserver/plane/app/views/webhook.py
rename to apiserver/plane/app/views/webhook/base.py
index fe69cd7e64e..9586722a0cc 100644
--- a/apiserver/plane/app/views/webhook.py
+++ b/apiserver/plane/app/views/webhook/base.py
@@ -8,7 +8,7 @@
 # Module imports
 from plane.db.models import Webhook, WebhookLog, Workspace
 from plane.db.models.webhook import generate_token
-from .base import BaseAPIView
+from ..base import BaseAPIView
 from plane.app.permissions import WorkspaceOwnerPermission
 from plane.app.serializers import WebhookSerializer, WebhookLogSerializer
 
@@ -41,7 +41,7 @@ def post(self, request, slug):
             raise IntegrityError
 
     def get(self, request, slug, pk=None):
-        if pk == None:
+        if pk is None:
             webhooks = Webhook.objects.filter(workspace__slug=slug)
             serializer = WebhookSerializer(
                 webhooks,
diff --git a/apiserver/plane/app/views/workspace.py b/apiserver/plane/app/views/workspace.py
deleted file mode 100644
index 47de86a1c17..00000000000
--- a/apiserver/plane/app/views/workspace.py
+++ /dev/null
@@ -1,1761 +0,0 @@
-# Python imports
-import jwt
-from datetime import date, datetime
-from dateutil.relativedelta import relativedelta
-
-# Django imports
-from django.db import IntegrityError
-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.db.models import (
-    Prefetch,
-    OuterRef,
-    Func,
-    F,
-    Q,
-    Count,
-    Case,
-    Value,
-    CharField,
-    When,
-    Max,
-    IntegerField,
-    Sum,
-)
-from django.db.models.functions import ExtractWeek, Cast, ExtractDay
-from django.db.models.fields import DateField
-from django.contrib.postgres.aggregates import ArrayAgg
-from django.contrib.postgres.fields import ArrayField
-from django.db.models import Value, UUIDField
-from django.db.models.functions import Coalesce
-
-# Third party modules
-from rest_framework import status
-from rest_framework.response import Response
-from rest_framework.permissions import AllowAny
-
-# Module imports
-from plane.app.serializers import (
-    WorkSpaceSerializer,
-    WorkSpaceMemberSerializer,
-    TeamSerializer,
-    WorkSpaceMemberInviteSerializer,
-    UserLiteSerializer,
-    ProjectMemberSerializer,
-    WorkspaceThemeSerializer,
-    IssueActivitySerializer,
-    IssueSerializer,
-    WorkspaceMemberAdminSerializer,
-    WorkspaceMemberMeSerializer,
-    ProjectMemberRoleSerializer,
-    WorkspaceUserPropertiesSerializer,
-    WorkspaceEstimateSerializer,
-    StateSerializer,
-    LabelSerializer,
-)
-from plane.app.views.base import BaseAPIView
-from . import BaseViewSet
-from plane.db.models import (
-    State,
-    User,
-    Workspace,
-    WorkspaceMemberInvite,
-    Team,
-    ProjectMember,
-    IssueActivity,
-    Issue,
-    WorkspaceTheme,
-    IssueLink,
-    IssueAttachment,
-    IssueSubscriber,
-    Project,
-    Label,
-    WorkspaceMember,
-    CycleIssue,
-    IssueReaction,
-    WorkspaceUserProperties,
-    Estimate,
-    EstimatePoint,
-    Module,
-    ModuleLink,
-    Cycle,
-)
-from plane.app.permissions import (
-    WorkSpaceBasePermission,
-    WorkSpaceAdminPermission,
-    WorkspaceEntityPermission,
-    WorkspaceViewerPermission,
-    WorkspaceUserPermission,
-    ProjectLitePermission,
-)
-from plane.bgtasks.workspace_invitation_task import workspace_invitation
-from plane.utils.issue_filters import issue_filters
-from plane.bgtasks.event_tracking_task import workspace_invite_event
-from plane.app.serializers.module import (
-    ModuleSerializer,
-)
-from plane.app.serializers.cycle import (
-    CycleSerializer,
-)
-
-
-class WorkSpaceViewSet(BaseViewSet):
-    model = Workspace
-    serializer_class = WorkSpaceSerializer
-    permission_classes = [
-        WorkSpaceBasePermission,
-    ]
-
-    search_fields = [
-        "name",
-    ]
-    filterset_fields = [
-        "owner",
-    ]
-
-    lookup_field = "slug"
-
-    def get_queryset(self):
-        member_count = (
-            WorkspaceMember.objects.filter(
-                workspace=OuterRef("id"),
-                member__is_bot=False,
-                is_active=True,
-            )
-            .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")
-        )
-        return (
-            self.filter_queryset(
-                super().get_queryset().select_related("owner")
-            )
-            .order_by("name")
-            .filter(
-                workspace_member__member=self.request.user,
-                workspace_member__is_active=True,
-            )
-            .annotate(total_members=member_count)
-            .annotate(total_issues=issue_count)
-            .select_related("owner")
-        )
-
-    def create(self, request):
-        try:
-            serializer = WorkSpaceSerializer(data=request.data)
-
-            slug = request.data.get("slug", False)
-            name = request.data.get("name", False)
-
-            if not name or not slug:
-                return Response(
-                    {"error": "Both name and slug are required"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if len(name) > 80 or len(slug) > 48:
-                return Response(
-                    {
-                        "error": "The maximum length for name is 80 and for slug is 48"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            if serializer.is_valid():
-                serializer.save(owner=request.user)
-                # Create Workspace member
-                _ = WorkspaceMember.objects.create(
-                    workspace_id=serializer.data["id"],
-                    member=request.user,
-                    role=20,
-                    company_role=request.data.get("company_role", ""),
-                )
-                return Response(
-                    serializer.data, status=status.HTTP_201_CREATED
-                )
-            return Response(
-                [serializer.errors[error][0] for error in serializer.errors],
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        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,
-                )
-
-
-class UserWorkSpacesEndpoint(BaseAPIView):
-    search_fields = [
-        "name",
-    ]
-    filterset_fields = [
-        "owner",
-    ]
-
-    def get(self, request):
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
-        member_count = (
-            WorkspaceMember.objects.filter(
-                workspace=OuterRef("id"),
-                member__is_bot=False,
-                is_active=True,
-            )
-            .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.filter(
-                        member=request.user, is_active=True
-                    ),
-                )
-            )
-            .select_related("owner")
-            .annotate(total_members=member_count)
-            .annotate(total_issues=issue_count)
-            .filter(
-                workspace_member__member=request.user,
-                workspace_member__is_active=True,
-            )
-            .distinct()
-        )
-        workspaces = WorkSpaceSerializer(
-            self.filter_queryset(workspace),
-            fields=fields if fields else None,
-            many=True,
-        ).data
-        return Response(workspaces, status=status.HTTP_200_OK)
-
-
-class WorkSpaceAvailabilityCheckEndpoint(BaseAPIView):
-    def get(self, request):
-        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)
-
-
-class WorkspaceInvitationsViewset(BaseViewSet):
-    """Endpoint for creating, listing and  deleting workspaces"""
-
-    serializer_class = WorkSpaceMemberInviteSerializer
-    model = WorkspaceMemberInvite
-
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("workspace", "workspace__owner", "created_by")
-        )
-
-    def create(self, request, slug):
-        emails = request.data.get("emails", [])
-        # Check if email is provided
-        if not emails:
-            return Response(
-                {"error": "Emails are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # check for role level of the requesting user
-        requesting_user = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-
-        # Check if any invited user has an higher role
-        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,
-            )
-
-        # Get the workspace object
-        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],
-            is_active=True,
-        ).select_related("member", "workspace", "workspace__owner")
-
-        if 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,
-            )
-
-        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,
-                )
-        # Create workspace member invite
-        workspace_invitations = WorkspaceMemberInvite.objects.bulk_create(
-            workspace_invitations, batch_size=10, ignore_conflicts=True
-        )
-
-        current_site = request.META.get("HTTP_ORIGIN")
-
-        # Send invitations
-        for invitation in workspace_invitations:
-            workspace_invitation.delay(
-                invitation.email,
-                workspace.id,
-                invitation.token,
-                current_site,
-                request.user.email,
-            )
-
-        return Response(
-            {
-                "message": "Emails sent successfully",
-            },
-            status=status.HTTP_200_OK,
-        )
-
-    def destroy(self, request, slug, pk):
-        workspace_member_invite = WorkspaceMemberInvite.objects.get(
-            pk=pk, workspace__slug=slug
-        )
-        workspace_member_invite.delete()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class WorkspaceJoinEndpoint(BaseAPIView):
-    permission_classes = [
-        AllowAny,
-    ]
-    """Invitation response endpoint the user can respond to the invitation"""
-
-    def post(self, request, slug, pk):
-        workspace_invite = WorkspaceMemberInvite.objects.get(
-            pk=pk, workspace__slug=slug
-        )
-
-        email = request.data.get("email", "")
-
-        # Check the email
-        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 already responded then return error
-        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 workspace_invite.accepted:
-                # Check if the user created account after invitation
-                user = User.objects.filter(email=email).first()
-
-                # If the user is present then create the workspace member
-                if user is not None:
-                    # Check if the user was already a member of workspace then activate the user
-                    workspace_member = WorkspaceMember.objects.filter(
-                        workspace=workspace_invite.workspace, member=user
-                    ).first()
-                    if workspace_member is not None:
-                        workspace_member.is_active = True
-                        workspace_member.role = workspace_invite.role
-                        workspace_member.save()
-                    else:
-                        # Create a Workspace
-                        _ = WorkspaceMember.objects.create(
-                            workspace=workspace_invite.workspace,
-                            member=user,
-                            role=workspace_invite.role,
-                        )
-
-                    # Set the user last_workspace_id to the accepted workspace
-                    user.last_workspace_id = workspace_invite.workspace.id
-                    user.save()
-
-                    # Delete the invitation
-                    workspace_invite.delete()
-
-                # Send event
-                workspace_invite_event.delay(
-                    user=user.id if user is not None else None,
-                    email=email,
-                    user_agent=request.META.get("HTTP_USER_AGENT"),
-                    ip=request.META.get("REMOTE_ADDR"),
-                    event_name="MEMBER_ACCEPTED",
-                    accepted_from="EMAIL",
-                )
-
-                return Response(
-                    {"message": "Workspace Invitation Accepted"},
-                    status=status.HTTP_200_OK,
-                )
-
-            # Workspace invitation rejected
-            return Response(
-                {"message": "Workspace Invitation was not accepted"},
-                status=status.HTTP_200_OK,
-            )
-
-        return Response(
-            {"error": "You have already responded to the invitation request"},
-            status=status.HTTP_400_BAD_REQUEST,
-        )
-
-    def get(self, request, slug, pk):
-        workspace_invitation = WorkspaceMemberInvite.objects.get(
-            workspace__slug=slug, pk=pk
-        )
-        serializer = WorkSpaceMemberInviteSerializer(workspace_invitation)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class UserWorkspaceInvitationsViewSet(BaseViewSet):
-    serializer_class = WorkSpaceMemberInviteSerializer
-    model = WorkspaceMemberInvite
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(email=self.request.user.email)
-            .select_related("workspace", "workspace__owner", "created_by")
-            .annotate(total_members=Count("workspace__workspace_member"))
-        )
-
-    def create(self, request):
-        invitations = request.data.get("invitations", [])
-        workspace_invitations = WorkspaceMemberInvite.objects.filter(
-            pk__in=invitations, email=request.user.email
-        ).order_by("-created_at")
-
-        # If the user is already a member of workspace and was deactivated then activate the user
-        for invitation in workspace_invitations:
-            # Update the WorkspaceMember for this specific invitation
-            WorkspaceMember.objects.filter(
-                workspace_id=invitation.workspace_id, member=request.user
-            ).update(is_active=True, role=invitation.role)
-
-        # Bulk create the user for all the workspaces
-        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()
-
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class WorkSpaceMemberViewSet(BaseViewSet):
-    serializer_class = WorkspaceMemberAdminSerializer
-    model = WorkspaceMember
-
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get_permissions(self):
-        if self.action == "leave":
-            self.permission_classes = [
-                WorkspaceUserPermission,
-            ]
-        else:
-            self.permission_classes = [
-                WorkspaceEntityPermission,
-            ]
-
-        return super(WorkSpaceMemberViewSet, self).get_permissions()
-
-    search_fields = [
-        "member__display_name",
-        "member__first_name",
-    ]
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(
-                workspace__slug=self.kwargs.get("slug"),
-                is_active=True,
-            )
-            .select_related("workspace", "workspace__owner")
-            .select_related("member")
-        )
-
-    def list(self, request, slug):
-        workspace_member = WorkspaceMember.objects.get(
-            member=request.user,
-            workspace__slug=slug,
-            is_active=True,
-        )
-
-        # Get all active workspace members
-        workspace_members = self.get_queryset()
-
-        if workspace_member.role > 10:
-            serializer = WorkspaceMemberAdminSerializer(
-                workspace_members,
-                fields=("id", "member", "role"),
-                many=True,
-            )
-        else:
-            serializer = WorkSpaceMemberSerializer(
-                workspace_members,
-                fields=("id", "member", "role"),
-                many=True,
-            )
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-    def partial_update(self, request, slug, pk):
-        workspace_member = WorkspaceMember.objects.get(
-            pk=pk,
-            workspace__slug=slug,
-            member__is_bot=False,
-            is_active=True,
-        )
-        if request.user.id == workspace_member.member_id:
-            return Response(
-                {"error": "You cannot update your own role"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # Get the requested user role
-        requested_workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-        # 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,
-            )
-
-        serializer = WorkSpaceMemberSerializer(
-            workspace_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, pk):
-        # Check the user role who is deleting the user
-        workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            pk=pk,
-            member__is_bot=False,
-            is_active=True,
-        )
-
-        # check requesting user role
-        requesting_workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-
-        if str(workspace_member.id) == str(requesting_workspace_member.id):
-            return Response(
-                {
-                    "error": "You cannot remove yourself from the workspace. Please use leave workspace"
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        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 (
-            Project.objects.annotate(
-                total_members=Count("project_projectmember"),
-                member_with_role=Count(
-                    "project_projectmember",
-                    filter=Q(
-                        project_projectmember__member_id=workspace_member.id,
-                        project_projectmember__role=20,
-                    ),
-                ),
-            )
-            .filter(total_members=1, member_with_role=1, workspace__slug=slug)
-            .exists()
-        ):
-            return Response(
-                {
-                    "error": "User is a part of some projects where they are the only admin, they should either leave that project or promote another user to admin."
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # Deactivate the users from the projects where the user is part of
-        _ = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            member_id=workspace_member.member_id,
-            is_active=True,
-        ).update(is_active=False)
-
-        workspace_member.is_active = False
-        workspace_member.save()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-    def leave(self, request, slug):
-        workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-
-        # Check if the leaving user is the only admin of the workspace
-        if (
-            workspace_member.role == 20
-            and not WorkspaceMember.objects.filter(
-                workspace__slug=slug,
-                role=20,
-                is_active=True,
-            ).count()
-            > 1
-        ):
-            return Response(
-                {
-                    "error": "You cannot leave the workspace as you are the only admin of the workspace you will have to either delete the workspace or promote another user to admin."
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        if (
-            Project.objects.annotate(
-                total_members=Count("project_projectmember"),
-                member_with_role=Count(
-                    "project_projectmember",
-                    filter=Q(
-                        project_projectmember__member_id=request.user.id,
-                        project_projectmember__role=20,
-                    ),
-                ),
-            )
-            .filter(total_members=1, member_with_role=1, workspace__slug=slug)
-            .exists()
-        ):
-            return Response(
-                {
-                    "error": "You are a part of some projects where you are the only admin, you should either leave the project or promote another user to admin."
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # # Deactivate the users from the projects where the user is part of
-        _ = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            member_id=workspace_member.member_id,
-            is_active=True,
-        ).update(is_active=False)
-
-        # # Deactivate the user
-        workspace_member.is_active = False
-        workspace_member.save()
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class WorkspaceProjectMemberEndpoint(BaseAPIView):
-    serializer_class = ProjectMemberRoleSerializer
-    model = ProjectMember
-
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get(self, request, slug):
-        # Fetch all project IDs where the user is involved
-        project_ids = (
-            ProjectMember.objects.filter(
-                member=request.user,
-                is_active=True,
-            )
-            .values_list("project_id", flat=True)
-            .distinct()
-        )
-
-        # Get all the project members in which the user is involved
-        project_members = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            project_id__in=project_ids,
-            is_active=True,
-        ).select_related("project", "member", "workspace")
-        project_members = ProjectMemberRoleSerializer(
-            project_members, many=True
-        ).data
-
-        project_members_dict = dict()
-
-        # Construct a dictionary with project_id as key and project_members as value
-        for project_member in project_members:
-            project_id = project_member.pop("project")
-            if str(project_id) not in project_members_dict:
-                project_members_dict[str(project_id)] = []
-            project_members_dict[str(project_id)].append(project_member)
-
-        return Response(project_members_dict, status=status.HTTP_200_OK)
-
-
-class TeamMemberViewSet(BaseViewSet):
-    serializer_class = TeamSerializer
-    model = Team
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
-
-    search_fields = [
-        "member__display_name",
-        "member__first_name",
-    ]
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("workspace", "workspace__owner")
-            .prefetch_related("members")
-        )
-
-    def create(self, request, slug):
-        members = list(
-            WorkspaceMember.objects.filter(
-                workspace__slug=slug,
-                member__id__in=request.data.get("members", []),
-                is_active=True,
-            )
-            .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)
-
-        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 UserLastProjectWithWorkspaceEndpoint(BaseAPIView):
-    def get(self, request):
-        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)
-
-        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):
-        workspace_member = WorkspaceMember.objects.get(
-            member=request.user,
-            workspace__slug=slug,
-            is_active=True,
-        )
-        serializer = WorkspaceMemberMeSerializer(workspace_member)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class WorkspaceMemberUserViewsEndpoint(BaseAPIView):
-    def post(self, request, slug):
-        workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-        workspace_member.view_props = request.data.get("view_props", {})
-        workspace_member.save()
-
-        return Response(status=status.HTTP_204_NO_CONTENT)
-
-
-class UserActivityGraphEndpoint(BaseAPIView):
-    def get(self, request, slug):
-        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)
-
-
-class UserIssueCompletedGraphEndpoint(BaseAPIView):
-    def get(self, request, slug):
-        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")
-        )
-
-        return Response(issues, status=status.HTTP_200_OK)
-
-
-class WeekInMonth(Func):
-    function = "FLOOR"
-    template = "(((%(expressions)s - 1) / 7) + 1)::INTEGER"
-
-
-class UserWorkspaceDashboardEndpoint(BaseAPIView):
-    def get(self, request, slug):
-        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")
-        )
-
-        assigned_issues = Issue.issue_objects.filter(
-            workspace__slug=slug, assignees__in=[request.user]
-        ).count()
-
-        pending_issues_count = Issue.issue_objects.filter(
-            ~Q(state__group__in=["completed", "cancelled"]),
-            workspace__slug=slug,
-            assignees__in=[request.user],
-        ).count()
-
-        completed_issues_count = Issue.issue_objects.filter(
-            workspace__slug=slug,
-            assignees__in=[request.user],
-            state__group="completed",
-        ).count()
-
-        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()
-        )
-
-        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):
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
-    model = WorkspaceTheme
-    serializer_class = WorkspaceThemeSerializer
-
-    def get_queryset(self):
-        return (
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-        )
-
-    def create(self, request, slug):
-        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):
-        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,
-                project__project_projectmember__is_active=True
-            )
-            .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.issue_objects.filter(
-                workspace__slug=slug,
-                assignees__in=[user_id],
-                project__project_projectmember__member=request.user,
-                project__project_projectmember__is_active=True
-            )
-            .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")
-        )
-
-        created_issues = (
-            Issue.issue_objects.filter(
-                workspace__slug=slug,
-                project__project_projectmember__member=request.user,
-                project__project_projectmember__is_active=True,
-                created_by_id=user_id,
-            )
-            .filter(**filters)
-            .count()
-        )
-
-        assigned_issues_count = (
-            Issue.issue_objects.filter(
-                workspace__slug=slug,
-                assignees__in=[user_id],
-                project__project_projectmember__member=request.user,
-                project__project_projectmember__is_active=True,
-            )
-            .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,
-                project__project_projectmember__is_active=True,
-            )
-            .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,
-                project__project_projectmember__is_active=True
-            )
-            .filter(**filters)
-            .count()
-        )
-
-        subscribed_issues_count = (
-            IssueSubscriber.objects.filter(
-                workspace__slug=slug,
-                subscriber_id=user_id,
-                project__project_projectmember__member=request.user,
-                project__project_projectmember__is_active=True
-            )
-            .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):
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get(self, request, slug, user_id):
-        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,
-            project__project_projectmember__is_active=True,
-            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):
-        user_data = User.objects.get(pk=user_id)
-
-        requesting_workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-        projects = []
-        if requesting_workspace_member.role >= 10:
-            projects = (
-                Project.objects.filter(
-                    workspace__slug=slug,
-                    project_projectmember__member=request.user,
-                    project_projectmember__is_active=True,
-                )
-                .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(
-                    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(
-                    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,
-                        ),
-                    )
-                )
-                .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,
-                },
-            },
-            status=status.HTTP_200_OK,
-        )
-
-
-class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceViewerPermission,
-    ]
-
-    def get(self, request, slug, user_id):
-        fields = [
-            field
-            for field in request.GET.get("fields", "").split(",")
-            if field
-        ]
-        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,
-                project__project_projectmember__is_active=True
-            )
-            .filter(**filters)
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_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")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-            .order_by("created_at")
-        ).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(),
-                )
-            ).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 = IssueSerializer(
-            issue_queryset, many=True, fields=fields if fields else None
-        ).data
-        return Response(issues, status=status.HTTP_200_OK)
-
-
-class WorkspaceLabelsEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceViewerPermission,
-    ]
-
-    def get(self, request, slug):
-        labels = Label.objects.filter(
-            workspace__slug=slug,
-            project__project_projectmember__member=request.user,
-            project__project_projectmember__is_active=True
-        )
-        serializer = LabelSerializer(labels, many=True).data
-        return Response(serializer, status=status.HTTP_200_OK)
-
-
-class WorkspaceStatesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get(self, request, slug):
-        states = State.objects.filter(
-            workspace__slug=slug,
-            project__project_projectmember__member=request.user,
-            project__project_projectmember__is_active=True
-        )
-        serializer = StateSerializer(states, many=True).data
-        return Response(serializer, status=status.HTTP_200_OK)
-
-
-class WorkspaceEstimatesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get(self, request, slug):
-        estimate_ids = Project.objects.filter(
-            workspace__slug=slug, estimate__isnull=False
-        ).values_list("estimate_id", flat=True)
-        estimates = Estimate.objects.filter(
-            pk__in=estimate_ids
-        ).prefetch_related(
-            Prefetch(
-                "points",
-                queryset=EstimatePoint.objects.select_related(
-                    "estimate", "workspace", "project"
-                ),
-            )
-        )
-        serializer = WorkspaceEstimateSerializer(estimates, many=True)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class WorkspaceModulesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceViewerPermission,
-    ]
-
-    def get(self, request, slug):
-        modules = (
-            Module.objects.filter(workspace__slug=slug)
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("lead")
-            .prefetch_related("members")
-            .prefetch_related(
-                Prefetch(
-                    "link_module",
-                    queryset=ModuleLink.objects.select_related(
-                        "module", "created_by"
-                    ),
-                )
-            )
-            .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",
-                        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",
-                        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",
-                        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",
-                        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",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                )
-            )
-            .order_by(self.kwargs.get("order_by", "-created_at"))
-        )
-
-        serializer = ModuleSerializer(modules, many=True).data
-        return Response(serializer, status=status.HTTP_200_OK)
-
-
-class WorkspaceCyclesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceViewerPermission,
-    ]
-
-    def get(self, request, slug):
-        cycles = (
-            Cycle.objects.filter(workspace__slug=slug)
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("owned_by")
-            .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",
-                        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",
-                        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",
-                        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",
-                        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",
-                        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",
-                        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",
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                )
-            )
-            .order_by(self.kwargs.get("order_by", "-created_at"))
-            .distinct()
-        )
-        serializer = CycleSerializer(cycles, many=True).data
-        return Response(serializer, status=status.HTTP_200_OK)
-
-
-class WorkspaceUserPropertiesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceViewerPermission,
-    ]
-
-    def patch(self, request, slug):
-        workspace_properties = WorkspaceUserProperties.objects.get(
-            user=request.user,
-            workspace__slug=slug,
-        )
-
-        workspace_properties.filters = request.data.get(
-            "filters", workspace_properties.filters
-        )
-        workspace_properties.display_filters = request.data.get(
-            "display_filters", workspace_properties.display_filters
-        )
-        workspace_properties.display_properties = request.data.get(
-            "display_properties", workspace_properties.display_properties
-        )
-        workspace_properties.save()
-
-        serializer = WorkspaceUserPropertiesSerializer(workspace_properties)
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-    def get(self, request, slug):
-        (
-            workspace_properties,
-            _,
-        ) = WorkspaceUserProperties.objects.get_or_create(
-            user=request.user, workspace__slug=slug
-        )
-        serializer = WorkspaceUserPropertiesSerializer(workspace_properties)
-        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/base.py b/apiserver/plane/app/views/workspace/base.py
new file mode 100644
index 00000000000..45966629180
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/base.py
@@ -0,0 +1,418 @@
+# Python imports
+import csv
+import io
+from datetime import date
+
+from dateutil.relativedelta import relativedelta
+from django.db import IntegrityError
+from django.db.models import (
+    Count,
+    F,
+    Func,
+    OuterRef,
+    Prefetch,
+    Q,
+)
+from django.db.models.fields import DateField
+from django.db.models.functions import Cast, ExtractDay, ExtractWeek
+
+# Django imports
+from django.http import HttpResponse
+from django.utils import timezone
+
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+from plane.app.permissions import (
+    WorkSpaceAdminPermission,
+    WorkSpaceBasePermission,
+    WorkspaceEntityPermission,
+)
+
+# Module imports
+from plane.app.serializers import (
+    WorkSpaceSerializer,
+    WorkspaceThemeSerializer,
+)
+from plane.app.views.base import BaseAPIView, BaseViewSet
+from plane.db.models import (
+    Issue,
+    IssueActivity,
+    Workspace,
+    WorkspaceMember,
+    WorkspaceTheme,
+)
+from plane.utils.cache import cache_response, invalidate_cache
+
+
+class WorkSpaceViewSet(BaseViewSet):
+    model = Workspace
+    serializer_class = WorkSpaceSerializer
+    permission_classes = [
+        WorkSpaceBasePermission,
+    ]
+
+    search_fields = [
+        "name",
+    ]
+    filterset_fields = [
+        "owner",
+    ]
+
+    lookup_field = "slug"
+
+    def get_queryset(self):
+        member_count = (
+            WorkspaceMember.objects.filter(
+                workspace=OuterRef("id"),
+                member__is_bot=False,
+                is_active=True,
+            )
+            .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")
+        )
+        return (
+            self.filter_queryset(
+                super().get_queryset().select_related("owner")
+            )
+            .order_by("name")
+            .filter(
+                workspace_member__member=self.request.user,
+                workspace_member__is_active=True,
+            )
+            .annotate(total_members=member_count)
+            .annotate(total_issues=issue_count)
+            .select_related("owner")
+        )
+
+    @invalidate_cache(path="/api/workspaces/", user=False)
+    @invalidate_cache(path="/api/users/me/workspaces/")
+    def create(self, request):
+        try:
+            serializer = WorkSpaceSerializer(data=request.data)
+
+            slug = request.data.get("slug", False)
+            name = request.data.get("name", False)
+
+            if not name or not slug:
+                return Response(
+                    {"error": "Both name and slug are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            if len(name) > 80 or len(slug) > 48:
+                return Response(
+                    {
+                        "error": "The maximum length for name is 80 and for slug is 48"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            if serializer.is_valid():
+                serializer.save(owner=request.user)
+                # Create Workspace member
+                _ = WorkspaceMember.objects.create(
+                    workspace_id=serializer.data["id"],
+                    member=request.user,
+                    role=20,
+                    company_role=request.data.get("company_role", ""),
+                )
+                return Response(
+                    serializer.data, status=status.HTTP_201_CREATED
+                )
+            return Response(
+                [serializer.errors[error][0] for error in serializer.errors],
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        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,
+                )
+
+    @cache_response(60 * 60 * 2)
+    def list(self, request, *args, **kwargs):
+        return super().list(request, *args, **kwargs)
+
+    @invalidate_cache(path="/api/workspaces/", user=False)
+    @invalidate_cache(path="/api/users/me/workspaces/")
+    def partial_update(self, request, *args, **kwargs):
+        return super().partial_update(request, *args, **kwargs)
+
+    @invalidate_cache(path="/api/workspaces/", user=False)
+    @invalidate_cache(path="/api/users/me/workspaces/")
+    @invalidate_cache(path="/api/users/me/settings/")
+    def destroy(self, request, *args, **kwargs):
+        return super().destroy(request, *args, **kwargs)
+
+
+class UserWorkSpacesEndpoint(BaseAPIView):
+    search_fields = [
+        "name",
+    ]
+    filterset_fields = [
+        "owner",
+    ]
+
+    @cache_response(60 * 60 * 2)
+    def get(self, request):
+        fields = [
+            field
+            for field in request.GET.get("fields", "").split(",")
+            if field
+        ]
+        member_count = (
+            WorkspaceMember.objects.filter(
+                workspace=OuterRef("id"),
+                member__is_bot=False,
+                is_active=True,
+            )
+            .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.filter(
+                        member=request.user, is_active=True
+                    ),
+                )
+            )
+            .select_related("owner")
+            .annotate(total_members=member_count)
+            .annotate(total_issues=issue_count)
+            .filter(
+                workspace_member__member=request.user,
+                workspace_member__is_active=True,
+            )
+            .distinct()
+        )
+        workspaces = WorkSpaceSerializer(
+            self.filter_queryset(workspace),
+            fields=fields if fields else None,
+            many=True,
+        ).data
+        return Response(workspaces, status=status.HTTP_200_OK)
+
+
+class WorkSpaceAvailabilityCheckEndpoint(BaseAPIView):
+    def get(self, request):
+        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)
+
+
+class WeekInMonth(Func):
+    function = "FLOOR"
+    template = "(((%(expressions)s - 1) / 7) + 1)::INTEGER"
+
+
+class UserWorkspaceDashboardEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        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")
+        )
+
+        assigned_issues = Issue.issue_objects.filter(
+            workspace__slug=slug, assignees__in=[request.user]
+        ).count()
+
+        pending_issues_count = Issue.issue_objects.filter(
+            ~Q(state__group__in=["completed", "cancelled"]),
+            workspace__slug=slug,
+            assignees__in=[request.user],
+        ).count()
+
+        completed_issues_count = Issue.issue_objects.filter(
+            workspace__slug=slug,
+            assignees__in=[request.user],
+            state__group="completed",
+        ).count()
+
+        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()
+        )
+
+        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):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+    model = WorkspaceTheme
+    serializer_class = WorkspaceThemeSerializer
+
+    def get_queryset(self):
+        return (
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+        )
+
+    def create(self, request, slug):
+        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 ExportWorkspaceUserActivityEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def generate_csv_from_rows(self, 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]
+        csv_buffer.seek(0)
+        return csv_buffer
+
+    def post(self, request, slug, user_id):
+
+        if not request.data.get("date"):
+            return Response(
+                {"error": "Date is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        user_activities = IssueActivity.objects.filter(
+            ~Q(field__in=["comment", "vote", "reaction", "draft"]),
+            workspace__slug=slug,
+            created_at__date=request.data.get("date"),
+            project__project_projectmember__member=request.user,
+            actor_id=user_id,
+        ).select_related("actor", "workspace", "issue", "project")[:10000]
+
+        header = [
+            "Actor name",
+            "Issue ID",
+            "Project",
+            "Created at",
+            "Updated at",
+            "Action",
+            "Field",
+            "Old value",
+            "New value",
+        ]
+        rows = [
+            (
+                activity.actor.display_name,
+                f"{activity.project.identifier} - {activity.issue.sequence_id if activity.issue else ''}",
+                activity.project.name,
+                activity.created_at,
+                activity.updated_at,
+                activity.verb,
+                activity.field,
+                activity.old_value,
+                activity.new_value,
+            )
+            for activity in user_activities
+        ]
+        csv_buffer = self.generate_csv_from_rows([header] + rows)
+        response = HttpResponse(csv_buffer.getvalue(), content_type="text/csv")
+        response["Content-Disposition"] = (
+            'attachment; filename="workspace-user-activity.csv"'
+        )
+        return response
diff --git a/apiserver/plane/app/views/workspace/cycle.py b/apiserver/plane/app/views/workspace/cycle.py
new file mode 100644
index 00000000000..ea081cf9930
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/cycle.py
@@ -0,0 +1,116 @@
+# Django imports
+from django.db.models import (
+    Q,
+    Count,
+    Sum,
+)
+
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.views.base import BaseAPIView
+from plane.db.models import Cycle
+from plane.app.permissions import WorkspaceViewerPermission
+from plane.app.serializers.cycle import CycleSerializer
+
+
+class WorkspaceCyclesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    def get(self, request, slug):
+        cycles = (
+            Cycle.objects.filter(workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("owned_by")
+            .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",
+                        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",
+                        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",
+                        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",
+                        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",
+                        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",
+                        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",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .order_by(self.kwargs.get("order_by", "-created_at"))
+            .distinct()
+        )
+        serializer = CycleSerializer(cycles, many=True).data
+        return Response(serializer, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/estimate.py b/apiserver/plane/app/views/workspace/estimate.py
new file mode 100644
index 00000000000..59a23d86778
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/estimate.py
@@ -0,0 +1,30 @@
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.permissions import WorkspaceEntityPermission
+from plane.app.serializers import WorkspaceEstimateSerializer
+from plane.app.views.base import BaseAPIView
+from plane.db.models import Estimate, Project
+from plane.utils.cache import cache_response
+
+
+class WorkspaceEstimatesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    @cache_response(60 * 60 * 2)
+    def get(self, request, slug):
+        estimate_ids = Project.objects.filter(
+            workspace__slug=slug, estimate__isnull=False
+        ).values_list("estimate_id", flat=True)
+        estimates = (
+            Estimate.objects.filter(pk__in=estimate_ids, workspace__slug=slug)
+            .prefetch_related("points")
+            .select_related("workspace", "project")
+        )
+
+        serializer = WorkspaceEstimateSerializer(estimates, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/invite.py b/apiserver/plane/app/views/workspace/invite.py
new file mode 100644
index 00000000000..807c060ad21
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/invite.py
@@ -0,0 +1,301 @@
+# Python imports
+import jwt
+from datetime import datetime
+
+# Django imports
+from django.conf import settings
+from django.utils import timezone
+from django.db.models import Count
+from django.core.exceptions import ValidationError
+from django.core.validators import validate_email
+
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+from rest_framework.permissions import AllowAny
+
+# Module imports
+from plane.app.serializers import (
+    WorkSpaceMemberSerializer,
+    WorkSpaceMemberInviteSerializer,
+)
+from plane.app.views.base import BaseAPIView
+from .. import BaseViewSet
+from plane.db.models import (
+    User,
+    Workspace,
+    WorkspaceMemberInvite,
+    WorkspaceMember,
+)
+from plane.app.permissions import WorkSpaceAdminPermission
+from plane.bgtasks.workspace_invitation_task import workspace_invitation
+from plane.bgtasks.event_tracking_task import workspace_invite_event
+from plane.utils.cache import invalidate_cache
+
+class WorkspaceInvitationsViewset(BaseViewSet):
+    """Endpoint for creating, listing and  deleting workspaces"""
+
+    serializer_class = WorkSpaceMemberInviteSerializer
+    model = WorkspaceMemberInvite
+
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("workspace", "workspace__owner", "created_by")
+        )
+
+    def create(self, request, slug):
+        emails = request.data.get("emails", [])
+        # Check if email is provided
+        if not emails:
+            return Response(
+                {"error": "Emails are required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # check for role level of the requesting user
+        requesting_user = WorkspaceMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+
+        # Check if any invited user has an higher role
+        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,
+            )
+
+        # Get the workspace object
+        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],
+            is_active=True,
+        ).select_related("member", "workspace", "workspace__owner")
+
+        if 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,
+            )
+
+        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,
+                )
+        # Create workspace member invite
+        workspace_invitations = WorkspaceMemberInvite.objects.bulk_create(
+            workspace_invitations, batch_size=10, ignore_conflicts=True
+        )
+
+        current_site = request.META.get("HTTP_ORIGIN")
+
+        # Send invitations
+        for invitation in workspace_invitations:
+            workspace_invitation.delay(
+                invitation.email,
+                workspace.id,
+                invitation.token,
+                current_site,
+                request.user.email,
+            )
+
+        return Response(
+            {
+                "message": "Emails sent successfully",
+            },
+            status=status.HTTP_200_OK,
+        )
+
+    def destroy(self, request, slug, pk):
+        workspace_member_invite = WorkspaceMemberInvite.objects.get(
+            pk=pk, workspace__slug=slug
+        )
+        workspace_member_invite.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class WorkspaceJoinEndpoint(BaseAPIView):
+    permission_classes = [
+        AllowAny,
+    ]
+    """Invitation response endpoint the user can respond to the invitation"""
+
+    @invalidate_cache(path="/api/workspaces/", user=False)
+    @invalidate_cache(path="/api/users/me/workspaces/")
+    def post(self, request, slug, pk):
+        workspace_invite = WorkspaceMemberInvite.objects.get(
+            pk=pk, workspace__slug=slug
+        )
+
+        email = request.data.get("email", "")
+
+        # Check the email
+        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 already responded then return error
+        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 workspace_invite.accepted:
+                # Check if the user created account after invitation
+                user = User.objects.filter(email=email).first()
+
+                # If the user is present then create the workspace member
+                if user is not None:
+                    # Check if the user was already a member of workspace then activate the user
+                    workspace_member = WorkspaceMember.objects.filter(
+                        workspace=workspace_invite.workspace, member=user
+                    ).first()
+                    if workspace_member is not None:
+                        workspace_member.is_active = True
+                        workspace_member.role = workspace_invite.role
+                        workspace_member.save()
+                    else:
+                        # Create a Workspace
+                        _ = WorkspaceMember.objects.create(
+                            workspace=workspace_invite.workspace,
+                            member=user,
+                            role=workspace_invite.role,
+                        )
+
+                    # Set the user last_workspace_id to the accepted workspace
+                    user.last_workspace_id = workspace_invite.workspace.id
+                    user.save()
+
+                    # Delete the invitation
+                    workspace_invite.delete()
+
+                # Send event
+                workspace_invite_event.delay(
+                    user=user.id if user is not None else None,
+                    email=email,
+                    user_agent=request.META.get("HTTP_USER_AGENT"),
+                    ip=request.META.get("REMOTE_ADDR"),
+                    event_name="MEMBER_ACCEPTED",
+                    accepted_from="EMAIL",
+                )
+
+                return Response(
+                    {"message": "Workspace Invitation Accepted"},
+                    status=status.HTTP_200_OK,
+                )
+
+            # Workspace invitation rejected
+            return Response(
+                {"message": "Workspace Invitation was not accepted"},
+                status=status.HTTP_200_OK,
+            )
+
+        return Response(
+            {"error": "You have already responded to the invitation request"},
+            status=status.HTTP_400_BAD_REQUEST,
+        )
+
+    def get(self, request, slug, pk):
+        workspace_invitation = WorkspaceMemberInvite.objects.get(
+            workspace__slug=slug, pk=pk
+        )
+        serializer = WorkSpaceMemberInviteSerializer(workspace_invitation)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+class UserWorkspaceInvitationsViewSet(BaseViewSet):
+    serializer_class = WorkSpaceMemberInviteSerializer
+    model = WorkspaceMemberInvite
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(email=self.request.user.email)
+            .select_related("workspace", "workspace__owner", "created_by")
+            .annotate(total_members=Count("workspace__workspace_member"))
+        )
+
+    @invalidate_cache(path="/api/workspaces/", user=False)
+    @invalidate_cache(path="/api/users/me/workspaces/")
+    @invalidate_cache(
+        path="/api/workspaces/:slug/members/", url_params=True, user=False
+    )
+    def create(self, request):
+        invitations = request.data.get("invitations", [])
+        workspace_invitations = WorkspaceMemberInvite.objects.filter(
+            pk__in=invitations, email=request.user.email
+        ).order_by("-created_at")
+
+        # If the user is already a member of workspace and was deactivated then activate the user
+        for invitation in workspace_invitations:
+            # Update the WorkspaceMember for this specific invitation
+            WorkspaceMember.objects.filter(
+                workspace_id=invitation.workspace_id, member=request.user
+            ).update(is_active=True, role=invitation.role)
+
+        # Bulk create the user for all the workspaces
+        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()
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/workspace/label.py b/apiserver/plane/app/views/workspace/label.py
new file mode 100644
index 00000000000..328f3f8c132
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/label.py
@@ -0,0 +1,26 @@
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.serializers import LabelSerializer
+from plane.app.views.base import BaseAPIView
+from plane.db.models import Label
+from plane.app.permissions import WorkspaceViewerPermission
+from plane.utils.cache import cache_response
+
+class WorkspaceLabelsEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    @cache_response(60 * 60 * 2)
+    def get(self, request, slug):
+        labels = Label.objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+            project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
+        )
+        serializer = LabelSerializer(labels, many=True).data
+        return Response(serializer, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/member.py b/apiserver/plane/app/views/workspace/member.py
new file mode 100644
index 00000000000..5afe3714428
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/member.py
@@ -0,0 +1,400 @@
+# Django imports
+from django.db.models import (
+    CharField,
+    Count,
+    Q,
+)
+from django.db.models.functions import Cast
+
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+from plane.app.permissions import (
+    WorkSpaceAdminPermission,
+    WorkspaceEntityPermission,
+    WorkspaceUserPermission,
+)
+
+# Module imports
+from plane.app.serializers import (
+    ProjectMemberRoleSerializer,
+    TeamSerializer,
+    UserLiteSerializer,
+    WorkspaceMemberAdminSerializer,
+    WorkspaceMemberMeSerializer,
+    WorkSpaceMemberSerializer,
+)
+from plane.app.views.base import BaseAPIView
+from plane.db.models import (
+    Project,
+    ProjectMember,
+    Team,
+    User,
+    Workspace,
+    WorkspaceMember,
+)
+from plane.utils.cache import cache_response, invalidate_cache
+
+from .. import BaseViewSet
+
+
+class WorkSpaceMemberViewSet(BaseViewSet):
+    serializer_class = WorkspaceMemberAdminSerializer
+    model = WorkspaceMember
+
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def get_permissions(self):
+        if self.action == "leave":
+            self.permission_classes = [
+                WorkspaceUserPermission,
+            ]
+        else:
+            self.permission_classes = [
+                WorkspaceEntityPermission,
+            ]
+
+        return super(WorkSpaceMemberViewSet, self).get_permissions()
+
+    search_fields = [
+        "member__display_name",
+        "member__first_name",
+    ]
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(
+                workspace__slug=self.kwargs.get("slug"),
+                is_active=True,
+            )
+            .select_related("workspace", "workspace__owner")
+            .select_related("member")
+        )
+
+    @cache_response(60 * 60 * 2)
+    def list(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user,
+            workspace__slug=slug,
+            is_active=True,
+        )
+
+        # Get all active workspace members
+        workspace_members = self.get_queryset()
+
+        if workspace_member.role > 10:
+            serializer = WorkspaceMemberAdminSerializer(
+                workspace_members,
+                fields=("id", "member", "role"),
+                many=True,
+            )
+        else:
+            serializer = WorkSpaceMemberSerializer(
+                workspace_members,
+                fields=("id", "member", "role"),
+                many=True,
+            )
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    @invalidate_cache(
+        path="/api/workspaces/:slug/members/", url_params=True, user=False
+    )
+    def partial_update(self, request, slug, pk):
+        workspace_member = WorkspaceMember.objects.get(
+            pk=pk,
+            workspace__slug=slug,
+            member__is_bot=False,
+            is_active=True,
+        )
+        if request.user.id == workspace_member.member_id:
+            return Response(
+                {"error": "You cannot update your own role"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Get the requested user role
+        requested_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+        # 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,
+            )
+
+        serializer = WorkSpaceMemberSerializer(
+            workspace_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)
+
+    @invalidate_cache(
+        path="/api/workspaces/:slug/members/", url_params=True, user=False
+    )
+    @invalidate_cache(path="/api/users/me/settings/")
+    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,
+            member__is_bot=False,
+            is_active=True,
+        )
+
+        # check requesting user role
+        requesting_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+
+        if str(workspace_member.id) == str(requesting_workspace_member.id):
+            return Response(
+                {
+                    "error": "You cannot remove yourself from the workspace. Please use leave workspace"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        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 (
+            Project.objects.annotate(
+                total_members=Count("project_projectmember"),
+                member_with_role=Count(
+                    "project_projectmember",
+                    filter=Q(
+                        project_projectmember__member_id=workspace_member.id,
+                        project_projectmember__role=20,
+                    ),
+                ),
+            )
+            .filter(total_members=1, member_with_role=1, workspace__slug=slug)
+            .exists()
+        ):
+            return Response(
+                {
+                    "error": "User is a part of some projects where they are the only admin, they should either leave that project or promote another user to admin."
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Deactivate the users from the projects where the user is part of
+        _ = ProjectMember.objects.filter(
+            workspace__slug=slug,
+            member_id=workspace_member.member_id,
+            is_active=True,
+        ).update(is_active=False)
+
+        workspace_member.is_active = False
+        workspace_member.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    @invalidate_cache(
+        path="/api/workspaces/:slug/members/", url_params=True, user=False
+    )
+    @invalidate_cache(path="/api/users/me/settings/")
+    def leave(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+
+        # Check if the leaving user is the only admin of the workspace
+        if (
+            workspace_member.role == 20
+            and not WorkspaceMember.objects.filter(
+                workspace__slug=slug,
+                role=20,
+                is_active=True,
+            ).count()
+            > 1
+        ):
+            return Response(
+                {
+                    "error": "You cannot leave the workspace as you are the only admin of the workspace you will have to either delete the workspace or promote another user to admin."
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        if (
+            Project.objects.annotate(
+                total_members=Count("project_projectmember"),
+                member_with_role=Count(
+                    "project_projectmember",
+                    filter=Q(
+                        project_projectmember__member_id=request.user.id,
+                        project_projectmember__role=20,
+                    ),
+                ),
+            )
+            .filter(total_members=1, member_with_role=1, workspace__slug=slug)
+            .exists()
+        ):
+            return Response(
+                {
+                    "error": "You are a part of some projects where you are the only admin, you should either leave the project or promote another user to admin."
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # # Deactivate the users from the projects where the user is part of
+        _ = ProjectMember.objects.filter(
+            workspace__slug=slug,
+            member_id=workspace_member.member_id,
+            is_active=True,
+        ).update(is_active=False)
+
+        # # Deactivate the user
+        workspace_member.is_active = False
+        workspace_member.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class WorkspaceMemberUserViewsEndpoint(BaseAPIView):
+    def post(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+        workspace_member.view_props = request.data.get("view_props", {})
+        workspace_member.save()
+
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class WorkspaceMemberUserEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        workspace_member = WorkspaceMember.objects.get(
+            member=request.user,
+            workspace__slug=slug,
+            is_active=True,
+        )
+        serializer = WorkspaceMemberMeSerializer(workspace_member)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+class WorkspaceProjectMemberEndpoint(BaseAPIView):
+    serializer_class = ProjectMemberRoleSerializer
+    model = ProjectMember
+
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def get(self, request, slug):
+        # Fetch all project IDs where the user is involved
+        project_ids = (
+            ProjectMember.objects.filter(
+                member=request.user,
+                is_active=True,
+            )
+            .values_list("project_id", flat=True)
+            .distinct()
+        )
+
+        # Get all the project members in which the user is involved
+        project_members = ProjectMember.objects.filter(
+            workspace__slug=slug,
+            project_id__in=project_ids,
+            is_active=True,
+        ).select_related("project", "member", "workspace")
+        project_members = ProjectMemberRoleSerializer(
+            project_members, many=True
+        ).data
+
+        project_members_dict = dict()
+
+        # Construct a dictionary with project_id as key and project_members as value
+        for project_member in project_members:
+            project_id = project_member.pop("project")
+            if str(project_id) not in project_members_dict:
+                project_members_dict[str(project_id)] = []
+            project_members_dict[str(project_id)].append(project_member)
+
+        return Response(project_members_dict, status=status.HTTP_200_OK)
+
+
+class TeamMemberViewSet(BaseViewSet):
+    serializer_class = TeamSerializer
+    model = Team
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    search_fields = [
+        "member__display_name",
+        "member__first_name",
+    ]
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related("workspace", "workspace__owner")
+            .prefetch_related("members")
+        )
+
+    def create(self, request, slug):
+        members = list(
+            WorkspaceMember.objects.filter(
+                workspace__slug=slug,
+                member__id__in=request.data.get("members", []),
+                is_active=True,
+            )
+            .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)
+
+        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)
diff --git a/apiserver/plane/app/views/workspace/module.py b/apiserver/plane/app/views/workspace/module.py
new file mode 100644
index 00000000000..8dd5e97f489
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/module.py
@@ -0,0 +1,110 @@
+# Django imports
+from django.db.models import (
+    Prefetch,
+    Q,
+    Count,
+)
+
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.views.base import BaseAPIView
+from plane.db.models import (
+    Module,
+    ModuleLink,
+)
+from plane.app.permissions import WorkspaceViewerPermission
+from plane.app.serializers.module import ModuleSerializer
+
+class WorkspaceModulesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    def get(self, request, slug):
+        modules = (
+            Module.objects.filter(workspace__slug=slug)
+            .select_related("project")
+            .select_related("workspace")
+            .select_related("lead")
+            .prefetch_related("members")
+            .prefetch_related(
+                Prefetch(
+                    "link_module",
+                    queryset=ModuleLink.objects.select_related(
+                        "module", "created_by"
+                    ),
+                )
+            )
+            .annotate(
+                total_issues=Count(
+                    "issue_module",
+                    filter=Q(
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="completed",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                cancelled_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="cancelled",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                started_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="started",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                unstarted_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="unstarted",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_module__issue__state__group",
+                    filter=Q(
+                        issue_module__issue__state__group="backlog",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                    distinct=True,
+                )
+            )
+            .order_by(self.kwargs.get("order_by", "-created_at"))
+        )
+
+        serializer = ModuleSerializer(modules, many=True).data
+        return Response(serializer, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/state.py b/apiserver/plane/app/views/workspace/state.py
new file mode 100644
index 00000000000..7e3b158e504
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/state.py
@@ -0,0 +1,26 @@
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.serializers import StateSerializer
+from plane.app.views.base import BaseAPIView
+from plane.db.models import State
+from plane.app.permissions import WorkspaceEntityPermission
+from plane.utils.cache import cache_response
+
+class WorkspaceStatesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    @cache_response(60 * 60 * 2)
+    def get(self, request, slug):
+        states = State.objects.filter(
+            workspace__slug=slug,
+            project__project_projectmember__member=request.user,
+            project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
+        )
+        serializer = StateSerializer(states, many=True).data
+        return Response(serializer, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/user.py b/apiserver/plane/app/views/workspace/user.py
new file mode 100644
index 00000000000..94a22a1a7f2
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/user.py
@@ -0,0 +1,577 @@
+# Python imports
+from datetime import date
+from dateutil.relativedelta import relativedelta
+
+# Django imports
+from django.utils import timezone
+from django.db.models import (
+    OuterRef,
+    Func,
+    F,
+    Q,
+    Count,
+    Case,
+    Value,
+    CharField,
+    When,
+    Max,
+    IntegerField,
+    UUIDField,
+)
+from django.db.models.functions import ExtractWeek, Cast
+from django.db.models.fields import DateField
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models.functions import Coalesce
+
+# Third party modules
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.serializers import (
+    WorkSpaceSerializer,
+    ProjectMemberSerializer,
+    IssueActivitySerializer,
+    IssueSerializer,
+    WorkspaceUserPropertiesSerializer,
+)
+from plane.app.views.base import BaseAPIView
+from plane.db.models import (
+    User,
+    Workspace,
+    ProjectMember,
+    IssueActivity,
+    Issue,
+    IssueLink,
+    IssueAttachment,
+    IssueSubscriber,
+    Project,
+    WorkspaceMember,
+    CycleIssue,
+    WorkspaceUserProperties,
+)
+from plane.app.permissions import (
+    WorkspaceEntityPermission,
+    WorkspaceViewerPermission,
+)
+from plane.utils.issue_filters import issue_filters
+
+
+class UserLastProjectWithWorkspaceEndpoint(BaseAPIView):
+    def get(self, request):
+        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)
+
+        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 WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    def get(self, request, slug, user_id):
+        fields = [
+            field
+            for field in request.GET.get("fields", "").split(",")
+            if field
+        ]
+        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,
+                project__project_projectmember__is_active=True,
+            )
+            .filter(**filters)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(cycle_id=F("issue_cycle__cycle_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")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(
+                    parent=OuterRef("id")
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(issue_module__module_id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .order_by("created_at")
+        ).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(),
+                )
+            ).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 = IssueSerializer(
+            issue_queryset, many=True, fields=fields if fields else None
+        ).data
+        return Response(issues, status=status.HTTP_200_OK)
+
+
+class WorkspaceUserPropertiesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceViewerPermission,
+    ]
+
+    def patch(self, request, slug):
+        workspace_properties = WorkspaceUserProperties.objects.get(
+            user=request.user,
+            workspace__slug=slug,
+        )
+
+        workspace_properties.filters = request.data.get(
+            "filters", workspace_properties.filters
+        )
+        workspace_properties.display_filters = request.data.get(
+            "display_filters", workspace_properties.display_filters
+        )
+        workspace_properties.display_properties = request.data.get(
+            "display_properties", workspace_properties.display_properties
+        )
+        workspace_properties.save()
+
+        serializer = WorkspaceUserPropertiesSerializer(workspace_properties)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    def get(self, request, slug):
+        (
+            workspace_properties,
+            _,
+        ) = WorkspaceUserProperties.objects.get_or_create(
+            user=request.user, workspace__slug=slug
+        )
+        serializer = WorkspaceUserPropertiesSerializer(workspace_properties)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+
+class WorkspaceUserProfileEndpoint(BaseAPIView):
+    def get(self, request, slug, user_id):
+        user_data = User.objects.get(pk=user_id)
+
+        requesting_workspace_member = WorkspaceMember.objects.get(
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+        projects = []
+        if requesting_workspace_member.role >= 10:
+            projects = (
+                Project.objects.filter(
+                    workspace__slug=slug,
+                    project_projectmember__member=request.user,
+                    project_projectmember__is_active=True,
+                    archived_at__isnull=True,
+                )
+                .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(
+                    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(
+                    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,
+                        ),
+                    )
+                )
+                .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",
+                    "logo_props",
+                    "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,
+                },
+            },
+            status=status.HTTP_200_OK,
+        )
+
+
+class WorkspaceUserActivityEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def get(self, request, slug, user_id):
+        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,
+            project__project_projectmember__is_active=True,
+            project__archived_at__isnull=True,
+            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 WorkspaceUserProfileStatsEndpoint(BaseAPIView):
+    def get(self, request, slug, user_id):
+        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,
+                project__project_projectmember__is_active=True,
+            )
+            .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.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True,
+            )
+            .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")
+        )
+
+        created_issues = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True,
+                created_by_id=user_id,
+            )
+            .filter(**filters)
+            .count()
+        )
+
+        assigned_issues_count = (
+            Issue.issue_objects.filter(
+                workspace__slug=slug,
+                assignees__in=[user_id],
+                project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True,
+            )
+            .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,
+                project__project_projectmember__is_active=True,
+            )
+            .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,
+                project__project_projectmember__is_active=True,
+            )
+            .filter(**filters)
+            .count()
+        )
+
+        subscribed_issues_count = (
+            IssueSubscriber.objects.filter(
+                workspace__slug=slug,
+                subscriber_id=user_id,
+                project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True,
+                project__archived_at__isnull=True,
+            )
+            .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 UserActivityGraphEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        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)
+
+
+class UserIssueCompletedGraphEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        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")
+        )
+
+        return Response(issues, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/bgtasks/analytic_plot_export.py b/apiserver/plane/bgtasks/analytic_plot_export.py
index 7789562293f..e6788df79ab 100644
--- a/apiserver/plane/bgtasks/analytic_plot_export.py
+++ b/apiserver/plane/bgtasks/analytic_plot_export.py
@@ -1,24 +1,22 @@
 # Python imports
 import csv
 import io
-import requests
-import json
+import logging
+
+# Third party imports
+from celery import shared_task
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
-
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
 
 # Module imports
 from plane.db.models import Issue
+from plane.license.utils.instance_value import get_email_configuration
 from plane.utils.analytics_plot import build_graph_plot
+from plane.utils.exception_logger import log_exception
 from plane.utils.issue_filters import issue_filters
-from plane.license.utils.instance_value import get_email_configuration
 
 row_mapping = {
     "state__name": "State",
@@ -57,6 +55,7 @@ def send_export_email(email, slug, csv_buffer, rows):
         EMAIL_HOST_PASSWORD,
         EMAIL_PORT,
         EMAIL_USE_TLS,
+        EMAIL_USE_SSL,
         EMAIL_FROM,
     ) = get_email_configuration()
 
@@ -66,6 +65,7 @@ def send_export_email(email, slug, csv_buffer, rows):
         username=EMAIL_HOST_USER,
         password=EMAIL_HOST_PASSWORD,
         use_tls=EMAIL_USE_TLS == "1",
+        use_ssl=EMAIL_USE_SSL == "1",
     )
 
     msg = EmailMultiAlternatives(
@@ -212,9 +212,9 @@ def generate_segmented_rows(
                 None,
             )
             if assignee:
-                generated_row[
-                    0
-                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+                generated_row[0] = (
+                    f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+                )
 
         if x_axis == LABEL_ID:
             label = next(
@@ -281,9 +281,9 @@ def generate_segmented_rows(
                 None,
             )
             if assignee:
-                row_zero[
-                    index + 2
-                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+                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:]):
@@ -368,9 +368,9 @@ def generate_non_segmented_rows(
                 None,
             )
             if assignee:
-                row[
-                    0
-                ] = f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+                row[0] = (
+                    f"{assignee['assignees__first_name']} {assignee['assignees__last_name']}"
+                )
 
         if x_axis == LABEL_ID:
             label = next(
@@ -506,10 +506,8 @@ def analytic_export_task(email, data, slug):
 
         csv_buffer = generate_csv_from_rows(rows)
         send_export_email(email, slug, csv_buffer, rows)
+        logging.getLogger("plane").info("Email sent succesfully.")
         return
     except Exception as e:
-        print(e)
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/email_notification_task.py b/apiserver/plane/bgtasks/email_notification_task.py
index 2a98c6b3324..682ccb4a31d 100644
--- a/apiserver/plane/bgtasks/email_notification_task.py
+++ b/apiserver/plane/bgtasks/email_notification_task.py
@@ -1,33 +1,37 @@
+import logging
 from datetime import datetime
+
 from bs4 import BeautifulSoup
 
 # Third party imports
 from celery import shared_task
-from sentry_sdk import capture_exception
+from django.core.mail import EmailMultiAlternatives, get_connection
+from django.template.loader import render_to_string
 
 # Django imports
 from django.utils import timezone
-from django.core.mail import EmailMultiAlternatives, get_connection
-from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
 
 # Module imports
-from plane.db.models import EmailNotificationLog, User, Issue
+from plane.db.models import EmailNotificationLog, Issue, User
 from plane.license.utils.instance_value import get_email_configuration
 from plane.settings.redis import redis_instance
+from plane.utils.exception_logger import log_exception
+
 
 # acquire and delete redis lock
 def acquire_lock(lock_id, expire_time=300):
     redis_client = redis_instance()
     """Attempt to acquire a lock with a specified expiration time."""
-    return redis_client.set(lock_id, 'true', nx=True, ex=expire_time)
+    return redis_client.set(lock_id, "true", nx=True, ex=expire_time)
+
 
 def release_lock(lock_id):
     """Release a lock."""
     redis_client = redis_instance()
     redis_client.delete(lock_id)
 
+
 @shared_task
 def stack_email_notification():
     # get all email notifications
@@ -101,31 +105,31 @@ def create_payload(notification_data):
 
                 # Append old_value if it's not empty and not already in the list
                 if old_value:
-                    data.setdefault(actor_id, {}).setdefault(
-                        field, {}
-                    ).setdefault("old_value", []).append(
-                        old_value
-                    ) if old_value not in data.setdefault(
-                        actor_id, {}
-                    ).setdefault(
-                        field, {}
-                    ).get(
-                        "old_value", []
-                    ) else None
+                    (
+                        data.setdefault(actor_id, {})
+                        .setdefault(field, {})
+                        .setdefault("old_value", [])
+                        .append(old_value)
+                        if old_value
+                        not in data.setdefault(actor_id, {})
+                        .setdefault(field, {})
+                        .get("old_value", [])
+                        else None
+                    )
 
                 # Append new_value if it's not empty and not already in the list
                 if new_value:
-                    data.setdefault(actor_id, {}).setdefault(
-                        field, {}
-                    ).setdefault("new_value", []).append(
-                        new_value
-                    ) if new_value not in data.setdefault(
-                        actor_id, {}
-                    ).setdefault(
-                        field, {}
-                    ).get(
-                        "new_value", []
-                    ) else None
+                    (
+                        data.setdefault(actor_id, {})
+                        .setdefault(field, {})
+                        .setdefault("new_value", [])
+                        .append(new_value)
+                        if new_value
+                        not in data.setdefault(actor_id, {})
+                        .setdefault(field, {})
+                        .get("new_value", [])
+                        else None
+                    )
 
                 if not data.get("actor_id", {}).get("activity_time", False):
                     data[actor_id]["activity_time"] = str(
@@ -136,22 +140,24 @@ def create_payload(notification_data):
 
     return data
 
+
 def process_mention(mention_component):
-    soup = BeautifulSoup(mention_component, 'html.parser')
-    mentions = soup.find_all('mention-component')
+    soup = BeautifulSoup(mention_component, "html.parser")
+    mentions = soup.find_all("mention-component")
     for mention in mentions:
-        user_id = mention['id']
+        user_id = mention["id"]
         user = User.objects.get(pk=user_id)
         user_name = user.display_name
         highlighted_name = f"@{user_name}"
         mention.replace_with(highlighted_name)
     return str(soup)
 
+
 def process_html_content(content):
     processed_content_list = []
     for html_content in content:
         processed_content = process_mention(html_content)
-        processed_content_list.append(processed_content)  
+        processed_content_list.append(processed_content)
     return processed_content_list
 
 
@@ -169,7 +175,7 @@ def send_email_notification(
         if acquire_lock(lock_id=lock_id):
             # get the redis instance
             ri = redis_instance()
-            base_api = (ri.get(str(issue_id)).decode())
+            base_api = ri.get(str(issue_id)).decode()
             data = create_payload(notification_data=notification_data)
 
             # Get email configurations
@@ -179,6 +185,7 @@ def send_email_notification(
                 EMAIL_HOST_PASSWORD,
                 EMAIL_PORT,
                 EMAIL_USE_TLS,
+                EMAIL_USE_SSL,
                 EMAIL_FROM,
             ) = get_email_configuration()
 
@@ -206,8 +213,12 @@ def send_email_notification(
                         }
                     )
                 if mention:
-                    mention["new_value"] = process_html_content(mention.get("new_value"))
-                    mention["old_value"] = process_html_content(mention.get("old_value"))
+                    mention["new_value"] = process_html_content(
+                        mention.get("new_value")
+                    )
+                    mention["old_value"] = process_html_content(
+                        mention.get("old_value")
+                    )
                     comments.append(
                         {
                             "actor_comments": mention,
@@ -220,7 +231,9 @@ def send_email_notification(
                     )
                 activity_time = changes.pop("activity_time")
                 # Parse the input string into a datetime object
-                formatted_time = datetime.strptime(activity_time, "%Y-%m-%d %H:%M:%S").strftime("%H:%M %p")
+                formatted_time = datetime.strptime(
+                    activity_time, "%Y-%m-%d %H:%M:%S"
+                ).strftime("%H:%M %p")
 
                 if changes:
                     template_data.append(
@@ -237,12 +250,14 @@ def send_email_notification(
                             },
                             "activity_time": str(formatted_time),
                         }
-                )
+                    )
 
             summary = "Updates were made to the issue by"
 
             # Send the mail
-            subject = f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"
+            subject = (
+                f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"
+            )
             context = {
                 "data": template_data,
                 "summary": summary,
@@ -257,7 +272,7 @@ def send_email_notification(
                 },
                 "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
                 "project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
-                "workspace":str(issue.project.workspace.slug),
+                "workspace": str(issue.project.workspace.slug),
                 "project": str(issue.project.name),
                 "user_preference": f"{base_api}/profile/preferences/email",
                 "comments": comments,
@@ -274,6 +289,7 @@ def send_email_notification(
                     username=EMAIL_HOST_USER,
                     password=EMAIL_HOST_PASSWORD,
                     use_tls=EMAIL_USE_TLS == "1",
+                    use_ssl=EMAIL_USE_SSL == "1",
                 )
 
                 msg = EmailMultiAlternatives(
@@ -285,7 +301,9 @@ def send_email_notification(
                 )
                 msg.attach_alternative(html_content, "text/html")
                 msg.send()
+                logging.getLogger("plane").info("Email Sent Successfully")
 
+                # Update the logs
                 EmailNotificationLog.objects.filter(
                     pk__in=email_notification_ids
                 ).update(sent_at=timezone.now())
@@ -294,15 +312,20 @@ def send_email_notification(
                 release_lock(lock_id=lock_id)
                 return
             except Exception as e:
-                capture_exception(e)
+                log_exception(e)
                 # release the lock
                 release_lock(lock_id=lock_id)
                 return
         else:
-            print("Duplicate task recived. Skipping...")
+            logging.getLogger("plane").info(
+                "Duplicate email received skipping"
+            )
             return
     except (Issue.DoesNotExist, User.DoesNotExist) as e:
-        if settings.DEBUG:
-            print(e)
+        log_exception(e)
+        release_lock(lock_id=lock_id)
+        return
+    except Exception as e:
+        log_exception(e)
         release_lock(lock_id=lock_id)
         return
diff --git a/apiserver/plane/bgtasks/event_tracking_task.py b/apiserver/plane/bgtasks/event_tracking_task.py
index 82a8281a95b..135ae1dd11f 100644
--- a/apiserver/plane/bgtasks/event_tracking_task.py
+++ b/apiserver/plane/bgtasks/event_tracking_task.py
@@ -1,13 +1,13 @@
-import uuid
 import os
+import uuid
 
 # third party imports
 from celery import shared_task
-from sentry_sdk import capture_exception
 from posthog import Posthog
 
 # module imports
 from plane.license.utils.instance_value import get_configuration_value
+from plane.utils.exception_logger import log_exception
 
 
 def posthogConfiguration():
@@ -51,7 +51,8 @@ def auth_events(user, email, user_agent, ip, event_name, medium, first_time):
                 },
             )
     except Exception as e:
-        capture_exception(e)
+        log_exception(e)
+        return
 
 
 @shared_task
@@ -77,4 +78,5 @@ def workspace_invite_event(
                 },
             )
     except Exception as e:
-        capture_exception(e)
+        log_exception(e)
+        return
diff --git a/apiserver/plane/bgtasks/export_task.py b/apiserver/plane/bgtasks/export_task.py
index d8522e7697f..c99836c8313 100644
--- a/apiserver/plane/bgtasks/export_task.py
+++ b/apiserver/plane/bgtasks/export_task.py
@@ -2,21 +2,22 @@
 import csv
 import io
 import json
-import boto3
 import zipfile
 
-# Django imports
-from django.conf import settings
-from django.utils import timezone
+import boto3
+from botocore.client import Config
 
 # Third party imports
 from celery import shared_task
-from sentry_sdk import capture_exception
-from botocore.client import Config
+
+# Django imports
+from django.conf import settings
+from django.utils import timezone
 from openpyxl import Workbook
 
 # Module imports
-from plane.db.models import Issue, ExporterHistory
+from plane.db.models import ExporterHistory, Issue
+from plane.utils.exception_logger import log_exception
 
 
 def dateTimeConverter(time):
@@ -144,12 +145,17 @@ def generate_table_row(issue):
         issue["description_stripped"],
         issue["state__name"],
         issue["priority"],
-        f"{issue['created_by__first_name']} {issue['created_by__last_name']}"
-        if issue["created_by__first_name"] and issue["created_by__last_name"]
-        else "",
-        f"{issue['assignees__first_name']} {issue['assignees__last_name']}"
-        if issue["assignees__first_name"] and issue["assignees__last_name"]
-        else "",
+        (
+            f"{issue['created_by__first_name']} {issue['created_by__last_name']}"
+            if issue["created_by__first_name"]
+            and issue["created_by__last_name"]
+            else ""
+        ),
+        (
+            f"{issue['assignees__first_name']} {issue['assignees__last_name']}"
+            if issue["assignees__first_name"] and issue["assignees__last_name"]
+            else ""
+        ),
         issue["labels__name"],
         issue["issue_cycle__cycle__name"],
         dateConverter(issue["issue_cycle__cycle__start_date"]),
@@ -172,12 +178,17 @@ def generate_json_row(issue):
         "Description": issue["description_stripped"],
         "State": issue["state__name"],
         "Priority": issue["priority"],
-        "Created By": f"{issue['created_by__first_name']} {issue['created_by__last_name']}"
-        if issue["created_by__first_name"] and issue["created_by__last_name"]
-        else "",
-        "Assignee": f"{issue['assignees__first_name']} {issue['assignees__last_name']}"
-        if issue["assignees__first_name"] and issue["assignees__last_name"]
-        else "",
+        "Created By": (
+            f"{issue['created_by__first_name']} {issue['created_by__last_name']}"
+            if issue["created_by__first_name"]
+            and issue["created_by__last_name"]
+            else ""
+        ),
+        "Assignee": (
+            f"{issue['assignees__first_name']} {issue['assignees__last_name']}"
+            if issue["assignees__first_name"] and issue["assignees__last_name"]
+            else ""
+        ),
         "Labels": issue["labels__name"],
         "Cycle Name": issue["issue_cycle__cycle__name"],
         "Cycle Start Date": dateConverter(
@@ -292,7 +303,8 @@ def issue_export_task(
                     workspace__id=workspace_id,
                     project_id__in=project_ids,
                     project__project_projectmember__member=exporter_instance.initiated_by_id,
-                    project__project_projectmember__is_active=True
+                    project__project_projectmember__is_active=True,
+                    project__archived_at__isnull=True,
                 )
                 .select_related(
                     "project", "workspace", "state", "parent", "created_by"
@@ -393,8 +405,5 @@ def issue_export_task(
         exporter_instance.status = "failed"
         exporter_instance.reason = str(e)
         exporter_instance.save(update_fields=["status", "reason"])
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/forgot_password_task.py b/apiserver/plane/bgtasks/forgot_password_task.py
index a2ac62927d0..b30c9311fef 100644
--- a/apiserver/plane/bgtasks/forgot_password_task.py
+++ b/apiserver/plane/bgtasks/forgot_password_task.py
@@ -1,28 +1,23 @@
-# Python import
-import os
-import requests
-import json
+# Python imports
+import logging
+
+# Third party imports
+from celery import shared_task
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
-
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
 
 # Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.exception_logger import log_exception
 
 
 @shared_task
 def forgot_password(first_name, email, uidb64, token, current_site):
     try:
-        relative_link = (
-            f"/accounts/reset-password/?uidb64={uidb64}&token={token}&email={email}"
-        )
+        relative_link = f"/accounts/reset-password/?uidb64={uidb64}&token={token}&email={email}"
         abs_url = str(current_site) + relative_link
 
         (
@@ -31,6 +26,7 @@ def forgot_password(first_name, email, uidb64, token, current_site):
             EMAIL_HOST_PASSWORD,
             EMAIL_PORT,
             EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
             EMAIL_FROM,
         ) = get_email_configuration()
 
@@ -54,6 +50,7 @@ def forgot_password(first_name, email, uidb64, token, current_site):
             username=EMAIL_HOST_USER,
             password=EMAIL_HOST_PASSWORD,
             use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
         )
 
         msg = EmailMultiAlternatives(
@@ -65,10 +62,8 @@ def forgot_password(first_name, email, uidb64, token, current_site):
         )
         msg.attach_alternative(html_content, "text/html")
         msg.send()
+        logging.getLogger("plane").info("Email sent successfully")
         return
     except Exception as e:
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/importer_task.py b/apiserver/plane/bgtasks/importer_task.py
deleted file mode 100644
index 7a1dc4fc6d2..00000000000
--- a/apiserver/plane/bgtasks/importer_task.py
+++ /dev/null
@@ -1,201 +0,0 @@
-# Python imports
-import json
-import requests
-import uuid
-
-# Django imports
-from django.conf import settings
-from django.core.serializers.json import DjangoJSONEncoder
-from django.contrib.auth.hashers import make_password
-
-# Third Party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
-
-# Module imports
-from plane.app.serializers import ImporterSerializer
-from plane.db.models import (
-    Importer,
-    WorkspaceMember,
-    GithubRepositorySync,
-    GithubRepository,
-    ProjectMember,
-    WorkspaceIntegration,
-    Label,
-    User,
-    IssueProperty,
-    UserNotificationPreference,
-)
-
-
-@shared_task
-def service_importer(service, importer_id):
-    try:
-        importer = Importer.objects.get(pk=importer_id)
-        importer.status = "processing"
-        importer.save()
-
-        users = importer.data.get("users", [])
-
-        # Check if we need to import users as well
-        if len(users):
-            # For all invited users create the users
-            new_users = User.objects.bulk_create(
-                [
-                    User(
-                        email=user.get("email").strip().lower(),
-                        username=uuid.uuid4().hex,
-                        password=make_password(uuid.uuid4().hex),
-                        is_password_autoset=True,
-                    )
-                    for user in users
-                    if user.get("import", False) == "invite"
-                ],
-                batch_size=100,
-                ignore_conflicts=True,
-            )
-
-            _ = UserNotificationPreference.objects.bulk_create(
-                [UserNotificationPreference(user=user) for user in new_users],
-                batch_size=100,
-            )
-
-            workspace_users = User.objects.filter(
-                email__in=[
-                    user.get("email").strip().lower()
-                    for user in users
-                    if user.get("import", False) == "invite"
-                    or user.get("import", False) == "map"
-                ]
-            )
-
-            # Check if any of the users are already member of workspace
-            _ = WorkspaceMember.objects.filter(
-                member__in=[user for user in workspace_users],
-                workspace_id=importer.workspace_id,
-            ).update(is_active=True)
-
-            # Add new users to Workspace and project automatically
-            WorkspaceMember.objects.bulk_create(
-                [
-                    WorkspaceMember(
-                        member=user,
-                        workspace_id=importer.workspace_id,
-                        created_by=importer.created_by,
-                    )
-                    for user in workspace_users
-                ],
-                batch_size=100,
-                ignore_conflicts=True,
-            )
-
-            ProjectMember.objects.bulk_create(
-                [
-                    ProjectMember(
-                        project_id=importer.project_id,
-                        workspace_id=importer.workspace_id,
-                        member=user,
-                        created_by=importer.created_by,
-                    )
-                    for user in workspace_users
-                ],
-                batch_size=100,
-                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)
-            url = importer.metadata.get("url", False)
-            config = importer.metadata.get("config", {})
-            owner = importer.metadata.get("owner", False)
-            repository_id = importer.metadata.get("repository_id", False)
-
-            workspace_integration = WorkspaceIntegration.objects.get(
-                workspace_id=importer.workspace_id,
-                integration__provider="github",
-            )
-
-            # Delete the old repository object
-            GithubRepositorySync.objects.filter(
-                project_id=importer.project_id
-            ).delete()
-            GithubRepository.objects.filter(
-                project_id=importer.project_id
-            ).delete()
-
-            # Create a Label for github
-            label = Label.objects.filter(
-                name="GitHub", project_id=importer.project_id
-            ).first()
-
-            if label is None:
-                label = Label.objects.create(
-                    name="GitHub",
-                    project_id=importer.project_id,
-                    description="Label to sync Plane issues with GitHub issues",
-                    color="#003773",
-                )
-            # Create repository
-            repo = GithubRepository.objects.create(
-                name=name,
-                url=url,
-                config=config,
-                repository_id=repository_id,
-                owner=owner,
-                project_id=importer.project_id,
-            )
-
-            # Create repo sync
-            _ = GithubRepositorySync.objects.create(
-                repository=repo,
-                workspace_integration=workspace_integration,
-                actor=workspace_integration.actor,
-                credentials=importer.data.get("credentials", {}),
-                project_id=importer.project_id,
-                label=label,
-            )
-
-            # Add bot as a member in the project
-            _ = ProjectMember.objects.get_or_create(
-                member=workspace_integration.actor,
-                role=20,
-                project_id=importer.project_id,
-            )
-
-        if settings.PROXY_BASE_URL:
-            headers = {"Content-Type": "application/json"}
-            import_data_json = json.dumps(
-                ImporterSerializer(importer).data,
-                cls=DjangoJSONEncoder,
-            )
-            _ = 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,
-            )
-
-        return
-    except Exception as e:
-        importer = Importer.objects.get(pk=importer_id)
-        importer.status = "failed"
-        importer.save()
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
-        return
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 2a16ee911a8..9a4e57a49f9 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -1,34 +1,36 @@
 # Python imports
 import json
+
 import requests
 
+# Third Party imports
+from celery import shared_task
+
 # Django imports
 from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils import timezone
 
-# Third Party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
+from plane.app.serializers import IssueActivitySerializer
+from plane.bgtasks.notification_task import notifications
 
 # Module imports
 from plane.db.models import (
-    User,
+    CommentReaction,
+    Cycle,
     Issue,
-    Project,
-    Label,
     IssueActivity,
-    State,
-    Cycle,
-    Module,
-    IssueReaction,
-    CommentReaction,
     IssueComment,
+    IssueReaction,
     IssueSubscriber,
+    Label,
+    Module,
+    Project,
+    State,
+    User,
 )
-from plane.app.serializers import IssueActivitySerializer
-from plane.bgtasks.notification_task import notifications
 from plane.settings.redis import redis_instance
+from plane.utils.exception_logger import log_exception
 
 
 # Track Changes in name
@@ -53,7 +55,7 @@ def track_name(
                 field="name",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated the name to",
+                comment="updated the name to",
                 epoch=epoch,
             )
         )
@@ -96,7 +98,7 @@ def track_description(
                     field="description",
                     project_id=project_id,
                     workspace_id=workspace_id,
-                    comment=f"updated the description to",
+                    comment="updated the description to",
                     epoch=epoch,
                 )
             )
@@ -130,22 +132,26 @@ def track_parent(
                 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 "",
+                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,
+                comment="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,
             )
         )
@@ -173,7 +179,7 @@ def track_priority(
                 field="priority",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated the priority to",
+                comment="updated the priority to",
                 epoch=epoch,
             )
         )
@@ -206,7 +212,7 @@ def track_state(
                 field="state",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated the state to",
+                comment="updated the state to",
                 old_identifier=old_state.id,
                 new_identifier=new_state.id,
                 epoch=epoch,
@@ -233,16 +239,20 @@ def track_target_date(
                 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 "",
+                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",
+                comment="updated the target date to",
                 epoch=epoch,
             )
         )
@@ -265,16 +275,20 @@ def track_start_date(
                 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 "",
+                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 ",
+                comment="updated the start date to ",
                 epoch=epoch,
             )
         )
@@ -334,7 +348,7 @@ def track_labels(
                 field="labels",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"removed label ",
+                comment="removed label ",
                 old_identifier=label.id,
                 new_identifier=None,
                 epoch=epoch,
@@ -364,7 +378,6 @@ def track_assignees(
         else set()
     )
 
-
     added_assignees = requested_assignees - current_assignees
     dropped_assginees = current_assignees - requested_assignees
 
@@ -381,7 +394,7 @@ def track_assignees(
                 field="assignees",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"added assignee ",
+                comment="added assignee ",
                 new_identifier=assignee.id,
                 epoch=epoch,
             )
@@ -414,7 +427,7 @@ def track_assignees(
                 field="assignees",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"removed assignee ",
+                comment="removed assignee ",
                 old_identifier=assignee.id,
                 epoch=epoch,
             )
@@ -439,16 +452,20 @@ def track_estimate_points(
                 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 "",
+                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 ",
+                comment="updated the estimate point to ",
                 epoch=epoch,
             )
         )
@@ -529,7 +546,7 @@ def track_closed_to(
                 field="state",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"Plane updated the state to ",
+                comment="Plane updated the state to ",
                 old_identifier=None,
                 new_identifier=updated_state.id,
                 epoch=epoch,
@@ -552,7 +569,7 @@ def create_issue_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"created the issue",
+            comment="created the issue",
             verb="created",
             actor_id=actor_id,
             epoch=epoch,
@@ -635,7 +652,7 @@ def delete_issue_activity(
         IssueActivity(
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"deleted the issue",
+            comment="deleted the issue",
             verb="deleted",
             actor_id=actor_id,
             field="issue",
@@ -666,7 +683,7 @@ def create_comment_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"created a comment",
+            comment="created a comment",
             verb="created",
             actor_id=actor_id,
             field="comment",
@@ -703,7 +720,7 @@ def update_comment_activity(
                 issue_id=issue_id,
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated a comment",
+                comment="updated a comment",
                 verb="updated",
                 actor_id=actor_id,
                 field="comment",
@@ -732,7 +749,7 @@ def delete_comment_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"deleted the comment",
+            comment="deleted the comment",
             verb="deleted",
             actor_id=actor_id,
             field="comment",
@@ -932,7 +949,11 @@ def delete_module_issue_activity(
             project_id=project_id,
             workspace_id=workspace_id,
             comment=f"removed this issue from {module_name}",
-            old_identifier=requested_data.get("module_id") if requested_data.get("module_id") is not None else None,
+            old_identifier=(
+                requested_data.get("module_id")
+                if requested_data.get("module_id") is not None
+                else None
+            ),
             epoch=epoch,
         )
     )
@@ -960,7 +981,7 @@ def create_link_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"created a link",
+            comment="created a link",
             verb="created",
             actor_id=actor_id,
             field="link",
@@ -994,7 +1015,7 @@ def update_link_activity(
                 issue_id=issue_id,
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated a link",
+                comment="updated a link",
                 verb="updated",
                 actor_id=actor_id,
                 field="link",
@@ -1026,7 +1047,7 @@ def delete_link_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"deleted the link",
+            comment="deleted the link",
             verb="deleted",
             actor_id=actor_id,
             field="link",
@@ -1059,7 +1080,7 @@ def create_attachment_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"created an attachment",
+            comment="created an attachment",
             verb="created",
             actor_id=actor_id,
             field="attachment",
@@ -1085,7 +1106,7 @@ def delete_attachment_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"deleted the attachment",
+            comment="deleted the attachment",
             verb="deleted",
             actor_id=actor_id,
             field="attachment",
@@ -1362,12 +1383,15 @@ def create_issue_relation_activity(
                     verb="created",
                     old_value="",
                     new_value=f"{issue.project.identifier}-{issue.sequence_id}",
-                    field="blocking"
-                    if requested_data.get("relation_type") == "blocked_by"
-                    else (
-                        "blocked_by"
-                        if requested_data.get("relation_type") == "blocking"
-                        else requested_data.get("relation_type")
+                    field=(
+                        "blocking"
+                        if requested_data.get("relation_type") == "blocked_by"
+                        else (
+                            "blocked_by"
+                            if requested_data.get("relation_type")
+                            == "blocking"
+                            else requested_data.get("relation_type")
+                        )
                     ),
                     project_id=project_id,
                     workspace_id=workspace_id,
@@ -1418,12 +1442,14 @@ def delete_issue_relation_activity(
             verb="deleted",
             old_value=f"{issue.project.identifier}-{issue.sequence_id}",
             new_value="",
-            field="blocking"
-            if requested_data.get("relation_type") == "blocked_by"
-            else (
-                "blocked_by"
-                if requested_data.get("relation_type") == "blocking"
-                else requested_data.get("relation_type")
+            field=(
+                "blocking"
+                if requested_data.get("relation_type") == "blocked_by"
+                else (
+                    "blocked_by"
+                    if requested_data.get("relation_type") == "blocking"
+                    else requested_data.get("relation_type")
+                )
             ),
             project_id=project_id,
             workspace_id=workspace_id,
@@ -1449,7 +1475,7 @@ def create_draft_issue_activity(
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"drafted the issue",
+            comment="drafted the issue",
             field="draft",
             verb="created",
             actor_id=actor_id,
@@ -1476,14 +1502,14 @@ def update_draft_issue_activity(
     )
     if (
         requested_data.get("is_draft") is not None
-        and requested_data.get("is_draft") == False
+        and requested_data.get("is_draft") is False
     ):
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"created the issue",
+                comment="created the issue",
                 verb="updated",
                 actor_id=actor_id,
                 epoch=epoch,
@@ -1495,7 +1521,7 @@ def update_draft_issue_activity(
                 issue_id=issue_id,
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated the draft issue",
+                comment="updated the draft issue",
                 field="draft",
                 verb="updated",
                 actor_id=actor_id,
@@ -1518,7 +1544,7 @@ def delete_draft_issue_activity(
         IssueActivity(
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"deleted the draft issue",
+            comment="deleted the draft issue",
             field="draft",
             verb="deleted",
             actor_id=actor_id,
@@ -1557,7 +1583,7 @@ def issue_activity(
                 try:
                     issue.updated_at = timezone.now()
                     issue.save(update_fields=["updated_at"])
-                except Exception as e:
+                except Exception:
                     pass
 
         ACTIVITY_MAPPER = {
@@ -1623,7 +1649,7 @@ def issue_activity(
                             headers=headers,
                         )
             except Exception as e:
-                capture_exception(e)
+                log_exception(e)
 
         if notification:
             notifications.delay(
@@ -1644,8 +1670,5 @@ def issue_activity(
 
         return
     except Exception as e:
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/issue_automation_task.py b/apiserver/plane/bgtasks/issue_automation_task.py
index c6c4d75158c..cdcdcd17408 100644
--- a/apiserver/plane/bgtasks/issue_automation_task.py
+++ b/apiserver/plane/bgtasks/issue_automation_task.py
@@ -2,18 +2,17 @@
 import json
 from datetime import timedelta
 
-# Django imports
-from django.utils import timezone
-from django.db.models import Q
-from django.conf import settings
-
 # Third party imports
 from celery import shared_task
-from sentry_sdk import capture_exception
+from django.db.models import Q
+
+# Django imports
+from django.utils import timezone
 
 # Module imports
-from plane.db.models import Issue, Project, State
 from plane.bgtasks.issue_activites_task import issue_activity
+from plane.db.models import Issue, Project, State
+from plane.utils.exception_logger import log_exception
 
 
 @shared_task
@@ -79,7 +78,10 @@ def archive_old_issues():
                         issue_activity.delay(
                             type="issue.activity.updated",
                             requested_data=json.dumps(
-                                {"archived_at": str(archive_at), "automation": True}
+                                {
+                                    "archived_at": str(archive_at),
+                                    "automation": True,
+                                }
                             ),
                             actor_id=str(project.created_by_id),
                             issue_id=issue.id,
@@ -93,9 +95,7 @@ def archive_old_issues():
                     ]
         return
     except Exception as e:
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
 
 
@@ -176,7 +176,5 @@ def close_old_issues():
                     ]
         return
     except Exception as e:
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/magic_link_code_task.py b/apiserver/plane/bgtasks/magic_link_code_task.py
index b94ec4bfe23..4544e9889c1 100644
--- a/apiserver/plane/bgtasks/magic_link_code_task.py
+++ b/apiserver/plane/bgtasks/magic_link_code_task.py
@@ -1,20 +1,17 @@
 # Python imports
-import os
-import requests
-import json
+import logging
+
+# Third party imports
+from celery import shared_task
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
-
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
 
 # Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.exception_logger import log_exception
 
 
 @shared_task
@@ -26,6 +23,7 @@ def magic_link(email, key, token, current_site):
             EMAIL_HOST_PASSWORD,
             EMAIL_PORT,
             EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
             EMAIL_FROM,
         ) = get_email_configuration()
 
@@ -44,6 +42,7 @@ def magic_link(email, key, token, current_site):
             username=EMAIL_HOST_USER,
             password=EMAIL_HOST_PASSWORD,
             use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
         )
 
         msg = EmailMultiAlternatives(
@@ -55,11 +54,8 @@ def magic_link(email, key, token, current_site):
         )
         msg.attach_alternative(html_content, "text/html")
         msg.send()
+        logging.getLogger("plane").info("Email sent successfully.")
         return
     except Exception as e:
-        print(e)
-        capture_exception(e)
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/notification_task.py b/apiserver/plane/bgtasks/notification_task.py
index 0a843e4a63a..5725abc624b 100644
--- a/apiserver/plane/bgtasks/notification_task.py
+++ b/apiserver/plane/bgtasks/notification_task.py
@@ -40,7 +40,9 @@ def update_mentions_for_issue(issue, project, new_mentions, removed_mention):
         )
 
     IssueMention.objects.bulk_create(aggregated_issue_mentions, batch_size=100)
-    IssueMention.objects.filter(issue=issue, mention__in=removed_mention).delete()
+    IssueMention.objects.filter(
+        issue=issue, mention__in=removed_mention
+    ).delete()
 
 
 def get_new_mentions(requested_instance, current_instance):
@@ -92,7 +94,9 @@ def extract_mentions_as_subscribers(project_id, issue_id, mentions):
                 project_id=project_id,
             ).exists()
             and not IssueAssignee.objects.filter(
-                project_id=project_id, issue_id=issue_id, assignee_id=mention_id
+                project_id=project_id,
+                issue_id=issue_id,
+                assignee_id=mention_id,
             ).exists()
             and not Issue.objects.filter(
                 project_id=project_id, pk=issue_id, created_by_id=mention_id
@@ -120,12 +124,14 @@ def extract_mentions(issue_instance):
         data = json.loads(issue_instance)
         html = data.get("description_html")
         soup = BeautifulSoup(html, "html.parser")
-        mention_tags = soup.find_all("mention-component", attrs={"target": "users"})
+        mention_tags = soup.find_all(
+            "mention-component", attrs={"target": "users"}
+        )
 
         mentions = [mention_tag["id"] for mention_tag in mention_tags]
 
         return list(set(mentions))
-    except Exception as e:
+    except Exception:
         return []
 
 
@@ -134,11 +140,13 @@ def extract_comment_mentions(comment_value):
     try:
         mentions = []
         soup = BeautifulSoup(comment_value, "html.parser")
-        mentions_tags = soup.find_all("mention-component", attrs={"target": "users"})
+        mentions_tags = soup.find_all(
+            "mention-component", attrs={"target": "users"}
+        )
         for mention_tag in mentions_tags:
             mentions.append(mention_tag["id"])
         return list(set(mentions))
-    except Exception as e:
+    except Exception:
         return []
 
 
@@ -157,7 +165,13 @@ def get_new_comment_mentions(new_value, old_value):
 
 
 def create_mention_notification(
-    project, notification_comment, issue, actor_id, mention_id, issue_id, activity
+    project,
+    notification_comment,
+    issue,
+    actor_id,
+    mention_id,
+    issue_id,
+    activity,
 ):
     return Notification(
         workspace=project.workspace,
@@ -304,9 +318,11 @@ def notifications(
                 # add the user to issue subscriber
                 try:
                     _ = IssueSubscriber.objects.get_or_create(
-                        project_id=project_id, issue_id=issue_id, subscriber_id=actor_id
+                        project_id=project_id,
+                        issue_id=issue_id,
+                        subscriber_id=actor_id,
                     )
-                except Exception as e:
+                except Exception:
                     pass
 
             project = Project.objects.get(pk=project_id)
@@ -334,11 +350,14 @@ def notifications(
                     user_id=subscriber
                 )
 
-                for issue_activity in issue_activities_created:   
+                for issue_activity in issue_activities_created:
                     # If activity done in blocking then blocked by email should not go
-                    if issue_activity.get("issue_detail").get("id") != issue_id:
-                        continue;
-                    
+                    if (
+                        issue_activity.get("issue_detail").get("id")
+                        != issue_id
+                    ):
+                        continue
+
                     # Do not send notification for description update
                     if issue_activity.get("field") == "description":
                         continue
@@ -471,7 +490,9 @@ def notifications(
                                             if issue_comment is not None
                                             else ""
                                         ),
-                                        "activity_time": issue_activity.get("created_at"),
+                                        "activity_time": issue_activity.get(
+                                            "created_at"
+                                        ),
                                     },
                                 },
                             )
@@ -552,7 +573,9 @@ def notifications(
                                             "old_value": str(
                                                 issue_activity.get("old_value")
                                             ),
-                                            "activity_time": issue_activity.get("created_at"),
+                                            "activity_time": issue_activity.get(
+                                                "created_at"
+                                            ),
                                         },
                                     },
                                 )
@@ -640,7 +663,9 @@ def notifications(
                                             "old_value": str(
                                                 last_activity.old_value
                                             ),
-                                            "activity_time": issue_activity.get("created_at"),
+                                            "activity_time": issue_activity.get(
+                                                "created_at"
+                                            ),
                                         },
                                     },
                                 )
@@ -697,7 +722,9 @@ def notifications(
                                                         "old_value"
                                                     )
                                                 ),
-                                                "activity_time": issue_activity.get("created_at"),
+                                                "activity_time": issue_activity.get(
+                                                    "created_at"
+                                                ),
                                             },
                                         },
                                     )
diff --git a/apiserver/plane/bgtasks/project_invitation_task.py b/apiserver/plane/bgtasks/project_invitation_task.py
index a986de33282..b60c49da170 100644
--- a/apiserver/plane/bgtasks/project_invitation_task.py
+++ b/apiserver/plane/bgtasks/project_invitation_task.py
@@ -1,19 +1,18 @@
-# Python import
-import os
+# Python imports
+import logging
+
+# Third party imports
+from celery import shared_task
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
-
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
 
 # Module imports
-from plane.db.models import Project, User, ProjectMemberInvite
+from plane.db.models import Project, ProjectMemberInvite, User
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.exception_logger import log_exception
 
 
 @shared_task
@@ -53,6 +52,7 @@ def project_invitation(email, project_id, token, current_site, invitor):
             EMAIL_HOST_PASSWORD,
             EMAIL_PORT,
             EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
             EMAIL_FROM,
         ) = get_email_configuration()
 
@@ -62,6 +62,7 @@ def project_invitation(email, project_id, token, current_site, invitor):
             username=EMAIL_HOST_USER,
             password=EMAIL_HOST_PASSWORD,
             use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
         )
 
         msg = EmailMultiAlternatives(
@@ -74,12 +75,10 @@ def project_invitation(email, project_id, token, current_site, invitor):
 
         msg.attach_alternative(html_content, "text/html")
         msg.send()
+        logging.getLogger("plane").info("Email sent successfully.")
         return
-    except (Project.DoesNotExist, ProjectMemberInvite.DoesNotExist) as e:
+    except (Project.DoesNotExist, ProjectMemberInvite.DoesNotExist):
         return
     except Exception as e:
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/webhook_task.py b/apiserver/plane/bgtasks/webhook_task.py
index 605f48dd944..6537e3b21f6 100644
--- a/apiserver/plane/bgtasks/webhook_task.py
+++ b/apiserver/plane/bgtasks/webhook_task.py
@@ -1,44 +1,45 @@
-import requests
-import uuid
 import hashlib
-import json
 import hmac
+import json
+import logging
+import uuid
+
+import requests
+
+# Third party imports
+from celery import shared_task
 
 # Django imports
 from django.conf import settings
-from django.core.serializers.json import DjangoJSONEncoder
 from django.core.mail import EmailMultiAlternatives, get_connection
+from django.core.serializers.json import DjangoJSONEncoder
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
 
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
-
+# Module imports
+from plane.api.serializers import (
+    CycleIssueSerializer,
+    CycleSerializer,
+    IssueCommentSerializer,
+    IssueExpandSerializer,
+    ModuleIssueSerializer,
+    ModuleSerializer,
+    ProjectSerializer,
+)
 from plane.db.models import (
-    Webhook,
-    WebhookLog,
-    Project,
-    Issue,
     Cycle,
-    Module,
-    ModuleIssue,
     CycleIssue,
+    Issue,
     IssueComment,
+    Module,
+    ModuleIssue,
+    Project,
     User,
+    Webhook,
+    WebhookLog,
 )
-from plane.api.serializers import (
-    ProjectSerializer,
-    CycleSerializer,
-    ModuleSerializer,
-    CycleIssueSerializer,
-    ModuleIssueSerializer,
-    IssueCommentSerializer,
-    IssueExpandSerializer,
-)
-
-# Module imports
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.exception_logger import log_exception
 
 SERIALIZER_MAPPER = {
     "project": ProjectSerializer,
@@ -159,7 +160,7 @@ def webhook_task(self, webhook, slug, event, event_data, action, current_site):
         )
         # Retry logic
         if self.request.retries >= self.max_retries:
-            Webhook.objects.filter(pk=webhook.id).update(is_active=False)   
+            Webhook.objects.filter(pk=webhook.id).update(is_active=False)
             if webhook:
                 # send email for the deactivation of the webhook
                 send_webhook_deactivation_email(
@@ -174,7 +175,7 @@ def webhook_task(self, webhook, slug, event, event_data, action, current_site):
     except Exception as e:
         if settings.DEBUG:
             print(e)
-        capture_exception(e)
+        log_exception(e)
         return
 
 
@@ -215,9 +216,11 @@ def send_webhook(event, payload, kw, action, slug, bulk, current_site):
                     event_data = [
                         get_model_data(
                             event=event,
-                            event_id=payload.get("id")
-                            if isinstance(payload, dict)
-                            else None,
+                            event_id=(
+                                payload.get("id")
+                                if isinstance(payload, dict)
+                                else None
+                            ),
                             many=False,
                         )
                     ]
@@ -239,12 +242,14 @@ def send_webhook(event, payload, kw, action, slug, bulk, current_site):
     except Exception as e:
         if settings.DEBUG:
             print(e)
-        capture_exception(e)
+        log_exception(e)
         return
 
 
 @shared_task
-def send_webhook_deactivation_email(webhook_id, receiver_id, current_site, reason):
+def send_webhook_deactivation_email(
+    webhook_id, receiver_id, current_site, reason
+):
     # Get email configurations
     (
         EMAIL_HOST,
@@ -252,19 +257,22 @@ def send_webhook_deactivation_email(webhook_id, receiver_id, current_site, reaso
         EMAIL_HOST_PASSWORD,
         EMAIL_PORT,
         EMAIL_USE_TLS,
+        EMAIL_USE_SSL,
         EMAIL_FROM,
     ) = get_email_configuration()
 
     receiver = User.objects.get(pk=receiver_id)
-    webhook = Webhook.objects.get(pk=webhook_id) 
-    subject="Webhook Deactivated"
-    message=f"Webhook {webhook.url} has been deactivated due to failed requests."
+    webhook = Webhook.objects.get(pk=webhook_id)
+    subject = "Webhook Deactivated"
+    message = (
+        f"Webhook {webhook.url} has been deactivated due to failed requests."
+    )
 
     # Send the mail
     context = {
         "email": receiver.email,
         "message": message,
-        "webhook_url":f"{current_site}/{str(webhook.workspace.slug)}/settings/webhooks/{str(webhook.id)}",
+        "webhook_url": f"{current_site}/{str(webhook.workspace.slug)}/settings/webhooks/{str(webhook.id)}",
     }
     html_content = render_to_string(
         "emails/notifications/webhook-deactivate.html", context
@@ -278,6 +286,7 @@ def send_webhook_deactivation_email(webhook_id, receiver_id, current_site, reaso
             username=EMAIL_HOST_USER,
             password=EMAIL_HOST_PASSWORD,
             use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
         )
 
         msg = EmailMultiAlternatives(
@@ -289,8 +298,8 @@ def send_webhook_deactivation_email(webhook_id, receiver_id, current_site, reaso
         )
         msg.attach_alternative(html_content, "text/html")
         msg.send()
-
+        logging.getLogger("plane").info("Email sent successfully.")
         return
     except Exception as e:
-        print(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/bgtasks/workspace_invitation_task.py b/apiserver/plane/bgtasks/workspace_invitation_task.py
index 06dd6e8cd56..c0b945e62b4 100644
--- a/apiserver/plane/bgtasks/workspace_invitation_task.py
+++ b/apiserver/plane/bgtasks/workspace_invitation_task.py
@@ -1,23 +1,18 @@
 # Python imports
-import os
-import requests
-import json
+import logging
+
+# Third party imports
+from celery import shared_task
 
 # Django imports
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
-
-# Third party imports
-from celery import shared_task
-from sentry_sdk import capture_exception
-from slack_sdk import WebClient
-from slack_sdk.errors import SlackApiError
 
 # Module imports
-from plane.db.models import Workspace, WorkspaceMemberInvite, User
+from plane.db.models import User, Workspace, WorkspaceMemberInvite
 from plane.license.utils.instance_value import get_email_configuration
+from plane.utils.exception_logger import log_exception
 
 
 @shared_task
@@ -42,6 +37,7 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
             EMAIL_HOST_PASSWORD,
             EMAIL_PORT,
             EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
             EMAIL_FROM,
         ) = get_email_configuration()
 
@@ -70,6 +66,7 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
             username=EMAIL_HOST_USER,
             password=EMAIL_HOST_PASSWORD,
             use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
         )
 
         msg = EmailMultiAlternatives(
@@ -81,14 +78,12 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
         )
         msg.attach_alternative(html_content, "text/html")
         msg.send()
+        logging.getLogger("plane").info("Email sent succesfully")
 
         return
     except (Workspace.DoesNotExist, WorkspaceMemberInvite.DoesNotExist) as e:
-        print("Workspace or WorkspaceMember Invite Does not exists")
+        log_exception(e)
         return
     except Exception as e:
-        # Print logs if in DEBUG mode
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
+        log_exception(e)
         return
diff --git a/apiserver/plane/celery.py b/apiserver/plane/celery.py
index 0912e276af4..056dfb16bc5 100644
--- a/apiserver/plane/celery.py
+++ b/apiserver/plane/celery.py
@@ -2,7 +2,6 @@
 from celery import Celery
 from plane.settings.redis import redis_instance
 from celery.schedules import crontab
-from django.utils.timezone import timedelta
 
 # Set the default Django settings module for the 'celery' program.
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "plane.settings.production")
@@ -31,7 +30,7 @@
     },
     "check-every-five-minutes-to-send-email-notifications": {
         "task": "plane.bgtasks.email_notification_task.stack_email_notification",
-        "schedule": crontab(minute='*/5')
+        "schedule": crontab(minute="*/5"),
     },
 }
 
diff --git a/apiserver/plane/db/management/commands/clear_cache.py b/apiserver/plane/db/management/commands/clear_cache.py
new file mode 100644
index 00000000000..4dfbe6c1032
--- /dev/null
+++ b/apiserver/plane/db/management/commands/clear_cache.py
@@ -0,0 +1,17 @@
+# Django imports
+from django.core.cache import cache
+from django.core.management import BaseCommand
+
+
+class Command(BaseCommand):
+    help = "Clear Cache before starting the server to remove stale values"
+
+    def handle(self, *args, **options):
+        try:
+            cache.clear()
+            self.stdout.write(self.style.SUCCESS("Cache Cleared"))
+            return
+        except Exception:
+            # Another ClientError occurred
+            self.stdout.write(self.style.ERROR("Failed to clear cache"))
+            return
diff --git a/apiserver/plane/db/management/commands/reset_password.py b/apiserver/plane/db/management/commands/reset_password.py
index d48c24b1cdb..bca6c356015 100644
--- a/apiserver/plane/db/management/commands/reset_password.py
+++ b/apiserver/plane/db/management/commands/reset_password.py
@@ -52,5 +52,5 @@ def handle(self, *args, **options):
         user.save()
 
         self.stdout.write(
-            self.style.SUCCESS(f"User password updated succesfully")
+            self.style.SUCCESS("User password updated succesfully")
         )
diff --git a/apiserver/plane/db/management/commands/test_email.py b/apiserver/plane/db/management/commands/test_email.py
new file mode 100644
index 00000000000..99c5d9684f4
--- /dev/null
+++ b/apiserver/plane/db/management/commands/test_email.py
@@ -0,0 +1,63 @@
+from django.core.mail import EmailMultiAlternatives, get_connection
+from django.core.management import BaseCommand, CommandError
+
+from plane.license.utils.instance_value import get_email_configuration
+
+
+class Command(BaseCommand):
+    """Django command to pause execution until db is available"""
+
+    def add_arguments(self, parser):
+        # Positional argument
+        parser.add_argument("to_email", type=str, help="receiver's email")
+
+    def handle(self, *args, **options):
+        receiver_email = options.get("to_email")
+
+        if not receiver_email:
+            raise CommandError("Reciever email is required")
+
+        (
+            EMAIL_HOST,
+            EMAIL_HOST_USER,
+            EMAIL_HOST_PASSWORD,
+            EMAIL_PORT,
+            EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
+            EMAIL_FROM,
+        ) = get_email_configuration()
+
+        connection = get_connection(
+            host=EMAIL_HOST,
+            port=int(EMAIL_PORT),
+            username=EMAIL_HOST_USER,
+            password=EMAIL_HOST_PASSWORD,
+            use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
+            timeout=30,
+        )
+        # Prepare email details
+        subject = "Email Notification from Plane"
+        message = (
+            "This is a sample email notification sent from Plane application."
+        )
+
+        self.stdout.write(self.style.SUCCESS("Trying to send test email..."))
+
+        # Send the email
+        try:
+            msg = EmailMultiAlternatives(
+                subject=subject,
+                body=message,
+                from_email=EMAIL_FROM,
+                to=[receiver_email],
+                connection=connection,
+            )
+            msg.send()
+            self.stdout.write(self.style.SUCCESS("Email succesfully sent"))
+        except Exception as e:
+            self.stdout.write(
+                self.style.ERROR(
+                    f"Error: Email could not be delivered due to {e}"
+                )
+            )
diff --git a/apiserver/plane/db/management/commands/wait_for_migrations.py b/apiserver/plane/db/management/commands/wait_for_migrations.py
index 51f2cf33930..91c8a4ce8c7 100644
--- a/apiserver/plane/db/management/commands/wait_for_migrations.py
+++ b/apiserver/plane/db/management/commands/wait_for_migrations.py
@@ -4,15 +4,18 @@
 from django.db.migrations.executor import MigrationExecutor
 from django.db import connections, DEFAULT_DB_ALIAS
 
+
 class Command(BaseCommand):
-    help = 'Wait for database migrations to complete before starting Celery worker/beat'
+    help = "Wait for database migrations to complete before starting Celery worker/beat"
 
     def handle(self, *args, **kwargs):
         while self._pending_migrations():
             self.stdout.write("Waiting for database migrations to complete...")
             time.sleep(10)  # wait for 10 seconds before checking again
 
-        self.stdout.write(self.style.SUCCESS("No migrations Pending. Starting processes ..."))
+        self.stdout.write(
+            self.style.SUCCESS("No migrations Pending. Starting processes ...")
+        )
 
     def _pending_migrations(self):
         connection = connections[DEFAULT_DB_ALIAS]
diff --git a/apiserver/plane/db/migrations/0038_auto_20230720_1505.py b/apiserver/plane/db/migrations/0038_auto_20230720_1505.py
index 53e50ed41e3..5f11d9adea9 100644
--- a/apiserver/plane/db/migrations/0038_auto_20230720_1505.py
+++ b/apiserver/plane/db/migrations/0038_auto_20230720_1505.py
@@ -1,6 +1,6 @@
 # Generated by Django 4.2.3 on 2023-07-20 09:35
 
-from django.db import migrations, models
+from django.db import migrations
 
 
 def restructure_theming(apps, schema_editor):
diff --git a/apiserver/plane/db/migrations/0054_dashboard_widget_dashboardwidget.py b/apiserver/plane/db/migrations/0054_dashboard_widget_dashboardwidget.py
index 933c229a159..b3b5cc8c192 100644
--- a/apiserver/plane/db/migrations/0054_dashboard_widget_dashboardwidget.py
+++ b/apiserver/plane/db/migrations/0054_dashboard_widget_dashboardwidget.py
@@ -7,71 +7,204 @@
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('db', '0053_auto_20240102_1315'),
+        ("db", "0053_auto_20240102_1315"),
     ]
 
     operations = [
         migrations.CreateModel(
-            name='Dashboard',
+            name="Dashboard",
             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)),
-                ('description_html', models.TextField(blank=True, default='<p></p>')),
-                ('identifier', models.UUIDField(null=True)),
-                ('is_default', models.BooleanField(default=False)),
-                ('type_identifier', models.CharField(choices=[('workspace', 'Workspace'), ('project', 'Project'), ('home', 'Home'), ('team', 'Team'), ('user', 'User')], default='home', max_length=30, verbose_name='Dashboard 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')),
-                ('owned_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='dashboards', to=settings.AUTH_USER_MODEL)),
-                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                (
+                    "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)),
+                (
+                    "description_html",
+                    models.TextField(blank=True, default="<p></p>"),
+                ),
+                ("identifier", models.UUIDField(null=True)),
+                ("is_default", models.BooleanField(default=False)),
+                (
+                    "type_identifier",
+                    models.CharField(
+                        choices=[
+                            ("workspace", "Workspace"),
+                            ("project", "Project"),
+                            ("home", "Home"),
+                            ("team", "Team"),
+                            ("user", "User"),
+                        ],
+                        default="home",
+                        max_length=30,
+                        verbose_name="Dashboard 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",
+                    ),
+                ),
+                (
+                    "owned_by",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="dashboards",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
             ],
             options={
-                'verbose_name': 'Dashboard',
-                'verbose_name_plural': 'Dashboards',
-                'db_table': 'dashboards',
-                'ordering': ('-created_at',),
+                "verbose_name": "Dashboard",
+                "verbose_name_plural": "Dashboards",
+                "db_table": "dashboards",
+                "ordering": ("-created_at",),
             },
         ),
         migrations.CreateModel(
-            name='Widget',
+            name="Widget",
             fields=[
-                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
-                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
-                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
-                ('key', models.CharField(max_length=255)),
-                ('filters', models.JSONField(default=dict)),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                (
+                    "created_at",
+                    models.DateTimeField(
+                        auto_now_add=True, verbose_name="Created At"
+                    ),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                ("key", models.CharField(max_length=255)),
+                ("filters", models.JSONField(default=dict)),
             ],
             options={
-                'verbose_name': 'Widget',
-                'verbose_name_plural': 'Widgets',
-                'db_table': 'widgets',
-                'ordering': ('-created_at',),
+                "verbose_name": "Widget",
+                "verbose_name_plural": "Widgets",
+                "db_table": "widgets",
+                "ordering": ("-created_at",),
             },
         ),
         migrations.CreateModel(
-            name='DashboardWidget',
+            name="DashboardWidget",
             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)),
-                ('is_visible', models.BooleanField(default=True)),
-                ('sort_order', models.FloatField(default=65535)),
-                ('filters', models.JSONField(default=dict)),
-                ('properties', models.JSONField(default=dict)),
-                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
-                ('dashboard', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='dashboard_widgets', to='db.dashboard')),
-                ('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')),
-                ('widget', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='dashboard_widgets', to='db.widget')),
+                (
+                    "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,
+                    ),
+                ),
+                ("is_visible", models.BooleanField(default=True)),
+                ("sort_order", models.FloatField(default=65535)),
+                ("filters", models.JSONField(default=dict)),
+                ("properties", models.JSONField(default=dict)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "dashboard",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="dashboard_widgets",
+                        to="db.dashboard",
+                    ),
+                ),
+                (
+                    "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",
+                    ),
+                ),
+                (
+                    "widget",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="dashboard_widgets",
+                        to="db.widget",
+                    ),
+                ),
             ],
             options={
-                'verbose_name': 'Dashboard Widget',
-                'verbose_name_plural': 'Dashboard Widgets',
-                'db_table': 'dashboard_widgets',
-                'ordering': ('-created_at',),
-                'unique_together': {('widget', 'dashboard')},
+                "verbose_name": "Dashboard Widget",
+                "verbose_name_plural": "Dashboard Widgets",
+                "db_table": "dashboard_widgets",
+                "ordering": ("-created_at",),
+                "unique_together": {("widget", "dashboard")},
             },
         ),
     ]
diff --git a/apiserver/plane/db/migrations/0055_auto_20240108_0648.py b/apiserver/plane/db/migrations/0055_auto_20240108_0648.py
index e369c185d6b..b13fcdea150 100644
--- a/apiserver/plane/db/migrations/0055_auto_20240108_0648.py
+++ b/apiserver/plane/db/migrations/0055_auto_20240108_0648.py
@@ -62,7 +62,7 @@ def create_dashboards(apps, schema_editor):
                 type_identifier="home",
                 is_default=True,
             )
-            for user_id in User.objects.values_list('id', flat=True)
+            for user_id in User.objects.values_list("id", flat=True)
         ],
         batch_size=2000,
     )
@@ -78,11 +78,13 @@ def create_dashboard_widgets(apps, schema_editor):
             widget_id=widget_id,
             dashboard_id=dashboard_id,
         )
-        for widget_id in Widget.objects.values_list('id', flat=True)
-        for dashboard_id in Dashboard.objects.values_list('id', flat=True)
+        for widget_id in Widget.objects.values_list("id", flat=True)
+        for dashboard_id in Dashboard.objects.values_list("id", flat=True)
     ]
 
-    DashboardWidget.objects.bulk_create(updated_dashboard_widget, batch_size=2000)
+    DashboardWidget.objects.bulk_create(
+        updated_dashboard_widget, batch_size=2000
+    )
 
 
 class Migration(migrations.Migration):
diff --git a/apiserver/plane/db/migrations/0057_auto_20240122_0901.py b/apiserver/plane/db/migrations/0057_auto_20240122_0901.py
index 9204d43b3f5..a143917d235 100644
--- a/apiserver/plane/db/migrations/0057_auto_20240122_0901.py
+++ b/apiserver/plane/db/migrations/0057_auto_20240122_0901.py
@@ -2,12 +2,17 @@
 
 from django.db import migrations
 
+
 def create_notification_preferences(apps, schema_editor):
-    UserNotificationPreference = apps.get_model("db", "UserNotificationPreference")
+    UserNotificationPreference = apps.get_model(
+        "db", "UserNotificationPreference"
+    )
     User = apps.get_model("db", "User")
 
     bulk_notification_preferences = []
-    for user_id in User.objects.filter(is_bot=False).values_list("id", flat=True):
+    for user_id in User.objects.filter(is_bot=False).values_list(
+        "id", flat=True
+    ):
         bulk_notification_preferences.append(
             UserNotificationPreference(
                 user_id=user_id,
@@ -18,11 +23,10 @@ def create_notification_preferences(apps, schema_editor):
         bulk_notification_preferences, batch_size=1000, ignore_conflicts=True
     )
 
+
 class Migration(migrations.Migration):
     dependencies = [
         ("db", "0056_usernotificationpreference_emailnotificationlog"),
     ]
 
-    operations = [
-        migrations.RunPython(create_notification_preferences)
-    ]
+    operations = [migrations.RunPython(create_notification_preferences)]
diff --git a/apiserver/plane/db/migrations/0058_alter_moduleissue_issue_and_more.py b/apiserver/plane/db/migrations/0058_alter_moduleissue_issue_and_more.py
index 6238ef8257c..411cd47bd44 100644
--- a/apiserver/plane/db/migrations/0058_alter_moduleissue_issue_and_more.py
+++ b/apiserver/plane/db/migrations/0058_alter_moduleissue_issue_and_more.py
@@ -5,19 +5,22 @@
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('db', '0057_auto_20240122_0901'),
+        ("db", "0057_auto_20240122_0901"),
     ]
 
     operations = [
         migrations.AlterField(
-            model_name='moduleissue',
-            name='issue',
-            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_module', to='db.issue'),
+            model_name="moduleissue",
+            name="issue",
+            field=models.ForeignKey(
+                on_delete=django.db.models.deletion.CASCADE,
+                related_name="issue_module",
+                to="db.issue",
+            ),
         ),
         migrations.AlterUniqueTogether(
-            name='moduleissue',
-            unique_together={('issue', 'module')},
+            name="moduleissue",
+            unique_together={("issue", "module")},
         ),
     ]
diff --git a/apiserver/plane/db/migrations/0059_auto_20240208_0957.py b/apiserver/plane/db/migrations/0059_auto_20240208_0957.py
index c4c43fa4bf6..30d816a9399 100644
--- a/apiserver/plane/db/migrations/0059_auto_20240208_0957.py
+++ b/apiserver/plane/db/migrations/0059_auto_20240208_0957.py
@@ -24,10 +24,9 @@ def widgets_filter_change(apps, schema_editor):
     # Bulk update the widgets
     Widget.objects.bulk_update(widgets_to_update, ["filters"], batch_size=10)
 
+
 class Migration(migrations.Migration):
     dependencies = [
-        ('db', '0058_alter_moduleissue_issue_and_more'),
-    ]
-    operations = [
-        migrations.RunPython(widgets_filter_change)
+        ("db", "0058_alter_moduleissue_issue_and_more"),
     ]
+    operations = [migrations.RunPython(widgets_filter_change)]
diff --git a/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py b/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py
index 074e20a16b8..575836a3517 100644
--- a/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py
+++ b/apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py
@@ -4,15 +4,14 @@
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ('db', '0059_auto_20240208_0957'),
+        ("db", "0059_auto_20240208_0957"),
     ]
 
     operations = [
         migrations.AddField(
-            model_name='cycle',
-            name='progress_snapshot',
+            model_name="cycle",
+            name="progress_snapshot",
             field=models.JSONField(default=dict),
         ),
     ]
diff --git a/apiserver/plane/db/migrations/0061_project_logo_props.py b/apiserver/plane/db/migrations/0061_project_logo_props.py
new file mode 100644
index 00000000000..d8752d9dd8f
--- /dev/null
+++ b/apiserver/plane/db/migrations/0061_project_logo_props.py
@@ -0,0 +1,54 @@
+# Generated by Django 4.2.7 on 2024-03-03 16:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    def update_project_logo_props(apps, schema_editor):
+        Project = apps.get_model("db", "Project")
+
+        bulk_update_project_logo = []
+        # Iterate through projects and update logo_props
+        for project in Project.objects.all():
+            project.logo_props["in_use"] = "emoji" if project.emoji else "icon"
+            project.logo_props["emoji"] = {
+                "value": project.emoji if project.emoji else "",
+                "url": "",
+            }
+            project.logo_props["icon"] = {
+                "name": (
+                    project.icon_prop.get("name", "")
+                    if project.icon_prop
+                    else ""
+                ),
+                "color": (
+                    project.icon_prop.get("color", "")
+                    if project.icon_prop
+                    else ""
+                ),
+            }
+            bulk_update_project_logo.append(project)
+
+        # Bulk update logo_props for all projects
+        Project.objects.bulk_update(
+            bulk_update_project_logo, ["logo_props"], batch_size=1000
+        )
+
+    dependencies = [
+        ("db", "0060_cycle_progress_snapshot"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="issuelink",
+            name="url",
+            field=models.TextField(),
+        ),
+        migrations.AddField(
+            model_name="project",
+            name="logo_props",
+            field=models.JSONField(default=dict),
+        ),
+        migrations.RunPython(update_project_logo_props),
+    ]
diff --git a/apiserver/plane/db/migrations/0062_cycle_archived_at_module_archived_at_and_more.py b/apiserver/plane/db/migrations/0062_cycle_archived_at_module_archived_at_and_more.py
new file mode 100644
index 00000000000..be3f9fc2a12
--- /dev/null
+++ b/apiserver/plane/db/migrations/0062_cycle_archived_at_module_archived_at_and_more.py
@@ -0,0 +1,41 @@
+# Generated by Django 4.2.7 on 2024-03-19 08:28
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0061_project_logo_props'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="cycle",
+            name="archived_at",
+            field=models.DateTimeField(null=True),
+        ),
+        migrations.AddField(
+            model_name="module",
+            name="archived_at",
+            field=models.DateTimeField(null=True),
+        ),
+        migrations.AddField(
+            model_name="project",
+            name="archived_at",
+            field=models.DateTimeField(null=True),
+        ),
+        migrations.AlterField(
+            model_name="socialloginconnection",
+            name="medium",
+            field=models.CharField(
+                choices=[
+                    ("Google", "google"),
+                    ("Github", "github"),
+                    ("Jira", "jira"),
+                ],
+                default=None,
+                max_length=20,
+            ),
+        ),
+    ]
diff --git a/apiserver/plane/db/mixins.py b/apiserver/plane/db/mixins.py
index 263f9ab9a5f..f1756e5adca 100644
--- a/apiserver/plane/db/mixins.py
+++ b/apiserver/plane/db/mixins.py
@@ -1,12 +1,10 @@
 # Python imports
-import uuid
 
 # Django imports
 from django.db import models
 
 
 class TimeAuditModel(models.Model):
-
     """To path when the record was created and last modified"""
 
     created_at = models.DateTimeField(
@@ -22,7 +20,6 @@ class Meta:
 
 
 class UserAuditModel(models.Model):
-
     """To path when the record was created and last modified"""
 
     created_by = models.ForeignKey(
@@ -45,7 +42,6 @@ class Meta:
 
 
 class AuditModel(TimeAuditModel, UserAuditModel):
-
     """To path when the record was created and last modified"""
 
     class Meta:
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index d9096bd01f0..daa793c37a7 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -85,10 +85,14 @@
 
 from .analytic import AnalyticView
 
-from .notification import Notification, UserNotificationPreference, EmailNotificationLog
+from .notification import (
+    Notification,
+    UserNotificationPreference,
+    EmailNotificationLog,
+)
 
 from .exporter import ExporterHistory
 
 from .webhook import Webhook, WebhookLog
 
-from .dashboard import Dashboard, DashboardWidget, Widget
\ No newline at end of file
+from .dashboard import Dashboard, DashboardWidget, Widget
diff --git a/apiserver/plane/db/models/analytic.py b/apiserver/plane/db/models/analytic.py
index d097051afb9..68747e8c491 100644
--- a/apiserver/plane/db/models/analytic.py
+++ b/apiserver/plane/db/models/analytic.py
@@ -1,6 +1,5 @@
 # Django models
 from django.db import models
-from django.conf import settings
 
 from .base import BaseModel
 
diff --git a/apiserver/plane/db/models/cycle.py b/apiserver/plane/db/models/cycle.py
index d802dbc1e09..15a8251d767 100644
--- a/apiserver/plane/db/models/cycle.py
+++ b/apiserver/plane/db/models/cycle.py
@@ -69,6 +69,7 @@ class Cycle(ProjectBaseModel):
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
     progress_snapshot = models.JSONField(default=dict)
+    archived_at = models.DateTimeField(null=True)
 
     class Meta:
         verbose_name = "Cycle"
diff --git a/apiserver/plane/db/models/dashboard.py b/apiserver/plane/db/models/dashboard.py
index 05c5a893f4e..d07a7072857 100644
--- a/apiserver/plane/db/models/dashboard.py
+++ b/apiserver/plane/db/models/dashboard.py
@@ -2,12 +2,12 @@
 
 # Django imports
 from django.db import models
-from django.conf import settings
 
 # Module imports
 from . import BaseModel
 from ..mixins import TimeAuditModel
 
+
 class Dashboard(BaseModel):
     DASHBOARD_CHOICES = (
         ("workspace", "Workspace"),
@@ -45,7 +45,11 @@ class Meta:
 
 class Widget(TimeAuditModel):
     id = models.UUIDField(
-        default=uuid.uuid4, unique=True, editable=False, db_index=True, primary_key=True
+        default=uuid.uuid4,
+        unique=True,
+        editable=False,
+        db_index=True,
+        primary_key=True,
     )
     key = models.CharField(max_length=255)
     filters = models.JSONField(default=dict)
diff --git a/apiserver/plane/db/models/integration/github.py b/apiserver/plane/db/models/integration/github.py
index f3331c87451..6a00dc6900f 100644
--- a/apiserver/plane/db/models/integration/github.py
+++ b/apiserver/plane/db/models/integration/github.py
@@ -1,5 +1,4 @@
 # Python imports
-import uuid
 
 # Django imports
 from django.db import models
diff --git a/apiserver/plane/db/models/integration/slack.py b/apiserver/plane/db/models/integration/slack.py
index 72df4dfd737..1f07179b7a8 100644
--- a/apiserver/plane/db/models/integration/slack.py
+++ b/apiserver/plane/db/models/integration/slack.py
@@ -1,5 +1,4 @@
 # Python imports
-import uuid
 
 # Django imports
 from django.db import models
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index d5ed4247a74..0a59acb9361 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -91,6 +91,7 @@ def get_queryset(self):
                 | models.Q(issue_inbox__isnull=True)
             )
             .exclude(archived_at__isnull=False)
+            .exclude(project__archived_at__isnull=False)
             .exclude(is_draft=True)
         )
 
@@ -320,7 +321,7 @@ def __str__(self):
 
 class IssueLink(ProjectBaseModel):
     title = models.CharField(max_length=255, null=True, blank=True)
-    url = models.URLField()
+    url = models.TextField()
     issue = models.ForeignKey(
         "db.Issue", on_delete=models.CASCADE, related_name="issue_link"
     )
diff --git a/apiserver/plane/db/models/module.py b/apiserver/plane/db/models/module.py
index 9af4e120e74..b201e4d7f20 100644
--- a/apiserver/plane/db/models/module.py
+++ b/apiserver/plane/db/models/module.py
@@ -92,6 +92,7 @@ class Module(ProjectBaseModel):
     sort_order = models.FloatField(default=65535)
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
+    archived_at = models.DateTimeField(null=True)
 
     class Meta:
         unique_together = ["name", "project"]
diff --git a/apiserver/plane/db/models/notification.py b/apiserver/plane/db/models/notification.py
index b42ae54a927..9138ece9fae 100644
--- a/apiserver/plane/db/models/notification.py
+++ b/apiserver/plane/db/models/notification.py
@@ -5,6 +5,7 @@
 # Module imports
 from . import BaseModel
 
+
 class Notification(BaseModel):
     workspace = models.ForeignKey(
         "db.Workspace", related_name="notifications", on_delete=models.CASCADE
@@ -105,10 +106,19 @@ def __str__(self):
         """Return the user"""
         return f"<{self.user}>"
 
+
 class EmailNotificationLog(BaseModel):
     # receiver
-    receiver = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="email_notifications")
-    triggered_by = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="triggered_emails")
+    receiver = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="email_notifications",
+    )
+    triggered_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="triggered_emails",
+    )
     # entity - can be issues, pages, etc.
     entity_identifier = models.UUIDField(null=True)
     entity_name = models.CharField(max_length=255)
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index b9317472433..db5ebf33bf6 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -107,12 +107,14 @@ class Project(BaseModel):
     close_in = models.IntegerField(
         default=0, validators=[MinValueValidator(0), MaxValueValidator(12)]
     )
+    logo_props = models.JSONField(default=dict)
     default_state = models.ForeignKey(
         "db.State",
         on_delete=models.SET_NULL,
         null=True,
         related_name="default_state",
     )
+    archived_at = models.DateTimeField(null=True)
 
     def __str__(self):
         """Return name of the project"""
diff --git a/apiserver/plane/db/models/social_connection.py b/apiserver/plane/db/models/social_connection.py
index 938a73a627a..73028e4198c 100644
--- a/apiserver/plane/db/models/social_connection.py
+++ b/apiserver/plane/db/models/social_connection.py
@@ -10,7 +10,7 @@
 class SocialLoginConnection(BaseModel):
     medium = models.CharField(
         max_length=20,
-        choices=(("Google", "google"), ("Github", "github")),
+        choices=(("Google", "google"), ("Github", "github"), ("Jira", "jira")),
         default=None,
     )
     last_login_at = models.DateTimeField(default=timezone.now, null=True)
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 0377ccb8be0..5f932d2ea93 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -1,16 +1,17 @@
 # Python imports
-import uuid
-import string
 import random
-import pytz
+import string
+import uuid
 
-# Django imports
-from django.db import models
+import pytz
 from django.contrib.auth.models import (
     AbstractBaseUser,
-    UserManager,
     PermissionsMixin,
+    UserManager,
 )
+
+# Django imports
+from django.db import models
 from django.db.models.signals import post_save
 from django.dispatch import receiver
 from django.utils import timezone
@@ -138,13 +139,13 @@ def save(self, *args, **kwargs):
         super(User, self).save(*args, **kwargs)
 
 
-
 @receiver(post_save, sender=User)
 def create_user_notification(sender, instance, created, **kwargs):
     # create preferences
     if created and not instance.is_bot:
         # Module imports
         from plane.db.models import UserNotificationPreference
+
         UserNotificationPreference.objects.create(
             user=instance,
             property_change=False,
diff --git a/apiserver/plane/license/api/views/instance.py b/apiserver/plane/license/api/views/instance.py
index 112c68bc89a..627904a16d9 100644
--- a/apiserver/plane/license/api/views/instance.py
+++ b/apiserver/plane/license/api/views/instance.py
@@ -1,17 +1,11 @@
 # Python imports
-import json
-import os
-import requests
 import uuid
-import random
-import string
 
 # Django imports
 from django.utils import timezone
 from django.contrib.auth.hashers import make_password
 from django.core.validators import validate_email
 from django.core.exceptions import ValidationError
-from django.conf import settings
 
 # Third party imports
 from rest_framework import status
@@ -30,9 +24,9 @@
 from plane.license.api.permissions import (
     InstanceAdminPermission,
 )
-from plane.db.models import User, WorkspaceMember, ProjectMember
+from plane.db.models import User
 from plane.license.utils.encryption import encrypt_data
-
+from plane.utils.cache import cache_response, invalidate_cache
 
 class InstanceEndpoint(BaseAPIView):
     def get_permissions(self):
@@ -44,6 +38,7 @@ def get_permissions(self):
             AllowAny(),
         ]
 
+    @cache_response(60 * 60 * 2, user=False)
     def get(self, request):
         instance = Instance.objects.first()
         # get the instance
@@ -58,6 +53,7 @@ def get(self, request):
         data["is_activated"] = True
         return Response(data, status=status.HTTP_200_OK)
 
+    @invalidate_cache(path="/api/instances/", user=False)
     def patch(self, request):
         # Get the instance
         instance = Instance.objects.first()
@@ -75,6 +71,7 @@ class InstanceAdminEndpoint(BaseAPIView):
         InstanceAdminPermission,
     ]
 
+    @invalidate_cache(path="/api/instances/", user=False)
     # Create an instance admin
     def post(self, request):
         email = request.data.get("email", False)
@@ -104,6 +101,7 @@ def post(self, request):
         serializer = InstanceAdminSerializer(instance_admin)
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
+    @cache_response(60 * 60 * 2)
     def get(self, request):
         instance = Instance.objects.first()
         if instance is None:
@@ -115,11 +113,10 @@ def get(self, request):
         serializer = InstanceAdminSerializer(instance_admins, many=True)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
+    @invalidate_cache(path="/api/instances/", user=False)
     def delete(self, request, pk):
         instance = Instance.objects.first()
-        instance_admin = InstanceAdmin.objects.filter(
-            instance=instance, pk=pk
-        ).delete()
+        InstanceAdmin.objects.filter(instance=instance, pk=pk).delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
@@ -128,6 +125,7 @@ class InstanceConfigurationEndpoint(BaseAPIView):
         InstanceAdminPermission,
     ]
 
+    @cache_response(60 * 60 * 2, user=False)
     def get(self, request):
         instance_configurations = InstanceConfiguration.objects.all()
         serializer = InstanceConfigurationSerializer(
@@ -135,6 +133,8 @@ def get(self, request):
         )
         return Response(serializer.data, status=status.HTTP_200_OK)
 
+    @invalidate_cache(path="/api/configs/", user=False)
+    @invalidate_cache(path="/api/mobile-configs/", user=False)
     def patch(self, request):
         configurations = InstanceConfiguration.objects.filter(
             key__in=request.data.keys()
@@ -170,6 +170,7 @@ class InstanceAdminSignInEndpoint(BaseAPIView):
         AllowAny,
     ]
 
+    @invalidate_cache(path="/api/instances/", user=False)
     def post(self, request):
         # Check instance first
         instance = Instance.objects.first()
@@ -201,7 +202,7 @@ def post(self, request):
         email = email.strip().lower()
         try:
             validate_email(email)
-        except ValidationError as e:
+        except ValidationError:
             return Response(
                 {"error": "Please provide a valid email address."},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -260,6 +261,7 @@ class SignUpScreenVisitedEndpoint(BaseAPIView):
         AllowAny,
     ]
 
+    @invalidate_cache(path="/api/instances/", user=False)
     def post(self, request):
         instance = Instance.objects.first()
         if instance is None:
diff --git a/apiserver/plane/license/management/commands/configure_instance.py b/apiserver/plane/license/management/commands/configure_instance.py
index f81d98cba5c..9365f07c546 100644
--- a/apiserver/plane/license/management/commands/configure_instance.py
+++ b/apiserver/plane/license/management/commands/configure_instance.py
@@ -3,7 +3,6 @@
 
 # Django imports
 from django.core.management.base import BaseCommand
-from django.conf import settings
 
 # Module imports
 from plane.license.models import InstanceConfiguration
diff --git a/apiserver/plane/license/management/commands/register_instance.py b/apiserver/plane/license/management/commands/register_instance.py
index 889cd46dc12..32a37879ff1 100644
--- a/apiserver/plane/license/management/commands/register_instance.py
+++ b/apiserver/plane/license/management/commands/register_instance.py
@@ -1,6 +1,5 @@
 # Python imports
 import json
-import requests
 import secrets
 
 # Django imports
@@ -56,9 +55,9 @@ def handle(self, *args, **options):
                 user_count=payload.get("user_count", 0),
             )
 
-            self.stdout.write(self.style.SUCCESS(f"Instance registered"))
+            self.stdout.write(self.style.SUCCESS("Instance registered"))
         else:
             self.stdout.write(
-                self.style.SUCCESS(f"Instance already registered")
+                self.style.SUCCESS("Instance already registered")
             )
             return
diff --git a/apiserver/plane/license/utils/instance_value.py b/apiserver/plane/license/utils/instance_value.py
index bc4fd5d21f2..4c191fedac1 100644
--- a/apiserver/plane/license/utils/instance_value.py
+++ b/apiserver/plane/license/utils/instance_value.py
@@ -64,6 +64,10 @@ def get_email_configuration():
                 "key": "EMAIL_USE_TLS",
                 "default": os.environ.get("EMAIL_USE_TLS", "1"),
             },
+            {
+                "key": "EMAIL_USE_SSL",
+                "default": os.environ.get("EMAIL_USE_SSL", "0"),
+            },
             {
                 "key": "EMAIL_FROM",
                 "default": os.environ.get(
diff --git a/apiserver/plane/middleware/api_log_middleware.py b/apiserver/plane/middleware/api_log_middleware.py
index a49d43b55a1..96c62c2fd9d 100644
--- a/apiserver/plane/middleware/api_log_middleware.py
+++ b/apiserver/plane/middleware/api_log_middleware.py
@@ -1,4 +1,4 @@
-from plane.db.models import APIToken, APIActivityLog
+from plane.db.models import APIActivityLog
 
 
 class APITokenLogMiddleware:
@@ -39,6 +39,5 @@ def process_request(self, request, response, request_body):
             except Exception as e:
                 print(e)
                 # If the token does not exist, you can decide whether to log this as an invalid attempt
-                pass
 
         return None
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index 5c8947e73be..886ad4cb434 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -3,19 +3,20 @@
 # Python imports
 import os
 import ssl
-import certifi
 from datetime import timedelta
 from urllib.parse import urlparse
 
-# Django imports
-from django.core.management.utils import get_random_secret_key
+import certifi
 
 # Third party imports
 import dj_database_url
 import sentry_sdk
+
+# Django imports
+from django.core.management.utils import get_random_secret_key
+from sentry_sdk.integrations.celery import CeleryIntegration
 from sentry_sdk.integrations.django import DjangoIntegration
 from sentry_sdk.integrations.redis import RedisIntegration
-from sentry_sdk.integrations.celery import CeleryIntegration
 
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 
@@ -23,7 +24,7 @@
 SECRET_KEY = os.environ.get("SECRET_KEY", get_random_secret_key())
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
+DEBUG = int(os.environ.get("DEBUG", "0"))
 
 # Allowed Hosts
 ALLOWED_HOSTS = ["*"]
diff --git a/apiserver/plane/settings/local.py b/apiserver/plane/settings/local.py
index 8f27d423418..b00684eae32 100644
--- a/apiserver/plane/settings/local.py
+++ b/apiserver/plane/settings/local.py
@@ -1,11 +1,14 @@
 """Development settings"""
+
+import os
+
 from .common import *  # noqa
 
 DEBUG = True
 
 # Debug Toolbar settings
-INSTALLED_APPS += ("debug_toolbar",)
-MIDDLEWARE += ("debug_toolbar.middleware.DebugToolbarMiddleware",)
+INSTALLED_APPS += ("debug_toolbar",)  # noqa
+MIDDLEWARE += ("debug_toolbar.middleware.DebugToolbarMiddleware",)  # noqa
 
 DEBUG_TOOLBAR_PATCH_SETTINGS = False
 
@@ -14,14 +17,18 @@
 
 CACHES = {
     "default": {
-        "BACKEND": "django.core.cache.backends.locmem.LocMemCache",
+        "BACKEND": "django_redis.cache.RedisCache",
+        "LOCATION": REDIS_URL,  # noqa
+        "OPTIONS": {
+            "CLIENT_CLASS": "django_redis.client.DefaultClient",
+        },
     }
 }
 
 INTERNAL_IPS = ("127.0.0.1",)
 
 MEDIA_URL = "/uploads/"
-MEDIA_ROOT = os.path.join(BASE_DIR, "uploads")
+MEDIA_ROOT = os.path.join(BASE_DIR, "uploads")  # noqa
 
 CORS_ALLOWED_ORIGINS = [
     "http://localhost:3000",
@@ -29,3 +36,38 @@
     "http://localhost:4000",
     "http://127.0.0.1:4000",
 ]
+
+LOG_DIR = os.path.join(BASE_DIR, "logs")  # noqa
+
+if not os.path.exists(LOG_DIR):
+    os.makedirs(LOG_DIR)
+
+LOGGING = {
+    "version": 1,
+    "disable_existing_loggers": False,
+    "formatters": {
+        "verbose": {
+            "format": "{levelname} {asctime} {module} {process:d} {thread:d} {message}",
+            "style": "{",
+        },
+    },
+    "handlers": {
+        "console": {
+            "level": "DEBUG",
+            "class": "logging.StreamHandler",
+            "formatter": "verbose",
+        },
+    },
+    "loggers": {
+        "django.request": {
+            "handlers": ["console"],
+            "level": "DEBUG",
+            "propagate": False,
+        },
+        "plane": {
+            "handlers": ["console"],
+            "level": "DEBUG",
+            "propagate": False,
+        },
+    },
+}
diff --git a/apiserver/plane/settings/production.py b/apiserver/plane/settings/production.py
index 90eb04dd59d..caf6804a303 100644
--- a/apiserver/plane/settings/production.py
+++ b/apiserver/plane/settings/production.py
@@ -1,13 +1,16 @@
 """Production settings"""
+
+import os
+
 from .common import *  # noqa
 
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = int(os.environ.get("DEBUG", 0)) == 1
-
+DEBUG = True
 # Honor the 'X-Forwarded-Proto' header for request.is_secure()
 SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
 
-INSTALLED_APPS += ("scout_apm.django",)
+INSTALLED_APPS += ("scout_apm.django",)  # noqa
 
 # Honor the 'X-Forwarded-Proto' header for request.is_secure()
 SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
@@ -16,3 +19,62 @@
 SCOUT_MONITOR = os.environ.get("SCOUT_MONITOR", False)
 SCOUT_KEY = os.environ.get("SCOUT_KEY", "")
 SCOUT_NAME = "Plane"
+
+LOG_DIR = os.path.join(BASE_DIR, "logs")  # noqa
+
+if not os.path.exists(LOG_DIR):
+    os.makedirs(LOG_DIR)
+
+
+LOGGING = {
+    "version": 1,
+    "disable_existing_loggers": False,
+    "formatters": {
+        "verbose": {
+            "format": "{levelname} {asctime} {module} {process:d} {thread:d} {message}",
+            "style": "{",
+        },
+        "json": {
+            "()": "pythonjsonlogger.jsonlogger.JsonFormatter",
+            "fmt": "%(levelname)s %(asctime)s %(module)s %(name)s %(message)s",
+        },
+    },
+    "handlers": {
+        "console": {
+            "class": "logging.StreamHandler",
+            "formatter": "verbose",
+            "level": "INFO",
+        },
+        "file": {
+            "class": "plane.utils.logging.SizedTimedRotatingFileHandler",
+            "filename": (
+                os.path.join(BASE_DIR, "logs", "plane-debug.log")  # noqa
+                if DEBUG
+                else os.path.join(BASE_DIR, "logs", "plane-error.log")  # noqa
+            ),
+            "when": "s",
+            "maxBytes": 1024 * 1024 * 1,
+            "interval": 1,
+            "backupCount": 5,
+            "formatter": "json",
+            "level": "DEBUG" if DEBUG else "ERROR",
+        },
+    },
+    "loggers": {
+        "django": {
+            "handlers": ["console", "file"],
+            "level": "INFO",
+            "propagate": True,
+        },
+        "django.request": {
+            "handlers": ["console", "file"],
+            "level": "INFO",
+            "propagate": False,
+        },
+        "plane": {
+            "level": "DEBUG" if DEBUG else "ERROR",
+            "handlers": ["console", "file"],
+            "propagate": False,
+        },
+    },
+}
diff --git a/apiserver/plane/settings/redis.py b/apiserver/plane/settings/redis.py
index 5b09a127719..628a3d8e63b 100644
--- a/apiserver/plane/settings/redis.py
+++ b/apiserver/plane/settings/redis.py
@@ -1,4 +1,3 @@
-import os
 import redis
 from django.conf import settings
 from urllib.parse import urlparse
diff --git a/apiserver/plane/settings/test.py b/apiserver/plane/settings/test.py
index 1e2a5514424..a86b044a359 100644
--- a/apiserver/plane/settings/test.py
+++ b/apiserver/plane/settings/test.py
@@ -1,4 +1,5 @@
 """Test Settings"""
+
 from .common import *  # noqa
 
 DEBUG = True
@@ -6,6 +7,6 @@
 # Send it in a dummy outbox
 EMAIL_BACKEND = "django.core.mail.backends.locmem.EmailBackend"
 
-INSTALLED_APPS.append(
+INSTALLED_APPS.append(  # noqa
     "plane.tests",
 )
diff --git a/apiserver/plane/space/views/base.py b/apiserver/plane/space/views/base.py
index b75f3dd1844..023f27bbc10 100644
--- a/apiserver/plane/space/views/base.py
+++ b/apiserver/plane/space/views/base.py
@@ -1,26 +1,25 @@
 # Python imports
 import zoneinfo
+from django.conf import settings
+from django.core.exceptions import ObjectDoesNotExist, ValidationError
+from django.db import IntegrityError
 
 # Django imports
 from django.urls import resolve
-from django.conf import settings
 from django.utils import timezone
-from django.db import IntegrityError
-from django.core.exceptions import ObjectDoesNotExist, ValidationError
+from django_filters.rest_framework import DjangoFilterBackend
 
 # 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
 from rest_framework.permissions import IsAuthenticated
-from sentry_sdk import capture_exception
-from django_filters.rest_framework import DjangoFilterBackend
+from rest_framework.response import Response
+from rest_framework.views import APIView
+from rest_framework.viewsets import ModelViewSet
 
 # Module imports
+from plane.utils.exception_logger import log_exception
 from plane.utils.paginator import BasePaginator
 
 
@@ -58,7 +57,7 @@ def get_queryset(self):
         try:
             return self.model.objects.all()
         except Exception as e:
-            capture_exception(e)
+            log_exception(e)
             raise APIException(
                 "Please check the view", status.HTTP_400_BAD_REQUEST
             )
@@ -85,23 +84,19 @@ def handle_exception(self, exc):
                 )
 
             if isinstance(e, ObjectDoesNotExist):
-                model_name = str(exc).split(" matching query does not exist.")[
-                    0
-                ]
                 return Response(
-                    {"error": f"The required object does not exist."},
+                    {"error": "The required object does not exist."},
                     status=status.HTTP_404_NOT_FOUND,
                 )
 
             if isinstance(e, KeyError):
-                capture_exception(e)
+                log_exception(e)
                 return Response(
                     {"error": "The required key does not exist."},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            print(e) if settings.DEBUG else print("Server Error")
-            capture_exception(e)
+            log_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_500_INTERNAL_SERVER_ERROR,
@@ -179,7 +174,7 @@ def handle_exception(self, exc):
 
             if isinstance(e, ObjectDoesNotExist):
                 return Response(
-                    {"error": f"The required object does not exist."},
+                    {"error": "The required object does not exist."},
                     status=status.HTTP_404_NOT_FOUND,
                 )
 
@@ -189,9 +184,7 @@ def handle_exception(self, exc):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            if settings.DEBUG:
-                print(e)
-            capture_exception(e)
+            log_exception(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_500_INTERNAL_SERVER_ERROR,
diff --git a/apiserver/plane/space/views/inbox.py b/apiserver/plane/space/views/inbox.py
index 2bf8f8303fa..9f681c16098 100644
--- a/apiserver/plane/space/views/inbox.py
+++ b/apiserver/plane/space/views/inbox.py
@@ -134,7 +134,7 @@ def create(self, request, slug, project_id, inbox_id):
             )
 
         # Check for valid priority
-        if not request.data.get("issue", {}).get("priority", "none") in [
+        if request.data.get("issue", {}).get("priority", "none") not in [
             "low",
             "medium",
             "high",
diff --git a/apiserver/plane/space/views/issue.py b/apiserver/plane/space/views/issue.py
index 8f7fc0eaa0a..8c4d6e1501f 100644
--- a/apiserver/plane/space/views/issue.py
+++ b/apiserver/plane/space/views/issue.py
@@ -9,7 +9,6 @@
     Func,
     F,
     Q,
-    Count,
     Case,
     Value,
     CharField,
@@ -514,9 +513,13 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
     ]
 
     def get(self, request, slug, project_id):
-        project_deploy_board = ProjectDeployBoard.objects.get(
+        if not ProjectDeployBoard.objects.filter(
             workspace__slug=slug, project_id=project_id
-        )
+        ).exists():
+            return Response(
+                {"error": "Project is not published"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
 
         filters = issue_filters(request.query_params, "GET")
 
diff --git a/apiserver/plane/space/views/project.py b/apiserver/plane/space/views/project.py
index 8cd3f55c5c3..10a3c387910 100644
--- a/apiserver/plane/space/views/project.py
+++ b/apiserver/plane/space/views/project.py
@@ -12,7 +12,6 @@
 # Module imports
 from .base import BaseAPIView
 from plane.app.serializers import ProjectDeployBoardSerializer
-from plane.app.permissions import ProjectMemberPermission
 from plane.db.models import (
     Project,
     ProjectDeployBoard,
diff --git a/apiserver/plane/urls.py b/apiserver/plane/urls.py
index 669f3ea73de..3b042ea1fa1 100644
--- a/apiserver/plane/urls.py
+++ b/apiserver/plane/urls.py
@@ -7,6 +7,7 @@
 
 from django.conf import settings
 
+handler404 = "plane.app.views.error_404.custom_404_view"
 
 urlpatterns = [
     path("", TemplateView.as_view(template_name="index.html")),
diff --git a/apiserver/plane/utils/cache.py b/apiserver/plane/utils/cache.py
new file mode 100644
index 00000000000..aece1d644fa
--- /dev/null
+++ b/apiserver/plane/utils/cache.py
@@ -0,0 +1,88 @@
+# Python imports
+from functools import wraps
+
+# Django imports
+from django.conf import settings
+from django.core.cache import cache
+
+# Third party imports
+from rest_framework.response import Response
+
+
+def generate_cache_key(custom_path, auth_header=None):
+    """Generate a cache key with the given params"""
+    if auth_header:
+        key_data = f"{custom_path}:{auth_header}"
+    else:
+        key_data = custom_path
+    return key_data
+
+
+def cache_response(timeout=60 * 60, path=None, user=True):
+    """decorator to create cache per user"""
+
+    def decorator(view_func):
+        @wraps(view_func)
+        def _wrapped_view(instance, request, *args, **kwargs):
+            # Function to generate cache key
+            auth_header = (
+                None
+                if request.user.is_anonymous
+                else str(request.user.id) if user else None
+            )
+            custom_path = path if path is not None else request.get_full_path()
+            key = generate_cache_key(custom_path, auth_header)
+            cached_result = cache.get(key)
+            if cached_result is not None:
+                return Response(
+                    cached_result["data"], status=cached_result["status"]
+                )
+            response = view_func(instance, request, *args, **kwargs)
+
+            if response.status_code == 200 and not settings.DEBUG:
+                cache.set(
+                    key,
+                    {"data": response.data, "status": response.status_code},
+                    timeout,
+                )
+
+            return response
+
+        return _wrapped_view
+
+    return decorator
+
+
+def invalidate_cache(path=None, url_params=False, user=True):
+    """invalidate cache per user"""
+
+    def decorator(view_func):
+        @wraps(view_func)
+        def _wrapped_view(instance, request, *args, **kwargs):
+            # Invalidate cache before executing the view function
+            if url_params:
+                path_with_values = path
+                for key, value in kwargs.items():
+                    path_with_values = path_with_values.replace(
+                        f":{key}", str(value)
+                    )
+
+                custom_path = path_with_values
+            else:
+                custom_path = (
+                    path if path is not None else request.get_full_path()
+                )
+
+            auth_header = (
+                None
+                if request.user.is_anonymous
+                else str(request.user.id) if user else None
+            )
+            key = generate_cache_key(custom_path, auth_header)
+            cache.delete(key)
+            # Execute the view function
+            return view_func(instance, request, *args, **kwargs)
+
+        return _wrapped_view
+
+    return decorator
diff --git a/apiserver/plane/utils/exception_logger.py b/apiserver/plane/utils/exception_logger.py
new file mode 100644
index 00000000000..f7bb50de236
--- /dev/null
+++ b/apiserver/plane/utils/exception_logger.py
@@ -0,0 +1,15 @@
+# Python imports
+import logging
+
+# Third party imports
+from sentry_sdk import capture_exception
+
+
+def log_exception(e):
+    # Log the error
+    logger = logging.getLogger("plane")
+    logger.error(e)
+
+    # Capture in sentry if configured
+    capture_exception(e)
+    return
diff --git a/apiserver/plane/utils/importers/__init__.py b/apiserver/plane/utils/importers/__init__.py
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/apiserver/plane/utils/importers/jira.py b/apiserver/plane/utils/importers/jira.py
deleted file mode 100644
index 6f3a7c21783..00000000000
--- a/apiserver/plane/utils/importers/jira.py
+++ /dev/null
@@ -1,117 +0,0 @@
-import requests
-import re
-from requests.auth import HTTPBasicAuth
-from sentry_sdk import capture_exception
-from urllib.parse import urlparse, urljoin
-
-
-def is_allowed_hostname(hostname):
-    allowed_domains = [
-        "atl-paas.net",
-        "atlassian.com",
-        "atlassian.net",
-        "jira.com",
-    ]
-    parsed_uri = urlparse(f"https://{hostname}")
-    domain = parsed_uri.netloc.split(":")[0]  # Ensures no port is included
-    base_domain = ".".join(domain.split(".")[-2:])
-    return base_domain in allowed_domains
-
-
-def is_valid_project_key(project_key):
-    if project_key:
-        project_key = project_key.strip().upper()
-        # Adjust the regular expression as needed based on your specific requirements.
-        if len(project_key) > 30:
-            return False
-        # Check the validity of the key as well
-        pattern = re.compile(r"^[A-Z0-9]{1,10}$")
-        return pattern.match(project_key) is not None
-    else:
-        False
-
-
-def generate_valid_project_key(project_key):
-    return project_key.strip().upper()
-
-
-def generate_url(hostname, path):
-    if not is_allowed_hostname(hostname):
-        raise ValueError("Invalid or unauthorized hostname")
-    return urljoin(f"https://{hostname}", path)
-
-
-def jira_project_issue_summary(email, api_token, project_key, hostname):
-    try:
-        if not is_allowed_hostname(hostname):
-            return {"error": "Invalid or unauthorized hostname"}
-
-        if not is_valid_project_key(project_key):
-            return {"error": "Invalid project key"}
-
-        auth = HTTPBasicAuth(email, api_token)
-        headers = {"Accept": "application/json"}
-
-        # make the project key upper case
-        project_key = generate_valid_project_key(project_key)
-
-        # issues
-        issue_url = generate_url(
-            hostname,
-            f"/rest/api/3/search?jql=project={project_key} AND issuetype!=Epic",
-        )
-        issue_response = requests.request(
-            "GET", issue_url, headers=headers, auth=auth
-        ).json()["total"]
-
-        # modules
-        module_url = generate_url(
-            hostname,
-            f"/rest/api/3/search?jql=project={project_key} AND issuetype=Epic",
-        )
-        module_response = requests.request(
-            "GET", module_url, headers=headers, auth=auth
-        ).json()["total"]
-
-        # status
-        status_url = generate_url(
-            hostname, f"/rest/api/3/project/${project_key}/statuses"
-        )
-        status_response = requests.request(
-            "GET", status_url, headers=headers, auth=auth
-        ).json()
-
-        # labels
-        labels_url = generate_url(
-            hostname, f"/rest/api/3/label/?jql=project={project_key}"
-        )
-        labels_response = requests.request(
-            "GET", labels_url, headers=headers, auth=auth
-        ).json()["total"]
-
-        # users
-        users_url = generate_url(
-            hostname, f"/rest/api/3/users/search?jql=project={project_key}"
-        )
-        users_response = requests.request(
-            "GET", users_url, headers=headers, auth=auth
-        ).json()
-
-        return {
-            "issues": issue_response,
-            "modules": module_response,
-            "labels": labels_response,
-            "states": len(status_response),
-            "users": (
-                [
-                    user
-                    for user in users_response
-                    if user.get("accountType") == "atlassian"
-                ]
-            ),
-        }
-    except Exception as e:
-        capture_exception(e)
-        return {
-            "error": "Something went wrong could not fetch information from jira"
-        }
diff --git a/apiserver/plane/utils/integrations/__init__.py b/apiserver/plane/utils/integrations/__init__.py
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/apiserver/plane/utils/integrations/github.py b/apiserver/plane/utils/integrations/github.py
deleted file mode 100644
index 5a7ce2aa29f..00000000000
--- a/apiserver/plane/utils/integrations/github.py
+++ /dev/null
@@ -1,154 +0,0 @@
-import os
-import jwt
-import requests
-from urllib.parse import urlparse, parse_qs
-from datetime import datetime, timedelta
-from cryptography.hazmat.primitives.serialization import load_pem_private_key
-from cryptography.hazmat.backends import default_backend
-from django.conf import settings
-
-
-def get_jwt_token():
-    app_id = os.environ.get("GITHUB_APP_ID", "")
-    secret = bytes(
-        os.environ.get("GITHUB_APP_PRIVATE_KEY", ""), encoding="utf8"
-    )
-    current_timestamp = int(datetime.now().timestamp())
-    due_date = datetime.now() + timedelta(minutes=10)
-    expiry = int(due_date.timestamp())
-    payload = {
-        "iss": app_id,
-        "sub": app_id,
-        "exp": expiry,
-        "iat": current_timestamp,
-        "aud": "https://github.com/login/oauth/access_token",
-    }
-
-    priv_rsakey = load_pem_private_key(secret, None, default_backend())
-    token = jwt.encode(payload, priv_rsakey, algorithm="RS256")
-    return token
-
-
-def get_github_metadata(installation_id):
-    token = get_jwt_token()
-
-    url = f"https://api.github.com/app/installations/{installation_id}"
-    headers = {
-        "Authorization": "Bearer " + str(token),
-        "Accept": "application/vnd.github+json",
-    }
-    response = requests.get(url, headers=headers).json()
-    return response
-
-
-def get_github_repos(access_tokens_url, repositories_url):
-    token = get_jwt_token()
-
-    headers = {
-        "Authorization": "Bearer " + str(token),
-        "Accept": "application/vnd.github+json",
-    }
-
-    oauth_response = requests.post(
-        access_tokens_url,
-        headers=headers,
-    ).json()
-
-    oauth_token = oauth_response.get("token", "")
-    headers = {
-        "Authorization": "Bearer " + str(oauth_token),
-        "Accept": "application/vnd.github+json",
-    }
-    response = requests.get(
-        repositories_url,
-        headers=headers,
-    ).json()
-    return response
-
-
-def delete_github_installation(installation_id):
-    token = get_jwt_token()
-
-    url = f"https://api.github.com/app/installations/{installation_id}"
-    headers = {
-        "Authorization": "Bearer " + str(token),
-        "Accept": "application/vnd.github+json",
-    }
-    response = requests.delete(url, headers=headers)
-    return response
-
-
-def get_github_repo_details(access_tokens_url, owner, repo):
-    token = get_jwt_token()
-
-    headers = {
-        "Authorization": "Bearer " + str(token),
-        "Accept": "application/vnd.github+json",
-        "X-GitHub-Api-Version": "2022-11-28",
-    }
-
-    oauth_response = requests.post(
-        access_tokens_url,
-        headers=headers,
-    ).json()
-
-    oauth_token = oauth_response.get("token")
-    headers = {
-        "Authorization": "Bearer " + oauth_token,
-        "Accept": "application/vnd.github+json",
-    }
-    open_issues = requests.get(
-        f"https://api.github.com/repos/{owner}/{repo}",
-        headers=headers,
-    ).json()["open_issues_count"]
-
-    total_labels = 0
-
-    labels_response = requests.get(
-        f"https://api.github.com/repos/{owner}/{repo}/labels?per_page=100&page=1",
-        headers=headers,
-    )
-
-    # Check if there are more pages
-    if len(labels_response.links.keys()):
-        # get the query parameter of last
-        last_url = labels_response.links.get("last").get("url")
-        parsed_url = urlparse(last_url)
-        last_page_value = parse_qs(parsed_url.query)["page"][0]
-        total_labels = total_labels + 100 * (int(last_page_value) - 1)
-
-        # Get labels in last page
-        last_page_labels = requests.get(last_url, headers=headers).json()
-        total_labels = total_labels + len(last_page_labels)
-    else:
-        total_labels = len(labels_response.json())
-
-    # Currently only supporting upto 100 collaborators
-    # TODO: Update this function to fetch all collaborators
-    collaborators = requests.get(
-        f"https://api.github.com/repos/{owner}/{repo}/collaborators?per_page=100&page=1",
-        headers=headers,
-    ).json()
-
-    return open_issues, total_labels, collaborators
-
-
-def get_release_notes():
-    token = settings.GITHUB_ACCESS_TOKEN
-
-    if token:
-        headers = {
-            "Authorization": "Bearer " + str(token),
-            "Accept": "application/vnd.github.v3+json",
-        }
-    else:
-        headers = {
-            "Accept": "application/vnd.github.v3+json",
-        }
-    url = "https://api.github.com/repos/makeplane/plane/releases?per_page=5&page=1"
-    response = requests.get(url, headers=headers)
-
-    if response.status_code != 200:
-        return {"error": "Unable to render information from Github Repository"}
-
-    return response.json()
diff --git a/apiserver/plane/utils/integrations/slack.py b/apiserver/plane/utils/integrations/slack.py
deleted file mode 100644
index 0cc5b93b27e..00000000000
--- a/apiserver/plane/utils/integrations/slack.py
+++ /dev/null
@@ -1,21 +0,0 @@
-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/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index 87284ff24e0..2c4cbd47174 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -463,7 +463,7 @@ def filter_start_target_date_issues(params, filter, method):
         filter["target_date__isnull"] = False
         filter["start_date__isnull"] = False
     return filter
-    
+
 
 def issue_filters(query_params, method):
     filter = {}
diff --git a/apiserver/plane/utils/issue_search.py b/apiserver/plane/utils/issue_search.py
index 3b6dea332ec..74d1e80194a 100644
--- a/apiserver/plane/utils/issue_search.py
+++ b/apiserver/plane/utils/issue_search.py
@@ -5,7 +5,6 @@
 from django.db.models import Q
 
 # Module imports
-from plane.db.models import Issue
 
 
 def search_issues(query, queryset):
diff --git a/apiserver/plane/utils/logging.py b/apiserver/plane/utils/logging.py
new file mode 100644
index 00000000000..8021689e993
--- /dev/null
+++ b/apiserver/plane/utils/logging.py
@@ -0,0 +1,46 @@
+import logging.handlers as handlers
+import time
+
+
+class SizedTimedRotatingFileHandler(handlers.TimedRotatingFileHandler):
+    """
+    Handler for logging to a set of files, which switches from one file
+    to the next when the current file reaches a certain size, or at certain
+    timed intervals
+    """
+
+    def __init__(
+        self,
+        filename,
+        maxBytes=0,
+        backupCount=0,
+        encoding=None,
+        delay=0,
+        when="h",
+        interval=1,
+        utc=False,
+    ):
+        handlers.TimedRotatingFileHandler.__init__(
+            self, filename, when, interval, backupCount, encoding, delay, utc
+        )
+        self.maxBytes = maxBytes
+
+    def shouldRollover(self, record):
+        """
+        Determine if rollover should occur.
+
+        Basically, see if the supplied record would cause the file to exceed
+        the size limit we have.
+        """
+        if self.stream is None:  # delay was set...
+            self.stream = self._open()
+        if self.maxBytes > 0:  # are we rolling over?
+            msg = "%s\n" % self.format(record)
+            # due to non-posix-compliant Windows feature
+            self.stream.seek(0, 2)
+            if self.stream.tell() + len(msg) >= self.maxBytes:
+                return 1
+        t = int(time.time())
+        if t >= self.rolloverAt:
+            return 1
+        return 0
diff --git a/apiserver/plane/utils/paginator.py b/apiserver/plane/utils/paginator.py
index 6b2b49c15f0..db0ede6ad76 100644
--- a/apiserver/plane/utils/paginator.py
+++ b/apiserver/plane/utils/paginator.py
@@ -193,7 +193,7 @@ def paginate(
             cursor_result = paginator.get_result(
                 limit=per_page, cursor=input_cursor
             )
-        except BadPaginationError as e:
+        except BadPaginationError:
             raise ParseError(detail="Error in parsing")
 
         # Serialize result according to the on_result function
diff --git a/apiserver/plane/web/views.py b/apiserver/plane/web/views.py
index 91ea44a218f..60f00ef0ef3 100644
--- a/apiserver/plane/web/views.py
+++ b/apiserver/plane/web/views.py
@@ -1,3 +1 @@
-from django.shortcuts import render
-
 # Create your views here.
diff --git a/apiserver/pyproject.toml b/apiserver/pyproject.toml
index 773d6090e47..a6c07b85563 100644
--- a/apiserver/pyproject.toml
+++ b/apiserver/pyproject.toml
@@ -16,3 +16,10 @@ exclude = '''
         | venv
     )/
 '''
+
+[tool.ruff]
+line-length = 79
+exclude = [
+    "**/__init__.py",
+]
+
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index eb0f542012b..2b7d383ba10 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -1,6 +1,6 @@
 # base requirements
 
-Django==4.2.10
+Django==4.2.11
 psycopg==3.1.12
 djangorestframework==3.14.0
 redis==4.6.0
@@ -27,6 +27,7 @@ psycopg-binary==3.1.12
 psycopg-c==3.1.12
 scout-apm==2.26.1
 openpyxl==3.1.2
+python-json-logger==2.0.7
 beautifulsoup4==4.12.2
 dj-database-url==2.1.0
 posthog==3.0.2
diff --git a/apiserver/templates/emails/invitations/project_invitation.html b/apiserver/templates/emails/invitations/project_invitation.html
index 630a5eab3b0..def576601a9 100644
--- a/apiserver/templates/emails/invitations/project_invitation.html
+++ b/apiserver/templates/emails/invitations/project_invitation.html
@@ -1,349 +1,1815 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-   <head>
-      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-      <meta http-equiv="X-UA-Compatible" content="IE=edge">
-      <meta name="format-detection" content="telephone=no">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>{{ first_name }} invited you to join {{ project_name }} on Plane</title>
-      <style type="text/css" emogrify="no">#outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide:all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
-      <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} } </style>
-      <style type="text/css" emogrify="no">@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 320px !important } .r1-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r2-i { background-color: #ffffff !important } .r3-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r4-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-top: 20px !important; width: 100% !important } .r5-i { background-color: #f8f9fa !important; padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important } .r6-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r7-o { border-style: solid !important; width: 100% !important } .r8-i { padding-left: 0px !important; padding-right: 0px !important } .r9-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r10-i { padding-bottom: 35px !important; padding-top: 15px !important } .r11-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r12-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r13-i { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0px !important; text-align: center !important } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 20px !important; margin-top: 20px !important; width: 100% !important } .r15-i { text-align: center !important } .r16-r { background-color: #ffffff !important; border-color: #3f76ff !important; border-radius: 4px !important; border-width: 1px !important; box-sizing: border-box; height: initial !important; padding-bottom: 7px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 7px !important; text-align: center !important; width: 100% !important } .r17-i { padding-bottom: 15px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 15px !important; text-align: left !important } .r18-i { background-color: #eff2f7 !important; padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important } .r19-i { padding-bottom: 15px !important; padding-top: 15px !important } .r20-i { color: #3b3f44 !important; padding-bottom: 0px !important; padding-top: 0px !important; text-align: center !important } .r21-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important } .r22-c { box-sizing: border-box !important; width: 100% !important } .r23-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important } .r24-c { box-sizing: border-box !important; width: 32px !important } .r25-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important } .r26-i { padding-bottom: 5px !important; padding-top: 5px !important } .r27-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important } .r28-i { color: #3b3f44 !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: center !important } .r29-i { padding-bottom: 15px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important } .r30-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 129px !important } .r31-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 129px !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } } </style>
-      <!--[if !mso]><!-->
-      <style type="text/css" emogrify="no">@import url("https://fonts.googleapis.com/css2?family=Bitter&family=Roboto"); </style>
-      <!--<![endif]-->
-      <style type="text/css">p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #0092ff; text-decoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5 } .default-button { border-radius: 4px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; width: 50% } .default-heading1 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px } .default-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 32px } .default-heading3 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 24px } .default-heading4 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 18px } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
-      <!--[if mso]>
+<html
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      {{ first_name }} invited you to join {{ project_name }} on Plane
+    </title>
+    <style type="text/css" emogrify="no">
+      #outlook a {
+        padding: 0;
+      }
+      .ExternalClass {
+        width: 100%;
+      }
+      .ExternalClass,
+      .ExternalClass p,
+      .ExternalClass span,
+      .ExternalClass font,
+      .ExternalClass td,
+      .ExternalClass div {
+        line-height: 100%;
+      }
+      table td {
+        border-collapse: collapse;
+        mso-line-height-rule: exactly;
+      }
+      .editable.image {
+        font-size: 0 !important;
+        line-height: 0 !important;
+      }
+      .nl2go_preheader {
+        display: none !important;
+        mso-hide: all !important;
+        mso-line-height-rule: exactly;
+        visibility: hidden !important;
+        line-height: 0px !important;
+        font-size: 0px !important;
+      }
+      body {
+        width: 100% !important;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      img {
+        outline: none;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+      a img {
+        border: none;
+      }
+      table {
+        border-collapse: collapse;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+      th {
+        font-weight: normal;
+        text-align: left;
+      }
+      *[class="gmail-fix"] {
+        display: none !important;
+      }
+    </style>
+    <style type="text/css" emogrify="no">
+      @media (max-width: 600px) {
+        .gmx-killpill {
+          content: " \03D1";
+        }
+      }
+    </style>
+    <style type="text/css" emogrify="no">
+      @media (max-width: 600px) {
+        .gmx-killpill {
+          content: " \03D1";
+        }
+        .r0-c {
+          box-sizing: border-box !important;
+          text-align: center !important;
+          valign: top !important;
+          width: 320px !important;
+        }
+        .r1-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          width: 320px !important;
+        }
+        .r2-i {
+          background-color: #ffffff !important;
+        }
+        .r3-c {
+          box-sizing: border-box !important;
+          text-align: center !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r4-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          margin-top: 20px !important;
+          width: 100% !important;
+        }
+        .r5-i {
+          background-color: #f8f9fa !important;
+          padding-bottom: 20px !important;
+          padding-left: 10px !important;
+          padding-right: 10px !important;
+          padding-top: 20px !important;
+        }
+        .r6-c {
+          box-sizing: border-box !important;
+          display: block !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r7-o {
+          border-style: solid !important;
+          width: 100% !important;
+        }
+        .r8-i {
+          padding-left: 0px !important;
+          padding-right: 0px !important;
+        }
+        .r9-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          width: 100% !important;
+        }
+        .r10-i {
+          padding-bottom: 35px !important;
+          padding-top: 15px !important;
+        }
+        .r11-c {
+          box-sizing: border-box !important;
+          text-align: left !important;
+          valign: top !important;
+          width: 100% !important;
+        }
+        .r12-o {
+          border-style: solid !important;
+          margin: 0 auto 0 0 !important;
+          width: 100% !important;
+        }
+        .r13-i {
+          padding-left: 20px !important;
+          padding-right: 20px !important;
+          padding-top: 0px !important;
+          text-align: center !important;
+        }
+        .r14-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          margin-bottom: 20px !important;
+          margin-top: 20px !important;
+          width: 100% !important;
+        }
+        .r15-i {
+          text-align: center !important;
+        }
+        .r16-r {
+          background-color: #ffffff !important;
+          border-color: #3f76ff !important;
+          border-radius: 4px !important;
+          border-width: 1px !important;
+          box-sizing: border-box;
+          height: initial !important;
+          padding-bottom: 7px !important;
+          padding-left: 20px !important;
+          padding-right: 20px !important;
+          padding-top: 7px !important;
+          text-align: center !important;
+          width: 100% !important;
+        }
+        .r17-i {
+          padding-bottom: 15px !important;
+          padding-left: 20px !important;
+          padding-right: 20px !important;
+          padding-top: 15px !important;
+          text-align: left !important;
+        }
+        .r18-i {
+          background-color: #eff2f7 !important;
+          padding-bottom: 20px !important;
+          padding-left: 15px !important;
+          padding-right: 15px !important;
+          padding-top: 20px !important;
+        }
+        .r19-i {
+          padding-bottom: 15px !important;
+          padding-top: 15px !important;
+        }
+        .r20-i {
+          color: #3b3f44 !important;
+          padding-bottom: 0px !important;
+          padding-top: 0px !important;
+          text-align: center !important;
+        }
+        .r21-c {
+          box-sizing: border-box !important;
+          text-align: center !important;
+          width: 100% !important;
+        }
+        .r22-c {
+          box-sizing: border-box !important;
+          width: 100% !important;
+        }
+        .r23-i {
+          font-size: 0px !important;
+          padding-bottom: 15px !important;
+          padding-left: 65px !important;
+          padding-right: 65px !important;
+          padding-top: 15px !important;
+        }
+        .r24-c {
+          box-sizing: border-box !important;
+          width: 32px !important;
+        }
+        .r25-o {
+          border-style: solid !important;
+          margin-right: 8px !important;
+          width: 32px !important;
+        }
+        .r26-i {
+          padding-bottom: 5px !important;
+          padding-top: 5px !important;
+        }
+        .r27-o {
+          border-style: solid !important;
+          margin-right: 0px !important;
+          width: 32px !important;
+        }
+        .r28-i {
+          color: #3b3f44 !important;
+          padding-bottom: 15px !important;
+          padding-top: 15px !important;
+          text-align: center !important;
+        }
+        .r29-i {
+          padding-bottom: 15px !important;
+          padding-left: 0px !important;
+          padding-right: 0px !important;
+          padding-top: 0px !important;
+        }
+        .r30-c {
+          box-sizing: border-box !important;
+          text-align: center !important;
+          valign: top !important;
+          width: 129px !important;
+        }
+        .r31-o {
+          border-style: solid !important;
+          margin: 0 auto 0 auto !important;
+          width: 129px !important;
+        }
+        body {
+          -webkit-text-size-adjust: none;
+        }
+        .nl2go-responsive-hide {
+          display: none;
+        }
+        .nl2go-body-table {
+          min-width: unset !important;
+        }
+        .mobshow {
+          height: auto !important;
+          overflow: visible !important;
+          max-height: unset !important;
+          visibility: visible !important;
+          border: none !important;
+        }
+        .resp-table {
+          display: inline-table !important;
+        }
+        .magic-resp {
+          display: table-cell !important;
+        }
+      }
+    </style>
+    <!--[if !mso]><!-->
+    <style type="text/css" emogrify="no">
+      @import url("https://fonts.googleapis.com/css2?family=Bitter&family=Roboto");
+    </style>
+    <!--<![endif]-->
+    <style type="text/css">
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      ol,
+      ul {
+        margin: 0;
+      }
+      a,
+      a:link {
+        color: #0092ff;
+        text-decoration: underline;
+      }
+      .nl2go-default-textstyle {
+        color: #3b3f44;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 16px;
+        line-height: 1.5;
+      }
+      .default-button {
+        border-radius: 4px;
+        color: #ffffff;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: bold;
+        line-height: 1.15;
+        text-decoration: none;
+        width: 50%;
+      }
+      .default-heading1 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 36px;
+      }
+      .default-heading2 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 32px;
+      }
+      .default-heading3 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 24px;
+      }
+      .default-heading4 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 18px;
+      }
+      a[x-apple-data-detectors] {
+        color: inherit !important;
+        text-decoration: inherit !important;
+        font-size: inherit !important;
+        font-family: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+      }
+      .no-show-for-you {
+        border: none;
+        display: none;
+        float: none;
+        font-size: 0;
+        height: 0;
+        line-height: 0;
+        max-height: 0;
+        mso-hide: all;
+        overflow: hidden;
+        table-layout: fixed;
+        visibility: hidden;
+        width: 0;
+      }
+    </style>
+    <!--[if mso]>
       <xml>
-         <o:OfficeDocumentSettings>
-            <o:AllowPNG/>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-         </o:OfficeDocumentSettings>
+        <o:OfficeDocumentSettings>
+          <o:AllowPNG />
+          <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
       </xml>
-      <![endif]-->
-      <style type="text/css">a:link{color: #0092ff; text-decoration: underline;}</style>
-   </head>
-   <body bgcolor="#ffffff" text="#3b3f44" link="#0092ff" yahoo="fix" style="background-color: #ffffff; padding-bottom: 0px; padding-top: 0px;">
-      <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%;">
-         <tr>
-            <td align="center" class="r0-c">
-               <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="600" class="r1-o" style="table-layout: fixed; width: 600px;">
+    <![endif]-->
+    <style type="text/css">
+      a:link {
+        color: #0092ff;
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body
+    bgcolor="#ffffff"
+    text="#3b3f44"
+    link="#0092ff"
+    yahoo="fix"
+    style="background-color: #ffffff; padding-bottom: 0px; padding-top: 0px"
+  >
+    <table
+      cellspacing="0"
+      cellpadding="0"
+      border="0"
+      role="presentation"
+      class="nl2go-body-table"
+      width="100%"
+      style="background-color: #ffffff; width: 100%"
+    >
+      <tr>
+        <td align="center" class="r0-c">
+          <table
+            cellspacing="0"
+            cellpadding="0"
+            border="0"
+            role="presentation"
+            width="600"
+            class="r1-o"
+            style="table-layout: fixed; width: 600px"
+          >
+            <tr>
+              <td valign="top" class="r2-i" style="background-color: #ffffff">
+                <table
+                  width="100%"
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                >
                   <tr>
-                     <td valign="top" class="r2-i" style="background-color: #ffffff;">
-                        <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                           <tr>
-                              <td class="r3-c" align="center">
-                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r4-o" style="table-layout: fixed; width: 100%;">
+                    <td class="r3-c" align="center">
+                      <table
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                        width="100%"
+                        class="r4-o"
+                        style="table-layout: fixed; width: 100%"
+                      >
+                        <!-- -->
+                        <tr class="nl2go-responsive-hide">
+                          <td
+                            height="20"
+                            style="font-size: 20px; line-height: 20px"
+                          >
+                            ­
+                          </td>
+                        </tr>
+                        <tr class="nl2go-responsive-hide">
+                          <td
+                            height="20"
+                            style="
+                              font-size: 20px;
+                              line-height: 20px;
+                              background-color: #f8f9fa;
+                            "
+                          >
+                            ­
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="r5-i" style="background-color: #f8f9fa">
+                            <table
+                              width="100%"
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                            >
+                              <tr>
+                                <th
+                                  width="100%"
+                                  valign="top"
+                                  class="r6-c"
+                                  style="font-weight: normal"
+                                >
+                                  <table
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                    width="100%"
+                                    class="r7-o"
+                                    style="table-layout: fixed; width: 100%"
+                                  >
                                     <!-- -->
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px;">­</td>
-                                    </tr>
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #f8f9fa;">­</td>
+                                    <tr>
+                                      <td valign="top" class="r8-i">
+                                        <table
+                                          width="100%"
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                        >
+                                          <tr>
+                                            <td class="r3-c" align="center">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="120"
+                                                class="r9-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 120px;
+                                                "
+                                              >
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="r10-i"
+                                                    style="
+                                                      font-size: 0px;
+                                                      line-height: 0px;
+                                                    "
+                                                  >
+                                                    <img
+                                                      src="https://ik.imagekit.io/w2okwbtu2/Plane_Logo_pIhtbyIoa.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670873447444"
+                                                      width="120"
+                                                      border="0"
+                                                      class=""
+                                                      style="
+                                                        display: block;
+                                                        width: 100%;
+                                                      "
+                                                    />
+                                                  </td>
+                                                </tr>
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="35"
+                                                    style="
+                                                      font-size: 35px;
+                                                      line-height: 35px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class="r11-c" align="left">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="100%"
+                                                class="r12-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 100%;
+                                                "
+                                              >
+                                                <tr>
+                                                  <td
+                                                    class="nl2go-responsive-hide"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 0px;
+                                                      line-height: 1px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                  <td
+                                                    align="center"
+                                                    valign="top"
+                                                    class="r13-i nl2go-default-textstyle"
+                                                    style="
+                                                      color: #3b3f44;
+                                                      font-family: arial,
+                                                        helvetica, sans-serif;
+                                                      font-size: 16px;
+                                                      line-height: 1.5;
+                                                      text-align: center;
+                                                    "
+                                                  >
+                                                    <div>
+                                                      <p style="margin: 0">
+                                                        <span
+                                                          style="
+                                                            font-size: 26px;
+                                                          "
+                                                          ><strong
+                                                            >{{first_name}}</strong
+                                                          >
+                                                          has invited you to
+                                                          join the
+                                                        </span>
+                                                      </p>
+                                                      <p style="margin: 0">
+                                                        <span
+                                                          style="
+                                                            font-size: 26px;
+                                                          "
+                                                          ><strong
+                                                            >{{project_name}}</strong
+                                                          >
+                                                          project on Plane</span
+                                                        >
+                                                      </p>
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="nl2go-responsive-hide"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 0px;
+                                                      line-height: 1px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class="r3-c" align="center">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="300"
+                                                class="r14-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 300px;
+                                                "
+                                              >
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="20"
+                                                    style="
+                                                      font-size: 20px;
+                                                      line-height: 20px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    height="18"
+                                                    align="center"
+                                                    valign="top"
+                                                    class="r15-i nl2go-default-textstyle"
+                                                    style="
+                                                      color: #3b3f44;
+                                                      font-family: arial,
+                                                        helvetica, sans-serif;
+                                                      font-size: 16px;
+                                                      line-height: 1.5;
+                                                    "
+                                                  >
+                                                    <!--[if mso]>
+                                                      <v:roundrect
+                                                        xmlns:v="urn:schemas-microsoft-com:vml"
+                                                        xmlns:w="urn:schemas-microsoft-com:office:word"
+                                                        href="{{invitation_url}}"
+                                                        style="
+                                                          v-text-anchor: middle;
+                                                          height: 33px;
+                                                          width: 301px;
+                                                        "
+                                                        arcsize="12%"
+                                                        fillcolor="#ffffff"
+                                                        strokecolor="#3f76ff"
+                                                        strokeweight="1px"
+                                                        data-btn="1"
+                                                      >
+                                                        <w:anchorlock />
+                                                        <div
+                                                          style="display: none"
+                                                        >
+                                                          <center
+                                                            class="default-button"
+                                                          >
+                                                            <p>
+                                                              <span
+                                                                style="
+                                                                  color: #3f76ff;
+                                                                "
+                                                                >Accept the
+                                                                invite</span
+                                                              >
+                                                            </p>
+                                                          </center>
+                                                        </div>
+                                                      </v:roundrect>
+                                                    <![endif]-->
+                                                    <!--[if !mso]><!-- -->
+                                                    <a
+                                                      href="{{invitation_url}}"
+                                                      class="r16-r default-button"
+                                                      target="_blank"
+                                                      rel="noopener noreferrer"
+                                                      data-btn="1"
+                                                      style="
+                                                        font-style: normal;
+                                                        font-weight: bold;
+                                                        line-height: 1.15;
+                                                        text-decoration: none;
+                                                        border-style: solid;
+                                                        word-wrap: break-word;
+                                                        display: inline-block;
+                                                        -webkit-text-size-adjust: none;
+                                                        mso-hide: all;
+                                                        background-color: #ffffff;
+                                                        border-color: #3f76ff;
+                                                        border-radius: 4px;
+                                                        border-width: 1px;
+                                                        color: #ffffff;
+                                                        font-family: arial,
+                                                          helvetica, sans-serif;
+                                                        font-size: 16px;
+                                                        height: 18px;
+                                                        padding-bottom: 7px;
+                                                        padding-left: 20px;
+                                                        padding-right: 20px;
+                                                        padding-top: 7px;
+                                                        width: 258px;
+                                                      "
+                                                    >
+                                                      <p style="margin: 0">
+                                                        <span
+                                                          style="color: #3f76ff"
+                                                          >Accept the
+                                                          invite</span
+                                                        >
+                                                      </p>
+                                                    </a>
+                                                    <!--<![endif]-->
+                                                  </td>
+                                                </tr>
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="20"
+                                                    style="
+                                                      font-size: 20px;
+                                                      line-height: 20px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class="r11-c" align="left">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="100%"
+                                                class="r12-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 100%;
+                                                "
+                                              >
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                  <td
+                                                    height="15"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="nl2go-responsive-hide"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 0px;
+                                                      line-height: 1px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                  <td
+                                                    align="left"
+                                                    valign="top"
+                                                    class="r17-i nl2go-default-textstyle"
+                                                    style="
+                                                      color: #3b3f44;
+                                                      font-family: arial,
+                                                        helvetica, sans-serif;
+                                                      font-size: 16px;
+                                                      line-height: 1.5;
+                                                      text-align: left;
+                                                    "
+                                                  >
+                                                    <div>
+                                                      <p style="margin: 0">
+                                                        <span
+                                                          style="
+                                                            font-size: 12px;
+                                                          "
+                                                          >Note: 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 </span
+                                                        ><a
+                                                          href="https://discord.gg/A92xrEGCge"
+                                                          target="_blank"
+                                                          style="
+                                                            color: #0092ff;
+                                                            text-decoration: underline;
+                                                          "
+                                                          ><span
+                                                            style="
+                                                              font-size: 12px;
+                                                            "
+                                                            >Discord</span
+                                                          ></a
+                                                        ><span
+                                                          style="
+                                                            font-size: 12px;
+                                                          "
+                                                        >
+                                                          or </span
+                                                        ><a
+                                                          href="https://github.com/makeplane/plane"
+                                                          target="_blank"
+                                                          style="
+                                                            color: #0092ff;
+                                                            text-decoration: underline;
+                                                          "
+                                                          ><span
+                                                            style="
+                                                              font-size: 12px;
+                                                            "
+                                                            >GitHub</span
+                                                          ></a
+                                                        ><span
+                                                          style="
+                                                            font-size: 12px;
+                                                          "
+                                                          >, and we will use
+                                                          your feedback to
+                                                          improve on our
+                                                          upcoming
+                                                          releases.</span
+                                                        >
+                                                      </p>
+                                                    </div>
+                                                  </td>
+                                                  <td
+                                                    class="nl2go-responsive-hide"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 0px;
+                                                      line-height: 1px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                  <td
+                                                    height="15"
+                                                    width="20"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
                                     </tr>
+                                  </table>
+                                </th>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                        <tr class="nl2go-responsive-hide">
+                          <td
+                            height="20"
+                            style="
+                              font-size: 20px;
+                              line-height: 20px;
+                              background-color: #f8f9fa;
+                            "
+                          >
+                            ­
+                          </td>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="r3-c" align="center">
+                      <table
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                        width="100%"
+                        class="r9-o"
+                        style="table-layout: fixed; width: 100%"
+                      >
+                        <!-- -->
+                        <tr class="nl2go-responsive-hide">
+                          <td
+                            height="20"
+                            style="
+                              font-size: 20px;
+                              line-height: 20px;
+                              background-color: #eff2f7;
+                            "
+                          >
+                            ­
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="r18-i" style="background-color: #eff2f7">
+                            <table
+                              width="100%"
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                            >
+                              <tr>
+                                <th
+                                  width="100%"
+                                  valign="top"
+                                  class="r6-c"
+                                  style="font-weight: normal"
+                                >
+                                  <table
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                    width="100%"
+                                    class="r7-o"
+                                    style="table-layout: fixed; width: 100%"
+                                  >
+                                    <!-- -->
                                     <tr>
-                                       <td class="r5-i" style="background-color: #f8f9fa;">
-                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                             <tr>
-                                                <th width="100%" valign="top" class="r6-c" style="font-weight: normal;">
-                                                   <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r7-o" style="table-layout: fixed; width: 100%;">
-                                                      <!-- -->
+                                      <td
+                                        class="nl2go-responsive-hide"
+                                        width="15"
+                                        style="font-size: 0px; line-height: 1px"
+                                      >
+                                        ­
+                                      </td>
+                                      <td valign="top" class="r8-i">
+                                        <table
+                                          width="100%"
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                        >
+                                          <tr>
+                                            <td class="r3-c" align="center">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="57"
+                                                class="r9-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 57px;
+                                                "
+                                              >
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    class="r19-i"
+                                                    style="
+                                                      font-size: 0px;
+                                                      line-height: 0px;
+                                                    "
+                                                  >
+                                                    <img
+                                                      src="https://ik.imagekit.io/w2okwbtu2/115727700_n9t8rrnwT.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670872429989"
+                                                      width="57"
+                                                      border="0"
+                                                      class=""
+                                                      style="
+                                                        display: block;
+                                                        width: 100%;
+                                                      "
+                                                    />
+                                                  </td>
+                                                </tr>
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class="r11-c" align="left">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="100%"
+                                                class="r12-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 100%;
+                                                "
+                                              >
+                                                <tr>
+                                                  <td
+                                                    align="center"
+                                                    valign="top"
+                                                    class="r20-i nl2go-default-textstyle"
+                                                    style="
+                                                      font-family: arial,
+                                                        helvetica, sans-serif;
+                                                      color: #3b3f44;
+                                                      font-size: 18px;
+                                                      line-height: 1.5;
+                                                      text-align: center;
+                                                    "
+                                                  >
+                                                    <div>
+                                                      <p
+                                                        style="
+                                                          margin: 0;
+                                                          font-size: 14px;
+                                                        "
+                                                      >
+                                                        Proudly made on
+                                                        <strong
+                                                          >Planet Earth
+                                                          🌍</strong
+                                                        >.
+                                                      </p>
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class="r21-c" align="center">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="570"
+                                                class="r9-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 570px;
+                                                "
+                                              >
+                                                <!-- -->
+                                                <tr>
+                                                  <td valign="top" class="">
+                                                    <table
+                                                      width="100%"
+                                                      cellspacing="0"
+                                                      cellpadding="0"
+                                                      border="0"
+                                                      role="presentation"
+                                                    >
                                                       <tr>
-                                                         <td valign="top" class="r8-i">
-                                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="120" class="r9-o" style="table-layout: fixed; width: 120px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                        </tr>
-                                                                        <tr>
-                                                                           <td class="r10-i" style="font-size: 0px; line-height: 0px;"> <img src="https://ik.imagekit.io/w2okwbtu2/Plane_Logo_pIhtbyIoa.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670873447444" width="120" border="0" class="" style="display: block; width: 100%;"></td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="35" style="font-size: 35px; line-height: 35px;">­</td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r11-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r12-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="center" valign="top" class="r13-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: center;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;"><span style="font-size: 26px;"><strong>{{first_name}}</strong> has invited you to join the </span></p>
-                                                                                 <p style="margin: 0;"><span style="font-size: 26px;"><strong>{{project_name}}</strong> project on Plane</span></p>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="300" class="r14-o" style="table-layout: fixed; width: 300px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="20" style="font-size: 20px; line-height: 20px;">­</td>
+                                                        <td
+                                                          class="r22-c"
+                                                          style="
+                                                            display: inline-block;
+                                                          "
+                                                        >
+                                                          <table
+                                                            cellspacing="0"
+                                                            cellpadding="0"
+                                                            border="0"
+                                                            role="presentation"
+                                                            width="570"
+                                                            class="r7-o"
+                                                            style="
+                                                              table-layout: fixed;
+                                                              width: 570px;
+                                                            "
+                                                          >
+                                                            <!-- -->
+                                                            <tr
+                                                              class="nl2go-responsive-hide"
+                                                            >
+                                                              <td
+                                                                height="15"
+                                                                width="209"
+                                                                style="
+                                                                  font-size: 15px;
+                                                                  line-height: 15px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                              <td
+                                                                height="15"
+                                                                style="
+                                                                  font-size: 15px;
+                                                                  line-height: 15px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                              <td
+                                                                height="15"
+                                                                width="209"
+                                                                style="
+                                                                  font-size: 15px;
+                                                                  line-height: 15px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                            </tr>
+                                                            <tr>
+                                                              <td
+                                                                class="nl2go-responsive-hide"
+                                                                width="209"
+                                                                style="
+                                                                  font-size: 0px;
+                                                                  line-height: 1px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                              <td class="r23-i">
+                                                                <table
+                                                                  width="100%"
+                                                                  cellspacing="0"
+                                                                  cellpadding="0"
+                                                                  border="0"
+                                                                  role="presentation"
+                                                                >
+                                                                  <tr>
+                                                                    <th
+                                                                      width="40"
+                                                                      valign=""
+                                                                      class="r24-c mobshow resp-table"
+                                                                      style="
+                                                                        font-weight: normal;
+                                                                      "
+                                                                    >
+                                                                      <table
+                                                                        cellspacing="0"
+                                                                        cellpadding="0"
+                                                                        border="0"
+                                                                        role="presentation"
+                                                                        width="100%"
+                                                                        class="r25-o"
+                                                                        style="
+                                                                          table-layout: fixed;
+                                                                          width: 100%;
+                                                                        "
+                                                                      >
+                                                                        <!-- -->
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
+                                                                          <td
+                                                                            height="5"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
                                                                         <tr>
-                                                                           <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5;">
-                                                                              <!--[if mso]>
-                                                                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href={{invitation_url}} style="v-text-anchor:middle; height: 33px; width: 301px;" arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1">
-                                                                                 <w:anchorlock/>
-                                                                                 <div style="display:none;">
-                                                                                    <center class="default-button">
-                                                                                       <p><span style="color:#3F76FF;">Accept the invite</span></p>
-                                                                                    </center>
-                                                                                 </div>
-                                                                              </v:roundrect>
-                                                                              <![endif]-->  <!--[if !mso]><!-- -->
-                                                                              <a href={{invitation_url}} class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #3f76ff; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; padding-top: 7px; width: 258px;">
-                                                                                 <p style="margin: 0;"><span style="color: #3F76FF;">Accept the invite</span></p>
-                                                                              </a>
-                                                                              <!--<![endif]-->
-                                                                           </td>
+                                                                          <td
+                                                                            class="r26-i"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 0px;
+                                                                            "
+                                                                          >
+                                                                            <a
+                                                                              href="https://github.com/makeplane/plane"
+                                                                              target="_blank"
+                                                                              style="
+                                                                                color: #0092ff;
+                                                                                text-decoration: underline;
+                                                                              "
+                                                                            >
+                                                                              <img
+                                                                                src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/github_32px.png"
+                                                                                width="32"
+                                                                                border="0"
+                                                                                class=""
+                                                                                style="
+                                                                                  display: block;
+                                                                                  width: 100%;
+                                                                                "
+                                                                            /></a>
+                                                                          </td>
+                                                                          <td
+                                                                            class="nl2go-responsive-hide"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 1px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="20" style="font-size: 20px; line-height: 20px;">­</td>
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
+                                                                          <td
+                                                                            height="5"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r11-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r12-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
+                                                                      </table>
+                                                                    </th>
+                                                                    <th
+                                                                      width="40"
+                                                                      valign=""
+                                                                      class="r24-c mobshow resp-table"
+                                                                      style="
+                                                                        font-weight: normal;
+                                                                      "
+                                                                    >
+                                                                      <table
+                                                                        cellspacing="0"
+                                                                        cellpadding="0"
+                                                                        border="0"
+                                                                        role="presentation"
+                                                                        width="100%"
+                                                                        class="r25-o"
+                                                                        style="
+                                                                          table-layout: fixed;
+                                                                          width: 100%;
+                                                                        "
+                                                                      >
+                                                                        <!-- -->
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
+                                                                          <td
+                                                                            height="5"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
                                                                         <tr>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                           <td align="left" valign="top" class="r17-i nl2go-default-textstyle" style="color: #3b3f44; font-family: arial,helvetica,sans-serif; font-size: 16px; line-height: 1.5; text-align: left;">
-                                                                              <div>
-                                                                                 <p style="margin: 0;"><span style="font-size: 12px;">Note: 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 </span><a href="https://discord.gg/A92xrEGCge" target="_blank" style="color: #0092ff; text-decoration: underline;"><span style="font-size: 12px;">Discord</span></a><span style="font-size: 12px;"> or </span><a href="https://github.com/makeplane/plane" target="_blank" style="color: #0092ff; text-decoration: underline;"><span style="font-size: 12px;">GitHub</span></a><span style="font-size: 12px;">, and we will use your feedback to improve on our upcoming releases.</span></p>
-                                                                              </div>
-                                                                           </td>
-                                                                           <td class="nl2go-responsive-hide" width="20" style="font-size: 0px; line-height: 1px;">­ </td>
+                                                                          <td
+                                                                            class="r26-i"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 0px;
+                                                                            "
+                                                                          >
+                                                                            <a
+                                                                              href="https://discord.gg/A92xrEGCge"
+                                                                              target="_blank"
+                                                                              style="
+                                                                                color: #0092ff;
+                                                                                text-decoration: underline;
+                                                                              "
+                                                                            >
+                                                                              <img
+                                                                                src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/discord_32px.png"
+                                                                                width="32"
+                                                                                border="0"
+                                                                                class=""
+                                                                                style="
+                                                                                  display: block;
+                                                                                  width: 100%;
+                                                                                "
+                                                                            /></a>
+                                                                          </td>
+                                                                          <td
+                                                                            class="nl2go-responsive-hide"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 1px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                           <td height="15" width="20" style="font-size: 15px; line-height: 15px;">­ </td>
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
+                                                                          <td
+                                                                            height="5"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                            </table>
-                                                         </td>
-                                                      </tr>
-                                                   </table>
-                                                </th>
-                                             </tr>
-                                          </table>
-                                       </td>
-                                    </tr>
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #f8f9fa;">­</td>
-                                    </tr>
-                                 </table>
-                              </td>
-                           </tr>
-                           <tr>
-                              <td class="r3-c" align="center">
-                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r9-o" style="table-layout: fixed; width: 100%;">
-                                    <!-- -->
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #eff2f7;">­</td>
-                                    </tr>
-                                    <tr>
-                                       <td class="r18-i" style="background-color: #eff2f7;">
-                                          <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                             <tr>
-                                                <th width="100%" valign="top" class="r6-c" style="font-weight: normal;">
-                                                   <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r7-o" style="table-layout: fixed; width: 100%;">
-                                                      <!-- -->
-                                                      <tr>
-                                                         <td class="nl2go-responsive-hide" width="15" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                         <td valign="top" class="r8-i">
-                                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                               <tr>
-                                                                  <td class="r3-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="57" class="r9-o" style="table-layout: fixed; width: 57px;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
+                                                                      </table>
+                                                                    </th>
+                                                                    <th
+                                                                      width="40"
+                                                                      valign=""
+                                                                      class="r24-c mobshow resp-table"
+                                                                      style="
+                                                                        font-weight: normal;
+                                                                      "
+                                                                    >
+                                                                      <table
+                                                                        cellspacing="0"
+                                                                        cellpadding="0"
+                                                                        border="0"
+                                                                        role="presentation"
+                                                                        width="100%"
+                                                                        class="r25-o"
+                                                                        style="
+                                                                          table-layout: fixed;
+                                                                          width: 100%;
+                                                                        "
+                                                                      >
+                                                                        <!-- -->
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
+                                                                          <td
+                                                                            height="5"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
                                                                         <tr>
-                                                                           <td class="r19-i" style="font-size: 0px; line-height: 0px;"> <img src="https://ik.imagekit.io/w2okwbtu2/115727700_n9t8rrnwT.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670872429989" width="57" border="0" class="" style="display: block; width: 100%;"></td>
-                                                                        </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
+                                                                          <td
+                                                                            class="r26-i"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 0px;
+                                                                            "
+                                                                          >
+                                                                            <a
+                                                                              href="https://twitter.com/planepowers"
+                                                                              target="_blank"
+                                                                              style="
+                                                                                color: #0092ff;
+                                                                                text-decoration: underline;
+                                                                              "
+                                                                            >
+                                                                              <img
+                                                                                src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/twitter_32px.png"
+                                                                                width="32"
+                                                                                border="0"
+                                                                                class=""
+                                                                                style="
+                                                                                  display: block;
+                                                                                  width: 100%;
+                                                                                "
+                                                                            /></a>
+                                                                          </td>
+                                                                          <td
+                                                                            class="nl2go-responsive-hide"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 1px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r11-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r12-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr>
-                                                                           <td align="center" valign="top" class="r20-i nl2go-default-textstyle" style="font-family: arial,helvetica,sans-serif; color: #3b3f44; font-size: 18px; line-height: 1.5; text-align: center;">
-                                                                              <div>
-                                                                                 <p style="margin: 0; font-size: 14px;">Proudly made on <strong>Planet Earth  🌍</strong>.</p>
-                                                                              </div>
-                                                                           </td>
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
+                                                                          <td
+                                                                            height="5"
+                                                                            width="8"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r21-c" align="center">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r9-o" style="table-layout: fixed; width: 570px;">
+                                                                      </table>
+                                                                    </th>
+                                                                    <th
+                                                                      width="32"
+                                                                      valign=""
+                                                                      class="r24-c mobshow resp-table"
+                                                                      style="
+                                                                        font-weight: normal;
+                                                                      "
+                                                                    >
+                                                                      <table
+                                                                        cellspacing="0"
+                                                                        cellpadding="0"
+                                                                        border="0"
+                                                                        role="presentation"
+                                                                        width="100%"
+                                                                        class="r27-o"
+                                                                        style="
+                                                                          table-layout: fixed;
+                                                                          width: 100%;
+                                                                        "
+                                                                      >
                                                                         <!-- -->
-                                                                        <tr>
-                                                                           <td valign="top" class="">
-                                                                              <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                                                 <tr>
-                                                                                    <td class="r22-c" style="display: inline-block;">
-                                                                                       <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="570" class="r7-o" style="table-layout: fixed; width: 570px;">
-                                                                                          <!-- -->
-                                                                                          <tr class="nl2go-responsive-hide">
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                             <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                          </tr>
-                                                                                          <tr>
-                                                                                             <td class="nl2go-responsive-hide" width="209" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                             <td class="r23-i">
-                                                                                                <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
-                                                                                                   <tr>
-                                                                                                      <th width="40" valign="" class="r24-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r25-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r26-i" style="font-size: 0px; line-height: 0px;"> <a href="https://github.com/makeplane/plane" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/github_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                               <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                      <th width="40" valign="" class="r24-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r25-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r26-i" style="font-size: 0px; line-height: 0px;"> <a href="https://discord.gg/A92xrEGCge" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/discord_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                               <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                      <th width="40" valign="" class="r24-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r25-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r26-i" style="font-size: 0px; line-height: 0px;"> <a href="https://twitter.com/planepowers" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/twitter_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                               <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                               <td height="5" width="8" style="font-size: 5px; line-height: 5px;">­ </td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                      <th width="32" valign="" class="r24-c mobshow resp-table" style="font-weight: normal;">
-                                                                                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style="table-layout: fixed; width: 100%;">
-                                                                                                            <!-- -->
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                            </tr>
-                                                                                                            <tr>
-                                                                                                               <td class="r26-i" style="font-size: 0px; line-height: 0px;"> <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style="color: #0092ff; text-decoration: underline;"> <img src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/linkedin_32px.png" width="32" border="0" class="" style="display: block; width: 100%;"></a> </td>
-                                                                                                            </tr>
-                                                                                                            <tr class="nl2go-responsive-hide">
-                                                                                                               <td height="5" style="font-size: 5px; line-height: 5px;">­</td>
-                                                                                                            </tr>
-                                                                                                         </table>
-                                                                                                      </th>
-                                                                                                   </tr>
-                                                                                                </table>
-                                                                                             </td>
-                                                                                             <td class="nl2go-responsive-hide" width="209" style="font-size: 0px; line-height: 1px;">­ </td>
-                                                                                          </tr>
-                                                                                          <tr class="nl2go-responsive-hide">
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                             <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
-                                                                                             <td height="15" width="209" style="font-size: 15px; line-height: 15px;">­ </td>
-                                                                                          </tr>
-                                                                                       </table>
-                                                                                    </td>
-                                                                                 </tr>
-                                                                              </table>
-                                                                           </td>
-                                                                        </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                               <tr>
-                                                                  <td class="r11-c" align="left">
-                                                                     <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r12-o" style="table-layout: fixed; width: 100%;">
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
                                                                         <tr>
-                                                                           <td align="center" valign="top" class="r28-i nl2go-default-textstyle" style="font-family: arial,helvetica,sans-serif; color: #3b3f44; font-size: 18px; line-height: 1.5; text-align: center;">
-                                                                              <div>
-                                                                                 <p style="margin: 0; font-size: 14px;"><a href="{{ mirror }}" style="color: #0092ff; text-decoration: underline;">View in browser</a> | <a href="{{ unsubscribe }}" style="color: #0092ff; text-decoration: underline;">Unsubscribe</a></p>
-                                                                              </div>
-                                                                           </td>
+                                                                          <td
+                                                                            class="r26-i"
+                                                                            style="
+                                                                              font-size: 0px;
+                                                                              line-height: 0px;
+                                                                            "
+                                                                          >
+                                                                            <a
+                                                                              href="https://www.linkedin.com/company/planepowers/"
+                                                                              target="_blank"
+                                                                              style="
+                                                                                color: #0092ff;
+                                                                                text-decoration: underline;
+                                                                              "
+                                                                            >
+                                                                              <img
+                                                                                src="https://sendinblue-templates.s3.eu-west-3.amazonaws.com/icons/rounded_colored/linkedin_32px.png"
+                                                                                width="32"
+                                                                                border="0"
+                                                                                class=""
+                                                                                style="
+                                                                                  display: block;
+                                                                                  width: 100%;
+                                                                                "
+                                                                            /></a>
+                                                                          </td>
                                                                         </tr>
-                                                                        <tr class="nl2go-responsive-hide">
-                                                                           <td height="15" style="font-size: 15px; line-height: 15px;">­</td>
+                                                                        <tr
+                                                                          class="nl2go-responsive-hide"
+                                                                        >
+                                                                          <td
+                                                                            height="5"
+                                                                            style="
+                                                                              font-size: 5px;
+                                                                              line-height: 5px;
+                                                                            "
+                                                                          >
+                                                                            ­
+                                                                          </td>
                                                                         </tr>
-                                                                     </table>
-                                                                  </td>
-                                                               </tr>
-                                                            </table>
-                                                         </td>
-                                                         <td class="nl2go-responsive-hide" width="15" style="font-size: 0px; line-height: 1px;">­ </td>
+                                                                      </table>
+                                                                    </th>
+                                                                  </tr>
+                                                                </table>
+                                                              </td>
+                                                              <td
+                                                                class="nl2go-responsive-hide"
+                                                                width="209"
+                                                                style="
+                                                                  font-size: 0px;
+                                                                  line-height: 1px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                            </tr>
+                                                            <tr
+                                                              class="nl2go-responsive-hide"
+                                                            >
+                                                              <td
+                                                                height="15"
+                                                                width="209"
+                                                                style="
+                                                                  font-size: 15px;
+                                                                  line-height: 15px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                              <td
+                                                                height="15"
+                                                                style="
+                                                                  font-size: 15px;
+                                                                  line-height: 15px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                              <td
+                                                                height="15"
+                                                                width="209"
+                                                                style="
+                                                                  font-size: 15px;
+                                                                  line-height: 15px;
+                                                                "
+                                                              >
+                                                                ­
+                                                              </td>
+                                                            </tr>
+                                                          </table>
+                                                        </td>
                                                       </tr>
-                                                   </table>
-                                                </th>
-                                             </tr>
-                                          </table>
-                                       </td>
-                                    </tr>
-                                    <tr class="nl2go-responsive-hide">
-                                       <td height="20" style="font-size: 20px; line-height: 20px; background-color: #eff2f7;">­</td>
+                                                    </table>
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                          <tr>
+                                            <td class="r11-c" align="left">
+                                              <table
+                                                cellspacing="0"
+                                                cellpadding="0"
+                                                border="0"
+                                                role="presentation"
+                                                width="100%"
+                                                class="r12-o"
+                                                style="
+                                                  table-layout: fixed;
+                                                  width: 100%;
+                                                "
+                                              >
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                                <tr>
+                                                  <td
+                                                    align="center"
+                                                    valign="top"
+                                                    class="r28-i nl2go-default-textstyle"
+                                                    style="
+                                                      font-family: arial,
+                                                        helvetica, sans-serif;
+                                                      color: #3b3f44;
+                                                      font-size: 18px;
+                                                      line-height: 1.5;
+                                                      text-align: center;
+                                                    "
+                                                  >
+                                                    <div>
+                                                      <p
+                                                        style="
+                                                          margin: 0;
+                                                          font-size: 14px;
+                                                        "
+                                                      >
+                                                        <a
+                                                          href="{{ mirror }}"
+                                                          style="
+                                                            color: #0092ff;
+                                                            text-decoration: underline;
+                                                          "
+                                                          >View in browser</a
+                                                        >
+                                                        |
+                                                        <a
+                                                          href="{{ unsubscribe }}"
+                                                          style="
+                                                            color: #0092ff;
+                                                            text-decoration: underline;
+                                                          "
+                                                          >Unsubscribe</a
+                                                        >
+                                                      </p>
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr
+                                                  class="nl2go-responsive-hide"
+                                                >
+                                                  <td
+                                                    height="15"
+                                                    style="
+                                                      font-size: 15px;
+                                                      line-height: 15px;
+                                                    "
+                                                  >
+                                                    ­
+                                                  </td>
+                                                </tr>
+                                              </table>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                      <td
+                                        class="nl2go-responsive-hide"
+                                        width="15"
+                                        style="font-size: 0px; line-height: 1px"
+                                      >
+                                        ­
+                                      </td>
                                     </tr>
-                                 </table>
-                              </td>
-                           </tr>
-                        </table>
-                     </td>
+                                  </table>
+                                </th>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                        <tr class="nl2go-responsive-hide">
+                          <td
+                            height="20"
+                            style="
+                              font-size: 20px;
+                              line-height: 20px;
+                              background-color: #eff2f7;
+                            "
+                          ></td>
+                        </tr>
+                      </table>
+                    </td>
                   </tr>
-               </table>
-            </td>
-         </tr>
-      </table>
-   </body>
+                </table>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
 </html>
diff --git a/deploy/1-click/README.md b/deploy/1-click/README.md
deleted file mode 100644
index 88ea66c4c8e..00000000000
--- a/deploy/1-click/README.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# 1-Click Self-Hosting
-
-In this guide, we will walk you through the process of setting up a 1-click self-hosted environment. Self-hosting allows you to have full control over your applications and data. It's a great way to ensure privacy, control, and customization.
-
-Let's get started!
-
-## Installing Plane
-
-Installing Plane is a very easy and minimal step process.
-
-### Prerequisite
-
-- Operating System (latest): Debian / Ubuntu / Centos
-- Supported CPU Architechture: AMD64 / ARM64 / x86_64 / aarch64
-
-### Downloading Latest Stable Release
-
-```
-curl -fsSL https://raw.githubusercontent.com/makeplane/plane/master/deploy/1-click/install.sh | sh -
-
-```
-
-<details>
-    <summary>Downloading Preview Release</summary>
-
-```
-export BRANCH=preview
-
-curl -fsSL https://raw.githubusercontent.com/makeplane/plane/preview/deploy/1-click/install.sh | sh -
-
-```
-
-NOTE: `Preview` builds do not support ARM64/AARCH64 CPU architecture
-</details>
-
---
-
-
-Expect this after a successful install
-
-![Install Output](images/install.png)
-
-Access the application on a browser via http://server-ip-address
-
----
-
-### Get Control of your Plane Server Setup
-
-Plane App is available via the command `plane-app`. Running the command `plane-app --help` helps you to manage Plane
-
-![Plane Help](images/help.png)
-
-<ins>Basic Operations</ins>: 
-1. Start Server using `plane-app start`
-1. Stop Server using `plane-app stop`
-1. Restart Server using `plane-app restart`
-
-<ins>Advanced Operations</ins>:
-1. Configure Plane using `plane-app --configure`. This will give you options to modify
-    - NGINX Port (default 80)
-    - Domain Name (default is the local server public IP address)
-    - File Upload Size (default 5MB) 
-    - External Postgres DB Url (optional - default empty)
-    - External Redis URL (optional - default empty)
-    - AWS S3 Bucket (optional - to be configured only in case the user wants to use an S3 Bucket)
-
-1. Upgrade Plane using `plane-app --upgrade`. This will get the latest stable version of Plane files (docker-compose.yaml, .env, and docker images)
-
-1. Updating Plane App installer using `plane-app --update-installer` will update the `plane-app` utility. 
-
-1. Uninstall Plane using `plane-app --uninstall`. This will uninstall the Plane application from the server and all docker containers but do not remove the data stored in Postgres, Redis, and Minio. 
-
-1. Plane App can be reinstalled using `plane-app --install`. 
-
-<ins>Application Data is stored in the mentioned folders</ins>: 
-1. DB Data: /opt/plane/data/postgres
-1. Redis Data: /opt/plane/data/redis
-1. Minio Data: /opt/plane/data/minio
\ No newline at end of file
diff --git a/deploy/1-click/images/help.png b/deploy/1-click/images/help.png
deleted file mode 100644
index c14603a4b1e..00000000000
Binary files a/deploy/1-click/images/help.png and /dev/null differ
diff --git a/deploy/1-click/images/install.png b/deploy/1-click/images/install.png
deleted file mode 100644
index c8ba1e5f829..00000000000
Binary files a/deploy/1-click/images/install.png and /dev/null differ
diff --git a/deploy/1-click/install.sh b/deploy/1-click/install.sh
deleted file mode 100644
index 9a0eac90267..00000000000
--- a/deploy/1-click/install.sh
+++ /dev/null
@@ -1,20 +0,0 @@
-#!/bin/bash
-
-export GIT_REPO=makeplane/plane
-
-# Check if the user has sudo access
-if command -v curl &> /dev/null; then
-    sudo curl -sSL \
-        -o /usr/local/bin/plane-app \
-        https://raw.githubusercontent.com/$GIT_REPO/${BRANCH:-master}/deploy/1-click/plane-app?token=$(date +%s)
-else 
-    sudo wget -q \
-        -O /usr/local/bin/plane-app \
-        https://raw.githubusercontent.com/$GIT_REPO/${BRANCH:-master}/deploy/1-click/plane-app?token=$(date +%s)
-fi
-
-sudo chmod +x /usr/local/bin/plane-app
-sudo sed -i 's@export DEPLOY_BRANCH=${BRANCH:-master}@export DEPLOY_BRANCH='${BRANCH:-master}'@' /usr/local/bin/plane-app
-sudo sed -i 's@CODE_REPO=${GIT_REPO:-makeplane/plane}@CODE_REPO='$GIT_REPO'@' /usr/local/bin/plane-app
-
-plane-app -i #--help
diff --git a/deploy/1-click/plane-app b/deploy/1-click/plane-app
deleted file mode 100644
index e6bd24b9ec7..00000000000
--- a/deploy/1-click/plane-app
+++ /dev/null
@@ -1,803 +0,0 @@
-#!/bin/bash
-
-function print_header() {
-clear
-
-cat <<"EOF"
----------------------------------------
- ____  _                  
-|  _ \| | __ _ _ __   ___ 
-| |_) | |/ _` | '_ \ / _ \
-|  __/| | (_| | | | |  __/
-|_|   |_|\__,_|_| |_|\___|
-
----------------------------------------
-Project management tool from the future
----------------------------------------
-
-EOF
-}
-function update_env_file() {
-    config_file=$1
-    key=$2
-    value=$3
-
-    # Check if the config file exists
-    if [ ! -f "$config_file" ]; then
-        echo "Config file not found. Creating a new one..." >&2
-        sudo touch "$config_file"
-    fi
-
-    # Check if the key already exists in the config file
-    if sudo grep "^$key=" "$config_file"; then
-        sudo awk -v key="$key" -v value="$value" -F '=' '{if ($1 == key) $2 = value} 1' OFS='=' "$config_file" | sudo tee "$config_file.tmp" > /dev/null
-        sudo mv "$config_file.tmp" "$config_file" &> /dev/null
-    else
-        # sudo echo "$key=$value" >> "$config_file"
-        echo -e "$key=$value" | sudo tee -a "$config_file" > /dev/null
-    fi
-}
-function read_env_file() {
-    config_file=$1
-    key=$2
-
-    # Check if the config file exists
-    if [ ! -f "$config_file" ]; then
-        echo "Config file not found. Creating a new one..." >&2
-        sudo touch "$config_file"
-    fi
-
-    # Check if the key already exists in the config file
-    if sudo grep -q "^$key=" "$config_file"; then
-        value=$(sudo awk -v key="$key" -F '=' '{if ($1 == key) print $2}' "$config_file")
-        echo "$value"
-    else
-        echo ""
-    fi
-}
-function update_config() {
-    config_file="$PLANE_INSTALL_DIR/config.env"
-    update_env_file $config_file $1 $2
-}
-function read_config() {
-    config_file="$PLANE_INSTALL_DIR/config.env"
-    read_env_file $config_file $1
-}
-function update_env() {
-    config_file="$PLANE_INSTALL_DIR/.env"
-    update_env_file $config_file $1 $2
-}
-function read_env() {
-    config_file="$PLANE_INSTALL_DIR/.env"
-    read_env_file $config_file $1
-}
-function show_message() {
-    print_header
-
-    if [ "$2" == "replace_last_line" ]; then
-        PROGRESS_MSG[-1]="$1"
-    else
-        PROGRESS_MSG+=("$1")
-    fi
-
-    for statement in "${PROGRESS_MSG[@]}"; do
-        echo "$statement"
-    done
-
-}
-function prepare_environment() {
-    show_message "Prepare Environment..." >&2
-
-    show_message "- Updating OS with required tools ✋"  >&2
-    sudo "$PACKAGE_MANAGER" update -y
-    # sudo "$PACKAGE_MANAGER" upgrade -y
-
-    local required_tools=("curl" "awk" "wget" "nano" "dialog" "git" "uidmap" "jq")
-
-    for tool in "${required_tools[@]}"; do
-        if ! command -v $tool &> /dev/null; then
-            sudo "$PACKAGE_MANAGER" install -y $tool
-        fi
-    done
-
-    show_message "- OS Updated ✅" "replace_last_line"  >&2
-
-    # Install Docker if not installed
-    if ! command -v docker &> /dev/null; then
-        show_message "- Installing Docker ✋"  >&2
-        # curl -o- https://get.docker.com | bash - 
-
-        if [ "$PACKAGE_MANAGER" == "yum" ]; then
-            sudo $PACKAGE_MANAGER install -y yum-utils
-            sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo &> /dev/null
-        elif [ "$PACKAGE_MANAGER" == "apt-get" ]; then
-            # Add Docker's official GPG key:
-            sudo $PACKAGE_MANAGER update 
-            sudo $PACKAGE_MANAGER install ca-certificates curl &> /dev/null
-            sudo install -m 0755 -d /etc/apt/keyrings &> /dev/null
-            sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc &> /dev/null
-            sudo chmod a+r /etc/apt/keyrings/docker.asc &> /dev/null
-
-            # Add the repository to Apt sources:
-            echo \
-                "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
-                $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
-                sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
-            
-            sudo $PACKAGE_MANAGER update
-        fi
-
-        sudo $PACKAGE_MANAGER install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y
-
-        show_message "- Docker Installed ✅" "replace_last_line"  >&2
-    else
-        show_message "- Docker is already installed ✅"  >&2
-    fi
-
-    update_config "PLANE_ARCH" "$CPU_ARCH"
-    update_config "DOCKER_VERSION" "$(docker -v | awk '{print $3}' | sed 's/,//g')"
-    update_config "PLANE_DATA_DIR" "$DATA_DIR"
-    update_config "PLANE_LOG_DIR" "$LOG_DIR"
-
-    # echo "TRUE"
-    echo "Environment prepared successfully ✅"
-    show_message "Environment prepared successfully ✅" >&2
-    show_message "" >&2
-    return 0
-}
-function download_plane() {
-    # Download Docker Compose File from github url 
-    show_message "Downloading Plane Setup Files ✋"  >&2
-    sudo curl -H 'Cache-Control: no-cache, no-store' \
-        -s -o $PLANE_INSTALL_DIR/docker-compose.yaml  \
-        https://raw.githubusercontent.com/$CODE_REPO/$DEPLOY_BRANCH/deploy/selfhost/docker-compose.yml?token=$(date +%s) 
-
-    sudo curl -H 'Cache-Control: no-cache, no-store' \
-        -s -o $PLANE_INSTALL_DIR/variables-upgrade.env \
-        https://raw.githubusercontent.com/$CODE_REPO/$DEPLOY_BRANCH/deploy/selfhost/variables.env?token=$(date +%s) 
-
-    # if .env does not exists rename variables-upgrade.env to .env
-    if [ ! -f "$PLANE_INSTALL_DIR/.env" ]; then
-        sudo mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
-    fi
-
-    show_message "Plane Setup Files Downloaded ✅" "replace_last_line"  >&2
-    show_message ""  >&2
-
-    echo "PLANE_DOWNLOADED"
-    return 0
-}
-function printUsageInstructions() {
-    show_message ""  >&2
-    show_message "----------------------------------" >&2
-    show_message "Usage Instructions" >&2
-    show_message "----------------------------------" >&2
-    show_message ""  >&2
-    show_message "To use the Plane Setup utility, use below commands" >&2
-    show_message "" >&2
-
-    show_message "Usage: plane-app [OPTION]" >&2
-    show_message "" >&2
-    show_message "  start                       Start Server" >&2
-    show_message "  stop                        Stop Server" >&2
-    show_message "  restart                     Restart Server" >&2
-    show_message "" >&2
-    show_message "other options" >&2
-    show_message "  -i, --install               Install Plane" >&2
-    show_message "  -c, --configure             Configure Plane" >&2
-    show_message "  -up, --upgrade              Upgrade Plane" >&2
-    show_message "  -un, --uninstall            Uninstall Plane" >&2
-    show_message "  -ui, --update-installer     Update Plane Installer" >&2
-    show_message "  -h, --help                  Show help" >&2
-    show_message "" >&2
-    show_message ""  >&2
-    show_message "Application Data is stored in mentioned folders" >&2
-    show_message "  - DB Data: $DATA_DIR/postgres" >&2
-    show_message "  - Redis Data: $DATA_DIR/redis" >&2
-    show_message "  - Minio Data: $DATA_DIR/minio" >&2
-    show_message "" >&2
-    show_message "" >&2
-    show_message "----------------------------------" >&2
-    show_message ""  >&2
-}
-function build_local_image() {
-    show_message "- Downloading Plane Source Code ✋" >&2
-    REPO=https://github.com/$CODE_REPO.git
-    CURR_DIR=$PWD
-    PLANE_TEMP_CODE_DIR=$PLANE_INSTALL_DIR/temp
-    sudo rm -rf $PLANE_TEMP_CODE_DIR > /dev/null
-
-    sudo git clone $REPO $PLANE_TEMP_CODE_DIR  --branch $DEPLOY_BRANCH --single-branch -q > /dev/null
-
-    sudo cp $PLANE_TEMP_CODE_DIR/deploy/selfhost/build.yml $PLANE_TEMP_CODE_DIR/build.yml
-
-    show_message "- Plane Source Code Downloaded ✅" "replace_last_line" >&2
-    
-    show_message "- Building Docker Images ✋" >&2
-    sudo docker compose --env-file=$PLANE_INSTALL_DIR/.env -f $PLANE_TEMP_CODE_DIR/build.yml build --no-cache
-}
-function check_for_docker_images() {
-    show_message "" >&2
-    # show_message "Building Plane Images" >&2
-    
-    CURR_DIR=$(pwd)
-    
-    if [ "$DEPLOY_BRANCH" == "master" ]; then
-        update_env "APP_RELEASE" "latest"
-        export APP_RELEASE=latest
-    else
-        update_env "APP_RELEASE" "$DEPLOY_BRANCH"
-        export APP_RELEASE=$DEPLOY_BRANCH    
-    fi
-
-    if [ $USE_GLOBAL_IMAGES == 1 ]; then
-        # show_message "Building Plane Images for $CPU_ARCH is not required. Skipping... ✅" "replace_last_line" >&2
-        export DOCKERHUB_USER=makeplane
-        update_env "DOCKERHUB_USER" "$DOCKERHUB_USER"
-        update_env "PULL_POLICY" "always"
-        echo "Building Plane Images for $CPU_ARCH is not required. Skipping..."
-    else
-        export DOCKERHUB_USER=myplane
-        show_message "Building Plane Images for $CPU_ARCH " >&2
-        update_env "DOCKERHUB_USER" "$DOCKERHUB_USER"
-        update_env "PULL_POLICY" "never"
-
-        build_local_image
-
-        sudo rm -rf $PLANE_INSTALL_DIR/temp > /dev/null
-
-        show_message "- Docker Images Built ✅" "replace_last_line" >&2
-        sudo cd $CURR_DIR
-    fi
-
-    sudo sed -i "s|- pgdata:|- $DATA_DIR/postgres:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
-    sudo sed -i "s|- redisdata:|- $DATA_DIR/redis:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
-    sudo sed -i "s|- uploads:|- $DATA_DIR/minio:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
-
-    show_message "Downloading Plane Images for $CPU_ARCH ✋" >&2
-    sudo docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml --env-file=$PLANE_INSTALL_DIR/.env pull
-    show_message "Plane Images Downloaded ✅" "replace_last_line" >&2
-}
-function configure_plane() {
-    show_message "" >&2
-    show_message "Configuring Plane" >&2
-    show_message "" >&2
-
-    exec 3>&1
-
-    nginx_port=$(read_env "NGINX_PORT")
-    domain_name=$(read_env "DOMAIN_NAME")
-    upload_limit=$(read_env "FILE_SIZE_LIMIT")
-
-    NGINX_SETTINGS=$(dialog \
-        --ok-label "Next" \
-        --cancel-label "Skip" \
-        --backtitle "Plane Configuration" \
-        --title "Nginx Settings" \
-        --form "" \
-        0 0 0 \
-        "Port:"                   1 1	        "${nginx_port:-80}"            1 10 50 0 \
-        "Domain:"                 2 1	        "${domain_name:-localhost}"     2 10 50 0 \
-        "Upload Limit:"           3 1	        "${upload_limit:-5242880}"       3 10 15 0 \
-    2>&1 1>&3)
-
-    save_nginx_settings=0
-    if [ $? -eq 0 ]; then
-        save_nginx_settings=1
-        nginx_port=$(echo "$NGINX_SETTINGS" | sed -n 1p)
-        domain_name=$(echo "$NGINX_SETTINGS" | sed -n 2p)
-        upload_limit=$(echo "$NGINX_SETTINGS" | sed -n 3p)
-    fi
-
-
-    # smtp_host=$(read_env "EMAIL_HOST")
-    # smtp_user=$(read_env "EMAIL_HOST_USER")
-    # smtp_password=$(read_env "EMAIL_HOST_PASSWORD")
-    # smtp_port=$(read_env "EMAIL_PORT")
-    # smtp_from=$(read_env "EMAIL_FROM")
-    # smtp_tls=$(read_env "EMAIL_USE_TLS")
-    # smtp_ssl=$(read_env "EMAIL_USE_SSL")
-
-    # SMTP_SETTINGS=$(dialog \
-    #     --ok-label "Next" \
-    #     --cancel-label "Skip" \
-    #     --backtitle "Plane Configuration" \
-    #     --title "SMTP Settings" \
-    #     --form "" \
-    #     0 0 0 \
-    #     "Host:"        1 1	  "$smtp_host" 	              1 10 80 0 \
-    #     "User:"        2 1	  "$smtp_user" 	              2 10 80 0 \
-    #     "Password:"    3 1	  "$smtp_password" 	              3 10 80 0 \
-    #     "Port:"        4 1	  "${smtp_port:-587}"               4 10 5 0 \
-    #     "From:"        5 1	  "${smtp_from:-Mailer <mailer@example.com>}"               5 10 80 0 \
-    #     "TLS:"         6 1	  "${smtp_tls:-1}"                 6 10 1 1 \
-    #     "SSL:"         7 1	  "${smtp_ssl:-0}"                 7 10 1 1 \
-    # 2>&1 1>&3)
-
-    # save_smtp_settings=0
-    # if [ $? -eq 0 ]; then
-    #     save_smtp_settings=1
-    #     smtp_host=$(echo "$SMTP_SETTINGS" | sed -n 1p)
-    #     smtp_user=$(echo "$SMTP_SETTINGS" | sed -n 2p)
-    #     smtp_password=$(echo "$SMTP_SETTINGS" | sed -n 3p)
-    #     smtp_port=$(echo "$SMTP_SETTINGS" | sed -n 4p)
-    #     smtp_from=$(echo "$SMTP_SETTINGS" | sed -n 5p)
-    #     smtp_tls=$(echo "$SMTP_SETTINGS" | sed -n 6p)
-    # fi
-    external_pgdb_url=$(dialog \
-                    --backtitle "Plane Configuration" \
-                    --title "Using External Postgres Database ?" \
-                    --ok-label "Next" \
-                    --cancel-label "Skip" \
-                    --inputbox "Enter your external database url" \
-                    8 60 3>&1 1>&2 2>&3)
-
-
-    external_redis_url=$(dialog \
-                    --backtitle "Plane Configuration" \
-                    --title "Using External Redis Database ?" \
-                    --ok-label "Next" \
-                    --cancel-label "Skip" \
-                    --inputbox "Enter your external redis url" \
-                    8 60 3>&1 1>&2 2>&3)
-
-    
-    aws_region=$(read_env "AWS_REGION")
-    aws_access_key=$(read_env "AWS_ACCESS_KEY_ID")
-    aws_secret_key=$(read_env "AWS_SECRET_ACCESS_KEY")
-    aws_bucket=$(read_env "AWS_S3_BUCKET_NAME")
-    
-
-    AWS_S3_SETTINGS=$(dialog \
-        --ok-label "Next" \
-        --cancel-label "Skip" \
-        --backtitle "Plane Configuration" \
-        --title "AWS S3 Bucket Configuration" \
-        --form "" \
-        0 0 0 \
-        "Region:"         1 1	        "$aws_region"       1 10 50 0 \
-        "Access Key:"     2 1	        "$aws_access_key"   2 10 50 0 \
-        "Secret Key:"     3 1	        "$aws_secret_key"   3 10 50 0 \
-        "Bucket:"         4 1	        "$aws_bucket"       4 10 50 0 \
-    2>&1 1>&3)
-
-    save_aws_settings=0
-    if [ $? -eq 0 ]; then
-        save_aws_settings=1
-        aws_region=$(echo "$AWS_S3_SETTINGS" | sed -n 1p)
-        aws_access_key=$(echo "$AWS_S3_SETTINGS" | sed -n 2p)
-        aws_secret_key=$(echo "$AWS_S3_SETTINGS" | sed -n 3p)
-        aws_bucket=$(echo "$AWS_S3_SETTINGS" | sed -n 4p)
-    fi
-
-    # display dialogbox asking for confirmation to continue
-    CONFIRM_CONFIG=$(dialog \
-            --title "Confirm Configuration" \
-            --backtitle "Plane Configuration" \
-            --yes-label "Confirm" \
-            --no-label "Cancel" \
-            --yesno \
-            "
-            save_ngnix_settings:  $save_nginx_settings
-            nginx_port:           $nginx_port
-            domain_name:          $domain_name
-            upload_limit:         $upload_limit
-
-            save_aws_settings:    $save_aws_settings
-            aws_region:           $aws_region
-            aws_access_key:       $aws_access_key
-            aws_secret_key:       $aws_secret_key
-            aws_bucket:           $aws_bucket
-
-            pdgb_url:             $external_pgdb_url
-            redis_url:            $external_redis_url
-            " \
-            0 0 3>&1 1>&2 2>&3)
-    
-    if [ $? -eq 0 ]; then
-        if [ $save_nginx_settings == 1 ]; then
-            update_env "NGINX_PORT" "$nginx_port"
-            update_env "DOMAIN_NAME" "$domain_name"
-            update_env "WEB_URL" "http://$domain_name"
-            update_env "CORS_ALLOWED_ORIGINS" "http://$domain_name"
-            update_env "FILE_SIZE_LIMIT" "$upload_limit"
-        fi
-
-        # check enable smpt settings value
-        # if [ $save_smtp_settings == 1 ]; then
-        #     update_env "EMAIL_HOST" "$smtp_host"
-        #     update_env "EMAIL_HOST_USER" "$smtp_user"
-        #     update_env "EMAIL_HOST_PASSWORD" "$smtp_password"
-        #     update_env "EMAIL_PORT" "$smtp_port"
-        #     update_env "EMAIL_FROM" "$smtp_from"
-        #     update_env "EMAIL_USE_TLS" "$smtp_tls"
-        #     update_env "EMAIL_USE_SSL" "$smtp_ssl"
-        # fi
-
-        # check enable aws settings value
-        if [[ $save_aws_settings == 1 &&  $aws_access_key != ""  &&  $aws_secret_key != "" ]] ; then
-            update_env "USE_MINIO" "0"
-            update_env "AWS_REGION" "$aws_region"
-            update_env "AWS_ACCESS_KEY_ID" "$aws_access_key"
-            update_env "AWS_SECRET_ACCESS_KEY" "$aws_secret_key"
-            update_env "AWS_S3_BUCKET_NAME" "$aws_bucket"
-        elif [[ -z $aws_access_key || -z $aws_secret_key  ]] ; then
-            update_env "USE_MINIO" "1"
-            update_env "AWS_REGION" ""
-            update_env "AWS_ACCESS_KEY_ID" ""
-            update_env "AWS_SECRET_ACCESS_KEY" ""
-            update_env "AWS_S3_BUCKET_NAME" "uploads"
-        fi
-
-        if [ "$external_pgdb_url" != "" ]; then
-            update_env "DATABASE_URL" "$external_pgdb_url"
-        fi
-        if [ "$external_redis_url" != "" ]; then
-            update_env "REDIS_URL" "$external_redis_url"
-        fi
-    fi
-
-    exec 3>&-
-}
-function upgrade_configuration() {
-    upg_env_file="$PLANE_INSTALL_DIR/variables-upgrade.env"
-    # Check if the file exists
-    if [ -f "$upg_env_file" ]; then
-        # Read each line from the file
-        while IFS= read -r line; do
-            # Skip comments and empty lines
-            if [[ "$line" =~ ^\s*#.*$ ]] || [[ -z "$line" ]]; then
-                continue
-            fi
-
-            # Split the line into key and value
-            key=$(echo "$line" | cut -d'=' -f1)
-            value=$(echo "$line" | cut -d'=' -f2-)
-
-            current_value=$(read_env "$key")
-
-            if [ -z "$current_value" ]; then
-                update_env "$key" "$value"
-            fi
-        done < "$upg_env_file"
-    fi
-}
-function install() {
-    show_message ""
-    if [ "$(uname)" == "Linux" ]; then
-        OS="linux"
-        OS_NAME=$(sudo awk -F= '/^ID=/{print $2}' /etc/os-release)
-        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
-        print_header
-        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
-                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
-            OS_SUPPORTED=true
-            show_message "******** Installing Plane ********"
-            show_message ""
-
-            prepare_environment
-
-            if [ $? -eq 0 ]; then
-                download_plane
-                if [ $? -eq 0 ]; then
-                    # create_service
-                    check_for_docker_images
-
-                    last_installed_on=$(read_config "INSTALLATION_DATE")
-                    # if [ "$last_installed_on" == "" ]; then
-                    #     configure_plane
-                    # fi
-                    
-                    update_env "NGINX_PORT" "80"
-                    update_env "DOMAIN_NAME" "$MY_IP"
-                    update_env "WEB_URL" "http://$MY_IP"
-                    update_env "CORS_ALLOWED_ORIGINS" "http://$MY_IP"
-
-                    update_config "INSTALLATION_DATE" "$(date '+%Y-%m-%d')"
-                    
-                    if command -v crontab &> /dev/null; then
-                        sudo touch /etc/cron.daily/makeplane
-                        sudo chmod +x /etc/cron.daily/makeplane
-                        sudo echo "0 2 * * * root /usr/local/bin/plane-app --upgrade" > /etc/cron.daily/makeplane
-                        sudo crontab /etc/cron.daily/makeplane 
-                    fi
-
-                    show_message "Plane Installed Successfully ✅"
-                    show_message ""
-                else
-                    show_message "Download Failed ❌"
-                    exit 1
-                fi
-            else
-                show_message "Initialization Failed ❌"
-                exit 1
-            fi
-            
-        else
-            OS_SUPPORTED=false
-            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
-            show_message ""
-            exit 1
-        fi
-    else
-        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
-        show_message ""
-        exit 1
-    fi
-}
-function upgrade() {
-    print_header
-    if [ "$(uname)" == "Linux" ]; then
-        OS="linux"
-        OS_NAME=$(sudo awk -F= '/^ID=/{print $2}' /etc/os-release)
-        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
-        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
-                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
-
-            OS_SUPPORTED=true
-            show_message "******** Upgrading Plane ********"
-            show_message ""
-
-            prepare_environment
-
-            if [ $? -eq 0 ]; then
-                stop_server
-                download_plane
-                if [ $? -eq 0 ]; then
-                    check_for_docker_images
-                    upgrade_configuration
-                    update_config "UPGRADE_DATE" "$(date)"
-
-                    start_server
-
-                    show_message ""
-                    show_message "Plane Upgraded Successfully ✅"
-                    show_message ""
-                    printUsageInstructions
-                else
-                    show_message "Download Failed ❌"
-                    exit 1
-                fi
-            else
-                show_message "Initialization Failed ❌"
-                exit 1
-            fi
-        else
-            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
-            show_message ""
-            exit 1
-        fi
-    else
-        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
-        show_message ""
-        exit 1
-    fi
-}
-function uninstall() {
-    print_header
-    if [ "$(uname)" == "Linux" ]; then
-        OS="linux"
-        OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
-        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
-        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
-                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
-
-            OS_SUPPORTED=true
-            show_message "******** Uninstalling Plane ********"
-            show_message ""
-
-            stop_server
-
-            if ! [ -x "$(command -v docker)" ]; then
-                echo "DOCKER_NOT_INSTALLED" &> /dev/null
-            else
-                # Ask of user input to confirm uninstall docker ?
-                CONFIRM_DOCKER_PURGE=$(dialog --title "Uninstall Docker" --defaultno --yesno "Are you sure you want to uninstall docker ?" 8 60 3>&1 1>&2 2>&3)
-                if [ $? -eq 0 ]; then
-                    show_message "- Uninstalling Docker ✋"
-                    sudo docker images -q | xargs -r sudo docker rmi -f &> /dev/null
-                    sudo "$PACKAGE_MANAGER" remove -y docker-engine docker docker.io docker-ce docker-ce-cli docker-compose-plugin &> /dev/null
-                    sudo "$PACKAGE_MANAGER" autoremove -y docker-engine docker docker.io docker-ce docker-compose-plugin &> /dev/null
-                    show_message "- Docker Uninstalled ✅" "replace_last_line" >&2
-                fi
-            fi
-
-            sudo rm $PLANE_INSTALL_DIR/.env &> /dev/null
-            sudo rm $PLANE_INSTALL_DIR/variables-upgrade.env &> /dev/null
-            sudo rm $PLANE_INSTALL_DIR/config.env &> /dev/null
-            sudo rm $PLANE_INSTALL_DIR/docker-compose.yaml &> /dev/null
-
-            if command -v crontab &> /dev/null; then
-                sudo crontab -r &> /dev/null
-                sudo rm /etc/cron.daily/makeplane &> /dev/null
-            fi
-            
-            # rm -rf $PLANE_INSTALL_DIR &> /dev/null
-            show_message "- Configuration Cleaned ✅"
-
-            show_message ""
-            show_message "******** Plane Uninstalled ********"
-            show_message ""
-            show_message ""
-            show_message "Plane Configuration Cleaned with some exceptions"
-            show_message "- DB Data: $DATA_DIR/postgres"
-            show_message "- Redis Data: $DATA_DIR/redis"
-            show_message "- Minio Data: $DATA_DIR/minio"
-            show_message ""
-            show_message ""
-            show_message "Thank you for using Plane. We hope to see you again soon."
-            show_message ""
-            show_message ""
-        else
-            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
-            show_message ""
-            exit 1
-        fi
-    else
-        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
-        show_message ""
-        exit 1
-    fi
-}
-function start_server() {
-    docker_compose_file="$PLANE_INSTALL_DIR/docker-compose.yaml"
-    env_file="$PLANE_INSTALL_DIR/.env"
-    # check if both the files exits 
-    if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Starting Plane Server ($APP_RELEASE) ✋"
-        sudo docker compose -f $docker_compose_file --env-file=$env_file up -d
-
-        # Wait for containers to be running
-        echo "Waiting for containers to start..."
-        while ! sudo docker compose -f "$docker_compose_file" --env-file="$env_file" ps --services --filter "status=running" --quiet | grep -q "."; do
-            sleep 1
-        done
-        # wait for migrator container to exit with status 0 before starting the application
-        migrator_container_id=$(sudo docker container ls -aq -f "name=plane-migrator")
-
-        # if migrator container is running, wait for it to exit
-        if [ -n "$migrator_container_id" ]; then
-            while sudo docker inspect --format='{{.State.Status}}' $migrator_container_id | grep -q "running"; do
-                show_message "Waiting for Plane Server ($APP_RELEASE) to start...✋ (Migrator in progress)" "replace_last_line" >&2
-                sleep 1
-            done
-        fi
-
-        # if migrator exit status is not 0, show error message and exit
-        if [ -n "$migrator_container_id" ]; then
-            migrator_exit_code=$(sudo docker inspect --format='{{.State.ExitCode}}' $migrator_container_id)
-            if [ $migrator_exit_code -ne 0 ]; then
-                # show_message "Migrator failed with exit code $migrator_exit_code ❌" "replace_last_line" >&2
-                show_message "Plane Server failed to start ❌" "replace_last_line" >&2
-                stop_server
-                exit 1
-            fi
-        fi
-
-        api_container_id=$(sudo docker container ls -q -f "name=plane-api")
-        while ! sudo docker logs $api_container_id 2>&1 | grep -i "Application startup complete";
-        do
-            show_message "Waiting for Plane Server ($APP_RELEASE) to start...✋ (API starting)" "replace_last_line" >&2
-            sleep 1
-        done
-        show_message "Plane Server Started ($APP_RELEASE) ✅" "replace_last_line" >&2
-        show_message "---------------------------------------------------------------" >&2
-        show_message "Access the Plane application at http://$MY_IP" >&2
-        show_message "---------------------------------------------------------------" >&2
-
-    else
-        show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
-    fi
-}
-function stop_server() {
-    docker_compose_file="$PLANE_INSTALL_DIR/docker-compose.yaml"
-    env_file="$PLANE_INSTALL_DIR/.env"
-    # check if both the files exits 
-    if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Stopping Plane Server ($APP_RELEASE) ✋"
-        sudo docker compose -f $docker_compose_file --env-file=$env_file down
-        show_message "Plane Server Stopped ($APP_RELEASE) ✅" "replace_last_line" >&2
-    else
-        show_message "Plane Server not installed [Skipping] ✅" "replace_last_line" >&2
-    fi
-}
-function restart_server() {
-    docker_compose_file="$PLANE_INSTALL_DIR/docker-compose.yaml"
-    env_file="$PLANE_INSTALL_DIR/.env"
-    # check if both the files exits 
-    if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Restarting Plane Server ($APP_RELEASE) ✋"
-        sudo docker compose -f $docker_compose_file --env-file=$env_file restart
-        show_message "Plane Server Restarted ($APP_RELEASE) ✅" "replace_last_line" >&2
-    else
-        show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
-    fi
-}
-function show_help() {
-    # print_header
-    show_message "Usage: plane-app [OPTION]" >&2
-    show_message "" >&2
-    show_message "  start                       Start Server" >&2
-    show_message "  stop                        Stop Server" >&2
-    show_message "  restart                     Restart Server" >&2
-    show_message "" >&2
-    show_message "other options" >&2
-    show_message "  -i, --install               Install Plane" >&2
-    show_message "  -c, --configure             Configure Plane" >&2
-    show_message "  -up, --upgrade              Upgrade Plane" >&2
-    show_message "  -un, --uninstall            Uninstall Plane" >&2
-    show_message "  -ui, --update-installer     Update Plane Installer" >&2
-    show_message "  -h, --help                  Show help" >&2
-    show_message "" >&2
-    exit 1
-    
-}
-function update_installer() {
-    show_message "Updating Plane Installer ✋" >&2
-    sudo curl -H 'Cache-Control: no-cache, no-store' \
-        -s -o /usr/local/bin/plane-app  \
-        https://raw.githubusercontent.com/$CODE_REPO/$DEPLOY_BRANCH/deploy/1-click/plane-app?token=$(date +%s) 
-
-    sudo chmod +x /usr/local/bin/plane-app > /dev/null&> /dev/null
-    show_message "Plane Installer Updated ✅" "replace_last_line" >&2
-}
-
-export DEPLOY_BRANCH=${BRANCH:-master}
-export APP_RELEASE=$DEPLOY_BRANCH
-export DOCKERHUB_USER=makeplane
-export PULL_POLICY=always
-
-if [ "$DEPLOY_BRANCH" == "master" ]; then
-    export APP_RELEASE=latest
-fi
-
-PLANE_INSTALL_DIR=/opt/plane
-DATA_DIR=$PLANE_INSTALL_DIR/data
-LOG_DIR=$PLANE_INSTALL_DIR/logs
-CODE_REPO=${GIT_REPO:-makeplane/plane}
-OS_SUPPORTED=false
-CPU_ARCH=$(uname -m)
-PROGRESS_MSG=""
-USE_GLOBAL_IMAGES=0
-PACKAGE_MANAGER=""
-MY_IP=$(curl -s ifconfig.me)
-
-if [[ $CPU_ARCH == "amd64" || $CPU_ARCH == "x86_64" || ( $DEPLOY_BRANCH == "master" && ( $CPU_ARCH == "arm64" || $CPU_ARCH == "aarch64" ) ) ]]; then
-    USE_GLOBAL_IMAGES=1
-fi
-
-sudo mkdir -p $PLANE_INSTALL_DIR/{data,log}
-
-if command -v apt-get &> /dev/null; then
-    PACKAGE_MANAGER="apt-get"
-elif command -v yum &> /dev/null; then
-    PACKAGE_MANAGER="yum"
-elif command -v apk &> /dev/null; then
-    PACKAGE_MANAGER="apk"
-fi
-
-if [ "$1" == "start" ]; then
-    start_server
-elif [ "$1" == "stop" ]; then
-    stop_server
-elif [ "$1" == "restart" ]; then
-    restart_server
-elif [ "$1" == "--install" ] || [ "$1" == "-i" ]; then
-    install
-    start_server
-    show_message "" >&2
-    show_message "To view help, use plane-app --help " >&2
-elif [ "$1" == "--configure" ] || [ "$1" == "-c" ]; then
-    configure_plane
-    printUsageInstructions
-elif [ "$1" == "--upgrade" ] || [ "$1" == "-up" ]; then
-    upgrade
-elif [ "$1" == "--uninstall" ] || [ "$1" == "-un" ]; then
-    uninstall
-elif [ "$1" == "--update-installer" ] || [ "$1" == "-ui" ]; then
-    update_installer
-elif [ "$1" == "--help" ] || [ "$1" == "-h" ]; then
-    show_help
-else
-    show_help
-fi
diff --git a/deploy/selfhost/docker-compose.yml b/deploy/selfhost/docker-compose.yml
index 07e5ea9f623..522baf63d59 100644
--- a/deploy/selfhost/docker-compose.yml
+++ b/deploy/selfhost/docker-compose.yml
@@ -1,21 +1,15 @@
 version: "3.8"
 
-x-app-env : &app-env
+x-app-env: &app-env
   environment:
     - NGINX_PORT=${NGINX_PORT:-80}
     - WEB_URL=${WEB_URL:-http://localhost}
     - DEBUG=${DEBUG:-0}
-    - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.production} # deprecated
-    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces} # deprecated
-    - SENTRY_DSN=${SENTRY_DSN:-""}
+    - SENTRY_DSN=${SENTRY_DSN}
     - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
-    - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:-""}
-    - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-""}
-    - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
-    - DOCKERIZED=${DOCKERIZED:-1}  # deprecated
-    - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS:-""}
+    - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS}
     # Gunicorn Workers
-    - GUNICORN_WORKERS=${GUNICORN_WORKERS:-2}
+    - GUNICORN_WORKERS=${GUNICORN_WORKERS:-1}
     #DB SETTINGS
     - PGHOST=${PGHOST:-plane-db}
     - PGDATABASE=${PGDATABASE:-plane}
@@ -23,25 +17,11 @@ x-app-env : &app-env
     - 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}}
+    - DATABASE_URL=${DATABASE_URL:-postgresql://plane:plane@plane-db/plane}
     # REDIS SETTINGS
     - REDIS_HOST=${REDIS_HOST:-plane-redis}
     - REDIS_PORT=${REDIS_PORT:-6379}
-    - REDIS_URL=${REDIS_URL:-redis://${REDIS_HOST}:6379/}
-    # EMAIL SETTINGS - Deprecated can be configured through admin panel
-    - 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 <team@mailer.plane.so>"}
-    - 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}
-    # LOGIN/SIGNUP SETTINGS - Deprecated can be configured through admin panel
-    - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
-    - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}
-    - ENABLE_MAGIC_LINK_LOGIN=${ENABLE_MAGIC_LINK_LOGIN:-0}
+    - REDIS_URL=${REDIS_URL:-redis://plane-redis:6379/}
     # Application secret
     - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
     # DATA STORE SETTINGS
@@ -59,7 +39,7 @@ x-app-env : &app-env
 services:
   web:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-frontend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-frontend:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: /usr/local/bin/start.sh web/server.js web
@@ -71,7 +51,7 @@ services:
 
   space:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-space:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-space:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: /usr/local/bin/start.sh space/server.js space
@@ -84,22 +64,26 @@ services:
 
   api:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: ./bin/takeoff
     deploy:
       replicas: ${API_REPLICAS:-1}
+    volumes:
+      - logs_api:/code/plane/logs
     depends_on:
       - plane-db
       - plane-redis
 
   worker:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: ./bin/worker
+    volumes:
+      - logs_worker:/code/plane/logs
     depends_on:
       - api
       - plane-db
@@ -107,10 +91,12 @@ services:
 
   beat-worker:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     restart: unless-stopped
     command: ./bin/beat
+    volumes:
+      - logs_beat-worker:/code/plane/logs
     depends_on:
       - api
       - plane-db
@@ -118,19 +104,21 @@ services:
 
   migrator:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     restart: no
     command: >
-        sh -c "python manage.py wait_for_db &&
-             python manage.py migrate"
+      sh -c "python manage.py wait_for_db &&
+           python manage.py migrate"
+    volumes:
+      - logs_migrator:/code/plane/logs
     depends_on:
       - plane-db
       - plane-redis
 
   plane-db:
     <<: *app-env
-    image: postgres:15.2-alpine
+    image: postgres:15.5-alpine
     pull_policy: if_not_present
     restart: unless-stopped
     command: postgres -c 'max_connections=1000'
@@ -138,7 +126,7 @@ services:
       - pgdata:/var/lib/postgresql/data
   plane-redis:
     <<: *app-env
-    image: redis:6.2.7-alpine
+    image: redis:7.2.4-alpine
     pull_policy: if_not_present
     restart: unless-stopped
     volumes:
@@ -156,10 +144,10 @@ services:
   # Comment this if you already have a reverse proxy running
   proxy:
     <<: *app-env
-    image: ${DOCKERHUB_USER:-makeplane}/plane-proxy:${APP_RELEASE:-latest}
+    image: ${DOCKERHUB_USER:-makeplane}/plane-proxy:${APP_RELEASE:-stable}
     pull_policy: ${PULL_POLICY:-always}
     ports:
-        - ${NGINX_PORT}:80
+      - ${NGINX_PORT}:80
     depends_on:
       - web
       - api
@@ -169,3 +157,7 @@ volumes:
   pgdata:
   redisdata:
   uploads:
+  logs_api:
+  logs_worker:
+  logs_beat-worker:
+  logs_migrator:
diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
index 16b6ea7c39c..fdedf370e52 100755
--- a/deploy/selfhost/install.sh
+++ b/deploy/selfhost/install.sh
@@ -17,16 +17,16 @@ function print_header() {
 clear
 
 cat <<"EOF"
----------------------------------------
- ____  _                  
-|  _ \| | __ _ _ __   ___ 
-| |_) | |/ _` | '_ \ / _ \
-|  __/| | (_| | | | |  __/
-|_|   |_|\__,_|_| |_|\___|    
-
----------------------------------------
+--------------------------------------------
+ ____  _                          ///////// 
+|  _ \| | __ _ _ __   ___         ///////// 
+| |_) | |/ _` | '_ \ / _ \   /////    ///// 
+|  __/| | (_| | | | |  __/   /////    ///// 
+|_|   |_|\__,_|_| |_|\___|        ////      
+                                  ////      
+--------------------------------------------
 Project management tool from the future
----------------------------------------
+--------------------------------------------
 EOF
 }
 
@@ -66,7 +66,7 @@ function buildLocalImage() {
         cd $PLANE_TEMP_CODE_DIR
         if [ "$BRANCH" == "master" ];
         then
-            export APP_RELEASE=latest
+            export APP_RELEASE=stable
         fi
 
         docker compose -f build.yml build --no-cache  >&2
@@ -99,17 +99,17 @@ function download() {
     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" ];
+    if [ -f "$DOCKER_ENV_PATH" ];
     then
-        cp $PLANE_INSTALL_DIR/.env $PLANE_INSTALL_DIR/archive/$TS.env
+        cp $DOCKER_ENV_PATH $PLANE_INSTALL_DIR/archive/$TS.env
     else
-        mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
+        mv $PLANE_INSTALL_DIR/variables-upgrade.env $DOCKER_ENV_PATH
     fi
 
     if [ "$BRANCH" != "master" ];
     then
         cp $PLANE_INSTALL_DIR/docker-compose.yaml $PLANE_INSTALL_DIR/temp.yaml 
-        sed -e 's@${APP_RELEASE:-latest}@'"$BRANCH"'@g' \
+        sed -e 's@${APP_RELEASE:-stable}@'"$BRANCH"'@g' \
             $PLANE_INSTALL_DIR/temp.yaml > $PLANE_INSTALL_DIR/docker-compose.yaml
 
         rm $PLANE_INSTALL_DIR/temp.yaml
@@ -131,9 +131,9 @@ function download() {
     fi
     
     echo ""
-    echo "Latest version is now available for you to use"
+    echo "Most recent Stable 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 "In case of Upgrade, your new setting file is availabe as 'variables-upgrade.env'. Please compare and set the required values in 'plane.env 'file."
     echo ""
 
 }
@@ -144,7 +144,7 @@ function startServices() {
     if [ -n "$migrator_container_id" ]; then
         local idx=0
         while docker inspect --format='{{.State.Status}}' $migrator_container_id | grep -q "running"; do
-            local message=">>> Waiting for Data Migration to finish"
+            local message=">> Waiting for Data Migration to finish"
             local dots=$(printf '%*s' $idx | tr ' ' '.')
             echo -ne "\r$message$dots"
             ((idx++))
@@ -152,13 +152,18 @@ function startServices() {
         done
     fi
     printf "\r\033[K"
+    echo ""
+    echo "   Data Migration completed successfully ✅"
 
     # if migrator exit status is not 0, show error message and exit
     if [ -n "$migrator_container_id" ]; then
         local migrator_exit_code=$(docker inspect --format='{{.State.ExitCode}}' $migrator_container_id)
         if [ $migrator_exit_code -ne 0 ]; then
             echo "Plane Server failed to start ❌"
-            stopServices
+            # stopServices
+            echo
+            echo "Please check the logs for the 'migrator' service and resolve the issue(s)."
+            echo "Stop the services by running the command: ./setup.sh stop"
             exit 1
         fi
     fi
@@ -167,26 +172,35 @@ function startServices() {
     local idx2=0
     while ! docker logs $api_container_id 2>&1 | grep -m 1 -i "Application startup complete" | grep -q ".";
     do
-        local message=">>> Waiting for API Service to Start"
+        local message=">> Waiting for API Service to Start"
         local dots=$(printf '%*s' $idx2 | tr ' ' '.')    
         echo -ne "\r$message$dots"
         ((idx2++))
         sleep 1
     done
     printf "\r\033[K"
+    echo "   API Service started successfully ✅"
+    source "${DOCKER_ENV_PATH}"
+    echo "   Plane Server started successfully ✅"
+    echo ""
+    echo "   You can access the application at $WEB_URL"
+    echo ""
+
 }
 function stopServices() {
     docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH down
 }
 function restartServices() {
-    docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH restart
+    # docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH restart
+    stopServices
+    startServices
 }
 function upgrade() {
     echo "***** STOPPING SERVICES ****"
     stopServices
 
     echo
-    echo "***** DOWNLOADING LATEST VERSION ****"
+    echo "***** DOWNLOADING STABLE VERSION ****"
     download
 
     echo "***** PLEASE VALIDATE AND START SERVICES ****"
@@ -303,15 +317,15 @@ function askForAction() {
     elif [ "$ACTION" == "2" ] || [ "$DEFAULT_ACTION" == "start" ]
     then
         startServices
-        askForAction
+        # askForAction
     elif [ "$ACTION" == "3" ] || [ "$DEFAULT_ACTION" == "stop" ]
     then
         stopServices
-        askForAction
+        # askForAction
     elif [ "$ACTION" == "4" ] || [ "$DEFAULT_ACTION" == "restart" ]
     then
         restartServices
-        askForAction
+        # askForAction
     elif [ "$ACTION" == "5" ]  || [ "$DEFAULT_ACTION" == "upgrade" ]
     then
         upgrade
@@ -343,7 +357,7 @@ fi
 
 if [ "$BRANCH" == "master" ];
 then
-    export APP_RELEASE=latest
+    export APP_RELEASE=stable
 fi
 
 # REMOVE SPECIAL CHARACTERS FROM BRANCH NAME
@@ -354,7 +368,21 @@ fi
 mkdir -p $PLANE_INSTALL_DIR/archive
 
 DOCKER_FILE_PATH=$PLANE_INSTALL_DIR/docker-compose.yaml
-DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/.env
+DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/plane.env
+
+# BACKWARD COMPATIBILITY
+OLD_DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/.env
+if [ -f "$OLD_DOCKER_ENV_PATH" ];
+then
+    mv "$OLD_DOCKER_ENV_PATH" "$DOCKER_ENV_PATH"
+    OS_NAME=$(uname)
+    if [ "$OS_NAME" == "Darwin" ];
+    then
+        sed -i '' -e 's@APP_RELEASE=latest@APP_RELEASE=stable@' "$DOCKER_ENV_PATH" 
+    else
+        sed -i -e 's@APP_RELEASE=latest@APP_RELEASE=stable@' "$DOCKER_ENV_PATH" 
+    fi
+fi
 
 print_header
 askForAction $@
diff --git a/deploy/selfhost/variables.env b/deploy/selfhost/variables.env
index 6d2cde0ffb9..e37350cf40e 100644
--- a/deploy/selfhost/variables.env
+++ b/deploy/selfhost/variables.env
@@ -1,4 +1,4 @@
-APP_RELEASE=latest
+APP_RELEASE=stable
 
 WEB_REPLICAS=1
 SPACE_REPLICAS=1
@@ -7,13 +7,8 @@ API_REPLICAS=1
 NGINX_PORT=80
 WEB_URL=http://localhost
 DEBUG=0
-NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
 SENTRY_DSN=
 SENTRY_ENVIRONMENT=production
-GOOGLE_CLIENT_ID=
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-DOCKERIZED=1 # deprecated
 CORS_ALLOWED_ORIGINS=http://localhost
 
 #DB SETTINGS
@@ -23,26 +18,14 @@ POSTGRES_USER=plane
 POSTGRES_PASSWORD=plane
 POSTGRES_DB=plane
 PGDATA=/var/lib/postgresql/data
-DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${PGHOST}/${PGDATABASE}
+DATABASE_URL=
 
 # REDIS SETTINGS
 REDIS_HOST=plane-redis
 REDIS_PORT=6379
-REDIS_URL=redis://${REDIS_HOST}:6379/
+REDIS_URL=
 
-# 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
-
-# LOGIN/SIGNUP SETTINGS
-ENABLE_SIGNUP=1
-ENABLE_EMAIL_PASSWORD=1
-ENABLE_MAGIC_LINK_LOGIN=0
+# Secret Key
 SECRET_KEY=60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5
 
 # DATA STORE SETTINGS
@@ -58,4 +41,4 @@ BUCKET_NAME=uploads
 FILE_SIZE_LIMIT=5242880
 
 # Gunicorn Workers
-GUNICORN_WORKERS=2
+GUNICORN_WORKERS=1
diff --git a/nginx/nginx.conf.template b/nginx/nginx.conf.template
index 4775dcbfad4..780093b3ba0 100644
--- a/nginx/nginx.conf.template
+++ b/nginx/nginx.conf.template
@@ -30,7 +30,7 @@ http {
         }
 
         location /${BUCKET_NAME}/ {
-            proxy_pass http://plane-minio:9000/uploads/;
+            proxy_pass http://plane-minio:9000/${BUCKET_NAME}/;
         }
     }
 }
diff --git a/package.json b/package.json
index 9239a9b41fa..c87384f3947 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
index fcb6b57bbb2..a0d7351d302 100644
--- a/packages/editor/core/package.json
+++ b/packages/editor/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
@@ -53,14 +53,13 @@
     "react-moveable": "^0.54.2",
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.2"
+    "tiptap-markdown": "^0.8.9"
   },
   "devDependencies": {
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
-    "eslint-config-next": "13.2.4",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
diff --git a/packages/editor/core/src/helpers/insert-content-at-cursor-position.ts b/packages/editor/core/src/helpers/insert-content-at-cursor-position.ts
new file mode 100644
index 00000000000..062acafcb1b
--- /dev/null
+++ b/packages/editor/core/src/helpers/insert-content-at-cursor-position.ts
@@ -0,0 +1,17 @@
+import { Selection } from "@tiptap/pm/state";
+import { Editor } from "@tiptap/react";
+import { MutableRefObject } from "react";
+
+export const insertContentAtSavedSelection = (
+  editorRef: MutableRefObject<Editor | null>,
+  content: string,
+  savedSelection: Selection
+) => {
+  if (editorRef.current && savedSelection) {
+    editorRef.current
+      .chain()
+      .focus()
+      .insertContentAt(savedSelection?.anchor, content)
+      .run();
+  }
+};
diff --git a/packages/editor/core/src/hooks/use-editor.tsx b/packages/editor/core/src/hooks/use-editor.tsx
index c2923c1e97d..7e6aa5912a0 100644
--- a/packages/editor/core/src/hooks/use-editor.tsx
+++ b/packages/editor/core/src/hooks/use-editor.tsx
@@ -1,5 +1,5 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import { useImperativeHandle, useRef, MutableRefObject } from "react";
+import { useImperativeHandle, useRef, MutableRefObject, useState } from "react";
 import { CoreEditorProps } from "src/ui/props";
 import { CoreEditorExtensions } from "src/ui/extensions";
 import { EditorProps } from "@tiptap/pm/view";
@@ -8,6 +8,8 @@ import { DeleteImage } from "src/types/delete-image";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
 import { RestoreImage } from "src/types/restore-image";
 import { UploadImage } from "src/types/upload-image";
+import { Selection } from "@tiptap/pm/state";
+import { insertContentAtSavedSelection } from "src/helpers/insert-content-at-cursor-position";
 
 interface CustomEditorProps {
   uploadFile: UploadImage;
@@ -70,8 +72,10 @@ export const useEditor = ({
       onCreate: async ({ editor }) => {
         onStart?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
       },
+      onTransaction: async ({ editor }) => {
+        setSavedSelection(editor.state.selection);
+      },
       onUpdate: async ({ editor }) => {
-        // for instant feedback loop
         setIsSubmitting?.("submitting");
         setShouldShowAlert?.(true);
         onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
@@ -83,6 +87,8 @@ export const useEditor = ({
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
 
+  const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
+
   useImperativeHandle(forwardedRef, () => ({
     clearEditor: () => {
       editorRef.current?.commands.clearContent();
@@ -90,6 +96,11 @@ export const useEditor = ({
     setEditorValue: (content: string) => {
       editorRef.current?.commands.setContent(content);
     },
+    setEditorValueAtCursorPosition: (content: string) => {
+      if (savedSelection) {
+        insertContentAtSavedSelection(editorRef, content, savedSelection);
+      }
+    },
   }));
 
   if (!editor) {
diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts
index 6524d1ff58a..7c3e7f11e60 100644
--- a/packages/editor/core/src/lib/editor-commands.ts
+++ b/packages/editor/core/src/lib/editor-commands.ts
@@ -4,18 +4,18 @@ import { findTableAncestor } from "src/lib/utils";
 import { UploadImage } from "src/types/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();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().setNode("heading", { level: 1 }).run();
+  else editor.chain().focus().clearNodes().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();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().setNode("heading", { level: 2 }).run();
+  else editor.chain().focus().clearNodes().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();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().setNode("heading", { level: 3 }).run();
+  else editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run();
 };
 
 export const toggleBold = (editor: Editor, range?: Range) => {
@@ -37,10 +37,10 @@ export const toggleCodeBlock = (editor: Editor, range?: Range) => {
   // Check if code block is active then toggle code block
   if (editor.isActive("codeBlock")) {
     if (range) {
-      editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+      editor.chain().focus().deleteRange(range).clearNodes().toggleCodeBlock().run();
       return;
     }
-    editor.chain().focus().toggleCodeBlock().run();
+    editor.chain().focus().clearNodes().toggleCodeBlock().run();
     return;
   }
 
@@ -49,32 +49,32 @@ export const toggleCodeBlock = (editor: Editor, range?: Range) => {
 
   if (isSelectionEmpty) {
     if (range) {
-      editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+      editor.chain().focus().deleteRange(range).clearNodes().toggleCodeBlock().run();
       return;
     }
-    editor.chain().focus().toggleCodeBlock().run();
+    editor.chain().focus().clearNodes().toggleCodeBlock().run();
   } else {
     if (range) {
-      editor.chain().focus().deleteRange(range).toggleCode().run();
+      editor.chain().focus().deleteRange(range).clearNodes().toggleCode().run();
       return;
     }
-    editor.chain().focus().toggleCode().run();
+    editor.chain().focus().clearNodes().toggleCode().run();
   }
 };
 
 export const toggleOrderedList = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
-  else editor.chain().focus().toggleOrderedList().run();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().toggleOrderedList().run();
+  else editor.chain().focus().clearNodes().toggleOrderedList().run();
 };
 
 export const toggleBulletList = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
-  else editor.chain().focus().toggleBulletList().run();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().toggleBulletList().run();
+  else editor.chain().focus().clearNodes().toggleBulletList().run();
 };
 
 export const toggleTaskList = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
-  else editor.chain().focus().toggleTaskList().run();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().toggleTaskList().run();
+  else editor.chain().focus().clearNodes().toggleTaskList().run();
 };
 
 export const toggleStrike = (editor: Editor, range?: Range) => {
@@ -83,8 +83,8 @@ export const toggleStrike = (editor: Editor, range?: Range) => {
 };
 
 export const toggleBlockquote = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleBlockquote().run();
-  else editor.chain().focus().toggleBlockquote().run();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().toggleBlockquote().run();
+  else editor.chain().focus().clearNodes().toggleBlockquote().run();
 };
 
 export const insertTableCommand = (editor: Editor, range?: Range) => {
@@ -97,8 +97,8 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
       }
     }
   }
-  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3 }).run();
-  else editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run();
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3 }).run();
+  else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3 }).run();
 };
 
 export const unsetLinkEditor = (editor: Editor) => {
diff --git a/packages/editor/core/src/lib/utils.ts b/packages/editor/core/src/lib/utils.ts
index 5c7a8f08faa..c943d4c6048 100644
--- a/packages/editor/core/src/lib/utils.ts
+++ b/packages/editor/core/src/lib/utils.ts
@@ -1,3 +1,4 @@
+import { Selection } from "@tiptap/pm/state";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 interface EditorClassNames {
@@ -18,6 +19,19 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+// Helper function to find the parent node of a specific type
+export function findParentNodeOfType(selection: Selection, typeName: string) {
+  let depth = selection.$anchor.depth;
+  while (depth > 0) {
+    const node = selection.$anchor.node(depth);
+    if (node.type.name === typeName) {
+      return { node, pos: selection.$anchor.start(depth) - 1 };
+    }
+    depth--;
+  }
+  return null;
+}
+
 export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
   while (node !== null && node.nodeName !== "TABLE") {
     node = node.parentNode;
diff --git a/packages/editor/core/src/styles/table.css b/packages/editor/core/src/styles/table.css
index ca384d34fc6..3ba17ee1b28 100644
--- a/packages/editor/core/src/styles/table.css
+++ b/packages/editor/core/src/styles/table.css
@@ -98,7 +98,7 @@
   top: 0;
   bottom: -2px;
   width: 4px;
-  z-index: 99;
+  z-index: 5;
   background-color: #d9e4ff;
   pointer-events: none;
 }
@@ -111,7 +111,7 @@
 .tableWrapper .tableControls .rowsControl {
   transition: opacity ease-in 100ms;
   position: absolute;
-  z-index: 99;
+  z-index: 5;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -198,7 +198,7 @@
 
 .tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
-  background-color: rgba(var(--color-background-100), 0.5);
+  background-color: rgba(var(--color-background-80), 0.6);
 }
 
 .tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx
index 5480a51e931..2d608152500 100644
--- a/packages/editor/core/src/ui/components/editor-container.tsx
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@@ -1,5 +1,6 @@
 import { Editor } from "@tiptap/react";
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
+import { cn } from "src/lib/utils";
 
 interface EditorContainerProps {
   editor: Editor | null;
@@ -8,17 +9,54 @@ interface EditorContainerProps {
   hideDragHandle?: () => void;
 }
 
-export const EditorContainer = ({ editor, editorClassNames, hideDragHandle, children }: EditorContainerProps) => (
-  <div
-    id="editor-container"
-    onClick={() => {
-      editor?.chain().focus(undefined, { scrollIntoView: false }).run();
-    }}
-    onMouseLeave={() => {
-      hideDragHandle?.();
-    }}
-    className={`cursor-text ${editorClassNames}`}
-  >
-    {children}
-  </div>
-);
+export const EditorContainer: FC<EditorContainerProps> = (props) => {
+  const { editor, editorClassNames, hideDragHandle, children } = props;
+
+  const handleContainerClick = () => {
+    if (!editor) return;
+    if (!editor.isEditable) return;
+    if (editor.isFocused) return; // If editor is already focused, do nothing
+
+    const { selection } = editor.state;
+    const currentNode = selection.$from.node();
+
+    editor?.chain().focus("end", { scrollIntoView: false }).run(); // Focus the editor at the end
+
+    if (
+      currentNode.content.size === 0 && // Check if the current node is empty
+      !(
+        editor.isActive("orderedList") ||
+        editor.isActive("bulletList") ||
+        editor.isActive("taskItem") ||
+        editor.isActive("table") ||
+        editor.isActive("blockquote") ||
+        editor.isActive("codeBlock")
+      ) // Check if it's an empty node within an orderedList, bulletList, taskItem, table, quote or code block
+    ) {
+      return;
+    }
+
+    // Insert a new paragraph at the end of the document
+    const endPosition = editor?.state.doc.content.size;
+    editor?.chain().insertContentAt(endPosition, { type: "paragraph" }).run();
+
+    // Focus the newly added paragraph for immediate editing
+    editor
+      .chain()
+      .setTextSelection(endPosition + 1)
+      .run();
+  };
+
+  return (
+    <div
+      id="editor-container"
+      onClick={handleContainerClick}
+      onMouseLeave={() => {
+        hideDragHandle?.();
+      }}
+      className={cn(`cursor-text`, { "active-editor": editor?.isFocused && editor?.isEditable }, 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
index 9c09387882b..7a6ce30f770 100644
--- a/packages/editor/core/src/ui/components/editor-content.tsx
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@@ -1,17 +1,28 @@
 import { Editor, EditorContent } from "@tiptap/react";
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { ImageResizer } from "src/ui/extensions/image/image-resize";
 
 interface EditorContentProps {
   editor: Editor | null;
   editorContentCustomClassNames: string | undefined;
   children?: ReactNode;
+  tabIndex?: number;
 }
 
-export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = "", children }: EditorContentProps) => (
-  <div className={`contentEditor ${editorContentCustomClassNames}`}>
-    <EditorContent editor={editor} />
-    {editor?.isActive("image") && editor?.isEditable && <ImageResizer editor={editor} />}
-    {children}
-  </div>
-);
+export const EditorContentWrapper: FC<EditorContentProps> = (props) => {
+  const { editor, editorContentCustomClassNames = "", tabIndex, children } = props;
+
+  return (
+    <div
+      className={`contentEditor ${editorContentCustomClassNames}`}
+      tabIndex={tabIndex}
+      onFocus={() => {
+        editor?.chain().focus(undefined, { scrollIntoView: false }).run();
+      }}
+    >
+      <EditorContent editor={editor} />
+      {editor?.isActive("image") && editor?.isEditable && <ImageResizer editor={editor} />}
+      {children}
+    </div>
+  );
+};
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
index 0854092a9e4..ec6c540dacc 100644
--- a/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
@@ -15,9 +15,15 @@ export function clickHandler(options: ClickHandlerOptions): Plugin {
           return false;
         }
 
-        const eventTarget = event.target as HTMLElement;
+        let a = event.target as HTMLElement;
+        const els = [];
 
-        if (eventTarget.nodeName !== "A") {
+        while (a.nodeName !== "DIV") {
+          els.push(a);
+          a = a.parentNode as HTMLElement;
+        }
+
+        if (!els.find((value) => value.nodeName === "A")) {
           return false;
         }
 
@@ -28,9 +34,7 @@ export function clickHandler(options: ClickHandlerOptions): Plugin {
         const target = link?.target ?? attrs.target;
 
         if (link && href) {
-          if (view.editable) {
-            window.open(href, target);
-          }
+          window.open(href, target);
 
           return true;
         }
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
index 83e38054c74..475bf28d94b 100644
--- a/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
@@ -33,16 +33,8 @@ export function pasteHandler(options: PasteHandlerOptions): Plugin {
           return false;
         }
 
-        const html = event.clipboardData?.getData("text/html");
-
-        const hrefRegex = /href="([^"]*)"/;
-
-        const existingLink = html?.match(hrefRegex);
-
-        const url = existingLink ? existingLink[1] : link.href;
-
         options.editor.commands.setMark(options.type, {
-          href: url,
+          href: link.href,
         });
 
         return true;
diff --git a/packages/editor/core/src/ui/extensions/custom-link/index.tsx b/packages/editor/core/src/ui/extensions/custom-link/index.ts
similarity index 69%
rename from packages/editor/core/src/ui/extensions/custom-link/index.tsx
rename to packages/editor/core/src/ui/extensions/custom-link/index.ts
index e66d18904f8..88e7abfe57c 100644
--- a/packages/editor/core/src/ui/extensions/custom-link/index.tsx
+++ b/packages/editor/core/src/ui/extensions/custom-link/index.ts
@@ -1,41 +1,76 @@
-import { Mark, markPasteRule, mergeAttributes } from "@tiptap/core";
+import { Mark, markPasteRule, mergeAttributes, PasteRuleMatch } from "@tiptap/core";
 import { Plugin } from "@tiptap/pm/state";
 import { find, registerCustomProtocol, reset } from "linkifyjs";
-
-import { autolink } from "src/ui/extensions/custom-link/helpers/autolink";
-import { clickHandler } from "src/ui/extensions/custom-link/helpers/clickHandler";
-import { pasteHandler } from "src/ui/extensions/custom-link/helpers/pasteHandler";
+import { autolink } from "./helpers/autolink";
+import { clickHandler } from "./helpers/clickHandler";
+import { pasteHandler } from "./helpers/pasteHandler";
 
 export interface LinkProtocolOptions {
   scheme: string;
   optionalSlashes?: boolean;
 }
 
+export const pasteRegex =
+  /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)/gi;
+
 export interface LinkOptions {
+  /**
+   * If enabled, it adds links as you type.
+   */
   autolink: boolean;
-  inclusive: boolean;
+  /**
+   * An array of custom protocols to be registered with linkifyjs.
+   */
   protocols: Array<LinkProtocolOptions | string>;
+  /**
+   * If enabled, links will be opened on click.
+   */
   openOnClick: boolean;
+  /**
+   * If enabled, links will be inclusive i.e. if you move your cursor to the
+   * link text, and start typing, it'll be a part of the link itself.
+   */
+  inclusive: boolean;
+  /**
+   * Adds a link to the current selection if the pasted content only contains an url.
+   */
   linkOnPaste: boolean;
+  /**
+   * A list of HTML attributes to be rendered.
+   */
   HTMLAttributes: Record<string, any>;
+  /**
+   * A validation function that modifies link verification for the auto linker.
+   * @param url - The url to be validated.
+   * @returns - True if the url is valid, false otherwise.
+   */
   validate?: (url: string) => boolean;
 }
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     link: {
+      /**
+       * Set a link mark
+       */
       setLink: (attributes: {
         href: string;
         target?: string | null;
         rel?: string | null;
         class?: string | null;
       }) => ReturnType;
+      /**
+       * Toggle a link mark
+       */
       toggleLink: (attributes: {
         href: string;
         target?: string | null;
         rel?: string | null;
         class?: string | null;
       }) => ReturnType;
+      /**
+       * Unset a link mark
+       */
       unsetLink: () => ReturnType;
     };
   }
@@ -150,37 +185,31 @@ export const CustomLinkExtension = Mark.create<LinkOptions>({
   addPasteRules() {
     return [
       markPasteRule({
-        find: (text) =>
-          find(text)
-            .filter((link) => {
-              if (this.options.validate) {
-                return this.options.validate(link.value);
-              }
-              return true;
-            })
-            .filter((link) => link.isLink)
-            .map((link) => ({
-              text: link.value,
-              index: link.start,
-              data: link,
-            })),
-        type: this.type,
-        getAttributes: (match, pasteEvent) => {
-          const html = pasteEvent?.clipboardData?.getData("text/html");
-          const hrefRegex = /href="([^"]*)"/;
-
-          const existingLink = html?.match(hrefRegex);
-
-          if (existingLink) {
-            return {
-              href: existingLink[1],
-            };
+        find: (text) => {
+          const foundLinks: PasteRuleMatch[] = [];
+
+          if (text) {
+            const links = find(text).filter((item) => item.isLink);
+
+            if (links.length) {
+              links.forEach((link) =>
+                foundLinks.push({
+                  text: link.value,
+                  data: {
+                    href: link.href,
+                  },
+                  index: link.start,
+                })
+              );
+            }
           }
 
-          return {
-            href: match.data?.href,
-          };
+          return foundLinks;
         },
+        type: this.type,
+        getAttributes: (match) => ({
+          href: match.data?.href,
+        }),
       }),
     ];
   },
diff --git a/packages/editor/core/src/ui/extensions/horizontal-rule/horizontal-rule.ts b/packages/editor/core/src/ui/extensions/horizontal-rule/horizontal-rule.ts
new file mode 100644
index 00000000000..2af845b7a08
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/horizontal-rule/horizontal-rule.ts
@@ -0,0 +1,111 @@
+import { isNodeSelection, mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+
+export interface HorizontalRuleOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    horizontalRule: {
+      /**
+       * Add a horizontal rule
+       */
+      setHorizontalRule: () => ReturnType;
+    };
+  }
+}
+
+export const CustomHorizontalRule = Node.create<HorizontalRuleOptions>({
+  name: "horizontalRule",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  group: "block",
+
+  parseHTML() {
+    return [{ tag: "hr" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["hr", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+
+  addCommands() {
+    return {
+      setHorizontalRule:
+        () =>
+        ({ chain, state }) => {
+          const { selection } = state;
+          const { $from: $originFrom, $to: $originTo } = selection;
+
+          const currentChain = chain();
+
+          if ($originFrom.parentOffset === 0) {
+            currentChain.insertContentAt(
+              {
+                from: Math.max($originFrom.pos - 1, 0),
+                to: $originTo.pos,
+              },
+              {
+                type: this.name,
+              }
+            );
+          } else if (isNodeSelection(selection)) {
+            currentChain.insertContentAt($originTo.pos, {
+              type: this.name,
+            });
+          } else {
+            currentChain.insertContent({ type: this.name });
+          }
+
+          return (
+            currentChain
+              // set cursor after horizontal rule
+              .command(({ tr, dispatch }) => {
+                if (dispatch) {
+                  const { $to } = tr.selection;
+                  const posAfter = $to.end();
+
+                  if ($to.nodeAfter) {
+                    if ($to.nodeAfter.isTextblock) {
+                      tr.setSelection(TextSelection.create(tr.doc, $to.pos + 1));
+                    } else if ($to.nodeAfter.isBlock) {
+                      tr.setSelection(NodeSelection.create(tr.doc, $to.pos));
+                    } else {
+                      tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+                    }
+                  } else {
+                    // add node after horizontal rule if it’s the end of the document
+                    const node = $to.parent.type.contentMatch.defaultType?.create();
+
+                    if (node) {
+                      tr.insert(posAfter, node);
+                      tr.setSelection(TextSelection.create(tr.doc, posAfter + 1));
+                    }
+                  }
+
+                  tr.scrollIntoView();
+                }
+
+                return true;
+              })
+              .run()
+          );
+        },
+    };
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        type: this.type,
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/core/src/ui/extensions/image/index.tsx b/packages/editor/core/src/ui/extensions/image/index.tsx
index db8b1c97bb6..1431b77558a 100644
--- a/packages/editor/core/src/ui/extensions/image/index.tsx
+++ b/packages/editor/core/src/ui/extensions/image/index.tsx
@@ -5,6 +5,8 @@ import ImageExt from "@tiptap/extension-image";
 import { onNodeDeleted, onNodeRestored } from "src/ui/plugins/delete-image";
 import { DeleteImage } from "src/types/delete-image";
 import { RestoreImage } from "src/types/restore-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
 
 interface ImageNode extends ProseMirrorNode {
   attrs: {
@@ -18,6 +20,12 @@ const IMAGE_NODE_TYPE = "image";
 
 export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => any) =>
   ImageExt.extend({
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertLineBelowImageAction,
+        ArrowUp: insertLineAboveImageAction,
+      };
+    },
     addProseMirrorPlugins() {
       return [
         UploadImagesPlugin(cancelUploadImage),
diff --git a/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts
new file mode 100644
index 00000000000..a18576b4627
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts
@@ -0,0 +1,45 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { KeyboardShortcutCommand } from "@tiptap/core";
+
+export const insertLineAboveImageAction: KeyboardShortcutCommand = ({ editor }) => {
+  const { selection, doc } = editor.state;
+  const { $from, $to } = selection;
+
+  let imageNode: ProseMirrorNode | null = null;
+  let imagePos: number | null = null;
+
+  // Check if the selection itself is an image node
+  doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+    if (node.type.name === "image") {
+      imageNode = node;
+      imagePos = pos;
+      return false; // Stop iterating once an image node is found
+    }
+    return true;
+  });
+
+  if (imageNode === null || imagePos === null) return false;
+
+  // Since we want to insert above the image, we use the imagePos directly
+  const insertPos = imagePos;
+
+  if (insertPos < 0) return false;
+
+  // Check for an existing node immediately before the image
+  if (insertPos === 0) {
+    // If the previous node doesn't exist or isn't a paragraph, create and insert a new empty node there
+    editor.chain().insertContentAt(insertPos, { type: "paragraph" }).run();
+    editor.chain().setTextSelection(insertPos).run();
+  } else {
+    const prevNode = doc.nodeAt(insertPos);
+
+    if (prevNode && prevNode.type.name === "paragraph") {
+      // If the previous node is a paragraph, move the cursor there
+      editor.chain().setTextSelection(insertPos).run();
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+};
diff --git a/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts
new file mode 100644
index 00000000000..e998c728b93
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts
@@ -0,0 +1,46 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { KeyboardShortcutCommand } from "@tiptap/core";
+
+export const insertLineBelowImageAction: KeyboardShortcutCommand = ({ editor }) => {
+  const { selection, doc } = editor.state;
+  const { $from, $to } = selection;
+
+  let imageNode: ProseMirrorNode | null = null;
+  let imagePos: number | null = null;
+
+  // Check if the selection itself is an image node
+  doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+    if (node.type.name === "image") {
+      imageNode = node;
+      imagePos = pos;
+      return false; // Stop iterating once an image node is found
+    }
+    return true;
+  });
+
+  if (imageNode === null || imagePos === null) return false;
+
+  const guaranteedImageNode: ProseMirrorNode = imageNode;
+  const nextNodePos = imagePos + guaranteedImageNode.nodeSize;
+
+  // Check for an existing node immediately after the image
+  const nextNode = doc.nodeAt(nextNodePos);
+
+  if (nextNode && nextNode.type.name === "paragraph") {
+    // If the next node is a paragraph, move the cursor there
+    const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+    editor.chain().setTextSelection(endOfParagraphPos).run();
+  } else if (!nextNode) {
+    // If the next node doesn't exist i.e. we're at the end of the document, create and insert a new empty node there
+    editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
+    editor
+      .chain()
+      .setTextSelection(nextNodePos + 1)
+      .run();
+  } else {
+    // If the next node is not a paragraph, do not proceed
+    return false;
+  }
+
+  return true;
+};
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
index 190731fe0b6..1a932d6d51c 100644
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -27,6 +27,7 @@ import { RestoreImage } from "src/types/restore-image";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
 import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
 import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
 
 export const CoreEditorExtensions = (
   mentionConfig: {
@@ -55,9 +56,7 @@ export const CoreEditorExtensions = (
     },
     code: false,
     codeBlock: false,
-    horizontalRule: {
-      HTMLAttributes: { class: "mt-4 mb-4" },
-    },
+    horizontalRule: false,
     blockquote: false,
     dropcursor: {
       color: "rgba(var(--color-text-100))",
@@ -67,6 +66,9 @@ export const CoreEditorExtensions = (
   CustomQuoteExtension.configure({
     HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
   }),
+  CustomHorizontalRule.configure({
+    HTMLAttributes: { class: "mt-4 mb-4" },
+  }),
   CustomKeymap,
   ListKeymap,
   CustomLinkExtension.configure({
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
index 674a8e1150a..2941179c7c5 100644
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -213,10 +213,11 @@ function createToolbox({
               { className: "colorPicker grid" },
               Object.entries(colors).map(([colorName, colorValue]) =>
                 h("div", {
-                  className: "colorPickerItem",
+                  className: "colorPickerItem flex items-center justify-center",
                   style: `background-color: ${colorValue.backgroundColor}; 
-                            color: ${colorValue.textColor || "inherit"};`,
-                  innerHTML: colorValue?.icon || "",
+          color: ${colorValue.textColor || "inherit"};`,
+                  innerHTML:
+                    colorValue.icon ?? `<span class="text-md" style:"color: ${colorValue.backgroundColor}>A</span>`,
                   onClick: () => onSelectColor(colorValue),
                 })
               )
diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts
index ef595eee209..5fd06caf6af 100644
--- a/packages/editor/core/src/ui/extensions/table/table/table.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@@ -25,6 +25,8 @@ import { tableControls } from "src/ui/extensions/table/table/table-controls";
 import { TableView } from "src/ui/extensions/table/table/table-view";
 import { createTable } from "src/ui/extensions/table/table/utilities/create-table";
 import { deleteTableWhenAllCellsSelected } from "src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected";
+import { insertLineBelowTableAction } from "./utilities/insert-line-below-table-action";
+import { insertLineAboveTableAction } from "./utilities/insert-line-above-table-action";
 
 export interface TableOptions {
   HTMLAttributes: Record<string, any>;
@@ -231,6 +233,8 @@ export const Table = Node.create({
       "Mod-Backspace": deleteTableWhenAllCellsSelected,
       Delete: deleteTableWhenAllCellsSelected,
       "Mod-Delete": deleteTableWhenAllCellsSelected,
+      ArrowDown: insertLineBelowTableAction,
+      ArrowUp: insertLineAboveTableAction,
     };
   },
 
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-above-table-action.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-above-table-action.ts
new file mode 100644
index 00000000000..d61d21c5b39
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-above-table-action.ts
@@ -0,0 +1,50 @@
+import { KeyboardShortcutCommand } from "@tiptap/core";
+import { findParentNodeOfType } from "src/lib/utils";
+
+export const insertLineAboveTableAction: KeyboardShortcutCommand = ({ editor }) => {
+  // Check if the current selection or the closest node is a table
+  if (!editor.isActive("table")) return false;
+
+  // Get the current selection
+  const { selection } = editor.state;
+
+  // Find the table node and its position
+  const tableNode = findParentNodeOfType(selection, "table");
+  if (!tableNode) return false;
+
+  const tablePos = tableNode.pos;
+
+  // Determine if the selection is in the first row of the table
+  const firstRow = tableNode.node.child(0);
+  const selectionPath = (selection.$anchor as any).path;
+  const selectionInFirstRow = selectionPath.includes(firstRow);
+
+  if (!selectionInFirstRow) return false;
+
+  // Check if the table is at the very start of the document or its parent node
+  if (tablePos === 0) {
+    // The table is at the start, so just insert a paragraph at the current position
+    editor.chain().insertContentAt(tablePos, { type: "paragraph" }).run();
+    editor
+      .chain()
+      .setTextSelection(tablePos + 1)
+      .run();
+  } else {
+    // The table is not at the start, check for the node immediately before the table
+    const prevNodePos = tablePos - 1;
+
+    if (prevNodePos <= 0) return false;
+
+    const prevNode = editor.state.doc.nodeAt(prevNodePos - 1);
+
+    if (prevNode && prevNode.type.name === "paragraph") {
+      // If there's a paragraph before the table, move the cursor to the end of that paragraph
+      const endOfParagraphPos = tablePos - prevNode.nodeSize;
+      editor.chain().setTextSelection(endOfParagraphPos).run();
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+};
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-below-table-action.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-below-table-action.ts
new file mode 100644
index 00000000000..28b46084aba
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/insert-line-below-table-action.ts
@@ -0,0 +1,48 @@
+import { KeyboardShortcutCommand } from "@tiptap/core";
+import { findParentNodeOfType } from "src/lib/utils";
+
+export const insertLineBelowTableAction: KeyboardShortcutCommand = ({ editor }) => {
+  // Check if the current selection or the closest node is a table
+  if (!editor.isActive("table")) return false;
+
+  // Get the current selection
+  const { selection } = editor.state;
+
+  // Find the table node and its position
+  const tableNode = findParentNodeOfType(selection, "table");
+  if (!tableNode) return false;
+
+  const tablePos = tableNode.pos;
+  const table = tableNode.node;
+
+  // Determine if the selection is in the last row of the table
+  const rowCount = table.childCount;
+  const lastRow = table.child(rowCount - 1);
+  const selectionPath = (selection.$anchor as any).path;
+  const selectionInLastRow = selectionPath.includes(lastRow);
+
+  if (!selectionInLastRow) return false;
+
+  // Calculate the position immediately after the table
+  const nextNodePos = tablePos + table.nodeSize;
+
+  // Check for an existing node immediately after the table
+  const nextNode = editor.state.doc.nodeAt(nextNodePos);
+
+  if (nextNode && nextNode.type.name === "paragraph") {
+    // If the next node is an paragraph, move the cursor there
+    const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+    editor.chain().setTextSelection(endOfParagraphPos).run();
+  } else if (!nextNode) {
+    // If the next node doesn't exist i.e. we're at the end of the document, create and insert a new empty node there
+    editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
+    editor
+      .chain()
+      .setTextSelection(nextNodePos + 1)
+      .run();
+  } else {
+    return false;
+  }
+
+  return true;
+};
diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts
index 40e75a1e381..3f1b8eeecce 100644
--- a/packages/editor/core/src/ui/mentions/suggestion.ts
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -22,7 +22,7 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
         // @ts-ignore
         popup = tippy("body", {
           getReferenceClientRect: props.clientRect,
-          appendTo: () => document.querySelector("#editor-container"),
+          appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
           content: reactRenderer.element,
           showOnCreate: true,
           interactive: true,
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index cf7c4ee1823..93e1b388722 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -5,7 +5,6 @@ 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 "src/ui/extensions/table/table-header/table-header";
 import { Table } from "src/ui/extensions/table/table";
@@ -17,6 +16,11 @@ import { isValidHttpUrl } from "src/lib/utils";
 import { Mentions } from "src/ui/mentions";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
+import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
 
 export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   mentionSuggestions: IMentionSuggestion[];
@@ -38,36 +42,31 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
         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",
-      },
-    },
+    code: false,
     codeBlock: false,
-    horizontalRule: {
-      HTMLAttributes: { class: "mt-4 mb-4" },
-    },
-    dropcursor: {
-      color: "rgba(var(--color-text-100))",
-      width: 2,
-    },
+    horizontalRule: false,
+    blockquote: false,
+    dropcursor: false,
     gapcursor: false,
   }),
-  Gapcursor,
+  CustomQuoteExtension.configure({
+    HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
+  }),
+  CustomHorizontalRule.configure({
+    HTMLAttributes: { class: "mt-4 mb-4" },
+  }),
   CustomLinkExtension.configure({
+    openOnClick: true,
+    autolink: true,
+    linkOnPaste: true,
     protocols: ["http", "https"],
-    validate: (url) => isValidHttpUrl(url),
+    validate: (url: string) => isValidHttpUrl(url),
     HTMLAttributes: {
       class:
         "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
     },
   }),
+  CustomTypographyExtension,
   ReadOnlyImageExtension.configure({
     HTMLAttributes: {
       class: "rounded-lg border border-custom-border-300",
@@ -87,6 +86,8 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     },
     nested: true,
   }),
+  CustomCodeBlockExtension,
+  CustomCodeInlineExtension,
   Markdown.configure({
     html: true,
     transformCopiedText: true,
diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json
index bd1f2d90fea..be00fcce445 100644
--- a/packages/editor/document-editor/package.json
+++ b/packages/editor/document-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/document-editor",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -37,7 +37,6 @@
     "@tiptap/extension-placeholder": "^2.1.13",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
-    "eslint-config-next": "13.2.4",
     "lucide-react": "^0.309.0",
     "react-popper": "^2.3.0",
     "tippy.js": "^6.3.7",
@@ -47,7 +46,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "8.36.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx
index 97231ea966f..926d9a53deb 100644
--- a/packages/editor/document-editor/src/ui/components/content-browser.tsx
+++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx
@@ -15,11 +15,11 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
   const handleOnClick = (marking: IMarking) => {
     scrollSummary(editor, marking);
     if (setSidePeekVisible) setSidePeekVisible(false);
-  }
+  };
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
-      <h2 className="font-medium">Table of Contents</h2>
+      <h2 className="font-medium">Outline</h2>
       <div className="h-full overflow-y-auto">
         {markings.length !== 0 ? (
           markings.map((marking) =>
diff --git a/packages/editor/document-editor/src/ui/components/editor-header.tsx b/packages/editor/document-editor/src/ui/components/editor-header.tsx
index a322ddddc5b..33ac4a0dc66 100644
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@@ -7,6 +7,7 @@ import { AlertLabel } from "src/ui/components/alert-label";
 import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "src/ui/components/vertical-dropdown-menu";
 import { SummaryPopover } from "src/ui/components/summary-popover";
 import { InfoPopover } from "src/ui/components/info-popover";
+import { getDate } from "src/utils/date-utils";
 
 interface IEditorHeader {
   editor: Editor;
@@ -72,7 +73,7 @@ export const EditorHeader = (props: IEditorHeader) => {
             Icon={Archive}
             backgroundColor="bg-blue-500/20"
             textColor="text-blue-500"
-            label={`Archived at ${new Date(archivedAt).toLocaleString()}`}
+            label={`Archived at ${getDate(archivedAt)?.toLocaleString()}`}
           />
         )}
 
diff --git a/packages/editor/document-editor/src/ui/components/info-popover.tsx b/packages/editor/document-editor/src/ui/components/info-popover.tsx
index f78dd347372..16a3452a668 100644
--- a/packages/editor/document-editor/src/ui/components/info-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx
@@ -3,13 +3,15 @@ import { usePopper } from "react-popper";
 import { Calendar, History, Info } from "lucide-react";
 // types
 import { DocumentDetails } from "src/types/editor-types";
+//utils
+import { getDate } from "src/utils/date-utils";
 
 type Props = {
   documentDetails: DocumentDetails;
 };
 
 // function to render a Date in the format- 25 May 2023 at 2:53PM
-const renderDate = (date: Date): string => {
+const renderDate = (date: Date | undefined): string => {
   const options: Intl.DateTimeFormatOptions = {
     day: "numeric",
     month: "long",
@@ -52,14 +54,14 @@ export const InfoPopover: React.FC<Props> = (props) => {
             <h6 className="text-xs text-custom-text-400">Last updated on</h6>
             <h5 className="flex items-center gap-1 text-sm">
               <History className="h-3 w-3" />
-              {renderDate(new Date(documentDetails.last_updated_at))}
+              {renderDate(getDate(documentDetails?.last_updated_at))}
             </h5>
           </div>
           <div className="space-y-1.5">
             <h6 className="text-xs text-custom-text-400">Created on</h6>
             <h5 className="flex items-center gap-1 text-sm">
               <Calendar className="h-3 w-3" />
-              {renderDate(new Date(documentDetails.created_on))}
+              {renderDate(getDate(documentDetails?.created_on))}
             </h5>
           </div>
         </div>
diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
index 06b9e70ff2f..7c2717e807e 100644
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@@ -29,11 +29,13 @@ type IPageRenderer = {
   editorContentCustomClassNames?: string;
   hideDragHandle?: () => void;
   readonly: boolean;
+  tabIndex?: number;
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
   const {
     documentDetails,
+    tabIndex,
     editor,
     editorClassNames,
     editorContentCustomClassNames,
@@ -152,7 +154,7 @@ export const PageRenderer = (props: IPageRenderer) => {
   );
 
   return (
-    <div className="w-full pb-64 md:pl-7 pl-3 pt-5 page-renderer">
+    <div className="w-full h-full pb-20 pl-7 pt-5 page-renderer">
       {!readonly ? (
         <input
           onChange={(e) => handlePageTitleChange(e.target.value)}
@@ -169,7 +171,11 @@ export const PageRenderer = (props: IPageRenderer) => {
       )}
       <div className="flex relative h-full w-full flex-col pr-5 editor-renderer" onMouseOver={handleLinkHover}>
         <EditorContainer hideDragHandle={hideDragHandle} editor={editor} editorClassNames={editorClassNames}>
-          <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+          <EditorContentWrapper
+            tabIndex={tabIndex}
+            editor={editor}
+            editorContentCustomClassNames={editorContentCustomClassNames}
+          />
         </EditorContainer>
       </div>
       {isOpen && linkViewProps && coordinates && (
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index 6ad7cad835d..41056c6ad26 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -33,8 +33,9 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       <button
         type="button"
         ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
-          }`}
+        className={`grid h-7 w-7 place-items-center rounded ${
+          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+        }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >
         <List className="h-4 w-4" />
diff --git a/packages/editor/document-editor/src/ui/extensions/index.tsx b/packages/editor/document-editor/src/ui/extensions/index.tsx
index 2576d0d74e7..cedc3ed8098 100644
--- a/packages/editor/document-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/index.tsx
@@ -26,4 +26,3 @@ export const DocumentEditorExtensions = (
   }),
   IssueWidgetPlaceholder(),
 ];
-
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index 2491e04c7f4..eb54a204bde 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -47,6 +47,8 @@ interface IDocumentEditor {
   duplicationConfig?: IDuplicationConfig;
   pageLockConfig?: IPageLockConfig;
   pageArchiveConfig?: IPageArchiveConfig;
+
+  tabIndex?: number;
 }
 interface DocumentEditorProps extends IDocumentEditor {
   forwardedRef?: React.Ref<EditorHandle>;
@@ -55,6 +57,7 @@ interface DocumentEditorProps extends IDocumentEditor {
 interface EditorHandle {
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
+  setEditorValueAtCursorPosition: (content: string) => void;
 }
 
 const DocumentEditor = ({
@@ -78,6 +81,7 @@ const DocumentEditor = ({
   cancelUploadImage,
   onActionCompleteHandler,
   rerenderOnPropsChange,
+  tabIndex,
 }: IDocumentEditor) => {
   const { markings, updateMarkings } = useEditorMarkings();
   const [sidePeekVisible, setSidePeekVisible] = useState(true);
@@ -159,6 +163,7 @@ const DocumentEditor = ({
         </div>
         <div className="h-full w-full md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
           <PageRenderer
+            tabIndex={tabIndex}
             onActionCompleteHandler={onActionCompleteHandler}
             hideDragHandle={hideDragHandleOnMouseLeave}
             readonly={false}
diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx
index 7c49ffa8394..22099281ec8 100644
--- a/packages/editor/document-editor/src/ui/readonly/index.tsx
+++ b/packages/editor/document-editor/src/ui/readonly/index.tsx
@@ -28,6 +28,7 @@ interface IDocumentReadOnlyEditor {
     message: string;
     type: "success" | "error" | "warning" | "info";
   }) => void;
+  tabIndex?: number;
 }
 
 interface DocumentReadOnlyEditorProps extends IDocumentReadOnlyEditor {
@@ -51,6 +52,7 @@ const DocumentReadOnlyEditor = ({
   pageArchiveConfig,
   rerenderOnPropsChange,
   onActionCompleteHandler,
+  tabIndex,
 }: DocumentReadOnlyEditorProps) => {
   const router = useRouter();
   const [sidePeekVisible, setSidePeekVisible] = useState(true);
@@ -108,9 +110,10 @@ const DocumentReadOnlyEditor = ({
         </div>
         <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)] page-renderer">
           <PageRenderer
+            tabIndex={tabIndex}
             onActionCompleteHandler={onActionCompleteHandler}
             updatePageTitle={() => Promise.resolve()}
-            readonly={true}
+            readonly
             editor={editor}
             editorClassNames={editorClassNames}
             documentDetails={documentDetails}
diff --git a/packages/editor/document-editor/src/utils/date-utils.ts b/packages/editor/document-editor/src/utils/date-utils.ts
new file mode 100644
index 00000000000..63c20a974f2
--- /dev/null
+++ b/packages/editor/document-editor/src/utils/date-utils.ts
@@ -0,0 +1,26 @@
+function isNumber(value: any) {
+  return typeof value === "number";
+}
+
+/**
+ * This method returns a date from string of type yyyy-mm-dd
+ * This method is recommended to use instead of new Date() as this does not introduce any timezone offsets
+ * @param date
+ * @returns date or undefined
+ */
+export const getDate = (date: string | Date | undefined | null): Date | undefined => {
+  try {
+    if (!date || date === "") return;
+
+    if (typeof date !== "string" && !(date instanceof String)) return date;
+    const [yearString, monthString, dayString] = date.substring(0, 10).split("-");
+    const year = parseInt(yearString);
+    const month = parseInt(monthString);
+    const day = parseInt(dayString);
+    if (!isNumber(year) || !isNumber(month) || !isNumber(day)) return;
+
+    return new Date(year, month - 1, day);
+  } catch (e) {
+    return undefined;
+  }
+};
diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json
index 0bdd70824eb..711ab8a969a 100644
--- a/packages/editor/extensions/package.json
+++ b/packages/editor/extensions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-extensions",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Package that powers Plane's Editor with extensions",
   "private": true,
   "main": "./dist/index.mjs",
@@ -33,7 +33,6 @@
     "@tiptap/pm": "^2.1.13",
     "@tiptap/react": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
-    "eslint-config-next": "13.2.4",
     "lucide-react": "^0.294.0",
     "tippy.js": "^6.3.7"
   },
@@ -41,7 +40,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "8.36.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx
index 88e257cef6d..c52178b8186 100644
--- a/packages/editor/extensions/src/extensions/slash-commands.tsx
+++ b/packages/editor/extensions/src/extensions/slash-commands.tsx
@@ -85,7 +85,10 @@ const getSuggestionItems =
         searchTerms: ["p", "paragraph"],
         icon: <CaseSensitive className="h-3.5 w-3.5" />,
         command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+          if (range) {
+            editor.chain().focus().deleteRange(range).clearNodes().run();
+          }
+          editor.chain().focus().clearNodes().run();
         },
       },
       {
@@ -327,7 +330,7 @@ const renderItems = () => {
       // @ts-ignore
       popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
-        appendTo: () => document.querySelector("#editor-container"),
+        appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
         content: component.element,
         showOnCreate: true,
         interactive: true,
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
index e033f620a6c..4ac62e3783b 100644
--- a/packages/editor/lite-text-editor/package.json
+++ b/packages/editor/lite-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/lite-text-editor",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",
@@ -36,10 +36,9 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
-    "eslint-config-custom": "*",
     "tsconfig": "*",
     "tsup": "^7.2.0",
     "typescript": "4.9.5"
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index 57774ab5dc0..7986e0c6b3f 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -42,6 +42,7 @@ interface ILiteTextEditor {
   mentionHighlights?: string[];
   mentionSuggestions?: IMentionSuggestion[];
   submitButton?: React.ReactNode;
+  tabIndex?: number;
 }
 
 interface LiteTextEditorProps extends ILiteTextEditor {
@@ -74,6 +75,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
     mentionHighlights,
     mentionSuggestions,
     submitButton,
+    tabIndex,
   } = props;
 
   const editor = useEditor({
@@ -103,7 +105,11 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
         <div className="mt-4 w-full">
           <FixedMenu
             editor={editor}
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
index 66ce7905943..9f81ba5d138 100644
--- a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@@ -8,6 +8,7 @@ interface ICoreReadOnlyEditor {
   borderOnFocus?: boolean;
   customClassName?: string;
   mentionHighlights: string[];
+  tabIndex?: number;
 }
 
 interface EditorCoreProps extends ICoreReadOnlyEditor {
@@ -27,6 +28,7 @@ const LiteReadOnlyEditor = ({
   value,
   forwardedRef,
   mentionHighlights,
+  tabIndex,
 }: EditorCoreProps) => {
   const editor = useReadOnlyEditor({
     value,
@@ -45,7 +47,11 @@ const LiteReadOnlyEditor = ({
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
     </EditorContainer>
   );
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
index 0f3d0d8f70e..117cf5c41de 100644
--- a/packages/editor/rich-text-editor/package.json
+++ b/packages/editor/rich-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/rich-text-editor",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
@@ -39,7 +39,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
     "tailwind-config-custom": "*",
diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx
index 4bcb340fd80..366fa471f0e 100644
--- a/packages/editor/rich-text-editor/src/ui/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@@ -36,6 +36,7 @@ export type IRichTextEditor = {
   debouncedUpdatesEnabled?: boolean;
   mentionHighlights?: string[];
   mentionSuggestions?: IMentionSuggestion[];
+  tabIndex?: number;
 };
 
 export interface RichTextEditorProps extends IRichTextEditor {
@@ -45,6 +46,7 @@ export interface RichTextEditorProps extends IRichTextEditor {
 interface EditorHandle {
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
+  setEditorValueAtCursorPosition: (content: string) => void;
 }
 
 const RichTextEditor = ({
@@ -67,6 +69,7 @@ const RichTextEditor = ({
   mentionHighlights,
   rerenderOnPropsChange,
   mentionSuggestions,
+  tabIndex,
 }: RichTextEditorProps) => {
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
 
@@ -99,17 +102,21 @@ const RichTextEditor = ({
     customClassName,
   });
 
-  React.useEffect(() => {
-    if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
-  }, [editor, initialValue]);
-
+  // React.useEffect(() => {
+  //   if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
+  // }, [editor, initialValue]);
+  //
   if (!editor) return null;
 
   return (
     <EditorContainer hideDragHandle={hideDragHandleOnMouseLeave} editor={editor} editorClassNames={editorClassNames}>
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
     </EditorContainer>
   );
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
index 2e7dd25b844..2dbc86cec68 100644
--- 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
@@ -25,16 +25,20 @@ 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),
+    ...(props.editor.isActive("code")
+      ? []
+      : [
+          BoldItem(props.editor),
+          ItalicItem(props.editor),
+          UnderLineItem(props.editor),
+          StrikeThroughItem(props.editor),
+        ]),
     CodeItem(props.editor),
   ];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
-    shouldShow: ({ view, state, editor }) => {
+    shouldShow: ({ state, editor }) => {
       const { selection } = state;
 
       const { empty } = selection;
@@ -64,6 +68,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
 
   const [isSelecting, setIsSelecting] = useState(false);
+
   useEffect(() => {
     function handleMouseDown() {
       function handleMouseMove() {
@@ -108,20 +113,25 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
               }}
             />
           )}
-          <LinkSelector
-            editor={props.editor!!}
-            isOpen={isLinkSelectorOpen}
-            setIsOpen={() => {
-              setIsLinkSelectorOpen(!isLinkSelectorOpen);
-              setIsNodeSelectorOpen(false);
-            }}
-          />
+          {!props.editor.isActive("code") && (
+            <LinkSelector
+              editor={props.editor}
+              isOpen={isLinkSelectorOpen}
+              setIsOpen={() => {
+                setIsLinkSelectorOpen(!isLinkSelectorOpen);
+                setIsNodeSelectorOpen(false);
+              }}
+            />
+          )}
           <div className="flex">
             {items.map((item) => (
               <button
                 key={item.name}
                 type="button"
-                onClick={item.command}
+                onClick={(e) => {
+                  item.command();
+                  e.stopPropagation();
+                }}
                 className={cn(
                   "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
                   {
diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
index 5ae0c6f537e..e45cfb31790 100644
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx
@@ -33,8 +33,9 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
           "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
           { "bg-custom-background-100": isOpen }
         )}
-        onClick={() => {
+        onClick={(e) => {
           setIsOpen(!isOpen);
+          e.stopPropagation();
         }}
       >
         <p className="text-base">↗</p>
@@ -60,6 +61,9 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
             className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
@@ -67,9 +71,10 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             <button
               type="button"
               className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
-              onClick={() => {
+              onClick={(e) => {
                 unsetLinkEditor(editor);
                 setIsOpen(false);
+                e.stopPropagation();
               }}
             >
               <Trash className="h-4 w-4" />
@@ -78,8 +83,9 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             <button
               className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
               type="button"
-              onClick={() => {
+              onClick={(e) => {
                 onLinkSubmit();
+                e.stopPropagation();
               }}
             >
               <Check className="h-4 w-4" />
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
index 012a51a44f8..1bb8c38bd2b 100644
--- 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
@@ -26,7 +26,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
     {
       name: "Text",
       icon: TextIcon,
-      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      command: () => editor.chain().focus().clearNodes().run(),
       isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList"),
     },
     HeadingOneItem(editor),
@@ -47,7 +47,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
     <div className="relative h-full">
       <button
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={(e) => {
+          setIsOpen(!isOpen);
+          e.stopPropagation();
+        }}
         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>
@@ -60,9 +63,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
             <button
               key={item.name}
               type="button"
-              onClick={() => {
+              onClick={(e) => {
                 item.command();
                 setIsOpen(false);
+                e.stopPropagation();
               }}
               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",
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
index 9b0f43f5791..9aa3087315c 100644
--- a/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/read-only/index.tsx
@@ -9,6 +9,7 @@ interface IRichTextReadOnlyEditor {
   borderOnFocus?: boolean;
   customClassName?: string;
   mentionHighlights?: string[];
+  tabIndex?: number;
 }
 
 interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {
diff --git a/packages/eslint-config-custom/index.js b/packages/eslint-config-custom/index.js
index 82be6537692..9eae2e3f940 100644
--- a/packages/eslint-config-custom/index.js
+++ b/packages/eslint-config-custom/index.js
@@ -1,22 +1,43 @@
 module.exports = {
-  extends: ["next", "turbo", "prettier"],
+  extends: [
+    "next",
+    "turbo",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+  ],
   parser: "@typescript-eslint/parser",
-  plugins: ["react", "@typescript-eslint"],
+  parserOptions: {
+    ecmaVersion: 2021, // Or the ECMAScript version you are using
+    sourceType: "module", // Or 'script' if you're using CommonJS or other modules
+  },
+  plugins: ["react", "@typescript-eslint", "import"],
   settings: {
     next: {
       rootDir: ["web/", "space/", "packages/*/"],
     },
   },
   rules: {
-    "@next/next/no-html-link-for-pages": "off",
-    "react/jsx-key": "off",
     "prefer-const": "error",
     "no-irregular-whitespace": "error",
     "no-trailing-spaces": "error",
     "no-duplicate-imports": "error",
     "arrow-body-style": ["error", "as-needed"],
-    "react/self-closing-comp": ["error", { component: true, html: true }],
+    "@next/next/no-html-link-for-pages": "off",
     "@next/next/no-img-element": "off",
-    "@typescript-eslint/no-unused-vars": ["warn"],
+    "react/jsx-key": "error",
+    "react/self-closing-comp": ["error", { component: true, html: true }],
+    "react/jsx-boolean-value": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-useless-empty-export": "error",
+    "@typescript-eslint/prefer-ts-expect-error": "error",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: ["function", "variable"],
+        format: ["camelCase", "snake_case", "UPPER_CASE", "PascalCase"],
+      },
+    ],
   },
 };
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 2fee408c9bc..5a5216764da 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,21 +1,19 @@
 {
   "name": "eslint-config-custom",
   "private": true,
-  "version": "0.16.0",
+  "version": "0.17.0",
   "main": "index.js",
   "license": "MIT",
+  "devDependencies": {},
   "dependencies": {
-    "eslint": "^7.23.0",
-    "eslint-config-next": "13.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-turbo": "latest",
-    "eslint-plugin-react": "7.31.8"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "typescript": "^4.7.4"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^1.12.4",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.33.2",
+    "typescript": "^5.3.3"
   }
 }
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
index d7e807b91f3..8fc1aa599ad 100644
--- a/packages/tailwind-config-custom/package.json
+++ b/packages/tailwind-config-custom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 3465b819671..5d767e84fc8 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -198,6 +198,31 @@ module.exports = {
             300: convertToRGB("--color-onboarding-border-300"),
           },
         },
+        toast: {
+          text: {
+            success: convertToRGB("--color-toast-success-text"),
+            error: convertToRGB("--color-toast-error-text"),
+            warning: convertToRGB("--color-toast-warning-text"),
+            info: convertToRGB("--color-toast-info-text"),
+            loading: convertToRGB("--color-toast-loading-text"),
+            secondary: convertToRGB("--color-toast-secondary-text"),
+            tertiary: convertToRGB("--color-toast-tertiary-text"),
+          },
+          background: {
+            success: convertToRGB("--color-toast-success-background"),
+            error: convertToRGB("--color-toast-error-background"),
+            warning: convertToRGB("--color-toast-warning-background"),
+            info: convertToRGB("--color-toast-info-background"),
+            loading: convertToRGB("--color-toast-loading-background"),
+          },
+          border: {
+            success: convertToRGB("--color-toast-success-border"),
+            error: convertToRGB("--color-toast-error-border"),
+            warning: convertToRGB("--color-toast-warning-border"),
+            info: convertToRGB("--color-toast-info-border"),
+            loading: convertToRGB("--color-toast-loading-border"),
+          },
+        },
       },
       keyframes: {
         leftToaster: {
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index e0829e87be1..30d9d9f736f 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": true,
   "files": [
     "base.json",
diff --git a/packages/types/package.json b/packages/types/package.json
index 9c993884533..c96bc9f5929 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": true,
   "main": "./src/index.d.ts"
 }
diff --git a/packages/types/src/cycles.d.ts b/packages/types/src/cycle/cycle.d.ts
similarity index 90%
rename from packages/types/src/cycles.d.ts
rename to packages/types/src/cycle/cycle.d.ts
index e7ec66ae212..30724706b4a 100644
--- a/packages/types/src/cycles.d.ts
+++ b/packages/types/src/cycle/cycle.d.ts
@@ -1,18 +1,7 @@
-import type {
-  IUser,
-  TIssue,
-  IProjectLite,
-  IWorkspaceLite,
-  IIssueFilterOptions,
-  IUserLite,
-} from "@plane/types";
-
-export type TCycleView = "all" | "active" | "upcoming" | "completed" | "draft";
+import type { TIssue, IIssueFilterOptions } from "@plane/types";
 
 export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";
 
-export type TCycleLayout = "list" | "board" | "gantt";
-
 export interface ICycle {
   backlog_issues: number;
   cancelled_issues: number;
@@ -37,10 +26,12 @@ export interface ICycle {
   sort_order: number;
   start_date: string | null;
   started_issues: number;
+  sub_issues: number;
   total_issues: number;
   unstarted_issues: number;
   updated_at: Date;
   updated_by: string;
+  archived_at: string | null;
   assignee_ids: string[];
   view_props: {
     filters: IIssueFilterOptions;
diff --git a/packages/types/src/cycle/cycle_filters.d.ts b/packages/types/src/cycle/cycle_filters.d.ts
new file mode 100644
index 00000000000..38f8a7549b3
--- /dev/null
+++ b/packages/types/src/cycle/cycle_filters.d.ts
@@ -0,0 +1,24 @@
+export type TCycleTabOptions = "active" | "all";
+
+export type TCycleLayoutOptions = "list" | "board" | "gantt";
+
+export type TCycleDisplayFilters = {
+  active_tab?: TCycleTabOptions;
+  layout?: TCycleLayoutOptions;
+};
+
+export type TCycleFilters = {
+  end_date?: string[] | null;
+  start_date?: string[] | null;
+  status?: string[] | null;
+};
+
+export type TCycleFiltersByState = {
+  default: TCycleFilters;
+  archived: TCycleFilters;
+};
+
+export type TCycleStoredFilters = {
+  display_filters?: TCycleDisplayFilters;
+  filters?: TCycleFilters;
+};
diff --git a/packages/types/src/cycle/index.ts b/packages/types/src/cycle/index.ts
new file mode 100644
index 00000000000..d5f4ce5b056
--- /dev/null
+++ b/packages/types/src/cycle/index.ts
@@ -0,0 +1,2 @@
+export * from "./cycle_filters";
+export * from "./cycle";
diff --git a/packages/types/src/dashboard.d.ts b/packages/types/src/dashboard.ts
similarity index 82%
rename from packages/types/src/dashboard.d.ts
rename to packages/types/src/dashboard.ts
index 407b5cd794e..be7d7b3be70 100644
--- a/packages/types/src/dashboard.d.ts
+++ b/packages/types/src/dashboard.ts
@@ -3,6 +3,15 @@ import { TIssue } from "./issues/issue";
 import { TIssueRelationTypes } from "./issues/issue_relation";
 import { TStateGroups } from "./state";
 
+enum EDurationFilters {
+  NONE = "none",
+  TODAY = "today",
+  THIS_WEEK = "this_week",
+  THIS_MONTH = "this_month",
+  THIS_YEAR = "this_year",
+  CUSTOM = "custom",
+}
+
 export type TWidgetKeys =
   | "overview_stats"
   | "assigned_issues"
@@ -15,30 +24,27 @@ export type TWidgetKeys =
 
 export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
 
-export type TDurationFilterOptions =
-  | "none"
-  | "today"
-  | "this_week"
-  | "this_month"
-  | "this_year";
-
 // widget filters
 export type TAssignedIssuesWidgetFilters = {
-  duration?: TDurationFilterOptions;
+  custom_dates?: string[];
+  duration?: EDurationFilters;
   tab?: TIssuesListTypes;
 };
 
 export type TCreatedIssuesWidgetFilters = {
-  duration?: TDurationFilterOptions;
+  custom_dates?: string[];
+  duration?: EDurationFilters;
   tab?: TIssuesListTypes;
 };
 
 export type TIssuesByStateGroupsWidgetFilters = {
-  duration?: TDurationFilterOptions;
+  duration?: EDurationFilters;
+  custom_dates?: string[];
 };
 
 export type TIssuesByPriorityWidgetFilters = {
-  duration?: TDurationFilterOptions;
+  custom_dates?: string[];
+  duration?: EDurationFilters;
 };
 
 export type TWidgetFiltersFormData =
@@ -97,6 +103,12 @@ export type TWidgetStatsRequestParams =
   | {
       target_date: string;
       widget_key: "issues_by_priority";
+    }
+  | {
+      cursor: string;
+      per_page: number;
+      search?: string;
+      widget_key: "recent_collaborators";
     };
 
 export type TWidgetIssue = TIssue & {
@@ -141,8 +153,17 @@ export type TRecentActivityWidgetResponse = IIssueActivity;
 export type TRecentProjectsWidgetResponse = string[];
 
 export type TRecentCollaboratorsWidgetResponse = {
-  active_issue_count: number;
-  user_id: string;
+  count: number;
+  extra_stats: Object | null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: {
+    active_issue_count: number;
+    user_id: string;
+  }[];
+  total_pages: number;
 };
 
 export type TWidgetStatsResponse =
@@ -153,7 +174,7 @@ export type TWidgetStatsResponse =
   | TCreatedIssuesWidgetResponse
   | TRecentActivityWidgetResponse[]
   | TRecentProjectsWidgetResponse
-  | TRecentCollaboratorsWidgetResponse[];
+  | TRecentCollaboratorsWidgetResponse;
 
 // dashboard
 export type TDashboard = {
diff --git a/packages/types/src/enums.ts b/packages/types/src/enums.ts
new file mode 100644
index 00000000000..259f13e9bc2
--- /dev/null
+++ b/packages/types/src/enums.ts
@@ -0,0 +1,6 @@
+export enum EUserProjectRoles {
+  GUEST = 5,
+  VIEWER = 10,
+  MEMBER = 15,
+  ADMIN = 20,
+}
diff --git a/packages/types/src/importer/index.d.ts b/packages/types/src/importer/index.d.ts
index 877c0719690..271d685b641 100644
--- a/packages/types/src/importer/index.d.ts
+++ b/packages/types/src/importer/index.d.ts
@@ -1,7 +1,7 @@
 export * from "./github-importer";
 export * from "./jira-importer";
 
-import { IProjectLite } from "../projects";
+import { IProjectLite } from "../project";
 // types
 import { IUserLite } from "../users";
 
diff --git a/packages/types/src/inbox.d.ts b/packages/types/src/inbox/inbox-types.d.ts
similarity index 65%
rename from packages/types/src/inbox.d.ts
rename to packages/types/src/inbox/inbox-types.d.ts
index 4d666ae8356..c3ec8461ee4 100644
--- a/packages/types/src/inbox.d.ts
+++ b/packages/types/src/inbox/inbox-types.d.ts
@@ -1,5 +1,5 @@
-import { TIssue } from "./issues/base";
-import type { IProjectLite } from "./projects";
+import { TIssue } from "../issues/base";
+import type { IProjectLite } from "../project";
 
 export type TInboxIssueExtended = {
   completed_at: string | null;
@@ -33,34 +33,6 @@ export interface IInbox {
   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;
diff --git a/packages/types/src/inbox/root.d.ts b/packages/types/src/inbox/root.d.ts
index 2f10c088def..6fd21a4fe9e 100644
--- a/packages/types/src/inbox/root.d.ts
+++ b/packages/types/src/inbox/root.d.ts
@@ -1,2 +1,3 @@
-export * from "./inbox";
 export * from "./inbox-issue";
+export * from "./inbox-types";
+export * from "./inbox";
diff --git a/packages/types/src/index.d.ts b/packages/types/src/index.d.ts
index 6e8ded94296..48d0c14483c 100644
--- a/packages/types/src/index.d.ts
+++ b/packages/types/src/index.d.ts
@@ -1,12 +1,11 @@
 export * from "./users";
 export * from "./workspace";
-export * from "./cycles";
+export * from "./cycle";
 export * from "./dashboard";
-export * from "./projects";
+export * from "./project";
 export * from "./state";
-export * from "./invitation";
 export * from "./issues";
-export * from "./modules";
+export * from "./module";
 export * from "./views";
 export * from "./integration";
 export * from "./pages";
@@ -15,7 +14,6 @@ export * from "./estimate";
 export * from "./importer";
 
 // FIXME: Remove this after development and the refactor/mobx-store-issue branch is stable
-export * from "./inbox";
 export * from "./inbox/root";
 
 export * from "./analytics";
@@ -31,11 +29,3 @@ export * from "./auth";
 export * from "./api_token";
 export * from "./instance";
 export * from "./app";
-
-export type NestedKeyOf<ObjectType extends object> = {
-  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
-    ? ObjectType[Key] extends { pop: any; push: any }
-      ? `${Key}`
-      : `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`
-    : `${Key}`;
-}[keyof ObjectType & (string | number)];
diff --git a/packages/types/src/issues/issue_reaction.d.ts b/packages/types/src/issues/issue_reaction.d.ts
index a4eaee0a876..7fba8cd9c5b 100644
--- a/packages/types/src/issues/issue_reaction.d.ts
+++ b/packages/types/src/issues/issue_reaction.d.ts
@@ -1,7 +1,7 @@
 export type TIssueReaction = {
-  actor_id: string;
+  actor: string;
   id: string;
-  issue_id: string;
+  issue: string;
   reaction: string;
 };
 
diff --git a/packages/types/src/module/index.ts b/packages/types/src/module/index.ts
new file mode 100644
index 00000000000..783634662b8
--- /dev/null
+++ b/packages/types/src/module/index.ts
@@ -0,0 +1,2 @@
+export * from "./module_filters";
+export * from "./modules";
diff --git a/packages/types/src/module/module_filters.d.ts b/packages/types/src/module/module_filters.d.ts
new file mode 100644
index 00000000000..297c8046cdc
--- /dev/null
+++ b/packages/types/src/module/module_filters.d.ts
@@ -0,0 +1,37 @@
+export type TModuleOrderByOptions =
+  | "name"
+  | "-name"
+  | "progress"
+  | "-progress"
+  | "issues_length"
+  | "-issues_length"
+  | "target_date"
+  | "-target_date"
+  | "created_at"
+  | "-created_at";
+
+export type TModuleLayoutOptions = "list" | "board" | "gantt";
+
+export type TModuleDisplayFilters = {
+  favorites?: boolean;
+  layout?: TModuleLayoutOptions;
+  order_by?: TModuleOrderByOptions;
+};
+
+export type TModuleFilters = {
+  lead?: string[] | null;
+  members?: string[] | null;
+  start_date?: string[] | null;
+  status?: string[] | null;
+  target_date?: string[] | null;
+};
+
+export type TModuleFiltersByState = {
+  default: TModuleFilters;
+  archived: TModuleFilters;
+};
+
+export type TModuleStoredFilters = {
+  display_filters?: TModuleDisplayFilters;
+  filters?: TModuleFilters;
+};
diff --git a/packages/types/src/modules.d.ts b/packages/types/src/module/modules.d.ts
similarity index 71%
rename from packages/types/src/modules.d.ts
rename to packages/types/src/module/modules.d.ts
index fcf2d86a21a..7ba2c3b4181 100644
--- a/packages/types/src/modules.d.ts
+++ b/packages/types/src/module/modules.d.ts
@@ -1,16 +1,12 @@
-import type {
-  IUser,
-  IUserLite,
-  TIssue,
-  IProject,
-  IWorkspace,
-  IWorkspaceLite,
-  IProjectLite,
-  IIssueFilterOptions,
-  ILinkDetails,
-} from "@plane/types";
+import type { TIssue, IIssueFilterOptions, ILinkDetails } from "@plane/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;
@@ -34,6 +30,7 @@ export interface IModule {
   name: string;
   project_id: string;
   sort_order: number;
+  sub_issues: number;
   start_date: string | null;
   started_issues: number;
   status: TModuleStatus;
@@ -42,6 +39,7 @@ export interface IModule {
   unstarted_issues: number;
   updated_at: Date;
   updated_by: string;
+  archived_at: string | null;
   view_props: {
     filters: IIssueFilterOptions;
   };
@@ -68,6 +66,10 @@ 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 = (TIssue & { actionType: "edit" | "delete" | "create" }) | undefined;
+export type SelectIssue =
+  | (TIssue & { actionType: "edit" | "delete" | "create" })
+  | undefined;
diff --git a/packages/types/src/pages.d.ts b/packages/types/src/pages.d.ts
index 29552b94cf6..6e1e78be524 100644
--- a/packages/types/src/pages.d.ts
+++ b/packages/types/src/pages.d.ts
@@ -1,12 +1,17 @@
 // types
-import { TIssue, IIssueLabel, IWorkspaceLite, IProjectLite } from "@plane/types";
+import {
+  TIssue,
+  IIssueLabel,
+  IWorkspaceLite,
+  IProjectLite,
+} from "@plane/types";
 
 export interface IPage {
   access: number;
   archived_at: string | null;
   blocks: IPageBlock[];
   color: string;
-  created_at: Date;
+  created_at: string | null;
   created_by: string;
   description: string;
   description_html: string;
@@ -20,7 +25,7 @@ export interface IPage {
   owned_by: string;
   project: string;
   project_detail: IProjectLite;
-  updated_at: Date;
+  updated_at: string | null;
   updated_by: string;
   workspace: string;
   workspace_detail: IWorkspaceLite;
diff --git a/packages/types/src/project/index.ts b/packages/types/src/project/index.ts
new file mode 100644
index 00000000000..ef7308bf7da
--- /dev/null
+++ b/packages/types/src/project/index.ts
@@ -0,0 +1,2 @@
+export * from "./project_filters";
+export * from "./projects";
diff --git a/packages/types/src/project/project_filters.d.ts b/packages/types/src/project/project_filters.d.ts
new file mode 100644
index 00000000000..77da7365fb8
--- /dev/null
+++ b/packages/types/src/project/project_filters.d.ts
@@ -0,0 +1,30 @@
+export type TProjectOrderByOptions =
+  | "sort_order"
+  | "name"
+  | "-name"
+  | "created_at"
+  | "-created_at"
+  | "members_length"
+  | "-members_length";
+
+export type TProjectDisplayFilters = {
+  my_projects?: boolean;
+  archived_projects?: boolean;
+  order_by?: TProjectOrderByOptions;
+};
+
+export type TProjectAppliedDisplayFilterKeys =
+  | "my_projects"
+  | "archived_projects";
+
+export type TProjectFilters = {
+  access?: string[] | null;
+  lead?: string[] | null;
+  members?: string[] | null;
+  created_at?: string[] | null;
+};
+
+export type TProjectStoredFilters = {
+  display_filters?: TProjectDisplayFilters;
+  filters?: TProjectFilters;
+};
diff --git a/packages/types/src/projects.d.ts b/packages/types/src/project/projects.d.ts
similarity index 83%
rename from packages/types/src/projects.d.ts
rename to packages/types/src/project/projects.d.ts
index 86b35248289..157ecb16e5e 100644
--- a/packages/types/src/projects.d.ts
+++ b/packages/types/src/project/projects.d.ts
@@ -1,14 +1,31 @@
-import { EUserProjectRoles } from "constants/project";
+import { EUserProjectRoles } from "@/constants/project";
 import type {
+  IProjectViewProps,
   IUser,
   IUserLite,
+  IUserMemberLite,
   IWorkspace,
   IWorkspaceLite,
   TStateGroups,
-} from ".";
+} from "..";
+
+export type TProjectLogoProps = {
+  in_use: "emoji" | "icon";
+  emoji?: {
+    value?: string;
+    url?: string;
+  };
+  icon?: {
+    name?: string;
+    color?: string;
+  };
+};
 
 export interface IProject {
   archive_in: number;
+  archived_at: string | null;
+  archived_issues: number;
+  archived_sub_issues: number;
   close_in: number;
   created_at: Date;
   created_by: string;
@@ -21,31 +38,24 @@ export interface IProject {
   default_assignee: IUser | string | null;
   default_state: string | null;
   description: string;
-  emoji: string | null;
-  emoji_and_icon:
-    | string
-    | {
-        name: string;
-        color: string;
-      }
-    | null;
+  draft_issues: number;
+  draft_sub_issues: number;
   estimate: string | null;
-  icon_prop: {
-    name: string;
-    color: string;
-  } | null;
   id: string;
   identifier: string;
   is_deployed: boolean;
   is_favorite: boolean;
   is_member: boolean;
+  logo_props: TProjectLogoProps;
   member_role: EUserProjectRoles | null;
   members: IProjectMemberLite[];
   name: string;
   network: number;
   project_lead: IUserLite | string | null;
   sort_order: number | null;
+  sub_issues: number;
   total_cycles: number;
+  total_issues: number;
   total_members: number;
   total_modules: number;
   updated_at: Date;
@@ -127,6 +137,7 @@ export type TProjectIssuesSearchParams = {
   sub_issue?: boolean;
   issue_id?: string;
   workspace_search: boolean;
+  target_date?: string;
 };
 
 export interface ISearchIssueResponse {
diff --git a/packages/types/src/state.d.ts b/packages/types/src/state.d.ts
index 120b216da25..7df658a88b8 100644
--- a/packages/types/src/state.d.ts
+++ b/packages/types/src/state.d.ts
@@ -1,6 +1,11 @@
 import { IProject, IProjectLite, IWorkspaceLite } from "@plane/types";
 
-export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
 
 export interface IState {
   readonly id: string;
diff --git a/packages/types/src/users.d.ts b/packages/types/src/users.d.ts
index 81c8abcd5f0..5920f0b4983 100644
--- a/packages/types/src/users.d.ts
+++ b/packages/types/src/users.d.ts
@@ -1,5 +1,9 @@
-import { EUserProjectRoles } from "constants/project";
-import { IIssueActivity, IIssueLite, TStateGroups } from ".";
+import {
+  IIssueActivity,
+  TIssuePriorities,
+  TStateGroups,
+  EUserProjectRoles,
+} from ".";
 
 export interface IUser {
   id: string;
@@ -17,7 +21,6 @@ export interface IUser {
   is_onboarded: boolean;
   is_password_autoset: boolean;
   is_tour_completed: boolean;
-  is_password_autoset: boolean;
   mobile_number: string | null;
   role: string | null;
   onboarding_step: {
@@ -80,7 +83,7 @@ export interface IUserActivity {
 }
 
 export interface IUserPriorityDistribution {
-  priority: string;
+  priority: TIssuePriorities;
   priority_count: number;
 }
 
@@ -89,21 +92,6 @@ export interface IUserStateDistribution {
   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;
@@ -144,11 +132,7 @@ export interface IUserProfileProjectSegregation {
     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: {
diff --git a/packages/types/src/views.d.ts b/packages/types/src/views.d.ts
index db30554a847..f9f7ee3852f 100644
--- a/packages/types/src/views.d.ts
+++ b/packages/types/src/views.d.ts
@@ -1,4 +1,8 @@
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "./view-props";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+} from "./view-props";
 
 export interface IProjectView {
   id: string;
diff --git a/packages/types/src/workspace.d.ts b/packages/types/src/workspace.d.ts
index 2d7e94d959b..ceaa53d025b 100644
--- a/packages/types/src/workspace.d.ts
+++ b/packages/types/src/workspace.d.ts
@@ -1,4 +1,4 @@
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 import type {
   IProjectMember,
   IUser,
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
deleted file mode 100644
index c8df607506c..00000000000
--- a/packages/ui/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 756a0f2f1be..c65789aa777 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.16.0",
+  "version": "0.17.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,6 @@
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react --minify",
     "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"
   },
   "dependencies": {
@@ -23,9 +22,11 @@
     "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.11.8",
     "clsx": "^2.0.0",
+    "emoji-picker-react": "^4.5.16",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
+    "sonner": "^1.4.2",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 88e6fd8d302..b2e1beb4885 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -122,14 +122,14 @@ export const badgeStyling: IBadgeStyling = {
 };
 
 export const getBadgeStyling = (variant: TBadgeVariant, size: TBadgeSizes, disabled: boolean = false): string => {
-  let _variant: string = ``;
+  let tempVariant: string = ``;
   const currentVariant = badgeStyling[variant];
 
-  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
 
-  let _size: string = ``;
-  if (size) _size = badgeSizeStyling[size];
-  return `${_variant} ${_size}`;
+  let tempSize: string = ``;
+  if (size) tempSize = badgeSizeStyling[size];
+  return `${tempVariant} ${tempSize}`;
 };
 
 export const getIconStyling = (size: TBadgeSizes): string => {
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 9a3b69bb8c2..253e8308e0e 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -29,13 +29,10 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
             <React.Fragment key={index}>
               {index > 0 && !isSmallScreen && (
                 <div className="flex items-center gap-2.5">
-                  <ChevronRight
-                    className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
-                    aria-hidden="true"
-                  />
+                  <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
                 </div>
               )}
-              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? 'hidden sm:flex' : 'flex'}`}>
+              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? "hidden sm:flex" : "flex"}`}>
                 {child}
               </div>
             </React.Fragment>
@@ -46,7 +43,11 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
       {isSmallScreen && childrenArray.length > 1 && (
         <>
           <div className="flex items-center gap-2.5">
-            {onBack && <span onClick={onBack} className="text-custom-text-200">...</span>}
+            {onBack && (
+              <span onClick={onBack} className="text-custom-text-200">
+                ...
+              </span>
+            )}
             <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>
@@ -70,4 +71,4 @@ const BreadcrumbItem: React.FC<Props> = (props) => {
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
 
-export { Breadcrumbs, BreadcrumbItem };
\ No newline at end of file
+export { Breadcrumbs, BreadcrumbItem };
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index 9f7163d740c..13a4e804024 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -100,16 +100,16 @@ export const buttonStyling: IButtonStyling = {
 };
 
 export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
-  let _variant: string = ``;
+  let tempVariant: string = ``;
   const currentVariant = buttonStyling[variant];
 
-  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
     currentVariant.pressed
   }`;
 
-  let _size: string = ``;
-  if (size) _size = buttonSizeStyling[size];
-  return `${_variant} ${_size}`;
+  let tempSize: string = ``;
+  if (size) tempSize = buttonSizeStyling[size];
+  return `${tempVariant} ${tempSize}`;
 };
 
 export const getIconStyling = (size: TButtonSizes): string => {
diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx
index ee4b66d7b88..328dae4fa86 100644
--- a/packages/ui/src/control-link/control-link.tsx
+++ b/packages/ui/src/control-link/control-link.tsx
@@ -12,7 +12,7 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
-  const _onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE;
     if (!clickCondition) {
       event.preventDefault();
@@ -23,7 +23,7 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   if (disabled) return <>{children}</>;
 
   return (
-    <a href={href} target={target} onClick={_onClick} {...rest}>
+    <a href={href} target={target} onClick={handleOnClick} {...rest}>
       {children}
     </a>
   );
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index d1623dddfdb..549c83fe7fa 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -114,7 +114,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation();
-                  openDropdown();
+                  isOpen ? closeDropdown() : openDropdown();
                   if (menuButtonOnClick) menuButtonOnClick();
                 }}
                 className={customButtonClassName}
@@ -131,8 +131,9 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     ref={setReferenceElement}
                     type="button"
                     onClick={(e) => {
+                      e.preventDefault();
                       e.stopPropagation();
-                      openDropdown();
+                      isOpen ? closeDropdown() : openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
                     disabled={disabled}
@@ -157,8 +158,9 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                         : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
                     onClick={(e) => {
+                      e.preventDefault();
                       e.stopPropagation();
-                      openDropdown();
+                      isOpen ? closeDropdown() : openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
                     tabIndex={customButtonTabIndex}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 37608ea8db6..2d669cc05e8 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -91,7 +91,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
         )}
       </>
       {isOpen && (
-        <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
+        <Listbox.Options className="fixed z-20" onClick={() => closeDropdown()} static>
           <div
             className={cn(
               "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
diff --git a/packages/ui/src/emoji/emoji-icon-picker.tsx b/packages/ui/src/emoji/emoji-icon-picker.tsx
new file mode 100644
index 00000000000..5bfcdbe1722
--- /dev/null
+++ b/packages/ui/src/emoji/emoji-icon-picker.tsx
@@ -0,0 +1,169 @@
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import EmojiPicker, { EmojiClickData, Theme } from "emoji-picker-react";
+import { Popover, Tab } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
+// components
+import { IconsList } from "./icons-list";
+// helpers
+import { cn } from "../../helpers";
+
+export enum EmojiIconPickerTypes {
+  EMOJI = "emoji",
+  ICON = "icon",
+}
+
+type TChangeHandlerProps =
+  | {
+      type: EmojiIconPickerTypes.EMOJI;
+      value: EmojiClickData;
+    }
+  | {
+      type: EmojiIconPickerTypes.ICON;
+      value: {
+        name: string;
+        color: string;
+      };
+    };
+
+export type TCustomEmojiPicker = {
+  buttonClassName?: string;
+  className?: string;
+  closeOnSelect?: boolean;
+  defaultIconColor?: string;
+  defaultOpen?: EmojiIconPickerTypes;
+  disabled?: boolean;
+  dropdownClassName?: string;
+  label: React.ReactNode;
+  onChange: (value: TChangeHandlerProps) => void;
+  placement?: Placement;
+  searchPlaceholder?: string;
+  theme?: Theme;
+};
+
+const TABS_LIST = [
+  {
+    key: EmojiIconPickerTypes.EMOJI,
+    title: "Emojis",
+  },
+  {
+    key: EmojiIconPickerTypes.ICON,
+    title: "Icons",
+  },
+];
+
+export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
+  const {
+    buttonClassName,
+    className,
+    closeOnSelect = true,
+    defaultIconColor = "#5f5f5f",
+    defaultOpen = EmojiIconPickerTypes.EMOJI,
+    disabled = false,
+    dropdownClassName,
+    label,
+    onChange,
+    placement = "bottom-start",
+    searchPlaceholder = "Search",
+    theme,
+  } = props;
+  // refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 20,
+        },
+      },
+    ],
+  });
+
+  return (
+    <Popover as="div" className={cn("relative", className)}>
+      {({ close }) => (
+        <>
+          <Popover.Button as={React.Fragment}>
+            <button
+              type="button"
+              ref={setReferenceElement}
+              className={cn("outline-none", buttonClassName)}
+              disabled={disabled}
+            >
+              {label}
+            </button>
+          </Popover.Button>
+          <Popover.Panel className="fixed z-10">
+            <div
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+              className={cn(
+                "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
+                dropdownClassName
+              )}
+            >
+              <Tab.Group
+                as="div"
+                className="h-full w-full flex flex-col overflow-hidden"
+                defaultIndex={TABS_LIST.findIndex((tab) => tab.key === defaultOpen)}
+              >
+                <Tab.List as="div" className="grid grid-cols-2 gap-1 p-2">
+                  {TABS_LIST.map((tab) => (
+                    <Tab
+                      key={tab.key}
+                      className={({ selected }) =>
+                        cn("py-1 text-sm rounded border border-custom-border-200", {
+                          "bg-custom-background-80": selected,
+                          "hover:bg-custom-background-90 focus:bg-custom-background-90": !selected,
+                        })
+                      }
+                    >
+                      {tab.title}
+                    </Tab>
+                  ))}
+                </Tab.List>
+                <Tab.Panels as="div" className="h-full w-full overflow-y-auto">
+                  <Tab.Panel>
+                    <EmojiPicker
+                      onEmojiClick={(val) => {
+                        onChange({
+                          type: EmojiIconPickerTypes.EMOJI,
+                          value: val,
+                        });
+                        if (closeOnSelect) close();
+                      }}
+                      height="20rem"
+                      width="100%"
+                      theme={theme}
+                      searchPlaceholder={searchPlaceholder}
+                      previewConfig={{
+                        showPreview: false,
+                      }}
+                    />
+                  </Tab.Panel>
+                  <Tab.Panel className="h-80 w-full">
+                    <IconsList
+                      defaultColor={defaultIconColor}
+                      onChange={(val) => {
+                        onChange({
+                          type: EmojiIconPickerTypes.ICON,
+                          value: val,
+                        });
+                        if (closeOnSelect) close();
+                      }}
+                    />
+                  </Tab.Panel>
+                </Tab.Panels>
+              </Tab.Group>
+            </div>
+          </Popover.Panel>
+        </>
+      )}
+    </Popover>
+  );
+};
diff --git a/packages/ui/src/emoji/icons-list.tsx b/packages/ui/src/emoji/icons-list.tsx
new file mode 100644
index 00000000000..f55da881b47
--- /dev/null
+++ b/packages/ui/src/emoji/icons-list.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from "react";
+// components
+import { Input } from "../form-fields";
+// helpers
+import { cn } from "../../helpers";
+// constants
+import { MATERIAL_ICONS_LIST } from "./icons";
+
+type TIconsListProps = {
+  defaultColor: string;
+  onChange: (val: { name: string; color: string }) => void;
+};
+
+const DEFAULT_COLORS = ["#ff6b00", "#8cc1ff", "#fcbe1d", "#18904f", "#adf672", "#05c3ff", "#5f5f5f"];
+
+export const IconsList: React.FC<TIconsListProps> = (props) => {
+  const { defaultColor, onChange } = props;
+  // states
+  const [activeColor, setActiveColor] = useState(defaultColor);
+  const [showHexInput, setShowHexInput] = useState(false);
+  const [hexValue, setHexValue] = useState("");
+
+  useEffect(() => {
+    if (DEFAULT_COLORS.includes(defaultColor.toLowerCase())) setShowHexInput(false);
+    else {
+      setHexValue(defaultColor.slice(1, 7));
+      setShowHexInput(true);
+    }
+  }, [defaultColor]);
+
+  return (
+    <>
+      <div className="grid grid-cols-8 gap-2 items-center justify-items-center px-2.5 h-9">
+        {showHexInput ? (
+          <div className="col-span-7 flex items-center gap-1 justify-self-stretch ml-2">
+            <span
+              className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
+              style={{
+                backgroundColor: `#${hexValue}`,
+              }}
+            />
+            <span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
+            <span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
+            <Input
+              type="text"
+              value={hexValue}
+              onChange={(e) => {
+                const value = e.target.value;
+                setHexValue(value);
+                if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(`#${value}`);
+              }}
+              className="flex-grow pl-0 text-xs text-custom-text-200"
+              mode="true-transparent"
+              autoFocus
+            />
+          </div>
+        ) : (
+          DEFAULT_COLORS.map((curCol) => (
+            <button
+              key={curCol}
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                setActiveColor(curCol);
+                setHexValue(curCol.slice(1, 7));
+              }}
+            >
+              <span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
+            </button>
+          ))
+        )}
+        <button
+          type="button"
+          className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
+            "border-custom-border-400": !showHexInput,
+          })}
+          onClick={() => {
+            setShowHexInput((prevData) => !prevData);
+            setHexValue(activeColor.slice(1, 7));
+          }}
+        >
+          {showHexInput ? (
+            <span className="conical-gradient h-4 w-4 rounded-full" />
+          ) : (
+            <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+          )}
+        </button>
+      </div>
+      <div className="grid grid-cols-8 gap-2 px-2.5 justify-items-center mt-2">
+        {MATERIAL_ICONS_LIST.map((icon) => (
+          <button
+            key={icon.name}
+            type="button"
+            className="h-6 w-6 select-none text-lg grid place-items-center rounded hover:bg-custom-background-80"
+            onClick={() => {
+              onChange({
+                name: icon.name,
+                color: activeColor,
+              });
+            }}
+          >
+            <span style={{ color: activeColor }} className="material-symbols-rounded text-base">
+              {icon.name}
+            </span>
+          </button>
+        ))}
+      </div>
+    </>
+  );
+};
diff --git a/packages/ui/src/emoji/icons.ts b/packages/ui/src/emoji/icons.ts
new file mode 100644
index 00000000000..72aacf18bb7
--- /dev/null
+++ b/packages/ui/src/emoji/icons.ts
@@ -0,0 +1,605 @@
+export const MATERIAL_ICONS_LIST = [
+  {
+    name: "search",
+  },
+  {
+    name: "home",
+  },
+  {
+    name: "menu",
+  },
+  {
+    name: "close",
+  },
+  {
+    name: "settings",
+  },
+  {
+    name: "done",
+  },
+  {
+    name: "check_circle",
+  },
+  {
+    name: "favorite",
+  },
+  {
+    name: "add",
+  },
+  {
+    name: "delete",
+  },
+  {
+    name: "arrow_back",
+  },
+  {
+    name: "star",
+  },
+  {
+    name: "logout",
+  },
+  {
+    name: "add_circle",
+  },
+  {
+    name: "cancel",
+  },
+  {
+    name: "arrow_drop_down",
+  },
+  {
+    name: "more_vert",
+  },
+  {
+    name: "check",
+  },
+  {
+    name: "check_box",
+  },
+  {
+    name: "toggle_on",
+  },
+  {
+    name: "open_in_new",
+  },
+  {
+    name: "refresh",
+  },
+  {
+    name: "login",
+  },
+  {
+    name: "radio_button_unchecked",
+  },
+  {
+    name: "more_horiz",
+  },
+  {
+    name: "apps",
+  },
+  {
+    name: "radio_button_checked",
+  },
+  {
+    name: "download",
+  },
+  {
+    name: "remove",
+  },
+  {
+    name: "toggle_off",
+  },
+  {
+    name: "bolt",
+  },
+  {
+    name: "arrow_upward",
+  },
+  {
+    name: "filter_list",
+  },
+  {
+    name: "delete_forever",
+  },
+  {
+    name: "autorenew",
+  },
+  {
+    name: "key",
+  },
+  {
+    name: "sort",
+  },
+  {
+    name: "sync",
+  },
+  {
+    name: "add_box",
+  },
+  {
+    name: "block",
+  },
+  {
+    name: "restart_alt",
+  },
+  {
+    name: "menu_open",
+  },
+  {
+    name: "shopping_cart_checkout",
+  },
+  {
+    name: "expand_circle_down",
+  },
+  {
+    name: "backspace",
+  },
+  {
+    name: "undo",
+  },
+  {
+    name: "done_all",
+  },
+  {
+    name: "do_not_disturb_on",
+  },
+  {
+    name: "open_in_full",
+  },
+  {
+    name: "double_arrow",
+  },
+  {
+    name: "sync_alt",
+  },
+  {
+    name: "zoom_in",
+  },
+  {
+    name: "done_outline",
+  },
+  {
+    name: "drag_indicator",
+  },
+  {
+    name: "fullscreen",
+  },
+  {
+    name: "star_half",
+  },
+  {
+    name: "settings_accessibility",
+  },
+  {
+    name: "reply",
+  },
+  {
+    name: "exit_to_app",
+  },
+  {
+    name: "unfold_more",
+  },
+  {
+    name: "library_add",
+  },
+  {
+    name: "cached",
+  },
+  {
+    name: "select_check_box",
+  },
+  {
+    name: "terminal",
+  },
+  {
+    name: "change_circle",
+  },
+  {
+    name: "disabled_by_default",
+  },
+  {
+    name: "swap_horiz",
+  },
+  {
+    name: "swap_vert",
+  },
+  {
+    name: "app_registration",
+  },
+  {
+    name: "download_for_offline",
+  },
+  {
+    name: "close_fullscreen",
+  },
+  {
+    name: "file_open",
+  },
+  {
+    name: "minimize",
+  },
+  {
+    name: "open_with",
+  },
+  {
+    name: "dataset",
+  },
+  {
+    name: "add_task",
+  },
+  {
+    name: "start",
+  },
+  {
+    name: "keyboard_voice",
+  },
+  {
+    name: "create_new_folder",
+  },
+  {
+    name: "forward",
+  },
+  {
+    name: "download",
+  },
+  {
+    name: "settings_applications",
+  },
+  {
+    name: "compare_arrows",
+  },
+  {
+    name: "redo",
+  },
+  {
+    name: "zoom_out",
+  },
+  {
+    name: "publish",
+  },
+  {
+    name: "html",
+  },
+  {
+    name: "token",
+  },
+  {
+    name: "switch_access_shortcut",
+  },
+  {
+    name: "fullscreen_exit",
+  },
+  {
+    name: "sort_by_alpha",
+  },
+  {
+    name: "delete_sweep",
+  },
+  {
+    name: "indeterminate_check_box",
+  },
+  {
+    name: "view_timeline",
+  },
+  {
+    name: "settings_backup_restore",
+  },
+  {
+    name: "arrow_drop_down_circle",
+  },
+  {
+    name: "assistant_navigation",
+  },
+  {
+    name: "sync_problem",
+  },
+  {
+    name: "clear_all",
+  },
+  {
+    name: "density_medium",
+  },
+  {
+    name: "heart_plus",
+  },
+  {
+    name: "filter_alt_off",
+  },
+  {
+    name: "expand",
+  },
+  {
+    name: "subdirectory_arrow_right",
+  },
+  {
+    name: "download_done",
+  },
+  {
+    name: "arrow_outward",
+  },
+  {
+    name: "123",
+  },
+  {
+    name: "swipe_left",
+  },
+  {
+    name: "auto_mode",
+  },
+  {
+    name: "saved_search",
+  },
+  {
+    name: "place_item",
+  },
+  {
+    name: "system_update_alt",
+  },
+  {
+    name: "javascript",
+  },
+  {
+    name: "search_off",
+  },
+  {
+    name: "output",
+  },
+  {
+    name: "select_all",
+  },
+  {
+    name: "fit_screen",
+  },
+  {
+    name: "swipe_up",
+  },
+  {
+    name: "dynamic_form",
+  },
+  {
+    name: "hide_source",
+  },
+  {
+    name: "swipe_right",
+  },
+  {
+    name: "switch_access_shortcut_add",
+  },
+  {
+    name: "browse_gallery",
+  },
+  {
+    name: "css",
+  },
+  {
+    name: "density_small",
+  },
+  {
+    name: "assistant_direction",
+  },
+  {
+    name: "check_small",
+  },
+  {
+    name: "youtube_searched_for",
+  },
+  {
+    name: "move_up",
+  },
+  {
+    name: "swap_horizontal_circle",
+  },
+  {
+    name: "data_thresholding",
+  },
+  {
+    name: "install_mobile",
+  },
+  {
+    name: "move_down",
+  },
+  {
+    name: "dataset_linked",
+  },
+  {
+    name: "keyboard_command_key",
+  },
+  {
+    name: "view_kanban",
+  },
+  {
+    name: "swipe_down",
+  },
+  {
+    name: "key_off",
+  },
+  {
+    name: "transcribe",
+  },
+  {
+    name: "send_time_extension",
+  },
+  {
+    name: "swipe_down_alt",
+  },
+  {
+    name: "swipe_left_alt",
+  },
+  {
+    name: "swipe_right_alt",
+  },
+  {
+    name: "swipe_up_alt",
+  },
+  {
+    name: "keyboard_option_key",
+  },
+  {
+    name: "cycle",
+  },
+  {
+    name: "rebase",
+  },
+  {
+    name: "rebase_edit",
+  },
+  {
+    name: "empty_dashboard",
+  },
+  {
+    name: "magic_exchange",
+  },
+  {
+    name: "acute",
+  },
+  {
+    name: "point_scan",
+  },
+  {
+    name: "step_into",
+  },
+  {
+    name: "cheer",
+  },
+  {
+    name: "emoticon",
+  },
+  {
+    name: "explosion",
+  },
+  {
+    name: "water_bottle",
+  },
+  {
+    name: "weather_hail",
+  },
+  {
+    name: "syringe",
+  },
+  {
+    name: "pill",
+  },
+  {
+    name: "genetics",
+  },
+  {
+    name: "allergy",
+  },
+  {
+    name: "medical_mask",
+  },
+  {
+    name: "body_fat",
+  },
+  {
+    name: "barefoot",
+  },
+  {
+    name: "infrared",
+  },
+  {
+    name: "wrist",
+  },
+  {
+    name: "metabolism",
+  },
+  {
+    name: "conditions",
+  },
+  {
+    name: "taunt",
+  },
+  {
+    name: "altitude",
+  },
+  {
+    name: "tibia",
+  },
+  {
+    name: "footprint",
+  },
+  {
+    name: "eyeglasses",
+  },
+  {
+    name: "man_3",
+  },
+  {
+    name: "woman_2",
+  },
+  {
+    name: "rheumatology",
+  },
+  {
+    name: "tornado",
+  },
+  {
+    name: "landslide",
+  },
+  {
+    name: "foggy",
+  },
+  {
+    name: "severe_cold",
+  },
+  {
+    name: "tsunami",
+  },
+  {
+    name: "vape_free",
+  },
+  {
+    name: "sign_language",
+  },
+  {
+    name: "emoji_symbols",
+  },
+  {
+    name: "clear_night",
+  },
+  {
+    name: "emoji_food_beverage",
+  },
+  {
+    name: "hive",
+  },
+  {
+    name: "thunderstorm",
+  },
+  {
+    name: "communication",
+  },
+  {
+    name: "rocket",
+  },
+  {
+    name: "pets",
+  },
+  {
+    name: "public",
+  },
+  {
+    name: "quiz",
+  },
+  {
+    name: "mood",
+  },
+  {
+    name: "gavel",
+  },
+  {
+    name: "eco",
+  },
+  {
+    name: "diamond",
+  },
+  {
+    name: "forest",
+  },
+  {
+    name: "rainy",
+  },
+  {
+    name: "skull",
+  },
+];
diff --git a/packages/ui/src/emoji/index.ts b/packages/ui/src/emoji/index.ts
new file mode 100644
index 00000000000..97345413903
--- /dev/null
+++ b/packages/ui/src/emoji/index.ts
@@ -0,0 +1 @@
+export * from "./emoji-icon-picker";
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 6688d6778af..f73467621b6 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -1,4 +1,6 @@
 import * as React from "react";
+// helpers
+import { cn } from "../../helpers";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   mode?: "primary" | "transparent" | "true-transparent";
@@ -16,17 +18,20 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       ref={ref}
       type={type}
       name={name}
-      className={`block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus: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-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}`}
+      className={cn(
+        `block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus: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-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}
     />
   );
diff --git a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
index 47c90e72b60..dd063e79ca5 100644
--- a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx
@@ -4,7 +4,7 @@ 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="5.33333" stroke="currentColor" strokeLinecap="round" />
     <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
   </svg>
 );
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index b90b6993a77..24b76c3e0e4 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,6 +2,7 @@ export * from "./avatar";
 export * from "./breadcrumbs";
 export * from "./badge";
 export * from "./button";
+export * from "./emoji";
 export * from "./dropdowns";
 export * from "./form-fields";
 export * from "./icons";
@@ -10,3 +11,4 @@ export * from "./spinners";
 export * from "./tooltip";
 export * from "./loader";
 export * from "./control-link";
+export * from "./toast";
diff --git a/packages/ui/src/spinners/circular-bar-spinner.tsx b/packages/ui/src/spinners/circular-bar-spinner.tsx
new file mode 100644
index 00000000000..3be8af43aad
--- /dev/null
+++ b/packages/ui/src/spinners/circular-bar-spinner.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export const CircularBarSpinner: React.FC<ICircularBarSpinner> = ({
+  height = "16px",
+  width = "16px",
+  className = "",
+}) => (
+  <div role="status">
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
+      <g>
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
+        <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
+        <animateTransform
+          attributeName="transform"
+          calcMode="discrete"
+          dur="0.75s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
+        />
+      </g>
+    </svg>
+  </div>
+);
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
index 76856817261..a871a9b77b8 100644
--- a/packages/ui/src/spinners/index.ts
+++ b/packages/ui/src/spinners/index.ts
@@ -1 +1,2 @@
 export * from "./circular-spinner";
+export * from "./circular-bar-spinner";
diff --git a/packages/ui/src/toast/index.tsx b/packages/ui/src/toast/index.tsx
new file mode 100644
index 00000000000..f380505326a
--- /dev/null
+++ b/packages/ui/src/toast/index.tsx
@@ -0,0 +1,210 @@
+import * as React from "react";
+import { Toaster, toast } from "sonner";
+// icons
+import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
+// spinner
+import { CircularBarSpinner } from "../spinners";
+// helper
+import { cn } from "../../helpers";
+
+export enum TOAST_TYPE {
+  SUCCESS = "success",
+  ERROR = "error",
+  INFO = "info",
+  WARNING = "warning",
+  LOADING = "loading",
+}
+
+type SetToastProps =
+  | {
+      type: TOAST_TYPE.LOADING;
+      title?: string;
+    }
+  | {
+      id?: string | number;
+      type: Exclude<TOAST_TYPE, TOAST_TYPE.LOADING>;
+      title: string;
+      message?: string;
+    };
+
+type PromiseToastCallback<ToastData> = (data: ToastData) => string;
+
+type PromiseToastData<ToastData> = {
+  title: string;
+  message?: PromiseToastCallback<ToastData>;
+};
+
+type PromiseToastOptions<ToastData> = {
+  loading?: string;
+  success: PromiseToastData<ToastData>;
+  error: PromiseToastData<ToastData>;
+};
+
+type ToastContentProps = {
+  toastId: string | number;
+  icon?: React.ReactNode;
+  textColorClassName: string;
+  backgroundColorClassName: string;
+  borderColorClassName: string;
+};
+
+type ToastProps = {
+  theme: "light" | "dark" | "system";
+};
+
+export const Toast = (props: ToastProps) => {
+  const { theme } = props;
+  return <Toaster visibleToasts={5} gap={20} theme={theme} />;
+};
+
+export const setToast = (props: SetToastProps) => {
+  const renderToastContent = ({
+    toastId,
+    icon,
+    textColorClassName,
+    backgroundColorClassName,
+    borderColorClassName,
+  }: ToastContentProps) =>
+    props.type === TOAST_TYPE.LOADING ? (
+      <div
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        className={cn(
+          "w-[350px] h-[67.3px] rounded-lg border shadow-sm p-2",
+          backgroundColorClassName,
+          borderColorClassName
+        )}
+      >
+        <div className="w-full h-full flex items-center justify-center px-4 py-2">
+          {icon && <div className="flex items-center justify-center">{icon}</div>}
+          <div className={cn("w-full flex items-center gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
+            <div className={cn("grow text-sm font-semibold", textColorClassName)}>{props.title ?? "Loading..."}</div>
+            <div className="flex-shrink-0">
+              <X
+                className="text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
+                strokeWidth={1.5}
+                width={14}
+                height={14}
+                onClick={() => toast.dismiss(toastId)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    ) : (
+      <div
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+        className={cn(
+          "relative flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
+          backgroundColorClassName,
+          borderColorClassName
+        )}
+      >
+        <X
+          className="fixed top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
+          strokeWidth={1.5}
+          width={14}
+          height={14}
+          onClick={() => toast.dismiss(toastId)}
+        />
+        <div className="w-full flex items-center px-4 py-2">
+          {icon && <div className="flex items-center justify-center">{icon}</div>}
+          <div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-6" : "pl-1")}>
+            <div className={cn("text-sm font-semibold", textColorClassName)}>{props.title}</div>
+            {props.message && <div className="text-toast-text-secondary text-xs font-medium">{props.message}</div>}
+          </div>
+        </div>
+      </div>
+    );
+
+  switch (props.type) {
+    case TOAST_TYPE.SUCCESS:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            icon: <CheckCircle2 width={28} height={28} strokeWidth={1.5} className="text-toast-text-success" />,
+            textColorClassName: "text-toast-text-success",
+            backgroundColorClassName: "bg-toast-background-success",
+            borderColorClassName: "border-toast-border-success",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+    case TOAST_TYPE.ERROR:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            icon: <XCircle width={28} height={28} strokeWidth={1.5} className="text-toast-text-error" />,
+            textColorClassName: "text-toast-text-error",
+            backgroundColorClassName: "bg-toast-background-error",
+            borderColorClassName: "border-toast-border-error",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+    case TOAST_TYPE.WARNING:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            icon: <AlertTriangle width={28} height={28} strokeWidth={1.5} className="text-toast-text-warning" />,
+            textColorClassName: "text-toast-text-warning",
+            backgroundColorClassName: "bg-toast-background-warning",
+            borderColorClassName: "border-toast-border-warning",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+    case TOAST_TYPE.INFO:
+      return toast.custom(
+        (toastId) =>
+          renderToastContent({
+            toastId,
+            textColorClassName: "text-toast-text-info",
+            backgroundColorClassName: "bg-toast-background-info",
+            borderColorClassName: "border-toast-border-info",
+          }),
+        props.id ? { id: props.id } : {}
+      );
+
+    case TOAST_TYPE.LOADING:
+      return toast.custom((toastId) =>
+        renderToastContent({
+          toastId,
+          icon: <CircularBarSpinner className="text-toast-text-tertiary" />,
+          textColorClassName: "text-toast-text-loading",
+          backgroundColorClassName: "bg-toast-background-loading",
+          borderColorClassName: "border-toast-border-loading",
+        })
+      );
+  }
+};
+
+export const setPromiseToast = <ToastData,>(
+  promise: Promise<ToastData>,
+  options: PromiseToastOptions<ToastData>
+): void => {
+  const tId = setToast({ type: TOAST_TYPE.LOADING, title: options.loading });
+
+  promise
+    .then((data: ToastData) => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        id: tId,
+        title: options.success.title,
+        message: options.success.message?.(data),
+      });
+    })
+    .catch((data: ToastData) => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        id: tId,
+        title: options.error.title,
+        message: options.error.message?.(data),
+      });
+    });
+};
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index 65d014efe7b..ca176918679 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -29,6 +29,7 @@ interface ITooltipProps {
   className?: string;
   openDelay?: number;
   closeDelay?: number;
+  isMobile?: boolean;
 }
 
 export const Tooltip: React.FC<ITooltipProps> = ({
@@ -40,6 +41,7 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   className = "",
   openDelay = 200,
   closeDelay,
+  isMobile = false,
 }) => (
   <Tooltip2
     disabled={disabled}
@@ -47,7 +49,9 @@ export const Tooltip: React.FC<ITooltipProps> = ({
     hoverCloseDelay={closeDelay}
     content={
       <div
-        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
+        className={`relative ${
+          isMobile ? "hidden" : "block"
+        } z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
       >
         {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
         {tooltipContent}
diff --git a/space/.eslintrc.js b/space/.eslintrc.js
index c8df607506c..57d39bcfad1 100644
--- a/space/.eslintrc.js
+++ b/space/.eslintrc.js
@@ -1,4 +1,52 @@
 module.exports = {
   root: true,
   extends: ["custom"],
+  parser: "@typescript-eslint/parser",
+  settings: {
+    "import/resolver": {
+      typescript: {},
+      node: {
+        moduleDirectory: ["node_modules", "."],
+      },
+    },
+  },
+  rules: {
+    "import/order": [
+      "error",
+      {
+        groups: ["builtin", "external", "internal", "parent", "sibling",],
+        pathGroups: [
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
+          {
+            pattern: "lucide-react",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@headlessui/**",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@plane/**",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@/**",
+            group: "internal",
+          }
+        ],
+        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
 };
diff --git a/space/components/accounts/github-sign-in.tsx b/space/components/accounts/github-sign-in.tsx
index 322011ae3c2..3b9b3f71b65 100644
--- a/space/components/accounts/github-sign-in.tsx
+++ b/space/components/accounts/github-sign-in.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, FC } from "react";
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
 // next-themes
 import { useTheme } from "next-themes";
diff --git a/space/components/accounts/onboarding-form.tsx b/space/components/accounts/onboarding-form.tsx
index 644f732f3bf..4ebb69b75e8 100644
--- a/space/components/accounts/onboarding-form.tsx
+++ b/space/components/accounts/onboarding-form.tsx
@@ -1,19 +1,19 @@
 import { useEffect, Fragment } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Listbox, Transition } from "@headlessui/react";
 import { Check, ChevronDown } from "lucide-react";
+import { Listbox, Transition } from "@headlessui/react";
 // mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { Button, Input } from "@plane/ui";
+import { USER_ROLES } from "@/constants/workspace";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // constants
-import { USER_ROLES } from "constants/workspace";
 // hooks
+import { UserService } from "@/services/user.service";
 import useToast from "hooks/use-toast";
 // services
-import { UserService } from "services/user.service";
 // ui
-import { Button, Input } from "@plane/ui";
 
 const defaultValues = {
   first_name: "",
diff --git a/space/components/accounts/sign-in-forms/create-password.tsx b/space/components/accounts/sign-in-forms/create-password.tsx
index 55205e70757..ffcdfe7ba62 100644
--- a/space/components/accounts/sign-in-forms/create-password.tsx
+++ b/space/components/accounts/sign-in-forms/create-password.tsx
@@ -2,15 +2,15 @@ import React, { useEffect } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 // services
-import { AuthService } from "services/authentication.service";
+import { Button, Input } from "@plane/ui";
+import { ESignInSteps } from "@/components/accounts";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // constants
-import { ESignInSteps } from "components/accounts";
 
 type Props = {
   email: string;
diff --git a/space/components/accounts/sign-in-forms/email-form.tsx b/space/components/accounts/sign-in-forms/email-form.tsx
index 4f8ed429470..ca702320c42 100644
--- a/space/components/accounts/sign-in-forms/email-form.tsx
+++ b/space/components/accounts/sign-in-forms/email-form.tsx
@@ -2,17 +2,17 @@ import React, { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
-import { AuthService } from "services/authentication.service";
+import { Button, Input } from "@plane/ui";
+import { ESignInSteps } from "@/components/accounts";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData } from "types/auth";
 // constants
-import { ESignInSteps } from "components/accounts";
 
 type Props = {
   handleStepChange: (step: ESignInSteps) => void;
diff --git a/space/components/accounts/sign-in-forms/o-auth-options.tsx b/space/components/accounts/sign-in-forms/o-auth-options.tsx
index 28da6fb7d6b..b546d9d3f95 100644
--- a/space/components/accounts/sign-in-forms/o-auth-options.tsx
+++ b/space/components/accounts/sign-in-forms/o-auth-options.tsx
@@ -1,13 +1,13 @@
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 
-import { observer } from "mobx-react-lite";
 // services
-import { AuthService } from "services/authentication.service";
-import { AppConfigService } from "services/app-config.service";
+import { GitHubSignInButton, GoogleSignInButton } from "@/components/accounts";
+import { AppConfigService } from "@/services/app-config.service";
+import { AuthService } from "@/services/authentication.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { GitHubSignInButton, GoogleSignInButton } from "components/accounts";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;
diff --git a/space/components/accounts/sign-in-forms/optional-set-password.tsx b/space/components/accounts/sign-in-forms/optional-set-password.tsx
index 2199717598a..082a238d92d 100644
--- a/space/components/accounts/sign-in-forms/optional-set-password.tsx
+++ b/space/components/accounts/sign-in-forms/optional-set-password.tsx
@@ -4,9 +4,9 @@ import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
+import { ESignInSteps } from "@/components/accounts";
+import { checkEmailValidity } from "@/helpers/string.helper";
 // constants
-import { ESignInSteps } from "components/accounts";
 
 type Props = {
   email: string;
diff --git a/space/components/accounts/sign-in-forms/password.tsx b/space/components/accounts/sign-in-forms/password.tsx
index f909f16c5d5..67863e010f4 100644
--- a/space/components/accounts/sign-in-forms/password.tsx
+++ b/space/components/accounts/sign-in-forms/password.tsx
@@ -3,17 +3,17 @@ import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
-import { AuthService } from "services/authentication.service";
+import { Button, Input } from "@plane/ui";
+import { ESignInSteps } from "@/components/accounts";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IPasswordSignInData } from "types/auth";
 // constants
-import { ESignInSteps } from "components/accounts";
 
 type Props = {
   email: string;
diff --git a/space/components/accounts/sign-in-forms/root.tsx b/space/components/accounts/sign-in-forms/root.tsx
index c36842ce7a1..4f7859d7652 100644
--- a/space/components/accounts/sign-in-forms/root.tsx
+++ b/space/components/accounts/sign-in-forms/root.tsx
@@ -2,11 +2,6 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // hooks
-import useSignInRedirection from "hooks/use-sign-in-redirection";
-// services
-import { AppConfigService } from "services/app-config.service";
-// components
-import { LatestFeatureBlock } from "components/common";
 import {
   EmailForm,
   UniqueCodeForm,
@@ -16,7 +11,12 @@ import {
   OptionalSetPasswordForm,
   CreatePasswordForm,
   SelfHostedSignInForm,
-} from "components/accounts";
+} from "@/components/accounts";
+import { LatestFeatureBlock } from "@/components/common";
+import { AppConfigService } from "@/services/app-config.service";
+import useSignInRedirection from "hooks/use-sign-in-redirection";
+// services
+// components
 
 export enum ESignInSteps {
   EMAIL = "EMAIL",
diff --git a/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx b/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
index af1e5d68f6a..ddea6bf0075 100644
--- a/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
+++ b/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
@@ -3,13 +3,13 @@ import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
-import { AuthService } from "services/authentication.service";
+import { Button, Input } from "@plane/ui";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IPasswordSignInData } from "types/auth";
 
diff --git a/space/components/accounts/sign-in-forms/set-password-link.tsx b/space/components/accounts/sign-in-forms/set-password-link.tsx
index 0b5ad21d9c6..4b2e41c78d5 100644
--- a/space/components/accounts/sign-in-forms/set-password-link.tsx
+++ b/space/components/accounts/sign-in-forms/set-password-link.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 // services
-import { AuthService } from "services/authentication.service";
+import { Button, Input } from "@plane/ui";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData } from "types/auth";
 
diff --git a/space/components/accounts/sign-in-forms/unique-code.tsx b/space/components/accounts/sign-in-forms/unique-code.tsx
index 4c61fa1513f..f0dcbba474f 100644
--- a/space/components/accounts/sign-in-forms/unique-code.tsx
+++ b/space/components/accounts/sign-in-forms/unique-code.tsx
@@ -3,19 +3,19 @@ import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { CornerDownLeft, XCircle } from "lucide-react";
 // services
-import { AuthService } from "services/authentication.service";
-import { UserService } from "services/user.service";
+import { Button, Input } from "@plane/ui";
+import { ESignInSteps } from "@/components/accounts";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
+import { UserService } from "@/services/user.service";
 // hooks
-import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "types/auth";
 // constants
-import { ESignInSteps } from "components/accounts";
 
 type Props = {
   email: string;
diff --git a/space/components/accounts/user-logged-in.tsx b/space/components/accounts/user-logged-in.tsx
index de0b18d51f6..f9f5aeb39a5 100644
--- a/space/components/accounts/user-logged-in.tsx
+++ b/space/components/accounts/user-logged-in.tsx
@@ -1,10 +1,10 @@
 import Image from "next/image";
 
 // mobx
-import { useMobxStore } from "lib/mobx/store-provider";
+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";
+import UserLoggedInImage from "public/user-logged-in.svg";
 
 export const UserLoggedIn = () => {
   const { user: userStore } = useMobxStore();
diff --git a/space/components/common/index.ts b/space/components/common/index.ts
index f1c0b088e85..36cc3c898b5 100644
--- a/space/components/common/index.ts
+++ b/space/components/common/index.ts
@@ -1 +1,2 @@
 export * from "./latest-feature-block";
+export * from "./project-logo";
diff --git a/space/components/common/project-logo.tsx b/space/components/common/project-logo.tsx
new file mode 100644
index 00000000000..9b69e96167d
--- /dev/null
+++ b/space/components/common/project-logo.tsx
@@ -0,0 +1,34 @@
+// helpers
+import { TProjectLogoProps } from "@plane/types";
+import { cn } from "@/helpers/common.helper";
+// types
+
+type Props = {
+  className?: string;
+  logo: TProjectLogoProps;
+};
+
+export const ProjectLogo: React.FC<Props> = (props) => {
+  const { className, logo } = props;
+
+  if (logo.in_use === "icon" && logo.icon)
+    return (
+      <span
+        style={{
+          color: logo.icon.color,
+        }}
+        className={cn("material-symbols-rounded text-base", className)}
+      >
+        {logo.icon.name}
+      </span>
+    );
+
+  if (logo.in_use === "emoji" && logo.emoji)
+    return (
+      <span className={cn("text-base", className)}>
+        {logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
+      </span>
+    );
+
+  return <span />;
+};
diff --git a/space/components/issues/board-views/block-due-date.tsx b/space/components/issues/board-views/block-due-date.tsx
index 2920100a871..ecf2295621a 100644
--- a/space/components/issues/board-views/block-due-date.tsx
+++ b/space/components/issues/board-views/block-due-date.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // helpers
-import { renderFullDate } from "helpers/date-time.helper";
+import { renderFullDate } from "@/helpers/date-time.helper";
 
 export const dueDateIconDetails = (
   date: string,
diff --git a/space/components/issues/board-views/block-priority.tsx b/space/components/issues/board-views/block-priority.tsx
index 6b5e6ad9d6a..9bfa3808b05 100644
--- a/space/components/issues/board-views/block-priority.tsx
+++ b/space/components/issues/board-views/block-priority.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 // types
+import { issuePriorityFilter } from "@/constants/data";
 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;
diff --git a/space/components/issues/board-views/block-state.tsx b/space/components/issues/board-views/block-state.tsx
index 4afdbb99048..bc444445d01 100644
--- a/space/components/issues/board-views/block-state.tsx
+++ b/space/components/issues/board-views/block-state.tsx
@@ -1,7 +1,7 @@
 // ui
 import { StateGroupIcon } from "@plane/ui";
 // constants
-import { issueGroupFilter } from "constants/data";
+import { issueGroupFilter } from "@/constants/data";
 
 export const IssueBlockState = ({ state }: any) => {
   const stateGroup = issueGroupFilter(state.group);
diff --git a/space/components/issues/board-views/kanban/block.tsx b/space/components/issues/board-views/kanban/block.tsx
index 1a7eb9105df..1284f794925 100644
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -2,16 +2,16 @@
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useRouter } from "next/router";
+import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
+import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
+import { IssueBlockState } from "@/components/issues/board-views/block-state";
+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 { RootStore } from "@/store/root";
 import { IIssue } from "types/issue";
-import { RootStore } from "store/root";
-import { useRouter } from "next/router";
 
 export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
   const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
diff --git a/space/components/issues/board-views/kanban/header.tsx b/space/components/issues/board-views/kanban/header.tsx
index a3c623306be..ac15dc95c86 100644
--- a/space/components/issues/board-views/kanban/header.tsx
+++ b/space/components/issues/board-views/kanban/header.tsx
@@ -1,14 +1,14 @@
 // 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";
+import { issueGroupFilter } from "@/constants/data";
+// ui
 // mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
+import { IIssueState } from "types/issue";
 
 export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
   const store: RootStore = useMobxStore();
diff --git a/space/components/issues/board-views/kanban/index.tsx b/space/components/issues/board-views/kanban/index.tsx
index 381c340da30..a7f3fc6f6ff 100644
--- a/space/components/issues/board-views/kanban/index.tsx
+++ b/space/components/issues/board-views/kanban/index.tsx
@@ -3,15 +3,15 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
-import { IssueKanBanHeader } from "components/issues/board-views/kanban/header";
-import { IssueKanBanBlock } from "components/issues/board-views/kanban/block";
+import { IssueKanBanBlock } from "@/components/issues/board-views/kanban/block";
+import { IssueKanBanHeader } from "@/components/issues/board-views/kanban/header";
 // ui
-import { Icon } from "components/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";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
+import { IIssueState, IIssue } from "types/issue";
 
 export const IssueKanbanView = observer(() => {
   const store: RootStore = useMobxStore();
diff --git a/space/components/issues/board-views/list/block.tsx b/space/components/issues/board-views/list/block.tsx
index 039d731b5dd..4a980aba429 100644
--- a/space/components/issues/board-views/list/block.tsx
+++ b/space/components/issues/board-views/list/block.tsx
@@ -1,17 +1,17 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // 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";
+import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
+import { IssueBlockLabels } from "@/components/issues/board-views/block-labels";
+import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
+import { IssueBlockState } from "@/components/issues/board-views/block-state";
 // mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // interfaces
+import { RootStore } from "@/store/root";
 import { IIssue } from "types/issue";
 // store
-import { RootStore } from "store/root";
 
 export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
   const { issue } = props;
diff --git a/space/components/issues/board-views/list/header.tsx b/space/components/issues/board-views/list/header.tsx
index 82b7ac26f7c..cc0a88f5dfe 100644
--- a/space/components/issues/board-views/list/header.tsx
+++ b/space/components/issues/board-views/list/header.tsx
@@ -1,14 +1,14 @@
 // 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";
+import { issueGroupFilter } from "@/constants/data";
 // mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
+import { IIssueState } from "types/issue";
 
 export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   const store: RootStore = useMobxStore();
diff --git a/space/components/issues/board-views/list/index.tsx b/space/components/issues/board-views/list/index.tsx
index 441935def34..65d79eaacb9 100644
--- a/space/components/issues/board-views/list/index.tsx
+++ b/space/components/issues/board-views/list/index.tsx
@@ -1,13 +1,13 @@
 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";
+import { IssueListBlock } from "@/components/issues/board-views/list/block";
+import { IssueListHeader } from "@/components/issues/board-views/list/header";
 // interfaces
-import { IIssueState, IIssue } from "types/issue";
 // mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // store
-import { RootStore } from "store/root";
+import { RootStore } from "@/store/root";
+import { IIssueState, IIssue } from "types/issue";
 
 export const IssueListView = observer(() => {
   const { issue: issueStore }: RootStore = useMobxStore();
diff --git a/space/components/issues/filters/applied-filters/filters-list.tsx b/space/components/issues/filters/applied-filters/filters-list.tsx
index c971dbfe786..a036cfedff3 100644
--- a/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -1,11 +1,11 @@
 // components
-import { AppliedPriorityFilters } from "./priority";
-import { AppliedStateFilters } from "./state";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { IIssueFilterOptions } from "store/issues/types";
+import { IIssueFilterOptions } from "@/store/issues/types";
 import { IIssueLabel, IIssueState } from "types/issue";
+import { AppliedPriorityFilters } from "./priority";
+import { AppliedStateFilters } from "./state";
 // types
 
 type Props = {
diff --git a/space/components/issues/filters/applied-filters/priority.tsx b/space/components/issues/filters/applied-filters/priority.tsx
index 79264ac7cf5..bbe72e4046e 100644
--- a/space/components/issues/filters/applied-filters/priority.tsx
+++ b/space/components/issues/filters/applied-filters/priority.tsx
@@ -1,5 +1,5 @@
-import { PriorityIcon } from "@plane/ui";
 import { X } from "lucide-react";
+import { PriorityIcon } from "@plane/ui";
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/space/components/issues/filters/applied-filters/root.tsx b/space/components/issues/filters/applied-filters/root.tsx
index a7afaa67315..6adc7c261bf 100644
--- a/space/components/issues/filters/applied-filters/root.tsx
+++ b/space/components/issues/filters/applied-filters/root.tsx
@@ -1,12 +1,12 @@
 import { FC, useCallback } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // components
-import { AppliedFiltersList } from "./filters-list";
 // store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-import { IIssueFilterOptions } from "store/issues/types";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { IIssueFilterOptions } from "@/store/issues/types";
+import { RootStore } from "@/store/root";
+import { AppliedFiltersList } from "./filters-list";
 
 export const IssueAppliedFilters: FC = observer(() => {
   const router = useRouter();
diff --git a/space/components/issues/filters/helpers/dropdown.tsx b/space/components/issues/filters/helpers/dropdown.tsx
index 809cd6f5aca..d98dee7ddbf 100644
--- a/space/components/issues/filters/helpers/dropdown.tsx
+++ b/space/components/issues/filters/helpers/dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
+import { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
-import { Placement } from "@popperjs/core";
 // ui
 import { Button } from "@plane/ui";
 
diff --git a/space/components/issues/filters/labels.tsx b/space/components/issues/filters/labels.tsx
index c8dd2132ba1..e5cb1269605 100644
--- a/space/components/issues/filters/labels.tsx
+++ b/space/components/issues/filters/labels.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 
 // components
-import { FilterHeader, FilterOption } from "./helpers";
 // ui
 import { Loader } from "@plane/ui";
 // types
 import { IIssueLabel } from "types/issue";
+import { FilterHeader, FilterOption } from "./helpers";
 
 const LabelIcons = ({ color }: { color: string }) => (
   <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
diff --git a/space/components/issues/filters/priority.tsx b/space/components/issues/filters/priority.tsx
index 8a5a643f47a..98c35eea6e7 100644
--- a/space/components/issues/filters/priority.tsx
+++ b/space/components/issues/filters/priority.tsx
@@ -3,9 +3,9 @@ import { observer } from "mobx-react-lite";
 // ui
 import { PriorityIcon } from "@plane/ui";
 // components
+import { issuePriorityFilters } from "@/constants/data";
 import { FilterHeader, FilterOption } from "./helpers";
 // constants
-import { issuePriorityFilters } from "constants/data";
 
 type Props = {
   appliedFilters: string[] | null;
diff --git a/space/components/issues/filters/root.tsx b/space/components/issues/filters/root.tsx
index b45dfffe308..489cf584bc7 100644
--- a/space/components/issues/filters/root.tsx
+++ b/space/components/issues/filters/root.tsx
@@ -1,16 +1,16 @@
 import { FC, useCallback } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // components
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/store/issues/helpers";
+import { IIssueFilterOptions } from "@/store/issues/types";
+import { RootStore } from "@/store/root";
 import { FiltersDropdown } from "./helpers/dropdown";
 import { FilterSelection } from "./selection";
 // types
-import { IIssueFilterOptions } from "store/issues/types";
 // helpers
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "store/issues/helpers";
 // store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
 
 export const IssueFiltersDropdown: FC = observer(() => {
   const router = useRouter();
diff --git a/space/components/issues/filters/selection.tsx b/space/components/issues/filters/selection.tsx
index b4491219036..71f0c5f1bb3 100644
--- a/space/components/issues/filters/selection.tsx
+++ b/space/components/issues/filters/selection.tsx
@@ -2,13 +2,13 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
 // components
-import { FilterPriority, FilterState } from "./";
 // types
 
 // filter helpers
-import { ILayoutDisplayFiltersOptions } from "store/issues/helpers";
-import { IIssueFilterOptions } from "store/issues/types";
+import { ILayoutDisplayFiltersOptions } from "@/store/issues/helpers";
+import { IIssueFilterOptions } from "@/store/issues/types";
 import { IIssueState, IIssueLabel } from "types/issue";
+import { FilterPriority, FilterState } from "./";
 
 type Props = {
   filters: IIssueFilterOptions;
diff --git a/space/components/issues/filters/state.tsx b/space/components/issues/filters/state.tsx
index a3781386d51..734abef55fb 100644
--- a/space/components/issues/filters/state.tsx
+++ b/space/components/issues/filters/state.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 // components
-import { FilterHeader, FilterOption } from "./helpers";
 // ui
 import { Loader, StateGroupIcon } from "@plane/ui";
 // types
 import { IIssueState } from "types/issue";
+import { FilterHeader, FilterOption } from "./helpers";
 
 type Props = {
   appliedFilters: string[] | null;
diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
index 0bc493b16f0..409c7b2865d 100644
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -1,35 +1,20 @@
 import { useEffect } from "react";
-
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 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";
-import { IssueFiltersDropdown } from "components/issues/filters";
-// ui
-import { Avatar, Button } from "@plane/ui";
 import { Briefcase } from "lucide-react";
+import { Avatar, Button } from "@plane/ui";
+import { ProjectLogo } from "@/components/common";
+import { IssueFiltersDropdown } from "@/components/issues/filters";
+// ui
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // store
-import { RootStore } from "store/root";
+import { RootStore } from "@/store/root";
 import { TIssueBoardKeys } from "types/issue";
-
-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));
-};
+import { NavbarIssueBoardView } from "./issue-board-view";
+import { NavbarTheme } from "./theme";
 
 const IssueNavbar = observer(() => {
   const {
@@ -123,27 +108,15 @@ const IssueNavbar = observer(() => {
     <div className="relative flex w-full items-center gap-4 px-5">
       {/* project detail */}
       <div className="flex flex-shrink-0 items-center gap-2">
-        <div className="flex h-4 w-4 items-center justify-center">
-          {projectStore.project ? (
-            projectStore.project?.emoji ? (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                {renderEmoji(projectStore.project.emoji)}
-              </span>
-            ) : projectStore.project?.icon_prop ? (
-              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                {renderEmoji(projectStore.project.icon_prop)}
-              </div>
-            ) : (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                {projectStore.project?.name.charAt(0)}
-              </span>
-            )
-          ) : (
-            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-              <Briefcase className="h-4 w-4" />
-            </span>
-          )}
-        </div>
+        {projectStore.project ? (
+          <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
+            <ProjectLogo logo={projectStore.project.logo_props} className="text-lg" />
+          </span>
+        ) : (
+          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+            <Briefcase className="h-4 w-4" />
+          </span>
+        )}
         <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
           {projectStore?.project?.name || `...`}
         </div>
diff --git a/space/components/issues/navbar/issue-board-view.tsx b/space/components/issues/navbar/issue-board-view.tsx
index 906d3543d95..f2d624974b3 100644
--- a/space/components/issues/navbar/issue-board-view.tsx
+++ b/space/components/issues/navbar/issue-board-view.tsx
@@ -1,10 +1,10 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // constants
-import { issueViews } from "constants/data";
+import { issueViews } from "@/constants/data";
 // mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
 import { TIssueBoardKeys } from "types/issue";
 
 export const NavbarIssueBoardView = observer(() => {
diff --git a/space/components/issues/navbar/theme.tsx b/space/components/issues/navbar/theme.tsx
index cd22654a2a0..1d45625c78c 100644
--- a/space/components/issues/navbar/theme.tsx
+++ b/space/components/issues/navbar/theme.tsx
@@ -1,9 +1,9 @@
 // next theme
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
 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");
diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx
index ef1a115d282..6df72e2a87f 100644
--- a/space/components/issues/peek-overview/comment/add-comment.tsx
+++ b/space/components/issues/peek-overview/comment/add-comment.tsx
@@ -1,20 +1,20 @@
 import React, { useRef } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { useForm, Controller } from "react-hook-form";
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
+import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import { Button } from "@plane/ui";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // hooks
+import fileService from "@/services/file.service";
+import { RootStore } from "@/store/root";
 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";
-import { RootStore } from "store/root";
 
 const defaultValues: Partial<Comment> = {
   comment_html: "",
@@ -93,7 +93,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
               customClassName="p-2"
               editorContentCustomClassNames="min-h-[35px]"
               debouncedUpdatesEnabled={false}
-              onChange={(comment_json: Object, comment_html: string) => {
+              onChange={(comment_json: unknown, comment_html: string) => {
                 onChange(comment_html);
               }}
               submitButton={
diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index 7c6abe19956..3db64bbd1de 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -1,23 +1,23 @@
 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";
+import { Menu, Transition } from "@headlessui/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";
+import { CommentReactions } from "@/components/issues/peek-overview";
 // helpers
-import { timeAgo } from "helpers/date-time.helper";
+import { timeAgo } from "@/helpers/date-time.helper";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // types
-import { Comment } from "types/issue";
 // services
-import fileService from "services/file.service";
+import fileService from "@/services/file.service";
+import { RootStore } from "@/store/root";
 import useEditorSuggestions from "hooks/use-editor-suggestions";
 
-import { RootStore } from "store/root";
+import { Comment } from "types/issue";
 type Props = {
   workspaceSlug: string;
   comment: Comment;
@@ -115,7 +115,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     value={value}
                     debouncedUpdatesEnabled={false}
                     customClassName="min-h-[50px] p-3 shadow-sm"
-                    onChange={(comment_json: Object, comment_html: string) => {
+                    onChange={(comment_json: unknown, comment_html: string) => {
                       onChange(comment_html);
                     }}
                   />
diff --git a/space/components/issues/peek-overview/comment/comment-reactions.tsx b/space/components/issues/peek-overview/comment/comment-reactions.tsx
index 3914c41fb08..2192746674c 100644
--- a/space/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -1,15 +1,14 @@
 import React from "react";
 
-import { useRouter } from "next/router";
-
 // mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useRouter } from "next/router";
 // ui
-import { ReactionSelector } from "components/ui";
 import { Tooltip } from "@plane/ui";
+import { ReactionSelector } from "@/components/ui";
 // helpers
-import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 
 type Props = {
   commentId: string;
diff --git a/space/components/issues/peek-overview/full-screen-peek-view.tsx b/space/components/issues/peek-overview/full-screen-peek-view.tsx
index e07620c05ee..32b850b128d 100644
--- a/space/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/space/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -1,13 +1,13 @@
 import { observer } from "mobx-react-lite";
 // components
+import { Loader } from "@plane/ui";
 import {
   PeekOverviewHeader,
   PeekOverviewIssueActivity,
   PeekOverviewIssueDetails,
   PeekOverviewIssueProperties,
-} from "components/issues/peek-overview";
+} from "@/components/issues/peek-overview";
 // types
-import { Loader } from "@plane/ui";
 import { IIssue } from "types/issue";
 
 type Props = {
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 72a302b9099..0a3824f5d0a 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { Listbox, Transition } from "@headlessui/react";
 import { MoveRight } from "lucide-react";
+import { Listbox, Transition } from "@headlessui/react";
 // hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Icon } from "components/ui";
+import { Icon } from "@/components/ui";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
 // store
-import { IPeekMode } from "store/issue_details";
-import { RootStore } from "store/root";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { IPeekMode } from "@/store/issue_details";
+import { RootStore } from "@/store/root";
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
+import useToast from "hooks/use-toast";
 // types
 import { IIssue } from "types/issue";
 
diff --git a/space/components/issues/peek-overview/issue-activity.tsx b/space/components/issues/peek-overview/issue-activity.tsx
index cbb27679bcd..ad9f65aebbb 100644
--- a/space/components/issues/peek-overview/issue-activity.tsx
+++ b/space/components/issues/peek-overview/issue-activity.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 
+import { observer } from "mobx-react-lite";
 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";
+import { Button } from "@plane/ui";
+import { CommentCard, AddComment } from "@/components/issues/peek-overview";
+import { Icon } from "@/components/ui";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // components
-import { CommentCard, AddComment } from "components/issues/peek-overview";
 // ui
-import { Icon } from "components/ui";
-import { Button } from "@plane/ui";
 // types
 import { IIssue } from "types/issue";
 
diff --git a/space/components/issues/peek-overview/issue-details.tsx b/space/components/issues/peek-overview/issue-details.tsx
index d84103388dc..dfc1be430fa 100644
--- a/space/components/issues/peek-overview/issue-details.tsx
+++ b/space/components/issues/peek-overview/issue-details.tsx
@@ -1,8 +1,8 @@
-import { IssueReactions } from "components/issues/peek-overview";
 import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+import { IssueReactions } from "@/components/issues/peek-overview";
 // types
-import { IIssue } from "types/issue";
 import useEditorSuggestions from "hooks/use-editor-suggestions";
+import { IIssue } from "types/issue";
 
 type Props = {
   issueDetails: IIssue;
diff --git a/space/components/issues/peek-overview/issue-emoji-reactions.tsx b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
index 928d9115e09..016074ff97d 100644
--- a/space/components/issues/peek-overview/issue-emoji-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-emoji-reactions.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
+import { Tooltip } from "@plane/ui";
+import { ReactionSelector } from "@/components/ui";
+import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // helpers
-import { groupReactions, renderEmoji } from "helpers/emoji.helper";
 // components
-import { ReactionSelector } from "components/ui";
-import { Tooltip } from "@plane/ui";
 
 export const IssueEmojiReactions: React.FC = observer(() => {
   // router
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index a6dcedf0804..1018c22f7cb 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -1,18 +1,18 @@
 // hooks
-import useToast from "hooks/use-toast";
 // ui
 import { StateGroupIcon } from "@plane/ui";
 // icons
-import { Icon } from "components/ui";
+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";
+import { issueGroupFilter, issuePriorityFilter } from "@/constants/data";
+import { renderFullDate } from "@/helpers/date-time.helper";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "@/helpers/string.helper";
 // types
-import { IIssue } from "types/issue";
-import { IPeekMode } from "store/issue_details";
+import { IPeekMode } from "@/store/issue_details";
 // constants
-import { issueGroupFilter, issuePriorityFilter } from "constants/data";
+import useToast from "hooks/use-toast";
+import { IIssue } from "types/issue";
+import { dueDateIconDetails } from "../board-views/block-due-date";
 
 type Props = {
   issueDetails: IIssue;
@@ -94,7 +94,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
             >
               {priority && (
                 <span className="-my-1 grid place-items-center">
-                  <Icon iconName={priority?.icon!} />
+                  <Icon iconName={priority?.icon} />
                 </span>
               )}
               <span>{priority?.title ?? "None"}</span>
diff --git a/space/components/issues/peek-overview/issue-reaction.tsx b/space/components/issues/peek-overview/issue-reaction.tsx
index 79b45f1048f..eaa5bb8d56f 100644
--- a/space/components/issues/peek-overview/issue-reaction.tsx
+++ b/space/components/issues/peek-overview/issue-reaction.tsx
@@ -1,5 +1,5 @@
-import { IssueEmojiReactions, IssueVotes } from "components/issues/peek-overview";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { IssueEmojiReactions, IssueVotes } from "@/components/issues/peek-overview";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 
 export const IssueReactions: React.FC = () => {
   const { project: projectStore } = useMobxStore();
diff --git a/space/components/issues/peek-overview/issue-vote-reactions.tsx b/space/components/issues/peek-overview/issue-vote-reactions.tsx
index 40ad145d057..80a2fde83e2 100644
--- a/space/components/issues/peek-overview/issue-vote-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -1,13 +1,13 @@
 import { useState, useEffect } from "react";
 
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 
 // mobx
-import { observer } from "mobx-react-lite";
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
-// ui
 import { Tooltip } from "@plane/ui";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+// ui
 
 export const IssueVotes: React.FC = observer(() => {
   const [isSubmitting, setIsSubmitting] = useState(false);
diff --git a/space/components/issues/peek-overview/layout.tsx b/space/components/issues/peek-overview/layout.tsx
index 5a4144db392..b76da13f439 100644
--- a/space/components/issues/peek-overview/layout.tsx
+++ b/space/components/issues/peek-overview/layout.tsx
@@ -1,19 +1,17 @@
 import React, { useEffect, useState } from "react";
 
+import { observer } from "mobx-react-lite";
 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";
+import { FullScreenPeekView, SidePeekView } from "@/components/issues/peek-overview";
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
-
-type Props = {};
+import { useMobxStore } from "@/lib/mobx/store-provider";
 
-export const IssuePeekOverview: React.FC<Props> = observer(() => {
+export const IssuePeekOverview: React.FC = observer(() => {
   // states
   const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
   const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
diff --git a/space/components/issues/peek-overview/side-peek-view.tsx b/space/components/issues/peek-overview/side-peek-view.tsx
index 0ec82a8efe2..8a8636edc15 100644
--- a/space/components/issues/peek-overview/side-peek-view.tsx
+++ b/space/components/issues/peek-overview/side-peek-view.tsx
@@ -1,13 +1,13 @@
 import { observer } from "mobx-react-lite";
 // components
+import { Loader } from "@plane/ui";
 import {
   PeekOverviewHeader,
   PeekOverviewIssueActivity,
   PeekOverviewIssueDetails,
   PeekOverviewIssueProperties,
-} from "components/issues/peek-overview";
+} from "@/components/issues/peek-overview";
 
-import { Loader } from "@plane/ui";
 import { IIssue } from "types/issue";
 
 type Props = {
diff --git a/space/components/ui/dropdown.tsx b/space/components/ui/dropdown.tsx
index 09d27da42a4..788627094b7 100644
--- a/space/components/ui/dropdown.tsx
+++ b/space/components/ui/dropdown.tsx
@@ -1,9 +1,9 @@
 import { Fragment, useState, useRef } from "react";
 import Link from "next/link";
+import { Check, ChevronLeft } from "lucide-react";
 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;
@@ -67,13 +67,13 @@ const DropdownList: React.FC<DropDownListProps> = (props) => {
 
 const DropdownItem: React.FC<DropdownItemProps> = (props) => {
   const { item } = props;
-  const { display, children, as: as_, href, onClick, isSelected } = item;
+  const { display, children, as: itemAs, href, onClick, isSelected } = item;
 
   const [open, setOpen] = useState(false);
 
   return (
     <div className="group relative flex w-full gap-x-6 rounded-lg p-1">
-      {(!as_ || as_ === "button" || as_ === "div") && (
+      {(!itemAs || itemAs === "button" || itemAs === "div") && (
         <button
           type="button"
           onClick={() => {
@@ -94,7 +94,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
         </button>
       )}
 
-      {as_ === "link" && <Link href={href || "#"}>{display}</Link>}
+      {itemAs === "link" && <Link href={href || "#"}>{display}</Link>}
 
       {children && <DropdownList open={open} handleClose={() => setOpen(false)} items={children} />}
     </div>
diff --git a/space/components/ui/reaction-selector.tsx b/space/components/ui/reaction-selector.tsx
index ae18d4883a4..9b999a618ee 100644
--- a/space/components/ui/reaction-selector.tsx
+++ b/space/components/ui/reaction-selector.tsx
@@ -4,10 +4,10 @@ import { Fragment } from "react";
 import { Popover, Transition } from "@headlessui/react";
 
 // helper
-import { renderEmoji } from "helpers/emoji.helper";
+import { Icon } from "@/components/ui";
+import { renderEmoji } from "@/helpers/emoji.helper";
 
 // icons
-import { Icon } from "components/ui";
 
 const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
 
diff --git a/space/components/views/login.tsx b/space/components/views/login.tsx
index 5ce24c8690f..e622f3e7812 100644
--- a/space/components/views/login.tsx
+++ b/space/components/views/login.tsx
@@ -1,11 +1,11 @@
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 
 // mobx
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// components
-import { SignInRoot, UserLoggedIn } from "components/accounts";
 import { Loader } from "@plane/ui";
+import { SignInRoot, UserLoggedIn } from "@/components/accounts";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+// components
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text-new.png";
 
diff --git a/space/components/views/project-details.tsx b/space/components/views/project-details.tsx
index e3a0baaaaaa..914272a8bf1 100644
--- a/space/components/views/project-details.tsx
+++ b/space/components/views/project-details.tsx
@@ -1,18 +1,18 @@
 import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useRouter } from "next/router";
-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";
-import { IssueAppliedFilters } from "components/issues/filters/applied-filters/root";
+import { IssueCalendarView } from "@/components/issues/board-views/calendar";
+import { IssueGanttView } from "@/components/issues/board-views/gantt";
+import { IssueKanbanView } from "@/components/issues/board-views/kanban";
+import { IssueListView } from "@/components/issues/board-views/list";
+import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadsheet";
+import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
 // mobx store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
 // assets
 import SomethingWentWrongImage from "public/something-went-wrong.svg";
 
diff --git a/space/contexts/toast.context.tsx b/space/contexts/toast.context.tsx
index a382b4fd216..86608f02c96 100644
--- a/space/contexts/toast.context.tsx
+++ b/space/contexts/toast.context.tsx
@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useReducer } from "react";
 // uuid
 import { v4 as uuid } from "uuid";
 // components
-import ToastAlert from "components/ui/toast-alert";
+import ToastAlert from "@/components/ui/toast-alert";
 
 export const toastContext = createContext<ContextType>({} as ContextType);
 
diff --git a/space/hooks/use-editor-suggestions.tsx b/space/hooks/use-editor-suggestions.tsx
index 0659121b7cd..81bf6875490 100644
--- a/space/hooks/use-editor-suggestions.tsx
+++ b/space/hooks/use-editor-suggestions.tsx
@@ -1,5 +1,5 @@
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
 
 const useEditorSuggestions = () => {
   const { mentionsStore }: RootStore = useMobxStore();
diff --git a/space/hooks/use-sign-in-redirection.tsx b/space/hooks/use-sign-in-redirection.tsx
index 306e7985ad6..7517c7dfc24 100644
--- a/space/hooks/use-sign-in-redirection.tsx
+++ b/space/hooks/use-sign-in-redirection.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 // mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 // types
 import { IUser } from "types/user";
 
diff --git a/space/hooks/use-toast.tsx b/space/hooks/use-toast.tsx
index 6de3c104c67..13f598f88af 100644
--- a/space/hooks/use-toast.tsx
+++ b/space/hooks/use-toast.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { toastContext } from "contexts/toast.context";
+import { toastContext } from "@/contexts/toast.context";
 
 const useToast = () => {
   const toastContextData = useContext(toastContext);
diff --git a/space/layouts/project-layout.tsx b/space/layouts/project-layout.tsx
index 3ae079982ae..c5946277f83 100644
--- a/space/layouts/project-layout.tsx
+++ b/space/layouts/project-layout.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { observer } from "mobx-react-lite";
 import planeLogo from "public/plane-logo.svg";
 // components
-import IssueNavbar from "components/issues/navbar";
+import IssueNavbar from "@/components/issues/navbar";
 
 const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
   <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
diff --git a/space/lib/mobx/store-init.tsx b/space/lib/mobx/store-init.tsx
index bcefd203b34..897c8e3a2a2 100644
--- a/space/lib/mobx/store-init.tsx
+++ b/space/lib/mobx/store-init.tsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 // js cookie
 import Cookie from "js-cookie";
 // mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
 
 const MobxStoreInit = () => {
   const { user: userStore } = useMobxStore();
diff --git a/space/lib/mobx/store-provider.tsx b/space/lib/mobx/store-provider.tsx
index c6fde14ae02..18854c1d526 100644
--- a/space/lib/mobx/store-provider.tsx
+++ b/space/lib/mobx/store-provider.tsx
@@ -2,17 +2,17 @@
 
 import { createContext, useContext } from "react";
 // mobx store
-import { RootStore } from "store/root";
+import { RootStore } from "@/store/root";
 
 let rootStore: RootStore = new RootStore();
 
 export const MobxStoreContext = createContext<RootStore>(rootStore);
 
 const initializeStore = () => {
-  const _rootStore: RootStore = rootStore ?? new RootStore();
-  if (typeof window === "undefined") return _rootStore;
-  if (!rootStore) rootStore = _rootStore;
-  return _rootStore;
+  const singletonRootStore: RootStore = rootStore ?? new RootStore();
+  if (typeof window === "undefined") return singletonRootStore;
+  if (!rootStore) rootStore = singletonRootStore;
+  return singletonRootStore;
 };
 
 export const MobxStoreProvider = ({ children }: any) => {
diff --git a/space/next.config.js b/space/next.config.js
index 18b9275a1de..352d9b61b3f 100644
--- a/space/next.config.js
+++ b/space/next.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import('next').NextConfig} */
 require("dotenv").config({ path: ".env" });
 const { withSentryConfig } = require("@sentry/nextjs");
@@ -26,8 +27,11 @@ const nextConfig = {
   output: "standalone",
 };
 
-if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {
-  module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
+if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0", 10)) {
+  module.exports = withSentryConfig(nextConfig,
+    { silent: true, authToken: process.env.SENTRY_AUTH_TOKEN },
+    { hideSourceMaps: true }
+  );
 } else {
   module.exports = nextConfig;
 }
diff --git a/space/package.json b/space/package.json
index a1d600a60bf..6e736f9b072 100644
--- a/space/package.json
+++ b/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -20,8 +20,9 @@
     "@plane/document-editor": "*",
     "@plane/lite-text-editor": "*",
     "@plane/rich-text-editor": "*",
+    "@plane/types": "*",
     "@plane/ui": "*",
-    "@sentry/nextjs": "^7.85.0",
+    "@sentry/nextjs": "^7.108.0",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",
     "dotenv": "^16.3.1",
@@ -49,9 +50,7 @@
     "@types/react-dom": "^18.2.17",
     "@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/[workspace_slug]/[project_slug]/index.tsx b/space/pages/[workspace_slug]/[project_slug]/index.tsx
index e50c01c18e9..b0ee7d0cd17 100644
--- a/space/pages/[workspace_slug]/[project_slug]/index.tsx
+++ b/space/pages/[workspace_slug]/[project_slug]/index.tsx
@@ -4,11 +4,11 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 /// layouts
-import ProjectLayout from "layouts/project-layout";
 // components
-import { ProjectDetailsView } from "components/views/project-details";
+import { ProjectDetailsView } from "@/components/views/project-details";
 // lib
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import ProjectLayout from "layouts/project-layout";
 
 const WorkspaceProjectPage = (props: any) => {
   const SITE_TITLE = props?.project_settings?.project_details?.name || "Plane | Deploy";
diff --git a/space/pages/_app.tsx b/space/pages/_app.tsx
index da1db272c9d..9d80d53a372 100644
--- a/space/pages/_app.tsx
+++ b/space/pages/_app.tsx
@@ -1,15 +1,15 @@
-import Head from "next/head";
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import { ThemeProvider } from "next-themes";
 // styles
-import "styles/globals.css";
+import "@/styles/globals.css";
 // contexts
-import { ToastContextProvider } from "contexts/toast.context";
+import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
+import { ToastContextProvider } from "@/contexts/toast.context";
 // mobx store provider
-import { MobxStoreProvider } from "lib/mobx/store-provider";
-import MobxStoreInit from "lib/mobx/store-init";
+import MobxStoreInit from "@/lib/mobx/store-init";
+import { MobxStoreProvider } from "@/lib/mobx/store-provider";
 // 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/";
 
diff --git a/space/pages/accounts/password.tsx b/space/pages/accounts/password.tsx
index 85da11290f2..16e805b6fba 100644
--- a/space/pages/accounts/password.tsx
+++ b/space/pages/accounts/password.tsx
@@ -3,20 +3,20 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTheme } from "next-themes";
-import { Lightbulb } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
+import { Lightbulb } from "lucide-react";
 // services
-import { AuthService } from "services/authentication.service";
+import { Button, Input } from "@plane/ui";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/authentication.service";
 // hooks
-import useToast from "hooks/use-toast";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
+import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
 // images
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text-new.png";
 import latestFeatures from "public/onboarding/onboarding-pages.svg";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text-new.png";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 
 type TResetPasswordFormValues = {
   email: string;
diff --git a/space/pages/index.tsx b/space/pages/index.tsx
index e680c257cac..b1c2bd97cf8 100644
--- a/space/pages/index.tsx
+++ b/space/pages/index.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 
 // components
-import { LoginView } from "components/views";
+import { LoginView } from "@/components/views";
 // store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useMobxStore } from "@/lib/mobx/store-provider";
+import { RootStore } from "@/store/root";
 
 const Index: NextPage = observer(() => {
   const router = useRouter();
diff --git a/space/pages/onboarding/index.tsx b/space/pages/onboarding/index.tsx
index 423eec2de7c..95acaef2940 100644
--- a/space/pages/onboarding/index.tsx
+++ b/space/pages/onboarding/index.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 // mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { OnBoardingForm } from "@/components/accounts/onboarding-form";
+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" : "";
 
diff --git a/space/services/app-config.service.ts b/space/services/app-config.service.ts
index af79935cf27..a6a1a9cf6f8 100644
--- a/space/services/app-config.service.ts
+++ b/space/services/app-config.service.ts
@@ -1,7 +1,7 @@
 // services
-import APIService from "services/api.service";
+import APIService from "@/services/api.service";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // types
 import { IAppConfig } from "types/app";
 
diff --git a/space/services/authentication.service.ts b/space/services/authentication.service.ts
index 7bf0eccfa0f..0fbf0c71b7d 100644
--- a/space/services/authentication.service.ts
+++ b/space/services/authentication.service.ts
@@ -1,6 +1,6 @@
 // services
-import APIService from "services/api.service";
-import { API_BASE_URL } from "helpers/common.helper";
+import APIService from "@/services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
 import { IEmailCheckData, IEmailCheckResponse, ILoginTokenResponse, IPasswordSignInData } from "types/auth";
 
 export class AuthService extends APIService {
diff --git a/space/services/file.service.ts b/space/services/file.service.ts
index ecebf92b7d3..52793ec75fc 100644
--- a/space/services/file.service.ts
+++ b/space/services/file.service.ts
@@ -1,7 +1,7 @@
 // services
-import APIService from "services/api.service";
+import APIService from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 import axios from "axios";
 
 interface UnSplashImage {
diff --git a/space/services/issue.service.ts b/space/services/issue.service.ts
index 5feb1b00b92..b6f2e3be22b 100644
--- a/space/services/issue.service.ts
+++ b/space/services/issue.service.ts
@@ -1,6 +1,6 @@
 // services
-import APIService from "services/api.service";
-import { API_BASE_URL } from "helpers/common.helper";
+import APIService from "@/services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
 
 class IssueService extends APIService {
   constructor() {
diff --git a/space/services/project.service.ts b/space/services/project.service.ts
index 0d6eca951b4..2e173d28282 100644
--- a/space/services/project.service.ts
+++ b/space/services/project.service.ts
@@ -1,6 +1,6 @@
 // services
-import APIService from "services/api.service";
-import { API_BASE_URL } from "helpers/common.helper";
+import APIService from "@/services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
 
 class ProjectService extends APIService {
   constructor() {
diff --git a/space/services/user.service.ts b/space/services/user.service.ts
index c8232afa9b1..e49378d93cf 100644
--- a/space/services/user.service.ts
+++ b/space/services/user.service.ts
@@ -1,7 +1,7 @@
 // services
-import APIService from "services/api.service";
+import APIService from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // types
 import { IUser } from "types/user";
 
diff --git a/space/store/issue.ts b/space/store/issue.ts
index 02dd3cdd00c..8e4876f6670 100644
--- a/space/store/issue.ts
+++ b/space/store/issue.ts
@@ -1,6 +1,6 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // services
-import IssueService from "services/issue.service";
+import IssueService from "@/services/issue.service";
 // store
 import { RootStore } from "./root";
 // types
diff --git a/space/store/issue_details.ts b/space/store/issue_details.ts
index 346206e94ee..766cb979d8b 100644
--- a/space/store/issue_details.ts
+++ b/space/store/issue_details.ts
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from "uuid";
 // store
 import { RootStore } from "./root";
 // services
-import IssueService from "services/issue.service";
+import IssueService from "@/services/issue.service";
 import { IIssue, IVote } from "types/issue";
 
 export type IPeekMode = "side" | "modal" | "full";
diff --git a/space/store/issues/base-issue-filter.store.ts b/space/store/issues/base-issue-filter.store.ts
index 2cd2e3bc911..3859d94c665 100644
--- a/space/store/issues/base-issue-filter.store.ts
+++ b/space/store/issues/base-issue-filter.store.ts
@@ -1,5 +1,5 @@
 // types
-import { RootStore } from "store/root";
+import { RootStore } from "@/store/root";
 
 export interface IIssueFilterBaseStore {
   // helper methods
diff --git a/space/store/issues/issue-filters.store.ts b/space/store/issues/issue-filters.store.ts
index f2408e290d0..fffa42e031c 100644
--- a/space/store/issues/issue-filters.store.ts
+++ b/space/store/issues/issue-filters.store.ts
@@ -1,6 +1,6 @@
 import { action, makeObservable, observable, runInAction, computed } from "mobx";
 // types
-import { RootStore } from "store/root";
+import { RootStore } from "@/store/root";
 import { IIssueFilterOptions, TIssueParams } from "./types";
 import { handleIssueQueryParamsByLayout } from "./helpers";
 import { IssueFilterBaseStore } from "./base-issue-filter.store";
diff --git a/space/store/project.ts b/space/store/project.ts
index 76b4d06cb64..b12cf18dbfc 100644
--- a/space/store/project.ts
+++ b/space/store/project.ts
@@ -1,7 +1,7 @@
 // mobx
 import { observable, action, makeObservable, runInAction } from "mobx";
 // service
-import ProjectService from "services/project.service";
+import ProjectService from "@/services/project.service";
 import { TIssueBoardKeys } from "types/issue";
 // types
 import { IWorkspace, IProject, IProjectSettings } from "types/project";
diff --git a/space/store/user.ts b/space/store/user.ts
index e97f655f728..0e9b90106e9 100644
--- a/space/store/user.ts
+++ b/space/store/user.ts
@@ -1,7 +1,7 @@
 // mobx
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // service
-import { UserService } from "services/user.service";
+import { UserService } from "@/services/user.service";
 // types
 import { IUser } from "types/user";
 
diff --git a/space/tsconfig.json b/space/tsconfig.json
index 3047edb7c1a..9d3e164bed0 100644
--- a/space/tsconfig.json
+++ b/space/tsconfig.json
@@ -4,6 +4,9 @@
   "exclude": ["node_modules"],
   "compilerOptions": {
     "baseUrl": ".",
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["*"]
+    }
   }
 }
diff --git a/space/types/project.ts b/space/types/project.ts
index e0e1bba9ef2..7e81d366c01 100644
--- a/space/types/project.ts
+++ b/space/types/project.ts
@@ -1,3 +1,5 @@
+import { TProjectLogoProps } from "@plane/types";
+
 export interface IWorkspace {
   id: string;
   name: string;
@@ -9,10 +11,8 @@ export interface IProject {
   identifier: string;
   name: string;
   description: string;
-  icon: string;
   cover_image: string | null;
-  icon_prop: string | null;
-  emoji: string | null;
+  logo_props: TProjectLogoProps;
 }
 
 export interface IProjectSettings {
diff --git a/turbo.json b/turbo.json
index bd5ee34b59e..4e8c4ee8151 100644
--- a/turbo.json
+++ b/turbo.json
@@ -16,37 +16,26 @@
     "NEXT_PUBLIC_DEPLOY_WITH_NGINX",
     "NEXT_PUBLIC_POSTHOG_KEY",
     "NEXT_PUBLIC_POSTHOG_HOST",
-    "JITSU_TRACKER_ACCESS_KEY",
-    "JITSU_TRACKER_HOST"
+    "NEXT_PUBLIC_POSTHOG_DEBUG",
+    "SENTRY_AUTH_TOKEN"
   ],
   "pipeline": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "outputs": [
-        ".next/**",
-        "dist/**"
-      ]
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "dist/**"]
     },
     "develop": {
       "cache": false,
       "persistent": true,
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     },
     "dev": {
       "cache": false,
       "persistent": true,
-      "dependsOn": [
-        "^build"
-      ]
+      "dependsOn": ["^build"]
     },
     "test": {
-      "dependsOn": [
-        "^build"
-      ],
+      "dependsOn": ["^build"],
       "outputs": []
     },
     "lint": {
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index c8df607506c..57d39bcfad1 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -1,4 +1,52 @@
 module.exports = {
   root: true,
   extends: ["custom"],
+  parser: "@typescript-eslint/parser",
+  settings: {
+    "import/resolver": {
+      typescript: {},
+      node: {
+        moduleDirectory: ["node_modules", "."],
+      },
+    },
+  },
+  rules: {
+    "import/order": [
+      "error",
+      {
+        groups: ["builtin", "external", "internal", "parent", "sibling",],
+        pathGroups: [
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
+          {
+            pattern: "lucide-react",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@headlessui/**",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@plane/**",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@/**",
+            group: "internal",
+          }
+        ],
+        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
 };
diff --git a/web/components/account/deactivate-account-modal.tsx b/web/components/account/deactivate-account-modal.tsx
index 701db6ad945..41508ad67ad 100644
--- a/web/components/account/deactivate-account-modal.tsx
+++ b/web/components/account/deactivate-account-modal.tsx
@@ -1,15 +1,13 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { useTheme } from "next-themes";
-import { Dialog, Transition } from "@headlessui/react";
-import { Trash2 } from "lucide-react";
 import { mutate } from "swr";
+import { Trash2 } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useUser } from "hooks/store";
 // ui
-import { Button } from "@plane/ui";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { useUser } from "@/hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -26,7 +24,6 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
 
   const router = useRouter();
 
-  const { setToastAlert } = useToast();
   const { setTheme } = useTheme();
 
   const handleClose = () => {
@@ -39,8 +36,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
 
     await deactivateAccount()
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Account deactivated successfully.",
         });
@@ -50,8 +47,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
         handleClose();
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error,
         })
@@ -89,8 +86,11 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">
-                      <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
-                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
+                      <div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
+                        <Trash2
+                          className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
+                          aria-hidden="true"
+                        />
                       </div>
                       <div>
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
diff --git a/web/components/account/o-auth/o-auth-options.tsx b/web/components/account/o-auth/o-auth-options.tsx
index 7c8468acb78..1dd970fd6a6 100644
--- a/web/components/account/o-auth/o-auth-options.tsx
+++ b/web/components/account/o-auth/o-auth-options.tsx
@@ -1,11 +1,12 @@
 import { observer } from "mobx-react-lite";
-// services
-import { AuthService } from "services/auth.service";
-// hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { GitHubSignInButton, GoogleSignInButton } from "components/account";
+import { GitHubSignInButton, GoogleSignInButton } from "@/components/account";
+// hooks
+import { useApplication } from "@/hooks/store";
+// services
+import { AuthService } from "@/services/auth.service";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;
@@ -17,8 +18,6 @@ const authService = new AuthService();
 
 export const OAuthOptions: React.FC<Props> = observer((props) => {
   const { handleSignInRedirection, type } = props;
-  // toast alert
-  const { setToastAlert } = useToast();
   // mobx store
   const {
     config: { envConfig },
@@ -39,9 +38,9 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         if (response) handleSignInRedirection();
       } else throw Error("Cant find credentials");
     } catch (err: any) {
-      setToastAlert({
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error signing in!",
-        type: "error",
         message: err?.error || "Something went wrong. Please try again later or contact the support team.",
       });
     }
@@ -60,9 +59,9 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
         if (response) handleSignInRedirection();
       } else throw Error("Cant find credentials");
     } catch (err: any) {
-      setToastAlert({
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error signing in!",
-        type: "error",
         message: err?.error || "Something went wrong. Please try again later or contact the support team.",
       });
     }
@@ -77,7 +76,7 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
       </div>
       <div className={`mx-auto mt-7 grid gap-4 overflow-hidden sm:w-96 ${areBothOAuthEnabled ? "grid-cols-2" : ""}`}>
         {envConfig?.google_client_id && (
-          <div className="h-[42px] flex items-center !overflow-hidden">
+          <div className="flex h-[42px] items-center !overflow-hidden">
             <GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} type={type} />
           </div>
         )}
diff --git a/web/components/account/sign-in-forms/email.tsx b/web/components/account/sign-in-forms/email.tsx
index 67ef720fe63..76051e94dc9 100644
--- a/web/components/account/sign-in-forms/email.tsx
+++ b/web/components/account/sign-in-forms/email.tsx
@@ -1,17 +1,15 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
-import { observer } from "mobx-react-lite";
+import { IEmailCheckData } from "@plane/types";
 // services
-import { AuthService } from "services/auth.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/auth.service";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
-import { IEmailCheckData } from "@plane/types";
 
 type Props = {
   onSubmit: (isPasswordAutoset: boolean) => void;
@@ -27,7 +25,6 @@ const authService = new AuthService();
 export const SignInEmailForm: React.FC<Props> = observer((props) => {
   const { onSubmit, updateEmail } = props;
   // hooks
-  const { setToastAlert } = useToast();
   const {
     control,
     formState: { errors, isSubmitting, isValid },
@@ -52,8 +49,8 @@ export const SignInEmailForm: React.FC<Props> = observer((props) => {
       .emailCheck(payload)
       .then((res) => onSubmit(res.is_password_autoset))
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/account/sign-in-forms/forgot-password-popover.tsx b/web/components/account/sign-in-forms/forgot-password-popover.tsx
index d652e51f1fe..31bafce26b5 100644
--- a/web/components/account/sign-in-forms/forgot-password-popover.tsx
+++ b/web/components/account/sign-in-forms/forgot-password-popover.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
-import { Popover } from "@headlessui/react";
 import { X } from "lucide-react";
+import { Popover } from "@headlessui/react";
 
 export const ForgotPasswordPopover = () => {
   // popper-js refs
diff --git a/web/components/account/sign-in-forms/optional-set-password.tsx b/web/components/account/sign-in-forms/optional-set-password.tsx
index 1ea5ca79217..26ec05aa5b2 100644
--- a/web/components/account/sign-in-forms/optional-set-password.tsx
+++ b/web/components/account/sign-in-forms/optional-set-password.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // services
-import { AuthService } from "services/auth.service";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Eye, EyeOff } from "lucide-react";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
+import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
 // icons
-import { Eye, EyeOff } from "lucide-react";
-import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED } from "constants/event-tracker";
+import { useEventTracker } from "@/hooks/store";
+import { AuthService } from "@/services/auth.service";
 
 type Props = {
   email: string;
@@ -38,8 +37,6 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     control,
@@ -62,8 +59,8 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
     await authService
       .setPassword(payload)
       .then(async () => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Password created successfully.",
         });
@@ -78,8 +75,8 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
           state: "FAILED",
           first_time: false,
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
@@ -160,7 +157,7 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
               </div>
             )}
           />
-          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+          <p className="mt-2 pb-3 text-xs text-onboarding-text-200">
             Whatever you choose now will be your account{"'"}s password until you change it.
           </p>
         </div>
diff --git a/web/components/account/sign-in-forms/password.tsx b/web/components/account/sign-in-forms/password.tsx
index 98719df63a1..8d7c9f89198 100644
--- a/web/components/account/sign-in-forms/password.tsx
+++ b/web/components/account/sign-in-forms/password.tsx
@@ -1,23 +1,22 @@
 import React, { useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff, XCircle } from "lucide-react";
+import { IPasswordSignInData } from "@plane/types";
 // services
-import { AuthService } from "services/auth.service";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { ESignInSteps, ForgotPasswordPopover } from "@/components/account";
+import { FORGOT_PASSWORD, SIGN_IN_WITH_PASSWORD } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useApplication, useEventTracker } from "@/hooks/store";
+import { AuthService } from "@/services/auth.service";
 // hooks
-import useToast from "hooks/use-toast";
-import { useApplication, useEventTracker } from "hooks/store";
 // components
-import { ESignInSteps, ForgotPasswordPopover } from "components/account";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
-import { IPasswordSignInData } from "@plane/types";
 // constants
-import { FORGOT_PASSWORD, SIGN_IN_WITH_PASSWORD } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -43,8 +42,6 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
   // states
   const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
   const {
     config: { envConfig },
   } = useApplication();
@@ -83,8 +80,8 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
         await onSubmit();
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
@@ -107,8 +104,8 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
       .generateUniqueCode({ email: emailFormValue })
       .then(() => handleStepChange(ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD))
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/account/sign-in-forms/root.tsx b/web/components/account/sign-in-forms/root.tsx
index 62f63caea69..fad37efaf18 100644
--- a/web/components/account/sign-in-forms/root.tsx
+++ b/web/components/account/sign-in-forms/root.tsx
@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
-import useSignInRedirection from "hooks/use-sign-in-redirection";
-// components
-import { LatestFeatureBlock } from "components/common";
 import {
   SignInEmailForm,
   SignInUniqueCodeForm,
   SignInPasswordForm,
   OAuthOptions,
   SignInOptionalSetPasswordForm,
-} from "components/account";
+} from "@/components/account";
+import { LatestFeatureBlock } from "@/components/common";
+import { NAVIGATE_TO_SIGNUP } from "@/constants/event-tracker";
+import { useApplication, useEventTracker } from "@/hooks/store";
+import useSignInRedirection from "@/hooks/use-sign-in-redirection";
+// components
 // constants
-import { NAVIGATE_TO_SIGNUP } from "constants/event-tracker";
 
 export enum ESignInSteps {
   EMAIL = "EMAIL",
diff --git a/web/components/account/sign-in-forms/unique-code.tsx b/web/components/account/sign-in-forms/unique-code.tsx
index 55dbe86e246..2a9144469a7 100644
--- a/web/components/account/sign-in-forms/unique-code.tsx
+++ b/web/components/account/sign-in-forms/unique-code.tsx
@@ -1,21 +1,22 @@
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
+import { IEmailCheckData, IMagicSignInData } from "@plane/types";
 // services
-import { AuthService } from "services/auth.service";
-import { UserService } from "services/user.service";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CODE_VERIFIED } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
+
+import useTimer from "@/hooks/use-timer";
+import { AuthService } from "@/services/auth.service";
+import { UserService } from "@/services/user.service";
 // hooks
-import useToast from "hooks/use-toast";
-import useTimer from "hooks/use-timer";
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
-import { IEmailCheckData, IMagicSignInData } from "@plane/types";
 // constants
-import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -42,8 +43,6 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
   const { email, onSubmit, handleEmailClear, submitButtonText } = props;
   // states
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const { captureEvent } = useEventTracker();
   // timer
@@ -84,8 +83,8 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
         captureEvent(CODE_VERIFIED, {
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
@@ -101,8 +100,8 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
       .generateUniqueCode(payload)
       .then(() => {
         setResendCodeTimer(30);
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "A new unique code has been sent to your email.",
         });
@@ -113,8 +112,8 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
         });
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
@@ -204,8 +203,8 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
               {resendTimerCode > 0
                 ? `Request new code in ${resendTimerCode}s`
                 : isRequestingNewCode
-                ? "Requesting new code"
-                : "Request new code"}
+                  ? "Requesting new code"
+                  : "Request new code"}
             </button>
           </div>
         </div>
diff --git a/web/components/account/sign-up-forms/email.tsx b/web/components/account/sign-up-forms/email.tsx
index 0d5861b4ee2..bc4fb1d86d8 100644
--- a/web/components/account/sign-up-forms/email.tsx
+++ b/web/components/account/sign-up-forms/email.tsx
@@ -1,17 +1,15 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
-import { observer } from "mobx-react-lite";
+import { IEmailCheckData } from "@plane/types";
 // services
-import { AuthService } from "services/auth.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/auth.service";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
-import { IEmailCheckData } from "@plane/types";
 
 type Props = {
   onSubmit: () => void;
@@ -27,7 +25,6 @@ const authService = new AuthService();
 export const SignUpEmailForm: React.FC<Props> = observer((props) => {
   const { onSubmit, updateEmail } = props;
   // hooks
-  const { setToastAlert } = useToast();
   const {
     control,
     formState: { errors, isSubmitting, isValid },
@@ -52,8 +49,8 @@ export const SignUpEmailForm: React.FC<Props> = observer((props) => {
       .emailCheck(payload)
       .then(() => onSubmit())
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/account/sign-up-forms/optional-set-password.tsx b/web/components/account/sign-up-forms/optional-set-password.tsx
index b49adabbb5c..c269c389ac1 100644
--- a/web/components/account/sign-up-forms/optional-set-password.tsx
+++ b/web/components/account/sign-up-forms/optional-set-password.tsx
@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // services
-import { AuthService } from "services/auth.service";
+import { Eye, EyeOff } from "lucide-react";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { ESignUpSteps } from "@/components/account";
+import { PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
+import { AuthService } from "@/services/auth.service";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
+// components
 // constants
-import { ESignUpSteps } from "components/account";
-import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "constants/event-tracker";
 // icons
-import { Eye, EyeOff } from "lucide-react";
 
 type Props = {
   email: string;
@@ -41,8 +41,6 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     control,
@@ -65,8 +63,8 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
     await authService
       .setPassword(payload)
       .then(async () => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Password created successfully.",
         });
@@ -81,8 +79,8 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
           state: "FAILED",
           first_time: true,
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
@@ -164,7 +162,7 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
               </div>
             )}
           />
-          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+          <p className="mt-2 pb-3 text-xs text-onboarding-text-200">
             This password will continue to be your account{"'"}s password.
           </p>
         </div>
diff --git a/web/components/account/sign-up-forms/password.tsx b/web/components/account/sign-up-forms/password.tsx
index 293e03ef874..9cafabe812c 100644
--- a/web/components/account/sign-up-forms/password.tsx
+++ b/web/components/account/sign-up-forms/password.tsx
@@ -1,18 +1,16 @@
 import React, { useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff, XCircle } from "lucide-react";
+import { IPasswordSignInData } from "@plane/types";
 // services
-import { AuthService } from "services/auth.service";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { AuthService } from "@/services/auth.service";
 // types
-import { IPasswordSignInData } from "@plane/types";
 
 type Props = {
   onSubmit: () => Promise<void>;
@@ -34,8 +32,6 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
   const { onSubmit } = props;
   // states
   const [showPassword, setShowPassword] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     control,
@@ -59,8 +55,8 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
       .passwordSignIn(payload)
       .then(async () => await onSubmit())
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
@@ -138,7 +134,7 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
               </div>
             )}
           />
-          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+          <p className="mt-2 pb-3 text-xs text-onboarding-text-200">
             This password will continue to be your account{"'"}s password.
           </p>
         </div>
diff --git a/web/components/account/sign-up-forms/root.tsx b/web/components/account/sign-up-forms/root.tsx
index 8eeb5e99f96..4fab3abcdd3 100644
--- a/web/components/account/sign-up-forms/root.tsx
+++ b/web/components/account/sign-up-forms/root.tsx
@@ -1,19 +1,19 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
-import useSignInRedirection from "hooks/use-sign-in-redirection";
-// components
+import Link from "next/link";
 import {
   OAuthOptions,
   SignUpEmailForm,
   SignUpOptionalSetPasswordForm,
   SignUpPasswordForm,
   SignUpUniqueCodeForm,
-} from "components/account";
-import Link from "next/link";
+} from "@/components/account";
+import { NAVIGATE_TO_SIGNIN } from "@/constants/event-tracker";
+import { useApplication, useEventTracker } from "@/hooks/store";
+import useSignInRedirection from "@/hooks/use-sign-in-redirection";
+// components
 // constants
-import { NAVIGATE_TO_SIGNIN } from "constants/event-tracker";
 
 export enum ESignUpSteps {
   EMAIL = "EMAIL",
diff --git a/web/components/account/sign-up-forms/unique-code.tsx b/web/components/account/sign-up-forms/unique-code.tsx
index 1b54ef9ebc1..bc6e1ee4c88 100644
--- a/web/components/account/sign-up-forms/unique-code.tsx
+++ b/web/components/account/sign-up-forms/unique-code.tsx
@@ -2,21 +2,21 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
+import { IEmailCheckData, IMagicSignInData } from "@plane/types";
 // services
-import { AuthService } from "services/auth.service";
-import { UserService } from "services/user.service";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CODE_VERIFIED } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
+import useTimer from "@/hooks/use-timer";
+import { AuthService } from "@/services/auth.service";
+import { UserService } from "@/services/user.service";
 // hooks
-import useToast from "hooks/use-toast";
-import useTimer from "hooks/use-timer";
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
-import { IEmailCheckData, IMagicSignInData } from "@plane/types";
 // constants
-import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -44,8 +44,6 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
   // store hooks
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
   // timer
   const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
   // form info
@@ -84,8 +82,8 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
         captureEvent(CODE_VERIFIED, {
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
@@ -101,8 +99,8 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
       .generateUniqueCode(payload)
       .then(() => {
         setResendCodeTimer(30);
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "A new unique code has been sent to your email.",
         });
@@ -112,8 +110,8 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
         });
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
@@ -204,8 +202,8 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
               {resendTimerCode > 0
                 ? `Request new code in ${resendTimerCode}s`
                 : isRequestingNewCode
-                ? "Requesting new code"
-                : "Request new code"}
+                  ? "Requesting new code"
+                  : "Request new code"}
             </button>
           </div>
         </div>
diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
index 0c3ec89250b..9f075a8bb5d 100644
--- a/web/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -1,17 +1,17 @@
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 import { useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import { IAnalyticsParams } from "@plane/types";
 // services
-import { AnalyticsService } from "services/analytics.service";
 // components
-import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "components/analytics";
+import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "@/components/analytics";
 // types
-import { IAnalyticsParams } from "@plane/types";
 // fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
-import { cn } from "helpers/common.helper";
-import { useApplication } from "hooks/store";
+import { ANALYTICS } from "@/constants/fetch-keys";
+import { cn } from "@/helpers/common.helper";
+import { useApplication } from "@/hooks/store";
+import { AnalyticsService } from "@/services/analytics.service";
 
 type Props = {
   additionalParams?: Partial<IAnalyticsParams>;
diff --git a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index ec7c4019507..9101f1cf205 100644
--- a/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/web/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -1,9 +1,9 @@
 // nivo
 import { BarTooltipProps } from "@nivo/bar";
-import { DATE_KEYS } from "constants/analytics";
-import { renderMonthAndYear } from "helpers/analytics.helper";
-// types
 import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
+import { DATE_KEYS } from "@/constants/analytics";
+import { renderMonthAndYear } from "@/helpers/analytics.helper";
+// types
 
 type Props = {
   datum: BarTooltipProps<any>;
@@ -60,8 +60,8 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
               ? "capitalize"
               : ""
             : params.x_axis === "priority" || params.x_axis === "state__group"
-            ? "capitalize"
-            : ""
+              ? "capitalize"
+              : ""
         }`}
       >
         {params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue}:
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
index 51b4089c4f2..742424c7925 100644
--- a/web/components/analytics/custom-analytics/graph/index.tsx
+++ b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -1,15 +1,15 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // components
-import { CustomTooltip } from "./custom-tooltip";
+import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
 import { Tooltip } from "@plane/ui";
 // ui
-import { BarGraph } from "components/ui";
+import { BarGraph } from "@/components/ui";
 // helpers
-import { findStringWithMostCharacters } from "helpers/array.helper";
-import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
+import { generateBarColor, generateDisplayName } from "@/helpers/analytics.helper";
+import { findStringWithMostCharacters } from "@/helpers/array.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
+import { CustomTooltip } from "./custom-tooltip";
 
 type Props = {
   analytics: IAnalyticsResponse;
@@ -101,8 +101,8 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
                               ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
                               : "?"
                             : datum.value && datum.value !== "None"
-                            ? `${datum.value}`.toUpperCase()[0]
-                            : "?"}
+                              ? `${datum.value}`.toUpperCase()[0]
+                              : "?"}
                         </text>
                       </g>
                     </Tooltip>
diff --git a/web/components/analytics/custom-analytics/main-content.tsx b/web/components/analytics/custom-analytics/main-content.tsx
index 3c199f8078c..f57edbefddf 100644
--- a/web/components/analytics/custom-analytics/main-content.tsx
+++ b/web/components/analytics/custom-analytics/main-content.tsx
@@ -1,16 +1,16 @@
 import { useRouter } from "next/router";
 import { mutate } from "swr";
+import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
 
 // components
-import { AnalyticsGraph, AnalyticsTable } from "components/analytics";
-// ui
 import { Button, Loader } from "@plane/ui";
+import { AnalyticsGraph, AnalyticsTable } from "@/components/analytics";
+// ui
 // helpers
-import { convertResponseToBarGraphData } from "helpers/analytics.helper";
+import { ANALYTICS } from "@/constants/fetch-keys";
+import { convertResponseToBarGraphData } from "@/helpers/analytics.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
 // fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;
@@ -33,7 +33,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
       {!error ? (
         analytics ? (
           analytics.total > 0 ? (
-            <div className="h-full overflow-y-auto">
+            <div className="h-full overflow-y-auto vertical-scrollbar scrollbar-md">
               <AnalyticsGraph
                 analytics={analytics}
                 barGraphData={barGraphData}
diff --git a/web/components/analytics/custom-analytics/select-bar.tsx b/web/components/analytics/custom-analytics/select-bar.tsx
index 31acb84718c..dc241d1ee3f 100644
--- a/web/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/components/analytics/custom-analytics/select-bar.tsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
+import { IAnalyticsParams } from "@plane/types";
 // hooks
-import { useProject } from "hooks/store";
+import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "@/components/analytics";
+import { useProject } from "@/hooks/store";
 // components
-import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
 // types
-import { IAnalyticsParams } from "@plane/types";
 
 type Props = {
   control: Control<IAnalyticsParams, any>;
@@ -22,8 +22,9 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"} ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""
-        }`}
+      className={`grid items-center gap-4 px-5 py-2.5 ${
+        isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"
+      } ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""}`}
     >
       {!isProjectLevel && (
         <div>
diff --git a/web/components/analytics/custom-analytics/select/project.tsx b/web/components/analytics/custom-analytics/select/project.tsx
index 3c08e157473..325683904b7 100644
--- a/web/components/analytics/custom-analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
-// ui
 import { CustomSearchSelect } from "@plane/ui";
+import { useProject } from "@/hooks/store";
+// ui
 
 type Props = {
   value: string[] | undefined;
diff --git a/web/components/analytics/custom-analytics/select/segment.tsx b/web/components/analytics/custom-analytics/select/segment.tsx
index 055665d9ee2..07bbb0e3712 100644
--- a/web/components/analytics/custom-analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@@ -1,11 +1,11 @@
 import { useRouter } from "next/router";
+import { IAnalyticsParams, TXAxisValues } from "@plane/types";
 
 // ui
 import { CustomSelect } from "@plane/ui";
 // types
-import { IAnalyticsParams, TXAxisValues } from "@plane/types";
+import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
 // constants
-import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues | null | undefined;
diff --git a/web/components/analytics/custom-analytics/select/x-axis.tsx b/web/components/analytics/custom-analytics/select/x-axis.tsx
index 74ee99a7708..a0c21b1b674 100644
--- a/web/components/analytics/custom-analytics/select/x-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@@ -1,11 +1,11 @@
 import { useRouter } from "next/router";
+import { IAnalyticsParams, TXAxisValues } from "@plane/types";
 
 // ui
 import { CustomSelect } from "@plane/ui";
 // types
-import { IAnalyticsParams, TXAxisValues } from "@plane/types";
+import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
 // constants
-import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues;
diff --git a/web/components/analytics/custom-analytics/select/y-axis.tsx b/web/components/analytics/custom-analytics/select/y-axis.tsx
index 9f66c6b5450..a33feb96793 100644
--- a/web/components/analytics/custom-analytics/select/y-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/y-axis.tsx
@@ -1,9 +1,9 @@
 // ui
+import { TYAxisValues } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
 // types
-import { TYAxisValues } from "@plane/types";
+import { ANALYTICS_Y_AXIS_VALUES } from "@/constants/analytics";
 // constants
-import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TYAxisValues;
diff --git a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
index f7ba07b75c4..7b665e5d817 100644
--- a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
 // icons
 import { Contrast, LayoutGrid, Users } from "lucide-react";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
-import { truncateText } from "helpers/string.helper";
+import { ProjectLogo } from "@/components/project";
+import { truncateText } from "@/helpers/string.helper";
+import { useProject } from "@/hooks/store";
 
 type Props = {
   projectIds: string[];
@@ -19,7 +19,7 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
   return (
     <div className="relative flex flex-col gap-4 h-full">
       <h4 className="font-medium">Selected Projects</h4>
-      <div className="relative space-y-6 overflow-hidden overflow-y-auto">
+      <div className="relative space-y-6 overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md">
         {projectIds.map((projectId) => {
           const project = getProjectById(projectId);
 
@@ -28,21 +28,15 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
           return (
             <div key={projectId} className="w-full">
               <div className="flex items-center gap-1 text-sm">
-                {project.emoji ? (
-                  <span className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.emoji)}</span>
-                ) : project.icon_prop ? (
-                  <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.icon_prop)}</div>
-                ) : (
-                  <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                    {project?.name.charAt(0)}
-                  </span>
-                )}
+                <div className="h-6 w-6 grid place-items-center">
+                  <ProjectLogo logo={project.logo_props} />
+                </div>
                 <h5 className="flex items-center gap-1">
                   <p className="break-words">{truncateText(project.name, 20)}</p>
                   <span className="ml-1 text-xs text-custom-text-200">({project.identifier})</span>
                 </h5>
               </div>
-              <div className="mt-4 w-full space-y-3 pl-2">
+              <div className="mt-4 w-full space-y-3 px-2">
                 <div className="flex items-center justify-between gap-2 text-xs">
                   <div className="flex items-center gap-2">
                     <Users className="text-custom-text-200" size={14} strokeWidth={2} />
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
index 6a7b3c7b9d0..0dad084af04 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -1,12 +1,13 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useCycle, useMember, useModule, useProject } from "hooks/store";
+import { ProjectLogo } from "@/components/project";
+import { NETWORK_CHOICES } from "@/constants/project";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useCycle, useMember, useModule, useProject } from "@/hooks/store";
+// components
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
 // constants
-import { NETWORK_CHOICES } from "constants/project";
 
 export const CustomAnalyticsSidebarHeader = observer(() => {
   const router = useRouter();
@@ -81,15 +82,9 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
         ) : (
           <div className="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="grid h-6 w-6 flex-shrink-0 place-items-center">
-                  {renderEmoji(projectDetails.icon_prop)}
-                </div>
-              ) : (
-                <span className="mr-1 grid h-6 w-6 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                  {projectDetails?.name.charAt(0)}
+              {projectDetails && (
+                <span className="h-6 w-6 grid place-items-center flex-shrink-0">
+                  <ProjectLogo logo={projectDetails.logo_props} />
                 </span>
               )}
               <h4 className="break-words font-medium">{projectDetails?.name}</h4>
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
index 3ad2805f28f..26bb039b0d5 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -1,25 +1,24 @@
-import { useEffect, } from "react";
-import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { mutate } from "swr";
 // services
-import { AnalyticsService } from "services/analytics.service";
 // hooks
-import { useCycle, useModule, useProject, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
 // components
-import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
 // ui
-import { Button, LayersIcon } from "@plane/ui";
-// icons
 import { CalendarDays, Download, RefreshCw } from "lucide-react";
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
+import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
+// icons
+import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "@/components/analytics";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
 // fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
-import { cn } from "helpers/common.helper";
+import { ANALYTICS } from "@/constants/fetch-keys";
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useCycle, useModule, useProject, useUser, useWorkspace } from "@/hooks/store";
+import { AnalyticsService } from "@/services/analytics.service";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;
@@ -34,8 +33,6 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const { currentUser } = useUser();
   const { workspaceProjectIds, getProjectById } = useProject();
@@ -107,8 +104,8 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
     analyticsService
       .exportAnalytics(workspaceSlug.toString(), data)
       .then((res) => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: res.message,
         });
@@ -116,8 +113,8 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
         trackExportAnalytics();
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "There was some error in exporting the analytics. Please try again.",
         })
@@ -146,7 +143,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
   return (
     <div
       className={cn(
-        "relative h-full flex w-full gap-2 justify-between items-start px-5 py-4 bg-custom-sidebar-background-100",
+        "relative flex h-full w-full items-start justify-between gap-2 bg-custom-sidebar-background-100 px-5 py-4",
         !isProjectLevel ? "flex-col" : ""
       )}
     >
@@ -163,8 +160,8 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
               (cycleId
                 ? cycleDetails?.created_at
                 : moduleId
-                ? moduleDetails?.created_at
-                : projectDetails?.created_at) ?? ""
+                  ? moduleDetails?.created_at
+                  : projectDetails?.created_at) ?? ""
             )}
           </div>
         )}
@@ -179,10 +176,10 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
         </>
       </div>
 
-      <div className="flex flex-wrap items-center gap-2 justify-end">
+      <div className="flex flex-wrap items-center justify-end gap-2">
         <Button
           variant="neutral-primary"
-          prependIcon={<RefreshCw className="h-3 md:h-3.5 w-3 md:w-3.5" />}
+          prependIcon={<RefreshCw className="h-3 w-3 md:h-3.5 md:w-3.5" />}
           onClick={() => {
             if (!workspaceSlug) return;
 
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index c09f26d7657..efb8293fbc9 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -1,13 +1,13 @@
 import { BarDatum } from "@nivo/bar";
 
 // icons
+import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "@plane/types";
 import { PriorityIcon } from "@plane/ui";
 // helpers
-import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@/constants/analytics";
+import { generateBarColor, generateDisplayName } from "@/helpers/analytics.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "@plane/types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   analytics: IAnalyticsResponse;
diff --git a/web/components/analytics/project-modal/main-content.tsx b/web/components/analytics/project-modal/main-content.tsx
index a04a4326010..096b90d6777 100644
--- a/web/components/analytics/project-modal/main-content.tsx
+++ b/web/components/analytics/project-modal/main-content.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { Tab } from "@headlessui/react";
+import { ICycle, IModule, IProject } from "@plane/types";
 // components
-import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
 // types
-import { ICycle, IModule, IProject } from "@plane/types";
+import { ANALYTICS_TABS } from "@/constants/analytics";
 // constants
-import { ANALYTICS_TABS } from "constants/analytics";
 
 type Props = {
   fullScreen: boolean;
@@ -25,10 +25,13 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${selected ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200" : "border-transparent"
+              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                selected
+                  ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200"
+                  : "border-transparent"
               }`
             }
-            onClick={() => { }}
+            onClick={() => {}}
           >
             {tab.title}
           </Tab>
diff --git a/web/components/analytics/project-modal/modal.tsx b/web/components/analytics/project-modal/modal.tsx
index df61411f205..53d54602f67 100644
--- a/web/components/analytics/project-modal/modal.tsx
+++ b/web/components/analytics/project-modal/modal.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
+import { ICycle, IModule, IProject } from "@plane/types";
 
 // components
-import { ProjectAnalyticsModalHeader, ProjectAnalyticsModalMainContent } from "components/analytics";
+import { ProjectAnalyticsModalHeader, ProjectAnalyticsModalMainContent } from "@/components/analytics";
 // types
-import { ICycle, IModule, IProject } from "@plane/types";
 
 type Props = {
   isOpen: boolean;
@@ -36,30 +36,34 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
           leaveFrom="translate-x-0"
           leaveTo="translate-x-full"
         >
-          <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-            <div
-              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
-                }`}
-            >
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Dialog.Panel>
               <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"
-                  }`}
+                className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+                  fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
+                }`}
               >
-                <ProjectAnalyticsModalHeader
-                  fullScreen={fullScreen}
-                  handleClose={handleClose}
-                  setFullScreen={setFullScreen}
-                  title={cycleDetails?.name ?? moduleDetails?.name ?? projectDetails?.name ?? ""}
-                />
-                <ProjectAnalyticsModalMainContent
-                  fullScreen={fullScreen}
-                  cycleDetails={cycleDetails}
-                  moduleDetails={moduleDetails}
-                  projectDetails={projectDetails}
-                />
+                <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>
               </div>
-            </div>
-          </Dialog.Panel>
+            </Dialog.Panel>
+          </div>
         </Transition.Child>
       </Dialog>
     </Transition.Root>
diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
index e66ffeabfee..20bc502cee4 100644
--- a/web/components/analytics/scope-and-demand/demand.tsx
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -1,9 +1,7 @@
-// icons
-import { Triangle } from "lucide-react";
 // types
 import { IDefaultAnalyticsResponse, TStateGroups } from "@plane/types";
 // constants
-import { STATE_GROUPS } from "constants/state";
+import { STATE_GROUPS } from "@/constants/state";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
@@ -16,7 +14,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
       <h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
     </div>
-    <div className="space-y-6">
+    <div className="space-y-6 pb-2">
       {defaultAnalytics?.open_issues_classified.map((group) => {
         const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
 
@@ -50,14 +48,5 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </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/web/components/analytics/scope-and-demand/leaderboard.tsx b/web/components/analytics/scope-and-demand/leaderboard.tsx
index 9cd38dde4ad..e6473b8745f 100644
--- a/web/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/components/analytics/scope-and-demand/leaderboard.tsx
@@ -1,5 +1,5 @@
 // ui
-import { ProfileEmptyState } from "components/ui";
+import { ProfileEmptyState } from "@/components/ui";
 // image
 import emptyUsers from "public/empty-state/empty_users.svg";
 
@@ -24,7 +24,7 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
       <div className="mt-3 space-y-3">
         {users.map((user) => (
           <a
-            key={user.display_name ?? "None"}
+            key={user?.display_name ?? "None"}
             href={`/${workspaceSlug}/profile/${user.id}`}
             target="_blank"
             rel="noopener noreferrer"
@@ -36,16 +36,16 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
                   <img
                     src={user.avatar}
                     className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
-                    alt={user.display_name ?? "None"}
+                    alt={user?.display_name ?? "None"}
                   />
                 </div>
               ) : (
                 <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 text-[11px] capitalize text-white">
-                  {user.display_name !== "" ? user?.display_name?.[0] : "?"}
+                  {user?.display_name !== "" ? user?.display_name?.[0] : "?"}
                 </div>
               )}
               <span className="break-words text-custom-text-200">
-                {user.display_name !== "" ? `${user.display_name}` : "No assignee"}
+                {user?.display_name !== "" ? `${user?.display_name}` : "No assignee"}
               </span>
             </div>
             <span className="flex-shrink-0">{user.count}</span>
diff --git a/web/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
index 6f26ad73ff9..3c5e3f48e78 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -3,13 +3,13 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import { AnalyticsService } from "services/analytics.service";
 // components
-import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
-// ui
 import { Button, Loader } from "@plane/ui";
+import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "@/components/analytics";
+// ui
 // fetch-keys
-import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
+import { DEFAULT_ANALYTICS } from "@/constants/fetch-keys";
+import { AnalyticsService } from "@/services/analytics.service";
 
 type Props = {
   fullScreen?: boolean;
diff --git a/web/components/analytics/scope-and-demand/scope.tsx b/web/components/analytics/scope-and-demand/scope.tsx
index ea1a51937d4..527761e96c5 100644
--- a/web/components/analytics/scope-and-demand/scope.tsx
+++ b/web/components/analytics/scope-and-demand/scope.tsx
@@ -1,9 +1,9 @@
 // ui
-import { BarGraph, ProfileEmptyState } from "components/ui";
+import { IDefaultAnalyticsResponse } from "@plane/types";
+import { BarGraph, ProfileEmptyState } from "@/components/ui";
 // image
 import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
 // types
-import { IDefaultAnalyticsResponse } from "@plane/types";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
diff --git a/web/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
index 2a62c99d4bd..cbd0e155c82 100644
--- a/web/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -1,11 +1,11 @@
 // ui
-import { LineGraph, ProfileEmptyState } from "components/ui";
+import { IDefaultAnalyticsResponse } from "@plane/types";
+import { LineGraph, ProfileEmptyState } from "@/components/ui";
 // image
+import { MONTHS_LIST } from "@/constants/calendar";
 import emptyGraph from "public/empty-state/empty_graph.svg";
 // types
-import { IDefaultAnalyticsResponse } from "@plane/types";
 // constants
-import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
diff --git a/web/components/api-token/delete-token-modal.tsx b/web/components/api-token/delete-token-modal.tsx
index 993289c10c7..4c511de4afe 100644
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@@ -2,16 +2,14 @@ import { useState, Fragment, FC } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
+import { IApiToken } from "@plane/types";
 // services
-import { APITokenService } from "services/api_token.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+import { APITokenService } from "@/services/api_token.service";
 // ui
-import { Button } from "@plane/ui";
 // types
-import { IApiToken } from "@plane/types";
 // fetch-keys
-import { API_TOKENS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -25,8 +23,6 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
   const { isOpen, onClose, tokenId } = props;
   // states
   const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
-  // hooks
-  const { setToastAlert } = useToast();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -44,8 +40,8 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
     apiTokenService
       .deleteApiToken(workspaceSlug.toString(), tokenId)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Token deleted successfully.",
         });
@@ -59,8 +55,8 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
         handleClose();
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
           message: err?.message ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/api-token/modal/create-token-modal.tsx b/web/components/api-token/modal/create-token-modal.tsx
index b3fc3df78ec..32305ba5be0 100644
--- a/web/components/api-token/modal/create-token-modal.tsx
+++ b/web/components/api-token/modal/create-token-modal.tsx
@@ -2,19 +2,20 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
+import { IApiToken } from "@plane/types";
 // services
-import { APITokenService } from "services/api_token.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CreateApiTokenForm, GeneratedTokenDetails } from "@/components/api-token";
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { csvDownload } from "@/helpers/download.helper";
+import { APITokenService } from "@/services/api_token.service";
+// ui
 // components
-import { CreateApiTokenForm, GeneratedTokenDetails } from "components/api-token";
 // helpers
-import { csvDownload } from "helpers/download.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
 // types
-import { IApiToken } from "@plane/types";
 // fetch-keys
-import { API_TOKENS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -32,8 +33,6 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -76,10 +75,10 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
         );
       })
       .catch((err) => {
-        setToastAlert({
-          message: err.message,
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
+          message: err.message,
         });
 
         throw err;
diff --git a/web/components/api-token/modal/form.tsx b/web/components/api-token/modal/form.tsx
index 77753e64d20..b2b3f64dcbe 100644
--- a/web/components/api-token/modal/form.tsx
+++ b/web/components/api-token/modal/form.tsx
@@ -1,16 +1,14 @@
 import { useState } from "react";
 import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";
-import { DateDropdown } from "components/dropdowns";
 import { Calendar } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
+import { IApiToken } from "@plane/types";
 // ui
-import { Button, CustomSelect, Input, TextArea, ToggleSwitch } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+import { DateDropdown } from "@/components/dropdowns";
 // helpers
-import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { renderFormattedDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
-import { IApiToken } from "@plane/types";
 
 type Props = {
   handleClose: () => void;
@@ -66,8 +64,6 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   const { handleClose, neverExpires, toggleNeverExpires, onSubmit } = props;
   // states
   const [customDate, setCustomDate] = useState<Date | null>(null);
-  // toast alert
-  const { setToastAlert } = useToast();
   // form
   const {
     control,
@@ -80,8 +76,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   const handleFormSubmit = async (data: IApiToken) => {
     // if never expires is toggled off, and the user has not selected a custom date or a predefined date, show an error
     if (!neverExpires && (!data.expired_at || (data.expired_at === "custom" && !customDate)))
-      return setToastAlert({
-        type: "error",
+      return setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select an expiration date.",
       });
@@ -94,7 +90,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
     // if never expires is toggled on, set expired_at to null
     if (neverExpires) payload.expired_at = null;
     // if never expires is toggled off, and the user has selected a custom date, set expired_at to the custom date
-    else if (data.expired_at === "custom") payload.expired_at = renderFormattedPayloadDate(customDate ?? new Date());
+    else if (data.expired_at === "custom") payload.expired_at = renderFormattedPayloadDate(customDate);
     // if never expires is toggled off, and the user has selected a predefined date, set expired_at to the predefined date
     else {
       const expiryDate = getExpiryDate(data.expired_at ?? "");
@@ -174,8 +170,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                           {value === "custom"
                             ? "Custom date"
                             : selectedOption
-                            ? selectedOption.label
-                            : "Set expiration date"}
+                              ? selectedOption.label
+                              : "Set expiration date"}
                         </div>
                       }
                       value={value}
@@ -211,8 +207,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                     ? `Expires ${renderFormattedDate(customDate)}`
                     : null
                   : watch("expired_at")
-                  ? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
-                  : null}
+                    ? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
+                    : null}
               </span>
             )}
           </div>
diff --git a/web/components/api-token/modal/generated-token-details.tsx b/web/components/api-token/modal/generated-token-details.tsx
index f28ea348126..d2bbfd7a1fd 100644
--- a/web/components/api-token/modal/generated-token-details.tsx
+++ b/web/components/api-token/modal/generated-token-details.tsx
@@ -1,13 +1,13 @@
 import { Copy } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
+import { IApiToken } from "@plane/types";
 // ui
-import { Button, Tooltip } from "@plane/ui";
+import { Button, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import { IApiToken } from "@plane/types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
 
 type Props = {
   handleClose: () => void;
@@ -16,13 +16,11 @@ type Props = {
 
 export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   const { handleClose, tokenDetails } = props;
-
-  const { setToastAlert } = useToast();
-
+  const { isMobile } = usePlatformOS();
   const copyApiToken = (token: string) => {
     copyTextToClipboard(token).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: "Token copied to clipboard.",
       })
@@ -44,7 +42,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
         className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
       >
         {tokenDetails.token}
-        <Tooltip tooltipContent="Copy secret key">
+        <Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
           <Copy className="h-4 w-4 text-custom-text-400" />
         </Tooltip>
       </button>
diff --git a/web/components/api-token/token-list-item.tsx b/web/components/api-token/token-list-item.tsx
index 2de73122280..5ac7ec681c1 100644
--- a/web/components/api-token/token-list-item.tsx
+++ b/web/components/api-token/token-list-item.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { XCircle } from "lucide-react";
+import { IApiToken } from "@plane/types";
 // components
-import { DeleteApiTokenModal } from "components/api-token";
-// ui
 import { Tooltip } from "@plane/ui";
+import { DeleteApiTokenModal } from "@/components/api-token";
+import { renderFormattedDate, calculateTimeAgo } from "@/helpers/date-time.helper";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// ui
 // helpers
-import { renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
 // types
-import { IApiToken } from "@plane/types";
 
 type Props = {
   token: IApiToken;
@@ -17,12 +18,14 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
   const { token } = props;
   // states
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   return (
     <>
       <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
       <div className="group relative flex flex-col justify-center border-b border-custom-border-200 px-4 py-3">
-        <Tooltip tooltipContent="Delete token">
+        <Tooltip tooltipContent="Delete token" isMobile={isMobile}>
           <button
             onClick={() => setDeleteModalOpen(true)}
             className="absolute right-4 hidden place-items-center group-hover:grid"
diff --git a/web/components/archives/archive-tabs-list.tsx b/web/components/archives/archive-tabs-list.tsx
new file mode 100644
index 00000000000..57d1c36a1dd
--- /dev/null
+++ b/web/components/archives/archive-tabs-list.tsx
@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+// constants
+import { ARCHIVES_TAB_LIST } from "@/constants/archives";
+// hooks
+import { useProject } from "@/hooks/store";
+
+export const ArchiveTabsList: FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  const activeTab = router.pathname.split("/").pop();
+  // store hooks
+  const { getProjectById } = useProject();
+
+  // derived values
+  if (!projectId) return null;
+  const projectDetails = getProjectById(projectId?.toString());
+  if (!projectDetails) return null;
+
+  return (
+    <>
+      {ARCHIVES_TAB_LIST.map(
+        (tab) =>
+          tab.shouldRender(projectDetails) && (
+            <Link key={tab.key} href={`/${workspaceSlug}/projects/${projectId}/archives/${tab.key}`}>
+              <span
+                className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 py-3 px-4 text-sm font-medium outline-none ${
+                  tab.key === activeTab
+                    ? "border-custom-primary-100 text-custom-primary-100"
+                    : "border-transparent hover:border-custom-border-200 text-custom-text-300 hover:text-custom-text-400"
+                }`}
+              >
+                {tab.label}
+              </span>
+            </Link>
+          )
+      )}
+    </>
+  );
+});
diff --git a/web/components/archives/index.ts b/web/components/archives/index.ts
new file mode 100644
index 00000000000..4b519fca038
--- /dev/null
+++ b/web/components/archives/index.ts
@@ -0,0 +1 @@
+export * from "./archive-tabs-list";
diff --git a/web/components/auth-screens/not-authorized-view.tsx b/web/components/auth-screens/not-authorized-view.tsx
index 8d9d6ecd4d9..f9dc9e7b1f8 100644
--- a/web/components/auth-screens/not-authorized-view.tsx
+++ b/web/components/auth-screens/not-authorized-view.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
+import { useUser } from "@/hooks/store";
 // layouts
-import DefaultLayout from "layouts/default-layout";
+import DefaultLayout from "@/layouts/default-layout";
 // images
 import ProjectNotAuthorizedImg from "public/auth/project-not-authorized.svg";
 import WorkspaceNotAuthorizedImg from "public/auth/workspace-not-authorized.svg";
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 35b0b9b498b..0c5d4740a56 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -2,11 +2,11 @@ import { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 // hooks
-import { useProject, useUser } from "hooks/store";
-// ui
+import { ClipboardList } from "lucide-react";
 import { Button } from "@plane/ui";
+import { useProject, useUser } from "@/hooks/store";
+// ui
 // icons
-import { ClipboardList } from "lucide-react";
 // images
 import JoinProjectImg from "public/auth/project-not-authorized.svg";
 
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
index 502f061156a..e55c5b9f91f 100644
--- a/web/components/auth-screens/workspace/not-a-member.tsx
+++ b/web/components/auth-screens/workspace/not-a-member.tsx
@@ -1,9 +1,9 @@
 import Link from "next/link";
 
 // layouts
-import DefaultLayout from "layouts/default-layout";
-// ui
 import { Button } from "@plane/ui";
+import DefaultLayout from "@/layouts/default-layout";
+// ui
 
 export const NotAWorkspaceMember = () => (
   <DefaultLayout>
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index d871b64d047..fe4b711fdb1 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject, useUser } from "hooks/store";
 // component
+import { ArchiveRestore } from "lucide-react";
+import { IProject } from "@plane/types";
 import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
-import { SelectMonthModal } from "components/automation";
+import { SelectMonthModal } from "@/components/automation";
 // icon
-import { ArchiveRestore } from "lucide-react";
 // constants
-import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
+import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
+import { useProject, useUser } from "@/hooks/store";
 // types
-import { IProject } from "@plane/types";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 2ae4d1f9c65..d2a01244ce6 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject, useProjectState, useUser } from "hooks/store";
-// component
-import { SelectMonthModal } from "components/automation";
+import { ArchiveX } from "lucide-react";
+import { IProject } from "@plane/types";
 import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
+import { SelectMonthModal } from "@/components/automation";
+import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
+import { useProject, useProjectState, useUser } from "@/hooks/store";
+// component
 // icons
-import { ArchiveX } from "lucide-react";
 // types
-import { IProject } from "@plane/types";
 // constants
-import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 01d07f64a82..7b068fa41a2 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -4,10 +4,10 @@ import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
+import type { IProject } from "@plane/types";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
-import type { IProject } from "@plane/types";
 
 // types
 type Props = {
@@ -98,6 +98,8 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     hasError={Boolean(errors.close_in)}
                                     placeholder="Enter Months"
                                     className="w-full border-custom-border-200"
+                                    min={1}
+                                    max={12}
                                   />
                                   <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
@@ -130,6 +132,8 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     hasError={Boolean(errors.archive_in)}
                                     placeholder="Enter Months"
                                     className="w-full border-custom-border-200"
+                                    min={1}
+                                    max={12}
                                   />
                                   <span className="absolute right-8 top-2.5 text-sm text-custom-text-200">Months</span>
                                 </div>
diff --git a/web/components/breadcrumbs/index.tsx b/web/components/breadcrumbs/index.tsx
index 16fa1e33333..de93cdec3f3 100644
--- a/web/components/breadcrumbs/index.tsx
+++ b/web/components/breadcrumbs/index.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // icons
 import { MoveLeft } from "lucide-react";
 
diff --git a/web/components/command-palette/actions/help-actions.tsx b/web/components/command-palette/actions/help-actions.tsx
index 4aaaab33a95..539ec00aa5e 100644
--- a/web/components/command-palette/actions/help-actions.tsx
+++ b/web/components/command-palette/actions/help-actions.tsx
@@ -1,9 +1,9 @@
 import { Command } from "cmdk";
 import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
 // hooks
-import { useApplication } from "hooks/store";
-// ui
 import { DiscordIcon } from "@plane/ui";
+import { useApplication } from "@/hooks/store";
+// ui
 
 type Props = {
   closePalette: () => void;
@@ -69,7 +69,9 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
       <Command.Item
         onSelect={() => {
           closePalette();
-          (window as any)?.$crisp.push(["do", "chat:open"]);
+          if (window) {
+            window.$crisp.push(["do", "chat:show"]);
+          }
         }}
         className="focus:outline-none"
       >
diff --git a/web/components/command-palette/actions/issue-actions/actions-list.tsx b/web/components/command-palette/actions/issue-actions/actions-list.tsx
index 55f72c85d11..04bcc989953 100644
--- a/web/components/command-palette/actions/issue-actions/actions-list.tsx
+++ b/web/components/command-palette/actions/issue-actions/actions-list.tsx
@@ -1,18 +1,16 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
+import { TIssue } from "@plane/types";
 // hooks
-import { useApplication, useUser, useIssues } from "hooks/store";
-// hooks
-import useToast from "hooks/use-toast";
+import { DoubleCircleIcon, UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { EIssuesStoreType } from "@/constants/issue";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+import { useApplication, useUser, useIssues } from "@/hooks/store";
 // ui
-import { DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   closePalette: () => void;
@@ -37,8 +35,6 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
   } = useApplication();
   const { currentUser } = useUser();
 
-  const { setToastAlert } = useToast();
-
   const handleUpdateIssue = async (formData: Partial<TIssue>) => {
     if (!workspaceSlug || !projectId || !issueDetails) return;
 
@@ -71,14 +67,14 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
     const url = new URL(window.location.href);
     copyTextToClipboard(url.href)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Copied to clipboard",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Some error occurred",
         });
       });
diff --git a/web/components/command-palette/actions/issue-actions/change-assignee.tsx b/web/components/command-palette/actions/issue-actions/change-assignee.tsx
index 96fba41f6e2..4797bb45f63 100644
--- a/web/components/command-palette/actions/issue-actions/change-assignee.tsx
+++ b/web/components/command-palette/actions/issue-actions/change-assignee.tsx
@@ -1,14 +1,14 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Check } from "lucide-react";
+import { TIssue } from "@plane/types";
 // mobx store
-import { useIssues, useMember } from "hooks/store";
-// ui
 import { Avatar } from "@plane/ui";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useMember } from "@/hooks/store";
+// ui
 // types
-import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   closePalette: () => void;
diff --git a/web/components/command-palette/actions/issue-actions/change-priority.tsx b/web/components/command-palette/actions/issue-actions/change-priority.tsx
index 8d1c482610a..6d2724859a0 100644
--- a/web/components/command-palette/actions/issue-actions/change-priority.tsx
+++ b/web/components/command-palette/actions/issue-actions/change-priority.tsx
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Check } from "lucide-react";
+import { TIssue, TIssuePriorities } from "@plane/types";
 // mobx store
-import { useIssues } from "hooks/store";
-// ui
 import { PriorityIcon } from "@plane/ui";
+import { EIssuesStoreType, ISSUE_PRIORITIES } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
+// ui
 // types
-import { TIssue, TIssuePriorities } from "@plane/types";
 // constants
-import { EIssuesStoreType, ISSUE_PRIORITIES } from "constants/issue";
 
 type Props = {
   closePalette: () => void;
diff --git a/web/components/command-palette/actions/issue-actions/change-state.tsx b/web/components/command-palette/actions/issue-actions/change-state.tsx
index 7841a4a1e65..32c6a0de5ff 100644
--- a/web/components/command-palette/actions/issue-actions/change-state.tsx
+++ b/web/components/command-palette/actions/issue-actions/change-state.tsx
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useProjectState, useIssues } from "hooks/store";
-// ui
+import { Check } from "lucide-react";
+import { TIssue } from "@plane/types";
 import { Spinner, StateGroupIcon } from "@plane/ui";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useProjectState, useIssues } from "@/hooks/store";
+// ui
 // icons
-import { Check } from "lucide-react";
 // types
-import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   closePalette: () => void;
diff --git a/web/components/command-palette/actions/project-actions.tsx b/web/components/command-palette/actions/project-actions.tsx
index bdd08a0d83f..297d1ba364f 100644
--- a/web/components/command-palette/actions/project-actions.tsx
+++ b/web/components/command-palette/actions/project-actions.tsx
@@ -1,9 +1,9 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
-// ui
 import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
+import { useApplication, useEventTracker } from "@/hooks/store";
+// ui
 
 type Props = {
   closePalette: () => void;
diff --git a/web/components/command-palette/actions/search-results.tsx b/web/components/command-palette/actions/search-results.tsx
index 769a26be7f4..489794295b6 100644
--- a/web/components/command-palette/actions/search-results.tsx
+++ b/web/components/command-palette/actions/search-results.tsx
@@ -1,9 +1,9 @@
-import { useRouter } from "next/router";
 import { Command } from "cmdk";
+import { useRouter } from "next/router";
+import { IWorkspaceSearchResults } from "@plane/types";
 // helpers
-import { commandGroups } from "components/command-palette";
+import { commandGroups } from "@/components/command-palette";
 // types
-import { IWorkspaceSearchResults } from "@plane/types";
 
 type Props = {
   closePalette: () => void;
diff --git a/web/components/command-palette/actions/theme-actions.tsx b/web/components/command-palette/actions/theme-actions.tsx
index 976a63c871d..b635881b567 100644
--- a/web/components/command-palette/actions/theme-actions.tsx
+++ b/web/components/command-palette/actions/theme-actions.tsx
@@ -1,13 +1,14 @@
 import React, { FC, useEffect, useState } from "react";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 import { Settings } from "lucide-react";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { THEME_OPTIONS } from "@/constants/themes";
+import { useUser } from "@/hooks/store";
+// ui
 // constants
-import { THEME_OPTIONS } from "constants/themes";
 
 type Props = {
   closePalette: () => void;
@@ -21,15 +22,14 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
   const { updateCurrentUserTheme } = useUser();
   // hooks
   const { setTheme } = useTheme();
-  const { setToastAlert } = useToast();
 
   const updateUserTheme = async (newTheme: string) => {
     setTheme(newTheme);
 
     return updateCurrentUserTheme(newTheme).catch(() => {
-      setToastAlert({
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Failed to save user theme settings!",
-        type: "error",
       });
     });
   };
diff --git a/web/components/command-palette/actions/workspace-settings-actions.tsx b/web/components/command-palette/actions/workspace-settings-actions.tsx
index 1f05234f41d..56c118a51ad 100644
--- a/web/components/command-palette/actions/workspace-settings-actions.tsx
+++ b/web/components/command-palette/actions/workspace-settings-actions.tsx
@@ -1,10 +1,10 @@
-import { useRouter } from "next/router";
 import { Command } from "cmdk";
 // hooks
-import { useUser } from "hooks/store";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // constants
-import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
+import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
 
 type Props = {
   closePalette: () => void;
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index b52976aa8c8..aa36eabed7f 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -1,18 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 import { Command } from "cmdk";
-import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import useSWR from "swr";
 import { FolderPlus, Search, Settings } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { IWorkspaceSearchResults } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
-// services
-import { WorkspaceService } from "services/workspace.service";
-import { IssueService } from "services/issue";
-// hooks
-import useDebounce from "hooks/use-debounce";
-// components
+import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 import {
   CommandPaletteThemeActions,
   ChangeIssueAssignee,
@@ -23,20 +19,29 @@ import {
   CommandPaletteProjectActions,
   CommandPaletteWorkspaceSettingsActions,
   CommandPaletteSearchResults,
-} from "components/command-palette";
-import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+} from "@/components/command-palette";
+import { EmptyState } from "@/components/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+import { useApplication, useEventTracker, useProject } from "@/hooks/store";
+import useDebounce from "@/hooks/use-debounce";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { IssueService } from "@/services/issue";
+import { WorkspaceService } from "@/services/workspace.service";
+// ui
+// components
 // types
-import { IWorkspaceSearchResults } from "@plane/types";
 // fetch-keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
+// constants
 
-// services
 const workspaceService = new WorkspaceService();
 const issueService = new IssueService();
 
 export const CommandModal: React.FC = observer(() => {
   // hooks
-  const { getProjectById } = useProject();
+  const { getProjectById, workspaceProjectIds } = useProject();
+  const { isMobile } = usePlatformOS();
   // states
   const [placeholder, setPlaceholder] = useState("Type a command or search...");
   const [resultsCount, setResultsCount] = useState(0);
@@ -197,7 +202,7 @@ export const CommandModal: React.FC = observer(() => {
                         </div>
                       )}
                       {projectId && (
-                        <Tooltip tooltipContent="Toggle workspace level search">
+                        <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
                           <div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
                             <button
                               type="button"
@@ -244,7 +249,9 @@ export const CommandModal: React.FC = observer(() => {
                       )}
 
                       {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
-                        <div className="my-4 text-center text-sm text-custom-text-200">No results found.</div>
+                        <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+                          <EmptyState type={EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE} layout="screen-simple" />
+                        </div>
                       )}
 
                       {(isLoading || isSearching) && (
@@ -275,22 +282,24 @@ export const CommandModal: React.FC = observer(() => {
                               setSearchTerm={(newSearchTerm) => setSearchTerm(newSearchTerm)}
                             />
                           )}
-                          <Command.Group heading="Issue">
-                            <Command.Item
-                              onSelect={() => {
-                                closePalette();
-                                setTrackElement("Command Palette");
-                                toggleCreateIssueModal(true);
-                              }}
-                              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 && workspaceProjectIds && workspaceProjectIds.length > 0 && (
+                            <Command.Group heading="Issue">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  setTrackElement("Command Palette");
+                                  toggleCreateIssueModal(true);
+                                }}
+                                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">
diff --git a/web/components/command-palette/command-palette.tsx b/web/components/command-palette/command-palette.tsx
index 396003589a4..490d392e2ce 100644
--- a/web/components/command-palette/command-palette.tsx
+++ b/web/components/command-palette/command-palette.tsx
@@ -1,44 +1,51 @@
-import React, { useCallback, useEffect, FC } from "react";
+import React, { useCallback, useEffect, FC, useMemo } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CommandModal, ShortcutsModal } from "@/components/command-palette";
+// ui
 // components
-import { CommandModal, ShortcutsModal } from "components/command-palette";
-import { BulkDeleteIssuesModal } from "components/core";
-import { CycleCreateUpdateModal } from "components/cycles";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateModuleModal } from "components/modules";
-import { CreateProjectModal } from "components/project";
-import { CreateUpdateProjectViewModal } from "components/views";
-import { CreateUpdatePageModal } from "components/pages";
+import { BulkDeleteIssuesModal } from "@/components/core";
+import { CycleCreateUpdateModal } from "@/components/cycles";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+import { CreateUpdateModuleModal } from "@/components/modules";
+import { CreateUpdatePageModal } from "@/components/pages";
+import { CreateProjectModal } from "@/components/project";
+import { CreateUpdateProjectViewModal } from "@/components/views";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
 // services
-import { IssueService } from "services/issue";
 // fetch keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
-import { EIssuesStoreType } from "constants/issue";
+import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+import { useApplication, useEventTracker, useIssues, useUser } from "@/hooks/store";
+import { IssueService } from "@/services/issue";
 
 // services
 const issueService = new IssueService();
 
 export const CommandPalette: FC = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
-
+  // store hooks
   const {
     commandPalette,
     theme: { toggleSidebar },
   } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const { currentUser } = useUser();
+  const {
+    currentUser,
+    membership: { currentWorkspaceRole, currentProjectRole },
+  } = useUser();
   const {
     issues: { removeIssue },
   } = useIssues(EIssuesStoreType.PROJECT);
-
   const {
     toggleCommandPaletteModal,
     isCreateIssueModalOpen,
@@ -63,8 +70,6 @@ export const CommandPalette: FC = observer(() => {
     createIssueStoreType,
   } = commandPalette;
 
-  const { setToastAlert } = useToast();
-
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
@@ -78,18 +83,115 @@ export const CommandPalette: FC = observer(() => {
     const url = new URL(window.location.href);
     copyTextToClipboard(url.href)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Copied to clipboard",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Some error occurred",
         });
       });
-  }, [setToastAlert, issueId]);
+  }, [issueId]);
+
+  // auth
+  const canPerformProjectCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+      if (!isAllowed && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+
+      return isAllowed;
+    },
+    [currentProjectRole]
+  );
+  const canPerformWorkspaceCreateActions = useCallback(
+    (showToast: boolean = true) => {
+      const isAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+      if (!isAllowed && showToast)
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You don't have permission to perform this action.",
+        });
+      return isAllowed;
+    },
+    [currentWorkspaceRole]
+  );
+
+  const shortcutsList: {
+    global: Record<string, { title: string; description: string; action: () => void }>;
+    workspace: Record<string, { title: string; description: string; action: () => void }>;
+    project: Record<string, { title: string; description: string; action: () => void }>;
+  } = useMemo(
+    () => ({
+      global: {
+        c: {
+          title: "Create a new issue",
+          description: "Create a new issue in the current project",
+          action: () => toggleCreateIssueModal(true),
+        },
+        h: {
+          title: "Show shortcuts",
+          description: "Show all the available shortcuts",
+          action: () => toggleShortcutModal(true),
+        },
+      },
+      workspace: {
+        p: {
+          title: "Create a new project",
+          description: "Create a new project in the current workspace",
+          action: () => toggleCreateProjectModal(true),
+        },
+      },
+      project: {
+        d: {
+          title: "Create a new page",
+          description: "Create a new page in the current project",
+          action: () => toggleCreatePageModal(true),
+        },
+        m: {
+          title: "Create a new module",
+          description: "Create a new module in the current project",
+          action: () => toggleCreateModuleModal(true),
+        },
+        q: {
+          title: "Create a new cycle",
+          description: "Create a new cycle in the current project",
+          action: () => toggleCreateCycleModal(true),
+        },
+        v: {
+          title: "Create a new view",
+          description: "Create a new view in the current project",
+          action: () => toggleCreateViewModal(true),
+        },
+        backspace: {
+          title: "Bulk delete issues",
+          description: "Bulk delete issues in the current project",
+          action: () => toggleBulkDeleteIssueModal(true),
+        },
+        delete: {
+          title: "Bulk delete issues",
+          description: "Bulk delete issues in the current project",
+          action: () => toggleBulkDeleteIssueModal(true),
+        },
+      },
+    }),
+    [
+      toggleBulkDeleteIssueModal,
+      toggleCreateCycleModal,
+      toggleCreateIssueModal,
+      toggleCreateModuleModal,
+      toggleCreatePageModal,
+      toggleCreateProjectModal,
+      toggleCreateViewModal,
+      toggleShortcutModal,
+    ]
+  );
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -102,7 +204,7 @@ export const CommandPalette: FC = observer(() => {
       if (
         e.target instanceof HTMLTextAreaElement ||
         e.target instanceof HTMLInputElement ||
-        (e.target as Element).classList?.contains("ProseMirror")
+        (e.target as Element)?.classList?.contains("ProseMirror")
       )
         return;
 
@@ -119,42 +221,37 @@ export const CommandPalette: FC = observer(() => {
         }
       } else if (!isAnyModalOpen) {
         setTrackElement("Shortcut key");
-        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") {
+        if (Object.keys(shortcutsList.global).includes(keyPressed)) shortcutsList.global[keyPressed].action();
+        // workspace authorized actions
+        else if (
+          Object.keys(shortcutsList.workspace).includes(keyPressed) &&
+          workspaceSlug &&
+          canPerformWorkspaceCreateActions()
+        )
+          shortcutsList.workspace[keyPressed].action();
+        // project authorized actions
+        else if (
+          Object.keys(shortcutsList.project).includes(keyPressed) &&
+          projectId &&
+          canPerformProjectCreateActions()
+        ) {
           e.preventDefault();
-          toggleBulkDeleteIssueModal(true);
+          // actions that can be performed only inside a project
+          shortcutsList.project[keyPressed].action();
         }
       }
     },
     [
+      canPerformProjectCreateActions,
+      canPerformWorkspaceCreateActions,
       copyIssueUrlToClipboard,
-      toggleCreateProjectModal,
-      toggleCreateViewModal,
-      toggleCreatePageModal,
-      toggleShortcutModal,
-      toggleCreateCycleModal,
-      toggleCreateModuleModal,
-      toggleBulkDeleteIssueModal,
+      isAnyModalOpen,
+      projectId,
+      setTrackElement,
+      shortcutsList,
       toggleCommandPaletteModal,
       toggleSidebar,
-      toggleCreateIssueModal,
-      projectId,
       workspaceSlug,
-      isAnyModalOpen,
-      setTrackElement,
     ]
   );
 
@@ -169,18 +266,11 @@ export const CommandPalette: FC = observer(() => {
 
   return (
     <>
-      <ShortcutsModal
-        isOpen={isShortcutModalOpen}
-        onClose={() => {
-          toggleShortcutModal(false);
-        }}
-      />
+      <ShortcutsModal isOpen={isShortcutModalOpen} onClose={() => toggleShortcutModal(false)} />
       {workspaceSlug && (
         <CreateProjectModal
           isOpen={isCreateProjectModalOpen}
-          onClose={() => {
-            toggleCreateProjectModal(false);
-          }}
+          onClose={() => toggleCreateProjectModal(false)}
           workspaceSlug={workspaceSlug.toString()}
         />
       )}
@@ -194,9 +284,7 @@ export const CommandPalette: FC = observer(() => {
           />
           <CreateUpdateModuleModal
             isOpen={isCreateModuleModalOpen}
-            onClose={() => {
-              toggleCreateModuleModal(false);
-            }}
+            onClose={() => toggleCreateModuleModal(false)}
             workspaceSlug={workspaceSlug.toString()}
             projectId={projectId.toString()}
           />
@@ -236,9 +324,7 @@ export const CommandPalette: FC = observer(() => {
 
       <BulkDeleteIssuesModal
         isOpen={isBulkDeleteIssueModalOpen}
-        onClose={() => {
-          toggleBulkDeleteIssueModal(false);
-        }}
+        onClose={() => toggleBulkDeleteIssueModal(false)}
         user={currentUser}
       />
       <CommandModal />
diff --git a/web/components/command-palette/helpers.tsx b/web/components/command-palette/helpers.tsx
index 44fc55bbeb5..653c2eef096 100644
--- a/web/components/command-palette/helpers.tsx
+++ b/web/components/command-palette/helpers.tsx
@@ -1,5 +1,4 @@
 // types
-import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
 import { Briefcase, FileText, LayoutGrid } from "lucide-react";
 import {
   IWorkspaceDefaultSearchResult,
@@ -7,6 +6,7 @@ import {
   IWorkspaceProjectSearchResult,
   IWorkspaceSearchResult,
 } from "@plane/types";
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
 
 export const commandGroups: {
   [key: string]: {
diff --git a/web/components/command-palette/shortcuts-modal/commands-list.tsx b/web/components/command-palette/shortcuts-modal/commands-list.tsx
index 2c8b87b05c4..3c327eb8b3d 100644
--- a/web/components/command-palette/shortcuts-modal/commands-list.tsx
+++ b/web/components/command-palette/shortcuts-modal/commands-list.tsx
@@ -1,6 +1,6 @@
 import { Command } from "lucide-react";
 // helpers
-import { substringMatch } from "helpers/string.helper";
+import { substringMatch } from "@/helpers/string.helper";
 
 type Props = {
   searchQuery: string;
diff --git a/web/components/command-palette/shortcuts-modal/modal.tsx b/web/components/command-palette/shortcuts-modal/modal.tsx
index 3054bdb2896..bbaa554649d 100644
--- a/web/components/command-palette/shortcuts-modal/modal.tsx
+++ b/web/components/command-palette/shortcuts-modal/modal.tsx
@@ -1,10 +1,10 @@
 import { FC, useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
 import { Search, X } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
 // components
-import { ShortcutCommandsList } from "components/command-palette";
-// ui
 import { Input } from "@plane/ui";
+import { ShortcutCommandsList } from "@/components/command-palette";
+// ui
 
 type Props = {
   isOpen: boolean;
@@ -36,18 +36,18 @@ export const ShortcutsModal: FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-          <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="h-full w-full">
-              <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex h-full items-center justify-center">
                 <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-lg font-medium">Keyboard shortcuts</span>
@@ -71,9 +71,9 @@ export const ShortcutsModal: FC<Props> = (props) => {
                   </div>
                   <ShortcutCommandsList searchQuery={query} />
                 </div>
-              </div>
-            </Dialog.Panel>
-          </Transition.Child>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
         </div>
       </Dialog>
     </Transition.Root>
diff --git a/web/components/common/breadcrumb-link.tsx b/web/components/common/breadcrumb-link.tsx
index e5f1dbce6cb..f982fc5082b 100644
--- a/web/components/common/breadcrumb-link.tsx
+++ b/web/components/common/breadcrumb-link.tsx
@@ -1,5 +1,6 @@
-import { Tooltip } from "@plane/ui";
 import Link from "next/link";
+import { Tooltip } from "@plane/ui";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   label?: string;
@@ -9,8 +10,9 @@ type Props = {
 
 export const BreadcrumbLink: React.FC<Props> = (props) => {
   const { href, label, icon } = props;
+  const { isMobile } = usePlatformOS();
   return (
-    <Tooltip tooltipContent={label} position="bottom">
+    <Tooltip tooltipContent={label} position="bottom" isMobile={isMobile}>
       <li className="flex items-center space-x-2" tabIndex={-1}>
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
index cd0a5b9fffa..06804ed8222 100644
--- a/web/components/common/product-updates-modal.tsx
+++ b/web/components/common/product-updates-modal.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 import useSWR from "swr";
 // headless ui
+import { X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import { WorkspaceService } from "services/workspace.service";
 // components
-import { MarkdownRenderer } from "components/ui";
 import { Loader } from "@plane/ui";
+import { MarkdownRenderer } from "@/components/ui";
 // icons
-import { X } from "lucide-react";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { WorkspaceService } from "@/services/workspace.service";
 
 type Props = {
   isOpen: boolean;
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index 72a67883ef1..b60152d0806 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -1,10 +1,8 @@
-import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // store hooks
-import { useEstimate, useLabel } from "hooks/store";
 // icons
-import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 import {
   TagIcon,
   CopyPlus,
@@ -20,18 +18,25 @@ import {
   MessageSquareIcon,
   UsersIcon,
 } from "lucide-react";
+import { IIssueActivity } from "@plane/types";
+import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { capitalizeFirstLetter } from "helpers/string.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
+import { useEstimate, useLabel } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
-import { IIssueActivity } from "@plane/types";
 
 export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  const { isMobile } = usePlatformOS();
 
   return (
-    <Tooltip tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
+    <Tooltip
+      tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}
+      isMobile={isMobile}
+    >
       {activity?.issue_detail ? (
         <a
           aria-disabled={activity.issue === null}
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index c5238ec1c86..35b5114644b 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -1,14 +1,15 @@
 import { Fragment } from "react";
-import { Controller, useForm } from "react-hook-form";
+
 import { DayPicker } from "react-day-picker";
-import { Dialog, Transition } from "@headlessui/react";
+import { Controller, useForm } from "react-hook-form";
+
 import { X } from "lucide-react";
-// components
-import { DateFilterSelect } from "./date-filter-select";
-// ui
+import { Dialog, Transition } from "@headlessui/react";
+
 import { Button } from "@plane/ui";
-// helpers
-import { renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
+
+import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@/helpers/date-time.helper";
+import { DateFilterSelect } from "./date-filter-select";
 
 type Props = {
   title: string;
@@ -37,13 +38,17 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
+    if (filterType === "range")
+      onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
     else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]);
 
     handleClose();
   };
 
-  const isInvalid = watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
+  const date1 = getDate(watch("date1"));
+  const date2 = getDate(watch("date1"));
+
+  const isInvalid = watch("filterType") === "range" && date1 && date2 ? date1 > date2 : false;
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
@@ -86,35 +91,45 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                     <Controller
                       control={control}
                       name="date1"
-                      render={({ field: { value, onChange } }) => (
-                        <DayPicker
-                          selected={value ? new Date(value) : undefined}
-                          defaultMonth={value ? new Date(value) : undefined}
-                          onSelect={(date) => onChange(date)}
-                          mode="single"
-                          disabled={[
-                            { after: new Date(watch("date2")) }
-                          ]}
-                          className="border border-custom-border-200 p-3 rounded-md"
-                        />
-                      )}
+                      render={({ field: { value, onChange } }) => {
+                        const dateValue = getDate(value);
+                        const date2Value = getDate(watch("date2"));
+                        return (
+                          <DayPicker
+                            selected={dateValue}
+                            defaultMonth={dateValue}
+                            onSelect={(date) => {
+                              if (!date) return;
+                              onChange(date);
+                            }}
+                            mode="single"
+                            disabled={date2Value ? [{ after: date2Value }] : undefined}
+                            className="border border-custom-border-200 p-3 rounded-md"
+                          />
+                        );
+                      }}
                     />
                     {watch("filterType") === "range" && (
                       <Controller
                         control={control}
                         name="date2"
-                        render={({ field: { value, onChange } }) => (
-                          <DayPicker
-                            selected={value ? new Date(value) : undefined}
-                            defaultMonth={value ? new Date(value) : undefined}
-                            onSelect={(date) => onChange(date)}
-                            mode="single"
-                            disabled={[
-                              { before: new Date(watch("date1")) }
-                            ]}
-                            className="border border-custom-border-200 p-3 rounded-md"
-                          />
-                        )}
+                        render={({ field: { value, onChange } }) => {
+                          const dateValue = getDate(value);
+                          const date1Value = getDate(watch("date1"));
+                          return (
+                            <DayPicker
+                              selected={dateValue}
+                              defaultMonth={dateValue}
+                              onSelect={(date) => {
+                                if (!date) return;
+                                onChange(date);
+                              }}
+                              mode="single"
+                              disabled={date1Value ? [{ before: date1Value }] : undefined}
+                              className="border border-custom-border-200 p-3 rounded-md"
+                            />
+                          );
+                        }}
                       />
                     )}
                   </div>
diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
index 9bb10f800d0..47207e0ccd8 100644
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -1,10 +1,7 @@
 import React from "react";
-
+import { CalendarDays } from "lucide-react";
 // ui
 import { CustomSelect, CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
-// icons
-import { CalendarDays } from "lucide-react";
-// fetch-keys
 
 type Props = {
   title: string;
@@ -22,17 +19,17 @@ const dueDateRange: DueDate[] = [
   {
     name: "before",
     value: "before",
-    icon: <CalendarBeforeIcon className="h-4 w-4 " />,
+    icon: <CalendarBeforeIcon className="h-4 w-4" />,
   },
   {
     name: "after",
     value: "after",
-    icon: <CalendarAfterIcon className="h-4 w-4 " />,
+    icon: <CalendarAfterIcon className="h-4 w-4" />,
   },
   {
     name: "range",
     value: "range",
-    icon: <CalendarDays className="h-4 w-4 " />,
+    icon: <CalendarDays className="h-4 w-4" />,
   },
 ];
 
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index b2e4c4c9fdb..1397039d19c 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -1,22 +1,22 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
+import { observer } from "mobx-react-lite";
 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, Popover } from "@headlessui/react";
 import { Control, Controller } from "react-hook-form";
+import useSWR from "swr";
+import { Tab, Popover } from "@headlessui/react";
 // hooks
-import { useApplication, useWorkspace } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import { Button, Input, Loader } from "@plane/ui";
+import { MAX_FILE_SIZE } from "@/constants/common";
+import { useApplication, useWorkspace } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 // services
-import { FileService } from "services/file.service";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { FileService } from "@/services/file.service";
 // hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { Button, Input, Loader } from "@plane/ui";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
 
 const tabOptions = [
   {
@@ -40,13 +40,14 @@ type Props = {
   onChange: (data: string) => void;
   disabled?: boolean;
   tabIndex?: number;
+  isProfileCover?: boolean;
 };
 
 // services
 const fileService = new FileService();
 
 export const ImagePickerPopover: React.FC<Props> = observer((props) => {
-  const { label, value, control, onChange, disabled = false, tabIndex } = props;
+  const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false } = props;
   // states
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
@@ -97,37 +98,53 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
   const handleSubmit = async () => {
     setIsImageUploading(true);
 
-    if (!image || !workspaceSlug) return;
+    if (!image) 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 oldValue = value;
+    const isUnsplashImage = oldValue?.split("/")[2] === "images.unsplash.com";
 
-        const imageUrl = res.asset;
-        onChange(imageUrl);
-        setIsImageUploading(false);
-        setImage(null);
-        setIsOpen(false);
+    const uploadCallback = (res: any) => {
+      const imageUrl = res.asset;
+      onChange(imageUrl);
+      setIsImageUploading(false);
+      setImage(null);
+      setIsOpen(false);
+    };
 
-        if (isUnsplashImage) return;
-
-        if (oldValue && currentWorkspace) fileService.deleteFile(currentWorkspace.id, oldValue);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
+    if (isProfileCover) {
+      fileService
+        .uploadUserFile(formData)
+        .then((res) => {
+          uploadCallback(res);
+          if (isUnsplashImage) return;
+          if (oldValue && currentWorkspace) fileService.deleteUserFile(oldValue);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else {
+      if (!workspaceSlug) return;
+      fileService
+        .uploadFile(workspaceSlug.toString(), formData)
+        .then((res) => {
+          uploadCallback(res);
+          if (isUnsplashImage) return;
+          if (oldValue && currentWorkspace) fileService.deleteFile(currentWorkspace.id, oldValue);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
   };
 
   useEffect(() => {
     if (!unsplashImages || value !== null) return;
 
-    onChange(unsplashImages[0].urls.regular);
+    onChange(unsplashImages[0]?.urls.regular);
   }, [value, onChange, unsplashImages]);
 
   const handleClose = () => {
@@ -149,7 +166,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
   useOutsideClickDetector(ref, handleClose);
 
   return (
-    <Popover className="relative z-[2]" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
+    <Popover className="relative z-20" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
       <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={handleOnClick}
@@ -160,7 +177,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
       {isOpen && (
         <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"
+          className="absolute right-0 z-20 mt-2 rounded-md border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-sm"
           static
         >
           <div
@@ -187,7 +204,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                   );
                 })}
               </Tab.List>
-              <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
+              <Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden vertical-scrollbar scrollbar-md">
                 {(unsplashImages || !unsplashError) && (
                   <Tab.Panel className="mt-4 h-full w-full space-y-4">
                     <div className="flex gap-x-2">
diff --git a/web/components/core/modals/bulk-delete-issues-modal-item.tsx b/web/components/core/modals/bulk-delete-issues-modal-item.tsx
index 8fa8dabda6e..8b03c311ba2 100644
--- a/web/components/core/modals/bulk-delete-issues-modal-item.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal-item.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useProjectState } from "@/hooks/store";
 
 export const BulkDeleteIssuesModalItem: React.FC<any> = observer((props) => {
   const { issue, delete_issue_ids, identifier } = props;
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 39be2872b59..59dcc574e26 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -1,27 +1,26 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { SubmitHandler, useForm } from "react-hook-form";
+import useSWR from "swr";
+import { Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import { IssueService } from "services/issue";
-// hooks
-import useToast from "hooks/use-toast";
+import { IUser, TIssue } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { PROJECT_ISSUES_LIST } from "@/constants/fetch-keys";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useProject } from "@/hooks/store";
+import { IssueService } from "@/services/issue";
 // ui
-import { Button, LayersIcon } from "@plane/ui";
 // icons
-import { Search } from "lucide-react";
 // types
-import { IUser, TIssue } from "@plane/types";
-// fetch keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // store hooks
-import { useIssues, useProject } from "hooks/store";
 // components
 import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 type FormInput = {
   delete_issue_ids: string[];
@@ -55,8 +54,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
       : null
   );
 
-  const { setToastAlert } = useToast();
-
   const {
     handleSubmit,
     watch,
@@ -79,8 +76,8 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId) return;
 
     if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one issue.",
       });
@@ -91,16 +88,16 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
 
     await removeBulkIssues(workspaceSlug as string, projectId as string, data.delete_issue_ids)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Issues deleted successfully!",
         });
         handleClose();
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         })
@@ -181,12 +178,15 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                           </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 className="flex flex-col items-center justify-center px-3 py-8 text-center">
+                          <EmptyState
+                            type={
+                              query === ""
+                                ? EmptyStateType.ISSUE_RELATION_EMPTY_STATE
+                                : EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
+                            }
+                            layout="screen-simple"
+                          />
                         </div>
                       )}
                     </Combobox.Options>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index c4fa25c6d6c..ec7dbcb07e8 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { Rocket, Search, X } from "lucide-react";
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 // services
-import { ProjectService } from "services/project";
+import { Button, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+import useDebounce from "@/hooks/use-debounce";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ProjectService } from "@/services/project";
 // hooks
-import useToast from "hooks/use-toast";
-import useDebounce from "hooks/use-debounce";
+// components
+import { IssueSearchModalEmptyState } from "./issue-search-modal-empty-state";
 // ui
-import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // types
-import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 
 type Props = {
   workspaceSlug: string | undefined;
@@ -40,11 +42,9 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
   const [isSearching, setIsSearching] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
-
+  const { isMobile } = usePlatformOS();
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
-  const { setToastAlert } = useToast();
-
   const handleClose = () => {
     onClose();
     setSearchTerm("");
@@ -54,8 +54,8 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
 
   const onSubmit = async () => {
     if (selectedIssues.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one issue.",
       });
@@ -68,12 +68,6 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
     await handleOnSubmit(selectedIssues).finally(() => setIsSubmitting(false));
 
     handleClose();
-
-    setToastAlert({
-      title: "Success",
-      type: "success",
-      message: `Issue${selectedIssues.length > 1 ? "s" : ""} added successfully`,
-    });
   };
 
   useEffect(() => {
@@ -162,7 +156,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       </div>
                     )}
                     {workspaceLevelToggle && (
-                      <Tooltip tooltipContent="Toggle workspace level search">
+                      <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
                         <div
                           className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
                             isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
@@ -184,7 +178,10 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                     )}
                   </div>
 
-                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
+                  <Combobox.Options
+                    static
+                    className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
+                  >
                     {searchTerm !== "" && (
                       <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
                         Search results for{" "}
@@ -197,15 +194,12 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       </h5>
                     )}
 
-                    {!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>
-                    )}
+                    <IssueSearchModalEmptyState
+                      debouncedSearchTerm={debouncedSearchTerm}
+                      isSearching={isSearching}
+                      issues={issues}
+                      searchTerm={searchTerm}
+                    />
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
diff --git a/web/components/core/modals/gpt-assistant-popover.tsx b/web/components/core/modals/gpt-assistant-popover.tsx
index 590015e122c..3348272d699 100644
--- a/web/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/components/core/modals/gpt-assistant-popover.tsx
@@ -1,17 +1,17 @@
 import React, { useEffect, useState, useRef, Fragment } from "react";
+import { Placement } from "@popperjs/core";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form"; // services
-import { AIService } from "services/ai.service";
-// hooks
-import useToast from "hooks/use-toast";
 import { usePopper } from "react-popper";
 // ui
-import { Button, Input } from "@plane/ui";
-// components
-import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
+import { AlertCircle } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
-// types
-import { Placement } from "@popperjs/core";
+import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+// icons
+// components
+// hooks
+import { AIService } from "@/services/ai.service";
 
 type Props = {
   isOpen: boolean;
@@ -44,8 +44,6 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // popper
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "auto",
@@ -78,8 +76,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
         ? error || "You have reached the maximum number of requests of 50 requests per month per user."
         : error || "Some error occurred. Please try again.";
 
-    setToastAlert({
-      type: "error",
+    setToast({
+      type: TOAST_TYPE.ERROR,
       title: "Error!",
       message: errorMessage,
     });
@@ -104,8 +102,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   };
 
   const handleInvalidTask = () => {
-    setToastAlert({
-      type: "error",
+    setToast({
+      type: TOAST_TYPE.ERROR,
       title: "Error!",
       message: "Please enter some task to get AI assistance.",
     });
@@ -175,8 +173,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   const generateResponseButtonText = isSubmitting
     ? "Generating response..."
     : response === ""
-    ? "Generate response"
-    : "Generate again";
+      ? "Generate response"
+      : "Generate again";
 
   return (
     <Popover as="div" className={`relative w-min text-left`}>
@@ -195,7 +193,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
       >
         <Popover.Panel
           as="div"
-          className={`fixed z-10 flex flex-col w-full max-w-full min-w-[50rem] space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
+          className={`fixed z-10 flex w-full min-w-[50rem] max-w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
@@ -214,7 +212,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
               </div>
             )}
             {response !== "" && (
-              <div className="page-block-section text-sm max-h-[8rem]">
+              <div className="page-block-section max-h-[8rem] text-sm">
                 Response:
                 <RichReadOnlyEditorWithRef
                   value={`<p>${response}</p>`}
@@ -250,8 +248,17 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
               />
             )}
           />
-          <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
-            {responseActionButton}
+          <div className="flex gap-2 justify-between">
+            {responseActionButton ? (
+              <>{responseActionButton}</>
+            ) : (
+              <>
+                <div className="flex items-center justify-center gap-2 text-sm text-custom-primary">
+                  <AlertCircle className="h-4 w-4" />
+                  <p>By using this feature, you consent to sharing the message with a 3rd party service. </p>
+                </div>
+              </>
+            )}
             <div className="flex items-center gap-2">
               <Button variant="neutral-primary" size="sm" onClick={onClose}>
                 Close
diff --git a/web/components/core/modals/index.ts b/web/components/core/modals/index.ts
index cf72365f5ac..a95c22114e8 100644
--- a/web/components/core/modals/index.ts
+++ b/web/components/core/modals/index.ts
@@ -4,3 +4,4 @@ export * from "./gpt-assistant-popover";
 export * from "./link-modal";
 export * from "./user-image-upload-modal";
 export * from "./workspace-image-upload-modal";
+export * from "./issue-search-modal-empty-state";
diff --git a/web/components/core/modals/issue-search-modal-empty-state.tsx b/web/components/core/modals/issue-search-modal-empty-state.tsx
new file mode 100644
index 00000000000..578d39a60fc
--- /dev/null
+++ b/web/components/core/modals/issue-search-modal-empty-state.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+// components
+import { ISearchIssueResponse } from "@plane/types";
+import { EmptyState } from "@/components/empty-state";
+// types
+import { EmptyStateType } from "@/constants/empty-state";
+// constants
+
+interface EmptyStateProps {
+  issues: ISearchIssueResponse[];
+  searchTerm: string;
+  debouncedSearchTerm: string;
+  isSearching: boolean;
+}
+
+export const IssueSearchModalEmptyState: React.FC<EmptyStateProps> = ({
+  issues,
+  searchTerm,
+  debouncedSearchTerm,
+  isSearching,
+}) => {
+  const renderEmptyState = (type: EmptyStateType) => (
+    <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+      <EmptyState type={type} layout="screen-simple" />
+    </div>
+  );
+
+  const emptyState =
+    issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && !isSearching
+      ? renderEmptyState(EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE)
+      : issues.length === 0
+        ? renderEmptyState(EmptyStateType.ISSUE_RELATION_EMPTY_STATE)
+        : null;
+
+  return emptyState;
+};
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index 1c1372e8d9b..7b004047784 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -4,10 +4,10 @@ import { FC, useEffect, Fragment } from "react";
 import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
+import type { IIssueLink, ILinkDetails, ModuleLink } from "@plane/types";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
-import type { IIssueLink, ILinkDetails, ModuleLink } from "@plane/types";
 
 type Props = {
   isOpen: boolean;
@@ -159,8 +159,8 @@ export const LinkModal: FC<Props> = (props) => {
                           ? "Updating Link..."
                           : "Update Link"
                         : isSubmitting
-                        ? "Adding Link..."
-                        : "Add Link"}
+                          ? "Adding Link..."
+                          : "Add Link"}
                     </Button>
                   </div>
                 </form>
diff --git a/web/components/core/modals/user-image-upload-modal.tsx b/web/components/core/modals/user-image-upload-modal.tsx
index 6debc2c15e2..cf43595a0c3 100644
--- a/web/components/core/modals/user-image-upload-modal.tsx
+++ b/web/components/core/modals/user-image-upload-modal.tsx
@@ -1,19 +1,18 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useDropzone } from "react-dropzone";
+import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // hooks
-import { useApplication } from "hooks/store";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { MAX_FILE_SIZE } from "@/constants/common";
+import { useApplication } from "@/hooks/store";
 // services
-import { FileService } from "services/file.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { FileService } from "@/services/file.service";
 // ui
-import { Button } from "@plane/ui";
 // icons
-import { UserCircle2 } from "lucide-react";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
 
 type Props = {
   handleDelete?: () => void;
@@ -32,8 +31,6 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
   // states
   const [image, setImage] = useState<File | null>(null);
   const [isImageUploading, setIsImageUploading] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     config: { envConfig },
@@ -76,8 +73,8 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
         if (value) fileService.deleteUserFile(value);
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/core/modals/workspace-image-upload-modal.tsx b/web/components/core/modals/workspace-image-upload-modal.tsx
index e04ccf8209d..8fbadf3712f 100644
--- a/web/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/components/core/modals/workspace-image-upload-modal.tsx
@@ -1,20 +1,18 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { useDropzone } from "react-dropzone";
+import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // hooks
-import { useApplication, useWorkspace } from "hooks/store";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { MAX_FILE_SIZE } from "@/constants/common";
+import { useApplication, useWorkspace } from "@/hooks/store";
 // services
-import { FileService } from "services/file.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { FileService } from "@/services/file.service";
 // ui
-import { Button } from "@plane/ui";
 // icons
-import { UserCircle2 } from "lucide-react";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
 
 type Props = {
   handleRemove?: () => void;
@@ -37,8 +35,6 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const {
     config: { envConfig },
   } = useApplication();
@@ -83,8 +79,8 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
         if (value && currentWorkspace) fileService.deleteFile(currentWorkspace.id, value);
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/core/render-if-visible-HOC.tsx b/web/components/core/render-if-visible-HOC.tsx
index 24ae19fe79b..585ba7769e7 100644
--- a/web/components/core/render-if-visible-HOC.tsx
+++ b/web/components/core/render-if-visible-HOC.tsx
@@ -1,10 +1,10 @@
-import { cn } from "helpers/common.helper";
 import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react";
+import { cn } from "@/helpers/common.helper";
 
 type Props = {
   defaultHeight?: string;
   verticalOffset?: number;
-  horizonatlOffset?: number;
+  horizontalOffset?: number;
   root?: MutableRefObject<HTMLElement | null>;
   children: ReactNode;
   as?: keyof JSX.IntrinsicElements;
@@ -20,7 +20,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     defaultHeight = "300px",
     root,
     verticalOffset = 50,
-    horizonatlOffset = 0,
+    horizontalOffset = 0,
     as = "div",
     children,
     classNames = "",
@@ -52,17 +52,18 @@ const RenderIfVisible: React.FC<Props> = (props) => {
         },
         {
           root: root?.current,
-          rootMargin: `${verticalOffset}% ${horizonatlOffset}% ${verticalOffset}% ${horizonatlOffset}%`,
+          rootMargin: `${verticalOffset}% ${horizontalOffset}% ${verticalOffset}% ${horizontalOffset}%`,
         }
       );
       observer.observe(intersectionRef.current);
       return () => {
         if (intersectionRef.current) {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
           observer.unobserve(intersectionRef.current);
         }
       };
     }
-  }, [root?.current, intersectionRef, children, changingReference]);
+  }, [intersectionRef, children, changingReference, root, verticalOffset, horizontalOffset]);
 
   //Set height after render
   useEffect(() => {
diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx
index 48a5e16b721..83db67c3472 100644
--- a/web/components/core/sidebar/links-list.tsx
+++ b/web/components/core/sidebar/links-list.tsx
@@ -1,37 +1,35 @@
-// ui
-import { ExternalLinkIcon, Tooltip } from "@plane/ui";
+import { observer } from "mobx-react";
 // icons
 import { Pencil, Trash2, LinkIcon } from "lucide-react";
-// helpers
-import { calculateTimeAgo } from "helpers/date-time.helper";
-// types
 import { ILinkDetails, UserAuth } from "@plane/types";
+// ui
+import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+// helpers
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
 // hooks
-import useToast from "hooks/use-toast";
-import { observer } from "mobx-react";
-import { useMeasure } from "@nivo/core";
-import { useMember } from "hooks/store";
+import { useMember } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
 
 type Props = {
   links: ILinkDetails[];
   handleDeleteLink: (linkId: string) => void;
   handleEditLink: (link: ILinkDetails) => void;
   userAuth: UserAuth;
+  disabled?: boolean;
 };
 
-export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, handleEditLink, userAuth }) => {
-  // toast
-  const { setToastAlert } = useToast();
+export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, handleEditLink, userAuth, disabled }) => {
   const { getUserDetails } = useMember();
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+  const { isMobile } = usePlatformOS();
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
-    setToastAlert({
-      message: "The URL has been successfully copied to your clipboard",
-      type: "success",
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
       title: "Copied to clipboard",
+      message: "The URL has been successfully copied to your clipboard",
     });
   };
 
@@ -46,7 +44,7 @@ export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, h
                 <span className="py-1">
                   <LinkIcon className="h-3 w-3 flex-shrink-0" />
                 </span>
-                <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url}>
+                <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
                   <span
                     className="cursor-pointer truncate text-xs"
                     onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
index ca21756fc31..68b1708fe82 100644
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@@ -1,17 +1,18 @@
 import React from "react";
 import { eachDayOfInterval, isValid } from "date-fns";
+import { TCompletionChartDistribution } from "@plane/types";
 // ui
-import { LineGraph } from "components/ui";
+import { LineGraph } from "@/components/ui";
 // helpers
-import { renderFormattedDateWithoutYear } from "helpers/date-time.helper";
+import { getDate, renderFormattedDateWithoutYear } from "@/helpers/date-time.helper";
 //types
-import { TCompletionChartDistribution } from "@plane/types";
 
 type Props = {
   distribution: TCompletionChartDistribution;
   startDate: string | Date;
   endDate: string | Date;
   totalIssues: number;
+  className?: string;
 };
 
 const styleById = {
@@ -40,18 +41,18 @@ const DashedLine = ({ series, lineGenerator, xScale, yScale }: any) =>
     />
   ));
 
-const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, totalIssues }) => {
+const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, totalIssues, className = "" }) => {
   const chartData = Object.keys(distribution ?? []).map((key) => ({
     currentDate: renderFormattedDateWithoutYear(key),
     pending: distribution[key],
   }));
 
   const generateXAxisTickValues = () => {
-    const start = new Date(startDate);
-    const end = new Date(endDate);
+    const start = getDate(startDate);
+    const end = getDate(endDate);
 
     let dates: Date[] = [];
-    if (isValid(start) && isValid(end)) {
+    if (start && end && isValid(start) && isValid(end)) {
       dates = eachDayOfInterval({ start, end });
     }
 
@@ -73,7 +74,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
   };
 
   return (
-    <div className="flex w-full items-center justify-center">
+    <div className={`flex w-full items-center justify-center ${className}`}>
       <LineGraph
         animate
         curve="monotoneX"
diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 0212e49802a..dcc963946a4 100644
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-import { Menu } from "lucide-react";
-import { useApplication } from "hooks/store";
 import { observer } from "mobx-react";
+import { Menu } from "lucide-react";
+import { useApplication } from "@/hooks/store";
 
 type Props = {
   onClick?: () => void;
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index 12c387f471e..21b508e2885 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -3,16 +3,6 @@ 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,
@@ -20,6 +10,16 @@ import {
   TLabelsDistribution,
   TStateGroups,
 } from "@plane/types";
+// hooks
+import { Avatar, StateGroupIcon } from "@plane/ui";
+import { SingleProgressStats } from "@/components/core";
+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
+// ui
+// types
 
 type Props = {
   distribution: {
@@ -127,7 +127,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
       <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
         <Tab.Panel
           as="div"
-          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+          className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
         >
           {distribution?.assignees.length > 0 ? (
             distribution.assignees.map((assignee, index) => {
@@ -137,8 +137,8 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     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>
+                        <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+                        <span>{assignee?.display_name ?? ""}</span>
                       </div>
                     }
                     completed={assignee.completed_issues}
@@ -187,7 +187,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab.Panel>
         <Tab.Panel
           as="div"
-          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+          className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
         >
           {distribution?.labels.length > 0 ? (
             distribution.labels.map((label, index) => (
@@ -230,7 +230,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab.Panel>
         <Tab.Panel
           as="div"
-          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+          className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
         >
           {Object.keys(groupedIssues).map((group, index) => (
             <SingleProgressStats
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index 19cd519cbff..4f933a462c7 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -1,5 +1,6 @@
 import { FC, Fragment } from "react";
 // react-form
+import { ColorResult, SketchPicker } from "react-color";
 import {
   Control,
   Controller,
@@ -11,14 +12,13 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 // react-color
-import { ColorResult, SketchPicker } from "react-color";
 // component
+import { Palette } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
+import { IUserTheme } from "@plane/types";
 import { Input } from "@plane/ui";
 // icons
-import { Palette } from "lucide-react";
 // types
-import { IUserTheme } from "@plane/types";
 
 type Props = {
   name: keyof IUserTheme;
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index fdb7a648347..cd3fa874c13 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -1,12 +1,12 @@
 import { observer } from "mobx-react-lite";
-import { Controller, useForm } from "react-hook-form";
 import { useTheme } from "next-themes";
+import { Controller, useForm } from "react-hook-form";
+import { IUserTheme } from "@plane/types";
 // hooks
-import { useUser } from "hooks/store";
-// ui
 import { Button, InputColorPicker } from "@plane/ui";
+import { useUser } from "@/hooks/store";
+// ui
 // types
-import { IUserTheme } from "@plane/types";
 
 const inputRules = {
   required: "Background color is required",
diff --git a/web/components/core/theme/theme-switch.tsx b/web/components/core/theme/theme-switch.tsx
index bcd847a280a..6eb1c7b7d02 100644
--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
 // constants
-import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
-// ui
 import { CustomSelect } from "@plane/ui";
+import { THEME_OPTIONS, I_THEME_OPTION } from "@/constants/themes";
+// ui
 
 type Props = {
   value: I_THEME_OPTION | null;
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
deleted file mode 100644
index 1fae0412f5b..00000000000
--- a/web/components/cycles/active-cycle-details.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-import { MouseEvent } from "react";
-import Link from "next/link";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-import { useTheme } from "next-themes";
-// hooks
-import { useCycle, useIssues, useMember, useProject, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// ui
-import { SingleProgressStats } from "components/core";
-import {
-  AvatarGroup,
-  Loader,
-  Tooltip,
-  LinearProgressIndicator,
-  LayersIcon,
-  StateGroupIcon,
-  PriorityIcon,
-  Avatar,
-  CycleGroupIcon,
-} from "@plane/ui";
-// components
-import ProgressChart from "components/core/sidebar/progress-chart";
-import { ActiveCycleProgressStats } from "components/cycles";
-import { StateDropdown } from "components/dropdowns";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// icons
-import { ArrowRight, CalendarCheck, CalendarDays, Star, Target } from "lucide-react";
-// helpers
-import { renderFormattedDate, findHowManyDaysLeft, renderFormattedDateWithoutYear } from "helpers/date-time.helper";
-import { truncateText } from "helpers/string.helper";
-// types
-import { ICycle, TCycleGroups } from "@plane/types";
-// constants
-import { EIssuesStoreType } from "constants/issue";
-import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-import { CYCLE_STATE_GROUPS_DETAILS } from "constants/cycle";
-import { CYCLE_EMPTY_STATE_DETAILS } from "constants/empty-state";
-
-interface IActiveCycleDetails {
-  workspaceSlug: string;
-  projectId: string;
-}
-
-export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props) => {
-  // props
-  const { workspaceSlug, projectId } = props;
-  const { resolvedTheme } = useTheme();
-  // store hooks
-  const { currentUser } = useUser();
-  const {
-    issues: { fetchActiveCycleIssues },
-  } = useIssues(EIssuesStoreType.CYCLE);
-  const {
-    fetchActiveCycle,
-    currentProjectActiveCycleId,
-    getActiveCycleById,
-    addCycleToFavorites,
-    removeCycleFromFavorites,
-  } = useCycle();
-  const { currentProjectDetails } = useProject();
-  const { getUserDetails } = useMember();
-  // toast alert
-  const { setToastAlert } = useToast();
-
-  const { isLoading } = useSWR(
-    workspaceSlug && projectId ? `PROJECT_ACTIVE_CYCLE_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchActiveCycle(workspaceSlug, projectId) : null
-  );
-
-  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
-  const cycleOwnerDetails = activeCycle ? getUserDetails(activeCycle.owned_by_id) : undefined;
-
-  const { data: activeCycleIssues } = useSWR(
-    workspaceSlug && projectId && currentProjectActiveCycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(currentProjectActiveCycleId, { priority: "urgent,high" })
-      : null,
-    workspaceSlug && projectId && currentProjectActiveCycleId
-      ? () => fetchActiveCycleIssues(workspaceSlug, projectId, currentProjectActiveCycleId)
-      : null
-  );
-
-  const emptyStateDetail = CYCLE_EMPTY_STATE_DETAILS["active"];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("cycle", "active", isLightMode);
-
-  if (!activeCycle && isLoading)
-    return (
-      <Loader>
-        <Loader.Item height="250px" />
-      </Loader>
-    );
-
-  if (!activeCycle)
-    return (
-      <EmptyState
-        title={emptyStateDetail.title}
-        description={emptyStateDetail.description}
-        image={emptyStateImage}
-        size="sm"
-      />
-    );
-
-  const endDate = new Date(activeCycle.end_date ?? "");
-  const startDate = new Date(activeCycle.start_date ?? "");
-
-  const groupedIssues: any = {
-    backlog: activeCycle.backlog_issues,
-    unstarted: activeCycle.unstarted_issues,
-    started: activeCycle.started_issues,
-    completed: activeCycle.completed_issues,
-    cancelled: activeCycle.cancelled_issues,
-  };
-
-  const cycleStatus = activeCycle.status.toLowerCase() as TCycleGroups;
-
-  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    if (!workspaceSlug || !projectId) return;
-
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), activeCycle.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;
-
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), activeCycle.id).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't add the cycle to favorites. Please try again.",
-      });
-    });
-  };
-
-  const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
-    id: index,
-    name: group.title,
-    value:
-      activeCycle.total_issues > 0
-        ? ((activeCycle[group.key as keyof ICycle] as number) / activeCycle.total_issues) * 100
-        : 0,
-    color: group.color,
-  }));
-
-  const daysLeft = findHowManyDaysLeft(activeCycle.end_date) ?? 0;
-
-  return (
-    <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
-        <div className="flex flex-col text-xs">
-          <div className="h-full w-full">
-            <div className="flex h-60 flex-col justify-between gap-5 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">
-                    <CycleGroupIcon cycleGroup={cycleStatus} className="h-4 w-4" />
-                  </span>
-                  <Tooltip tooltipContent={activeCycle.name} position="top-left">
-                    <h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
-                  </Tooltip>
-                </span>
-                <span className="flex items-center gap-1">
-                  <span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
-                    {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
-                  </span>
-                  {activeCycle.is_favorite ? (
-                    <button
-                      onClick={(e) => {
-                        handleRemoveFromFavorites(e);
-                      }}
-                    >
-                      <Star className="h-4 w-4 fill-orange-400 text-orange-400" />
-                    </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>{renderFormattedDate(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>{renderFormattedDate(endDate)}</span>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2.5 text-custom-text-200">
-                  {cycleOwnerDetails?.avatar && cycleOwnerDetails?.avatar !== "" ? (
-                    <img
-                      src={cycleOwnerDetails?.avatar}
-                      height={16}
-                      width={16}
-                      className="rounded-full"
-                      alt={cycleOwnerDetails?.display_name}
-                    />
-                  ) : (
-                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-background-100 capitalize">
-                      {cycleOwnerDetails?.display_name.charAt(0)}
-                    </span>
-                  )}
-                  <span className="text-custom-text-200">{cycleOwnerDetails?.display_name}</span>
-                </div>
-
-                {activeCycle.assignee_ids.length > 0 && (
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <AvatarGroup>
-                      {activeCycle.assignee_ids.map((assigne_id) => {
-                        const member = getUserDetails(assigne_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.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" />
-                  {activeCycle.total_issues} issues
-                </div>
-                <div className="flex items-center gap-2">
-                  <StateGroupIcon stateGroup="completed" height="14px" width="14px" />
-                  {activeCycle.completed_issues} issues
-                </div>
-              </div>
-
-              <Link
-                href={`/${workspaceSlug}/projects/${projectId}/cycles/${activeCycle.id}`}
-                className="w-min text-nowrap rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90"
-              >
-                View Cycle
-              </Link>
-            </div>
-          </div>
-        </div>
-        <div className="col-span-2 grid grid-cols-1 divide-y border-custom-border-200 md:grid-cols-2 md:divide-x md:divide-y-0">
-          <div className="flex h-60 flex-col border-custom-border-200">
-            <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
-              <div className="flex w-full items-center gap-2 py-1">
-                <span>Progress</span>
-                <LinearProgressIndicator size="md" data={progressIndicatorData} inPercentage />
-              </div>
-              <div className="mt-2 flex flex-col items-center gap-1">
-                {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: CYCLE_STATE_GROUPS_DETAILS[index].color,
-                          }}
-                        />
-                        <span className="text-xs capitalize">{group}</span>
-                      </div>
-                    }
-                    completed={groupedIssues[group]}
-                    total={activeCycle.total_issues}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-          <div className="h-60 overflow-y-scroll border-custom-border-200">
-            <ActiveCycleProgressStats cycle={activeCycle} />
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
-        <div className="flex flex-col gap-3 p-4 max-h-60 overflow-hidden">
-          <div className="text-custom-primary">High Priority Issues</div>
-          <div className="flex flex-col h-full gap-2.5 overflow-y-scroll rounded-md">
-            {activeCycleIssues ? (
-              activeCycleIssues.length > 0 ? (
-                activeCycleIssues.map((issue: any) => (
-                  <Link
-                    key={issue.id}
-                    href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-                    className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200  px-3 py-1.5"
-                  >
-                    <div className="flex items-center gap-1.5">
-                      <PriorityIcon priority={issue.priority} withContainer size={12} />
-
-                      <Tooltip
-                        tooltipHeading="Issue ID"
-                        tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
-                      >
-                        <span className="flex-shrink-0 text-xs text-custom-text-200">
-                          {currentProjectDetails?.identifier}-{issue.sequence_id}
-                        </span>
-                      </Tooltip>
-                      <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 flex-shrink-0">
-                      <StateDropdown
-                        value={issue.state_id ?? undefined}
-                        onChange={() => {}}
-                        projectId={projectId?.toString() ?? ""}
-                        disabled={true}
-                        buttonVariant="background-with-text"
-                      />
-                      {issue.target_date && (
-                        <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
-                          <div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 cursor-not-allowed">
-                            <CalendarCheck className="h-3 w-3 flex-shrink-0" />
-                            <span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>
-                          </div>
-                        </Tooltip>
-                      )}
-                    </div>
-                  </Link>
-                ))
-              ) : (
-                <div className="flex items-center justify-center h-full text-sm text-custom-text-200">
-                  There are no high priority issues present in this cycle.
-                </div>
-              )
-            ) : (
-              <Loader className="space-y-3">
-                <Loader.Item height="50px" />
-                <Loader.Item height="50px" />
-                <Loader.Item height="50px" />
-              </Loader>
-            )}
-          </div>
-        </div>
-        <div className="flex flex-col  border-custom-border-200 p-4 max-h-60">
-          <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 -{" "}
-                {activeCycle.total_issues - (activeCycle.completed_issues + activeCycle.cancelled_issues)}
-              </span>
-            </div>
-          </div>
-          <div className="relative h-full">
-            <ProgressChart
-              distribution={activeCycle.distribution?.completion_chart ?? {}}
-              startDate={activeCycle.start_date ?? ""}
-              endDate={activeCycle.end_date ?? ""}
-              totalIssues={activeCycle.total_issues}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
diff --git a/web/components/cycles/active-cycle/cycle-stats.tsx b/web/components/cycles/active-cycle/cycle-stats.tsx
new file mode 100644
index 00000000000..2eb12876324
--- /dev/null
+++ b/web/components/cycles/active-cycle/cycle-stats.tsx
@@ -0,0 +1,278 @@
+import { FC, Fragment } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+import { CalendarCheck } from "lucide-react";
+import { Tab } from "@headlessui/react";
+// types
+import { ICycle, TIssue } from "@plane/types";
+// ui
+import { Tooltip, Loader, PriorityIcon, Avatar } from "@plane/ui";
+// components
+import { SingleProgressStats } from "@/components/core";
+import { StateDropdown } from "@/components/dropdowns";
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+import { CYCLE_ISSUES_WITH_PARAMS } from "@/constants/fetch-keys";
+import { EIssuesStoreType } from "@/constants/issue";
+// helper
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedDate, renderFormattedDateWithoutYear } from "@/helpers/date-time.helper";
+// hooks
+import { useIssues, useProject } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
+
+export type ActiveCycleStatsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  cycle: ICycle;
+};
+
+export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
+  const { workspaceSlug, projectId, cycle } = props;
+
+  const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
+
+  const currentValue = (tab: string | null) => {
+    switch (tab) {
+      case "Priority-Issues":
+        return 0;
+      case "Assignees":
+        return 1;
+      case "Labels":
+        return 2;
+      default:
+        return 0;
+    }
+  };
+  const {
+    issues: { fetchActiveCycleIssues },
+  } = useIssues(EIssuesStoreType.CYCLE);
+
+  const { currentProjectDetails } = useProject();
+
+  const { data: activeCycleIssues } = useSWR(
+    workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES_WITH_PARAMS(cycle.id, { priority: "urgent,high" }) : null,
+    workspaceSlug && projectId && cycle.id ? () => fetchActiveCycleIssues(workspaceSlug, projectId, cycle.id) : null
+  );
+
+  const cycleIssues = activeCycleIssues ?? [];
+
+  return (
+    <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden col-span-1 lg:col-span-2 xl:col-span-1 border border-custom-border-200 rounded-lg">
+      <Tab.Group
+        as={Fragment}
+        defaultIndex={currentValue(tab)}
+        onChange={(i) => {
+          switch (i) {
+            case 0:
+              return setTab("Priority-Issues");
+            case 1:
+              return setTab("Assignees");
+            case 2:
+              return setTab("Labels");
+
+            default:
+              return setTab("Priority-Issues");
+          }
+        }}
+      >
+        <Tab.List
+          as="div"
+          className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 p-[1px] grid"
+          style={{
+            gridTemplateColumns: `repeat(3, 1fr)`,
+          }}
+        >
+          <Tab
+            className={({ selected }) =>
+              cn(
+                "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+                {
+                  "text-custom-text-300 bg-custom-background-100": selected,
+                  "hover:text-custom-text-300": !selected,
+                }
+              )
+            }
+          >
+            Priority Issues
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              cn(
+                "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+                {
+                  "text-custom-text-300 bg-custom-background-100": selected,
+                  "hover:text-custom-text-300": !selected,
+                }
+              )
+            }
+          >
+            Assignees
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              cn(
+                "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
+                {
+                  "text-custom-text-300 bg-custom-background-100": selected,
+                  "hover:text-custom-text-300": !selected,
+                }
+              )
+            }
+          >
+            Labels
+          </Tab>
+        </Tab.List>
+
+        <Tab.Panels as={Fragment}>
+          <Tab.Panel
+            as="div"
+            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
+          >
+            <div className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm">
+              {cycleIssues ? (
+                cycleIssues.length > 0 ? (
+                  cycleIssues.map((issue: TIssue) => (
+                    <Link
+                      key={issue.id}
+                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+                      className="group flex cursor-pointer items-center justify-between gap-2 rounded-md hover:bg-custom-background-90 p-1"
+                    >
+                      <div className="flex items-center gap-1.5 flex-grow w-full min-w-24 truncate">
+                        <PriorityIcon priority={issue.priority} withContainer size={12} />
+
+                        <Tooltip
+                          tooltipHeading="Issue ID"
+                          tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
+                        >
+                          <span className="flex-shrink-0 text-xs text-custom-text-200">
+                            {currentProjectDetails?.identifier}-{issue.sequence_id}
+                          </span>
+                        </Tooltip>
+                        <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+                          <span className="text-[0.825rem] text-custom-text-100 truncate">{issue.name}</span>
+                        </Tooltip>
+                      </div>
+                      <div className="flex items-center gap-1.5 flex-shrink-0">
+                        <StateDropdown
+                          value={issue.state_id ?? undefined}
+                          onChange={() => {}}
+                          projectId={projectId?.toString() ?? ""}
+                          disabled
+                          buttonVariant="background-with-text"
+                          buttonContainerClassName="cursor-pointer max-w-24"
+                          showTooltip
+                        />
+                        {issue.target_date && (
+                          <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
+                            <div className="h-full flex truncate items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 group-hover:bg-custom-background-100 cursor-pointer">
+                              <CalendarCheck className="h-3 w-3 flex-shrink-0" />
+                              <span className="text-xs truncate">
+                                {renderFormattedDateWithoutYear(issue.target_date)}
+                              </span>
+                            </div>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </Link>
+                  ))
+                ) : (
+                  <div className="flex items-center justify-center h-full w-full">
+                    <EmptyState
+                      type={EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE}
+                      layout="screen-simple"
+                      size="sm"
+                    />
+                  </div>
+                )
+              ) : (
+                <Loader className="space-y-3">
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                  <Loader.Item height="50px" />
+                </Loader>
+              )}
+            </div>
+          </Tab.Panel>
+
+          <Tab.Panel
+            as="div"
+            className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm"
+          >
+            {cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
+              cycle.distribution?.assignees?.map((assignee, index) => {
+                if (assignee.assignee_id)
+                  return (
+                    <SingleProgressStats
+                      key={assignee.assignee_id}
+                      title={
+                        <div className="flex items-center gap-2">
+                          <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+
+                          <span>{assignee.display_name}</span>
+                        </div>
+                      }
+                      completed={assignee.completed_issues}
+                      total={assignee.total_issues}
+                    />
+                  );
+                else
+                  return (
+                    <SingleProgressStats
+                      key={`unassigned-${index}`}
+                      title={
+                        <div className="flex items-center gap-2">
+                          <div className="h-5 w-5 rounded-full border-2 border-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 items-center justify-center h-full w-full">
+                <EmptyState type={EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE} layout="screen-simple" size="sm" />
+              </div>
+            )}
+          </Tab.Panel>
+
+          <Tab.Panel
+            as="div"
+            className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
+          >
+            {cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
+              cycle.distribution.labels?.map((label, index) => (
+                <SingleProgressStats
+                  key={label.label_id ?? `no-label-${index}`}
+                  title={
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor: label.color ?? "#000000",
+                        }}
+                      />
+                      <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                    </div>
+                  }
+                  completed={label.completed_issues}
+                  total={label.total_issues}
+                />
+              ))
+            ) : (
+              <div className="flex items-center justify-center h-full w-full">
+                <EmptyState type={EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE} layout="screen-simple" size="sm" />
+              </div>
+            )}
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+});
diff --git a/web/components/cycles/active-cycle/header.tsx b/web/components/cycles/active-cycle/header.tsx
new file mode 100644
index 00000000000..98ed91c1dd0
--- /dev/null
+++ b/web/components/cycles/active-cycle/header.tsx
@@ -0,0 +1,77 @@
+import { FC } from "react";
+import Link from "next/link";
+// types
+import { ICycle, TCycleGroups } from "@plane/types";
+// ui
+import { Tooltip, CycleGroupIcon, getButtonStyling, Avatar, AvatarGroup } from "@plane/ui";
+// helpers
+import { renderFormattedDate, findHowManyDaysLeft } from "@/helpers/date-time.helper";
+import { truncateText } from "@/helpers/string.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+
+export type ActiveCycleHeaderProps = {
+  cycle: ICycle;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ActiveCycleHeader: FC<ActiveCycleHeaderProps> = (props) => {
+  const { cycle, workspaceSlug, projectId } = props;
+  // store
+  const { getUserDetails } = useMember();
+  const cycleOwnerDetails = cycle && cycle.owned_by_id ? getUserDetails(cycle.owned_by_id) : undefined;
+
+  const daysLeft = findHowManyDaysLeft(cycle.end_date) ?? 0;
+  const currentCycleStatus = cycle.status.toLocaleLowerCase() as TCycleGroups;
+
+  const cycleAssignee = (cycle.distribution?.assignees ?? []).filter((assignee) => assignee.display_name);
+
+  return (
+    <div className="flex items-center justify-between px-3 py-1.5 rounded border-[0.5px] border-custom-border-100 bg-custom-background-90">
+      <div className="flex items-center gap-2 cursor-default">
+        <CycleGroupIcon cycleGroup={currentCycleStatus} className="h-4 w-4" />
+        <Tooltip tooltipContent={cycle.name} position="top-left">
+          <h3 className="break-words text-lg font-medium">{truncateText(cycle.name, 70)}</h3>
+        </Tooltip>
+        <Tooltip
+          tooltipContent={`Start date: ${renderFormattedDate(cycle.start_date ?? "")} Due Date: ${renderFormattedDate(
+            cycle.end_date ?? ""
+          )}`}
+          position="top-left"
+        >
+          <span className="flex gap-1 whitespace-nowrap rounded-sm text-custom-text-400 font-semibold text-sm leading-5">
+            {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
+          </span>
+        </Tooltip>
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="rounded-sm text-sm">
+          <div className="flex gap-2 divide-x spac divide-x-border-300 text-sm whitespace-nowrap text-custom-text-300 font-medium">
+            <Avatar name={cycleOwnerDetails?.display_name} src={cycleOwnerDetails?.avatar} />
+            {cycleAssignee.length > 0 && (
+              <span className="pl-2">
+                <AvatarGroup showTooltip>
+                  {cycleAssignee.map((member) => (
+                    <Avatar
+                      key={member.assignee_id}
+                      name={member?.display_name ?? ""}
+                      src={member?.avatar ?? ""}
+                      showTooltip={false}
+                    />
+                  ))}
+                </AvatarGroup>
+              </span>
+            )}
+          </div>
+        </div>
+        <Link
+          href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}
+          className={`${getButtonStyling("outline-primary", "sm")} cursor-pointer`}
+        >
+          View Cycle
+        </Link>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/cycles/active-cycle/index.ts b/web/components/cycles/active-cycle/index.ts
new file mode 100644
index 00000000000..d88ccc3e8b6
--- /dev/null
+++ b/web/components/cycles/active-cycle/index.ts
@@ -0,0 +1,8 @@
+export * from "./root";
+export * from "./header";
+export * from "./stats";
+export * from "./upcoming-cycles-list-item";
+export * from "./upcoming-cycles-list";
+export * from "./cycle-stats";
+export * from "./progress";
+export * from "./productivity";
diff --git a/web/components/cycles/active-cycle/productivity.tsx b/web/components/cycles/active-cycle/productivity.tsx
new file mode 100644
index 00000000000..a3366d9341c
--- /dev/null
+++ b/web/components/cycles/active-cycle/productivity.tsx
@@ -0,0 +1,58 @@
+import { FC } from "react";
+// types
+import { ICycle } from "@plane/types";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+
+export type ActiveCycleProductivityProps = {
+  cycle: ICycle;
+};
+
+export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props) => {
+  const { cycle } = props;
+
+  return (
+    <div className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 border border-custom-border-200 rounded-lg">
+      <div className="flex items-center justify-between gap-4">
+        <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
+      </div>
+      {cycle.total_issues > 0 ? (
+        <>
+          <div className="h-full w-full px-2">
+            <div className="flex items-center justify-between gap-4 py-1 text-xs text-custom-text-300">
+              <div className="flex items-center gap-3 text-custom-text-300">
+                <div className="flex items-center justify-center gap-1">
+                  <span className="h-2 w-2 rounded-full bg-[#A9BBD0]" />
+                  <span>Ideal</span>
+                </div>
+                <div className="flex items-center justify-center gap-1">
+                  <span className="h-2 w-2 rounded-full bg-[#4C8FFF]" />
+                  <span>Current</span>
+                </div>
+              </div>
+              <span>{`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
+            </div>
+            <div className="relative  h-full">
+              <ProgressChart
+                className="h-full"
+                distribution={cycle.distribution?.completion_chart ?? {}}
+                startDate={cycle.start_date ?? ""}
+                endDate={cycle.end_date ?? ""}
+                totalIssues={cycle.total_issues}
+              />
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex items-center justify-center h-full w-full">
+            <EmptyState type={EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE} layout="screen-simple" size="sm" />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/cycles/active-cycle/progress.tsx b/web/components/cycles/active-cycle/progress.tsx
new file mode 100644
index 00000000000..752f72bcc17
--- /dev/null
+++ b/web/components/cycles/active-cycle/progress.tsx
@@ -0,0 +1,90 @@
+import { FC } from "react";
+// types
+import { ICycle } from "@plane/types";
+// ui
+import { LinearProgressIndicator } from "@plane/ui";
+// components
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
+import { EmptyStateType } from "@/constants/empty-state";
+
+export type ActiveCycleProgressProps = {
+  cycle: ICycle;
+};
+
+export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
+  const { cycle } = props;
+
+  const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
+    color: group.color,
+  }));
+
+  const groupedIssues: any = {
+    completed: cycle.completed_issues,
+    started: cycle.started_issues,
+    unstarted: cycle.unstarted_issues,
+    backlog: cycle.backlog_issues,
+  };
+
+  return (
+    <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 border border-custom-border-200 rounded-lg">
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between gap-4">
+          <h3 className="text-base text-custom-text-300 font-semibold">Progress</h3>
+          {cycle.total_issues > 0 && (
+            <span className="flex gap-1 text-sm text-custom-text-400 font-medium whitespace-nowrap rounded-sm px-3 py-1 ">
+              {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
+                cycle.completed_issues + cycle.cancelled_issues > 1 ? "Issues" : "Issue"
+              } closed`}
+            </span>
+          )}
+        </div>
+        {cycle.total_issues > 0 && <LinearProgressIndicator size="lg" data={progressIndicatorData} />}
+      </div>
+
+      {cycle.total_issues > 0 ? (
+        <div className="flex flex-col gap-5">
+          {Object.keys(groupedIssues).map((group, index) => (
+            <>
+              {groupedIssues[group] > 0 && (
+                <div key={index}>
+                  <div className="flex items-center justify-between gap-2 text-sm">
+                    <div className="flex items-center gap-1.5">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor: CYCLE_STATE_GROUPS_DETAILS[index].color,
+                        }}
+                      />
+                      <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>
+                    </div>
+                    <span className="text-custom-text-300">{`${groupedIssues[group]} ${
+                      groupedIssues[group] > 1 ? "Issues" : "Issue"
+                    }`}</span>
+                  </div>
+                </div>
+              )}
+            </>
+          ))}
+          {cycle.cancelled_issues > 0 && (
+            <span className="flex items-center gap-2 text-sm text-custom-text-300">
+              <span>
+                {`${cycle.cancelled_issues} cancelled ${
+                  cycle.cancelled_issues > 1 ? "issues are" : "issue is"
+                } excluded from this report.`}{" "}
+              </span>
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="flex items-center justify-center h-full w-full">
+          <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/cycles/active-cycle/root.tsx b/web/components/cycles/active-cycle/root.tsx
new file mode 100644
index 00000000000..bd2c3b61328
--- /dev/null
+++ b/web/components/cycles/active-cycle/root.tsx
@@ -0,0 +1,92 @@
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import {
+  ActiveCycleHeader,
+  ActiveCycleProductivity,
+  ActiveCycleProgress,
+  ActiveCycleStats,
+  UpcomingCyclesList,
+} from "@/components/cycles";
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// hooks
+import { useCycle, useCycleFilter } from "@/hooks/store";
+
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
+  // props
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { fetchActiveCycle, currentProjectActiveCycleId, currentProjectUpcomingCycleIds, getActiveCycleById } =
+    useCycle();
+  // cycle filters hook
+  const { updateDisplayFilters } = useCycleFilter();
+  // derived values
+  const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
+  // fetch active cycle details
+  const { isLoading } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_ACTIVE_CYCLE_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchActiveCycle(workspaceSlug, projectId) : null
+  );
+
+  const handleEmptyStateAction = () =>
+    updateDisplayFilters(projectId, {
+      active_tab: "all",
+    });
+
+  // show loader if active cycle is loading
+  if (!activeCycle && isLoading)
+    return (
+      <Loader>
+        <Loader.Item height="250px" />
+      </Loader>
+    );
+
+  if (!activeCycle) {
+    // show empty state if no active cycle is present
+    if (currentProjectUpcomingCycleIds?.length === 0)
+      return <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />;
+    // show upcoming cycles list, if present
+    else
+      return (
+        <>
+          <div className="h-52 w-full grid place-items-center mb-6">
+            <div className="text-center">
+              <h5 className="text-xl font-medium mb-1">No active cycle</h5>
+              <p className="text-custom-text-400 text-base">
+                Create new cycles to find them here or check
+                <br />
+                {"'"}All{"'"} cycles tab to see all cycles or{" "}
+                <button type="button" className="text-custom-primary-100 font-medium" onClick={handleEmptyStateAction}>
+                  click here
+                </button>
+              </p>
+            </div>
+          </div>
+          <UpcomingCyclesList handleEmptyStateAction={handleEmptyStateAction} />
+        </>
+      );
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <ActiveCycleHeader cycle={activeCycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+        <div className="grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+          <ActiveCycleProgress cycle={activeCycle} />
+          <ActiveCycleProductivity cycle={activeCycle} />
+          <ActiveCycleStats cycle={activeCycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+        </div>
+      </div>
+      {currentProjectUpcomingCycleIds && <UpcomingCyclesList handleEmptyStateAction={handleEmptyStateAction} />}
+    </>
+  );
+});
diff --git a/web/components/cycles/active-cycle-stats.tsx b/web/components/cycles/active-cycle/stats.tsx
similarity index 95%
rename from web/components/cycles/active-cycle-stats.tsx
rename to web/components/cycles/active-cycle/stats.tsx
index 3ca5caeb204..7e7a97e7d30 100644
--- a/web/components/cycles/active-cycle-stats.tsx
+++ b/web/components/cycles/active-cycle/stats.tsx
@@ -1,13 +1,13 @@
 import React, { Fragment } from "react";
 import { Tab } from "@headlessui/react";
+import { ICycle } from "@plane/types";
 // hooks
-import useLocalStorage from "hooks/use-local-storage";
+import { Avatar } from "@plane/ui";
+import { SingleProgressStats } from "@/components/core";
+import useLocalStorage from "@/hooks/use-local-storage";
 // components
-import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "@plane/ui";
 // types
-import { ICycle } from "@plane/types";
 
 type Props = {
   cycle: ICycle;
@@ -82,7 +82,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                       <div className="flex items-center gap-2">
                         <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
 
-                        <span>{assignee.display_name}</span>
+                        <span>{assignee?.display_name ?? ""}</span>
                       </div>
                     }
                     completed={assignee.completed_issues}
@@ -134,7 +134,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
         </Tab.Panels>
       ) : (
         <div className="mt-4 grid place-items-center text-center text-sm text-custom-text-200">
-          There are no high priority issues present in this cycle.
+          There are no issues present in this cycle.
         </div>
       )}
     </Tab.Group>
diff --git a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
new file mode 100644
index 00000000000..2e48a95b4dc
--- /dev/null
+++ b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
@@ -0,0 +1,135 @@
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Star, User2 } from "lucide-react";
+// hooks
+import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
+import { CycleQuickActions } from "@/components/cycles";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useCycle, useEventTracker, useMember } from "@/hooks/store";
+// components
+// ui
+// helpers
+// constants
+
+type Props = {
+  cycleId: string;
+};
+
+export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
+  const { cycleId } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store hooks
+  const { captureEvent } = useEventTracker();
+  const { addCycleToFavorites, getCycleById, removeCycleFromFavorites } = useCycle();
+  const { getUserDetails } = useMember();
+  // derived values
+  const cycle = getCycleById(cycleId);
+
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      () => {
+        captureEvent(CYCLE_FAVORITED, {
+          cycle_id: cycleId,
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding cycle to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the cycle to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    ).then(() => {
+      captureEvent(CYCLE_UNFAVORITED, {
+        cycle_id: cycleId,
+        element: "List layout",
+        state: "SUCCESS",
+      });
+    });
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing cycle from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the cycle from favorites. Please try again.",
+      },
+    });
+  };
+
+  if (!cycle) return null;
+
+  return (
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`}
+      className="py-5 px-2 flex items-center justify-between gap-2 hover:bg-custom-background-90"
+    >
+      <h6 className="font-medium text-base">{cycle.name}</h6>
+      <div className="flex items-center gap-4">
+        {cycle.start_date && cycle.end_date && (
+          <div className="text-xs text-custom-text-300">
+            {renderFormattedDate(cycle.start_date)} - {renderFormattedDate(cycle.end_date)}
+          </div>
+        )}
+        {cycle.assignee_ids?.length > 0 ? (
+          <AvatarGroup showTooltip={false}>
+            {cycle.assignee_ids?.map((assigneeId) => {
+              const member = getUserDetails(assigneeId);
+              return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+            })}
+          </AvatarGroup>
+        ) : (
+          <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+            <User2 className="h-4 w-4 text-custom-text-400" />
+          </span>
+        )}
+
+        {cycle.is_favorite ? (
+          <button type="button" onClick={handleRemoveFromFavorites}>
+            <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+          </button>
+        ) : (
+          <button type="button" onClick={handleAddToFavorites}>
+            <Star className="h-3.5 w-3.5 text-custom-text-200" />
+          </button>
+        )}
+
+        {workspaceSlug && projectId && (
+          <CycleQuickActions
+            cycleId={cycleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        )}
+      </div>
+    </Link>
+  );
+});
diff --git a/web/components/cycles/active-cycle/upcoming-cycles-list.tsx b/web/components/cycles/active-cycle/upcoming-cycles-list.tsx
new file mode 100644
index 00000000000..221ffab0b6f
--- /dev/null
+++ b/web/components/cycles/active-cycle/upcoming-cycles-list.tsx
@@ -0,0 +1,64 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// components
+import { UpcomingCycleListItem } from "@/components/cycles";
+// hooks
+import { useCycle } from "@/hooks/store";
+
+type Props = {
+  handleEmptyStateAction: () => void;
+};
+
+export const UpcomingCyclesList: FC<Props> = observer((props) => {
+  const { handleEmptyStateAction } = props;
+  // store hooks
+  const { currentProjectUpcomingCycleIds } = useCycle();
+
+  // theme
+  const { resolvedTheme } = useTheme();
+
+  const resolvedEmptyStatePath = `/empty-state/active-cycle/cycle-${resolvedTheme === "light" ? "light" : "dark"}.webp`;
+
+  if (!currentProjectUpcomingCycleIds) return null;
+
+  return (
+    <div>
+      <div className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded inline-block text-custom-text-400">
+        Next cycles
+      </div>
+      {currentProjectUpcomingCycleIds.length > 0 ? (
+        <div className="mt-2 divide-y-[0.5px] divide-custom-border-200 border-b-[0.5px] border-custom-border-200">
+          {currentProjectUpcomingCycleIds.map((cycleId) => (
+            <UpcomingCycleListItem key={cycleId} cycleId={cycleId} />
+          ))}
+        </div>
+      ) : (
+        <div className="flex items-center justify-center h-full w-full py-20">
+          <div className="text-center flex flex-col gap-2.5 items-center">
+            <div className="h-24 w-24">
+              <Image
+                src={resolvedEmptyStatePath}
+                alt="button image"
+                width={78}
+                height={78}
+                layout="responsive"
+                lazyBoundary="100%"
+              />
+            </div>
+            <h5 className="text-xl font-medium mb-1">No upcoming cycles</h5>
+            <p className="text-custom-text-400 text-base">
+              Create new cycles to find them here or check
+              <br />
+              {"'"}All{"'"} cycles tab to see all cycles or{" "}
+              <button type="button" className="text-custom-primary-100 font-medium" onClick={handleEmptyStateAction}>
+                click here
+              </button>
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/cycles/applied-filters/date.tsx b/web/components/cycles/applied-filters/date.tsx
new file mode 100644
index 00000000000..fa6f94c5061
--- /dev/null
+++ b/web/components/cycles/applied-filters/date.tsx
@@ -0,0 +1,55 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// helpers
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <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>
+      ))}
+    </>
+  );
+});
diff --git a/web/components/cycles/applied-filters/index.ts b/web/components/cycles/applied-filters/index.ts
new file mode 100644
index 00000000000..cee9ae3497d
--- /dev/null
+++ b/web/components/cycles/applied-filters/index.ts
@@ -0,0 +1,3 @@
+export * from "./date";
+export * from "./root";
+export * from "./status";
diff --git a/web/components/cycles/applied-filters/root.tsx b/web/components/cycles/applied-filters/root.tsx
new file mode 100644
index 00000000000..270beadfd4d
--- /dev/null
+++ b/web/components/cycles/applied-filters/root.tsx
@@ -0,0 +1,90 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+import { TCycleFilters } from "@plane/types";
+// hooks
+import { AppliedDateFilters, AppliedStatusFilters } from "@/components/cycles";
+import { EUserProjectRoles } from "@/constants/project";
+import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
+import { useUser } from "@/hooks/store";
+// components
+// helpers
+// types
+// constants
+
+type Props = {
+  appliedFilters: TCycleFilters;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TCycleFilters, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+};
+
+const DATE_FILTERS = ["start_date", "end_date"];
+
+export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  if (!appliedFilters) return null;
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TCycleFilters;
+
+        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <div className="flex flex-wrap items-center gap-1">
+              {filterKey === "status" && (
+                <AppliedStatusFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("status", val)}
+                  values={value}
+                />
+              )}
+              {DATE_FILTERS.includes(filterKey) && (
+                <AppliedDateFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {isEditingAllowed && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  onClick={() => handleRemoveFilter(filterKey, null)}
+                >
+                  <X size={12} strokeWidth={2} />
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      {isEditingAllowed && (
+        <button
+          type="button"
+          onClick={handleClearAllFilters}
+          className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        >
+          Clear all
+          <X size={12} strokeWidth={2} />
+        </button>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/cycles/applied-filters/status.tsx b/web/components/cycles/applied-filters/status.tsx
new file mode 100644
index 00000000000..83349948c93
--- /dev/null
+++ b/web/components/cycles/applied-filters/status.tsx
@@ -0,0 +1,43 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+import { CYCLE_STATUS } from "@/constants/cycle";
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((status) => {
+        const statusDetails = CYCLE_STATUS.find((s) => s.value === status);
+        return (
+          <div
+            key={status}
+            className={cn(
+              "flex items-center gap-1 rounded p-1 text-xs",
+              statusDetails?.bgColor,
+              statusDetails?.textColor
+            )}
+          >
+            {statusDetails?.title}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(status)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/cycles/archived-cycles/header.tsx b/web/components/cycles/archived-cycles/header.tsx
new file mode 100644
index 00000000000..267c873885f
--- /dev/null
+++ b/web/components/cycles/archived-cycles/header.tsx
@@ -0,0 +1,123 @@
+import { FC, useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+// icons
+import { ListFilter, Search, X } from "lucide-react";
+// types
+import type { TCycleFilters } from "@plane/types";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { CycleFiltersSelection } from "@/components/cycles";
+import { FiltersDropdown } from "@/components/issues";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useCycleFilter } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+
+export const ArchivedCyclesHeader: FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { projectId } = router.query;
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const { currentProjectArchivedFilters, archivedCyclesSearchQuery, updateFilters, updateArchivedCyclesSearchQuery } =
+    useCycleFilter();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(archivedCyclesSearchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && archivedCyclesSearchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TCycleFilters, value: string | string[]) => {
+      if (!projectId) return;
+
+      const newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      else {
+        if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (archivedCyclesSearchQuery && archivedCyclesSearchQuery.trim() !== "") updateArchivedCyclesSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  return (
+    <div className="group relative flex border-b border-custom-border-200">
+      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+        <ArchiveTabsList />
+      </div>
+      {/* filter options */}
+      <div className="h-full flex items-center gap-3 self-end px-8">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={archivedCyclesSearchQuery}
+            onChange={(e) => updateArchivedCyclesSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateArchivedCyclesSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+          <CycleFiltersSelection
+            filters={currentProjectArchivedFilters ?? {}}
+            handleFiltersUpdate={handleFilters}
+            isArchived
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/cycles/archived-cycles/index.ts b/web/components/cycles/archived-cycles/index.ts
new file mode 100644
index 00000000000..f59f0954ef1
--- /dev/null
+++ b/web/components/cycles/archived-cycles/index.ts
@@ -0,0 +1,4 @@
+export * from "./root";
+export * from "./view";
+export * from "./header";
+export * from "./modal";
diff --git a/web/components/cycles/archived-cycles/modal.tsx b/web/components/cycles/archived-cycles/modal.tsx
new file mode 100644
index 00000000000..6e0ddef35bb
--- /dev/null
+++ b/web/components/cycles/archived-cycles/modal.tsx
@@ -0,0 +1,104 @@
+import { useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
+import { useCycle } from "@/hooks/store";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export const ArchiveCycleModal: React.FC<Props> = (props) => {
+  const { workspaceSlug, projectId, cycleId, isOpen, handleClose } = props;
+  // router
+  const router = useRouter();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getCycleNameById, archiveCycle } = useCycle();
+
+  const cycleName = getCycleNameById(cycleId);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveCycle = async () => {
+    setIsArchiving(true);
+    await archiveCycle(workspaceSlug, projectId, cycleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: "Your archives can be found in project archives.",
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/${projectId}/archives/cycles?peekCycle=${cycleId}`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Cycle could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsArchiving(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 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 bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="px-5 py-4">
+                  <h3 className="text-xl font-medium 2xl:text-2xl">Archive cycle {cycleName}</h3>
+                  <p className="mt-3 text-sm text-custom-text-200">
+                    Are you sure you want to archive the cycle? All your archives can be restored later.
+                  </p>
+                  <div className="mt-3 flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button size="sm" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
+                      {isArchiving ? "Archiving" : "Archive"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/cycles/archived-cycles/root.tsx b/web/components/cycles/archived-cycles/root.tsx
new file mode 100644
index 00000000000..4d47c8f34e5
--- /dev/null
+++ b/web/components/cycles/archived-cycles/root.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// types
+import { TCycleFilters } from "@plane/types";
+// components
+import { ArchivedCyclesView, CycleAppliedFiltersList } from "@/components/cycles";
+import { EmptyState } from "@/components/empty-state";
+import { CycleModuleListLayout } from "@/components/ui";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// helpers
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+// hooks
+import { useCycle, useCycleFilter } from "@/hooks/store";
+
+export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // hooks
+  const { fetchArchivedCycles, currentProjectArchivedCycleIds, loader } = useCycle();
+  // cycle filters hook
+  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useCycleFilter();
+  // derived values
+  const totalArchivedCycles = currentProjectArchivedCycleIds?.length ?? 0;
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_CYCLES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchArchivedCycles(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
+    if (!projectId) return;
+    let newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+    if (!value) newValues = [];
+    else newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  if (loader || !currentProjectArchivedCycleIds) {
+    return <CycleModuleListLayout />;
+  }
+
+  return (
+    <>
+      {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
+        <div className="border-b border-custom-border-200 px-5 py-3">
+          <CycleAppliedFiltersList
+            appliedFilters={currentProjectArchivedFilters ?? {}}
+            handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
+            handleRemoveFilter={handleRemoveFilter}
+          />
+        </div>
+      )}
+      {totalArchivedCycles === 0 ? (
+        <div className="h-full place-items-center">
+          <EmptyState type={EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES} />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          <ArchivedCyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/archived-cycles/view.tsx b/web/components/cycles/archived-cycles/view.tsx
new file mode 100644
index 00000000000..ed86a56b44b
--- /dev/null
+++ b/web/components/cycles/archived-cycles/view.tsx
@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+// components
+import { CyclesList } from "@/components/cycles";
+// ui
+import { CycleModuleListLayout } from "@/components/ui";
+// hooks
+import { useCycle, useCycleFilter } from "@/hooks/store";
+// assets
+import AllFiltersImage from "@/public/empty-state/cycle/all-filters.svg";
+import NameFilterImage from "@/public/empty-state/cycle/name-filter.svg";
+
+export interface IArchivedCyclesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ArchivedCyclesView: FC<IArchivedCyclesView> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredArchivedCycleIds, loader } = useCycle();
+  const { archivedCyclesSearchQuery } = useCycleFilter();
+  // derived values
+  const filteredArchivedCycleIds = getFilteredArchivedCycleIds(projectId);
+
+  if (loader || !filteredArchivedCycleIds) return <CycleModuleListLayout />;
+
+  if (filteredArchivedCycleIds.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching cycles"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching cycles</h5>
+          <p className="text-custom-text-400 text-base">
+            {archivedCyclesSearchQuery.trim() === ""
+              ? "Remove the filters to see all cycles"
+              : "Remove the search criteria to see all cycles"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <CyclesList
+      completedCycleIds={[]}
+      cycleIds={filteredArchivedCycleIds}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      isArchived
+    />
+  );
+});
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/board/cycles-board-card.tsx
similarity index 60%
rename from web/components/cycles/cycles-board-card.tsx
rename to web/components/cycles/board/cycles-board-card.tsx
index 7d6b1e00036..34d395db46b 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/board/cycles-board-card.tsx
@@ -1,25 +1,26 @@
-import { FC, MouseEvent, useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
+import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
-// hooks
-import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
-import useToast from "hooks/use-toast";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // components
-import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+import { Info, Star } from "lucide-react";
+import type { TCycleGroups } from "@plane/types";
+import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
+import { CycleQuickActions } from "@/components/cycles";
+// hooks
 // ui
-import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
 // icons
-import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
-import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+// import { copyTextToClipboard } from "@/helpers/string.helper";
+// constants
+import { CYCLE_STATUS } from "@/constants/cycle";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
 // constants
-import { CYCLE_STATUS } from "constants/cycle";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
+import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 //.types
-import { TCycleGroups } from "@plane/types";
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -29,29 +30,26 @@ export interface ICyclesBoardCard {
 
 export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const { cycleId, workspaceSlug, projectId } = props;
-  // states
-  const [updateModal, setUpdateModal] = useState(false);
-  const [deleteModal, setDeleteModal] = useState(false);
   // router
   const router = useRouter();
   // store
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { addCycleToFavorites, removeCycleFromFavorites, getCycleById } = useCycle();
   const { getUserDetails } = useMember();
-  // toast alert
-  const { setToastAlert } = useToast();
   // computed
   const cycleDetails = getCycleById(cycleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   if (!cycleDetails) return null;
 
   const cycleStatus = cycleDetails.status.toLocaleLowerCase();
-  const isCompleted = cycleStatus === "completed";
-  const endDate = new Date(cycleDetails.end_date ?? "");
-  const startDate = new Date(cycleDetails.start_date ?? "");
+  // const isCompleted = cycleStatus === "completed";
+  const endDate = getDate(cycleDetails.end_date);
+  const startDate = getDate(cycleDetails.start_date);
   const isDateValid = cycleDetails.start_date || cycleDetails.end_date;
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
@@ -75,74 +73,60 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
       : `${cycleDetails.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/${cycleId}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
-
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      .then(() => {
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      () => {
         captureEvent(CYCLE_FAVORITED, {
           cycle_id: cycleId,
           element: "Grid layout",
           state: "SUCCESS",
         });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
-      });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding cycle to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle added to favorites.",
+      },
+      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;
 
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      .then(() => {
-        captureEvent(CYCLE_UNFAVORITED, {
-          cycle_id: cycleId,
-          element: "Grid layout",
-          state: "SUCCESS",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    ).then(() => {
+      captureEvent(CYCLE_UNFAVORITED, {
+        cycle_id: cycleId,
+        element: "Grid layout",
+        state: "SUCCESS",
       });
-  };
-
-  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page grid layout");
-    setUpdateModal(true);
-  };
+    });
 
-  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page grid layout");
-    setDeleteModal(true);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing cycle from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the cycle from favorites. Please try again.",
+      },
+    });
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
@@ -150,32 +134,24 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
     e.preventDefault();
     e.stopPropagation();
 
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekCycle: cycleId },
-    });
+    if (query.peekCycle) {
+      delete query.peekCycle;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekCycle: cycleId },
+      });
+    }
   };
 
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
     <div>
-      <CycleCreateUpdateModal
-        data={cycleDetails}
-        isOpen={updateModal}
-        handleClose={() => setUpdateModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-
-      <CycleDeleteModal
-        cycle={cycleDetails}
-        isOpen={deleteModal}
-        handleClose={() => setDeleteModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
         <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
@@ -183,7 +159,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
               <span className="flex-shrink-0">
                 <CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />
               </span>
-              <Tooltip tooltipContent={cycleDetails.name} position="top">
+              <Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
                 <span className="truncate text-base font-medium">{cycleDetails.name}</span>
               </Tooltip>
             </div>
@@ -214,7 +190,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                 <span className="text-xs text-custom-text-300">{issueCount}</span>
               </div>
               {cycleDetails.assignee_ids.length > 0 && (
-                <Tooltip tooltipContent={`${cycleDetails.assignee_ids.length} Members`}>
+                <Tooltip tooltipContent={`${cycleDetails.assignee_ids.length} Members`} isMobile={isMobile}>
                   <div className="flex cursor-default items-center gap-1">
                     <AvatarGroup showTooltip={false}>
                       {cycleDetails.assignee_ids.map((assigne_id) => {
@@ -228,6 +204,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
             </div>
 
             <Tooltip
+              isMobile={isMobile}
               tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
               position="top-left"
             >
@@ -267,30 +244,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                       <Star className="h-3.5 w-3.5 text-custom-text-200" />
                     </button>
                   ))}
-                <CustomMenu ellipsis className="z-10">
-                  {!isCompleted && isEditingAllowed && (
-                    <>
-                      <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 cycle</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>
+
+                <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
               </div>
             </div>
           </div>
diff --git a/web/components/cycles/board/cycles-board-map.tsx b/web/components/cycles/board/cycles-board-map.tsx
new file mode 100644
index 00000000000..3e83ca755d7
--- /dev/null
+++ b/web/components/cycles/board/cycles-board-map.tsx
@@ -0,0 +1,25 @@
+// components
+import { CyclesBoardCard } from "@/components/cycles";
+
+type Props = {
+  cycleIds: string[];
+  peekCycle: string | undefined;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CyclesBoardMap: React.FC<Props> = (props) => {
+  const { cycleIds, peekCycle, projectId, workspaceSlug } = props;
+
+  return (
+    <div
+      className={`w-full grid grid-cols-1 gap-6 ${
+        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`}
+    >
+      {cycleIds.map((cycleId) => (
+        <CyclesBoardCard key={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
+      ))}
+    </div>
+  );
+};
diff --git a/web/components/cycles/board/index.ts b/web/components/cycles/board/index.ts
new file mode 100644
index 00000000000..2e6933d99d5
--- /dev/null
+++ b/web/components/cycles/board/index.ts
@@ -0,0 +1,3 @@
+export * from "./cycles-board-card";
+export * from "./cycles-board-map";
+export * from "./root";
diff --git a/web/components/cycles/board/root.tsx b/web/components/cycles/board/root.tsx
new file mode 100644
index 00000000000..7796f3efd19
--- /dev/null
+++ b/web/components/cycles/board/root.tsx
@@ -0,0 +1,62 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { ChevronRight } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+// components
+import { CyclePeekOverview, CyclesBoardMap } from "@/components/cycles";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export interface ICyclesBoard {
+  completedCycleIds: string[];
+  cycleIds: string[];
+  workspaceSlug: string;
+  projectId: string;
+  peekCycle: string | undefined;
+}
+
+export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
+  const { completedCycleIds, cycleIds, workspaceSlug, projectId, peekCycle } = props;
+
+  return (
+    <div className="h-full w-full">
+      <div className="flex h-full w-full justify-between">
+        <div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg">
+          {cycleIds.length > 0 && (
+            <CyclesBoardMap
+              cycleIds={cycleIds}
+              peekCycle={peekCycle}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+          )}
+          {completedCycleIds.length !== 0 && (
+            <Disclosure as="div" className="space-y-4">
+              <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1">
+                {({ open }) => (
+                  <>
+                    Completed cycles ({completedCycleIds.length})
+                    <ChevronRight
+                      className={cn("h-3 w-3 transition-all", {
+                        "rotate-90": open,
+                      })}
+                    />
+                  </>
+                )}
+              </Disclosure.Button>
+              <Disclosure.Panel>
+                <CyclesBoardMap
+                  cycleIds={completedCycleIds}
+                  peekCycle={peekCycle}
+                  projectId={projectId}
+                  workspaceSlug={workspaceSlug}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+          )}
+        </div>
+        <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/cycles/cycle-mobile-header.tsx b/web/components/cycles/cycle-mobile-header.tsx
index 624334ec473..8c168cbaa08 100644
--- a/web/components/cycles/cycle-mobile-header.tsx
+++ b/web/components/cycles/cycle-mobile-header.tsx
@@ -1,16 +1,16 @@
 import { useCallback, useState } from "react";
 import router from "next/router";
 //components
-import { CustomMenu } from "@plane/ui";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
 // hooks
-import { useIssues, useCycle, useProjectState, useLabel, useMember } from "hooks/store";
 // constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
-import { ProjectAnalyticsModal } from "components/analytics";
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+import { ProjectAnalyticsModal } from "@/components/analytics";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue";
+import { useIssues, useCycle, useProjectState, useLabel, useMember } from "@/hooks/store";
 
 export const CycleMobileHeader = () => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -21,11 +21,7 @@ export const CycleMobileHeader = () => {
     { key: "calendar", title: "Calendar", icon: Calendar },
   ];
 
-  const { workspaceSlug, projectId, cycleId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    cycleId: string;
-  };
+  const { workspaceSlug, projectId, cycleId } = router.query;
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
   // store hooks
   const {
@@ -35,8 +31,14 @@ export const CycleMobileHeader = () => {
 
   const handleLayoutChange = useCallback(
     (layout: TIssueLayouts) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, cycleId);
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        cycleId.toString()
+      );
     },
     [workspaceSlug, projectId, cycleId, updateFilters]
   );
@@ -49,7 +51,7 @@ export const CycleMobileHeader = () => {
 
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
-      if (!workspaceSlug || !projectId) return;
+      if (!workspaceSlug || !projectId || !cycleId) return;
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
@@ -61,23 +63,41 @@ export const CycleMobileHeader = () => {
         else newValues.push(value);
       }
 
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, cycleId);
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        cycleId.toString()
+      );
     },
     [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
   );
 
   const handleDisplayFilters = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, cycleId);
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        cycleId.toString()
+      );
     },
     [workspaceSlug, projectId, cycleId, updateFilters]
   );
 
   const handleDisplayProperties = useCallback(
     (property: Partial<IIssueDisplayProperties>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, cycleId);
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        cycleId.toString()
+      );
     },
     [workspaceSlug, projectId, cycleId, updateFilters]
   );
@@ -89,7 +109,7 @@ export const CycleMobileHeader = () => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200 md:hidden bg-custom-background-100">
         <CustomMenu
           maxHeight={"md"}
           className="flex flex-grow justify-center text-custom-text-200 text-sm"
@@ -100,6 +120,7 @@ export const CycleMobileHeader = () => {
         >
           {layouts.map((layout, index) => (
             <CustomMenu.MenuItem
+              key={ISSUE_LAYOUTS[index].key}
               onClick={() => {
                 handleLayoutChange(ISSUE_LAYOUTS[index].key);
               }}
diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx
index fbfb46b50b5..8409c06fe36 100644
--- a/web/components/cycles/cycle-peek-overview.tsx
+++ b/web/components/cycles/cycle-peek-overview.tsx
@@ -1,17 +1,18 @@
 import React, { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useCycle } from "hooks/store";
+import { useCycle } from "@/hooks/store";
 // components
 import { CycleDetailsSidebar } from "./sidebar";
 
 type Props = {
   projectId: string;
   workspaceSlug: string;
+  isArchived?: boolean;
 };
 
-export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
   // router
   const router = useRouter();
   const { peekCycle } = router.query;
@@ -29,22 +30,26 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
   };
 
   useEffect(() => {
-    if (!peekCycle) return;
+    if (!peekCycle || isArchived) return;
     fetchCycleDetails(workspaceSlug, projectId, peekCycle.toString());
-  }, [fetchCycleDetails, peekCycle, projectId, workspaceSlug]);
+  }, [fetchCycleDetails, isArchived, peekCycle, projectId, workspaceSlug]);
 
   return (
     <>
       {peekCycle && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 fixed md:relative right-0 z-[9]"
+          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 fixed md:relative right-0 z-[9]"
           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} />
+          <CycleDetailsSidebar
+            cycleId={peekCycle?.toString() ?? ""}
+            handleClose={handleClose}
+            isArchived={isArchived}
+          />
         </div>
       )}
     </>
diff --git a/web/components/cycles/cycles-board.tsx b/web/components/cycles/cycles-board.tsx
deleted file mode 100644
index 1a90692675d..00000000000
--- a/web/components/cycles/cycles-board.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { FC } from "react";
-import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
-// hooks
-import { useUser } from "hooks/store";
-// components
-import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// constants
-import { CYCLE_EMPTY_STATE_DETAILS } from "constants/empty-state";
-
-export interface ICyclesBoard {
-  cycleIds: string[];
-  filter: string;
-  workspaceSlug: string;
-  projectId: string;
-  peekCycle: string | undefined;
-}
-
-export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
-  const { cycleIds, filter, workspaceSlug, projectId, peekCycle } = props;
-  // theme
-  const { resolvedTheme } = useTheme();
-  // store hooks
-  const { currentUser } = useUser();
-
-  const emptyStateDetail = CYCLE_EMPTY_STATE_DETAILS[filter as keyof typeof CYCLE_EMPTY_STATE_DETAILS];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("cycle", filter, isLightMode);
-
-  return (
-    <>
-      {cycleIds?.length > 0 ? (
-        <div className="h-full w-full">
-          <div className="flex h-full w-full justify-between">
-            <div
-              className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
-                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  vertical-scrollbar scrollbar-lg`}
-            >
-              {cycleIds.map((cycleId) => (
-                <CyclesBoardCard key={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
-              ))}
-            </div>
-            <CyclePeekOverview
-              projectId={projectId?.toString() ?? ""}
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-            />
-          </div>
-        </div>
-      ) : (
-        <EmptyState
-          title={emptyStateDetail.title}
-          description={emptyStateDetail.description}
-          image={emptyStateImage}
-          size="sm"
-        />
-      )}
-    </>
-  );
-});
diff --git a/web/components/cycles/cycles-list-mobile-header.tsx b/web/components/cycles/cycles-list-mobile-header.tsx
new file mode 100644
index 00000000000..590cb794f60
--- /dev/null
+++ b/web/components/cycles/cycles-list-mobile-header.tsx
@@ -0,0 +1,52 @@
+import { observer } from "mobx-react";
+// ui
+import { List } from "lucide-react";
+import { CustomMenu } from "@plane/ui";
+// icon
+// constants
+import { CYCLE_VIEW_LAYOUTS } from "@/constants/cycle";
+// hooks
+import { useCycleFilter, useProject } from "@/hooks/store";
+
+const CyclesListMobileHeader = observer(() => {
+  const { currentProjectDetails } = useProject();
+  // hooks
+  const { updateDisplayFilters } = useCycleFilter();
+  return (
+    <div className="flex justify-center sm:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        // placement="bottom-start"
+        customButton={
+          <span className="flex items-center gap-2">
+            <List className="h-4 w-4" />
+            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+          </span>
+        }
+        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {CYCLE_VIEW_LAYOUTS.map((layout) => {
+          if (layout.key == "gantt") return;
+          return (
+            <CustomMenu.MenuItem
+              key={layout.key}
+              onClick={() => {
+                updateDisplayFilters(currentProjectDetails!.id, {
+                  layout: layout.key,
+                });
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </div>
+  );
+});
+
+export default CyclesListMobileHeader;
diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx
deleted file mode 100644
index 173a7f4b7cd..00000000000
--- a/web/components/cycles/cycles-list.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { FC } from "react";
-import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
-// hooks
-import { useUser } from "hooks/store";
-// components
-import { CyclePeekOverview, CyclesListItem } from "components/cycles";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// ui
-import { Loader } from "@plane/ui";
-// constants
-import { CYCLE_EMPTY_STATE_DETAILS } from "constants/empty-state";
-
-export interface ICyclesList {
-  cycleIds: string[];
-  filter: string;
-  workspaceSlug: string;
-  projectId: string;
-}
-
-export const CyclesList: FC<ICyclesList> = observer((props) => {
-  const { cycleIds, filter, workspaceSlug, projectId } = props;
-  // theme
-  const { resolvedTheme } = useTheme();
-  // store hooks
-  const { currentUser } = useUser();
-
-  const emptyStateDetail = CYCLE_EMPTY_STATE_DETAILS[filter as keyof typeof CYCLE_EMPTY_STATE_DETAILS];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("cycle", filter, isLightMode);
-
-  return (
-    <>
-      {cycleIds ? (
-        <>
-          {cycleIds.length > 0 ? (
-            <div className="h-full overflow-y-auto">
-              <div className="flex h-full w-full justify-between">
-                <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
-                  {cycleIds.map((cycleId) => (
-                    <CyclesListItem
-                      key={cycleId}
-                      cycleId={cycleId}
-                      workspaceSlug={workspaceSlug}
-                      projectId={projectId}
-                    />
-                  ))}
-                </div>
-                <CyclePeekOverview
-                  projectId={projectId?.toString() ?? ""}
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                />
-              </div>
-            </div>
-          ) : (
-            <EmptyState
-              title={emptyStateDetail.title}
-              description={emptyStateDetail.description}
-              image={emptyStateImage}
-              size="sm"
-            />
-          )}
-        </>
-      ) : (
-        <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-header.tsx b/web/components/cycles/cycles-view-header.tsx
new file mode 100644
index 00000000000..aad650dd66b
--- /dev/null
+++ b/web/components/cycles/cycles-view-header.tsx
@@ -0,0 +1,167 @@
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { ListFilter, Search, X } from "lucide-react";
+import { Tab } from "@headlessui/react";
+// types
+import { TCycleFilters } from "@plane/types";
+// ui
+import { Tooltip } from "@plane/ui";
+// components
+import { CycleFiltersSelection } from "@/components/cycles";
+import { FiltersDropdown } from "@/components/issues";
+// constants
+import { CYCLE_TABS_LIST, CYCLE_VIEW_LAYOUTS } from "@/constants/cycle";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useCycleFilter } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  projectId: string;
+};
+
+export const CyclesViewHeader: React.FC<Props> = observer((props) => {
+  const { projectId } = props;
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const {
+    currentProjectDisplayFilters,
+    currentProjectFilters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useCycleFilter();
+  const { isMobile } = usePlatformOS();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+  // derived values
+  const activeLayout = currentProjectDisplayFilters?.layout ?? "list";
+
+  const handleFilters = useCallback(
+    (key: keyof TCycleFilters, value: string | string[]) => {
+      const newValues = currentProjectFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      else {
+        if (currentProjectFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId, { [key]: newValues });
+    },
+    [currentProjectFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-custom-border-200 px-4 sm:px-5 sm:pb-0">
+      <Tab.List as="div" className="flex items-center overflow-x-scroll">
+        {CYCLE_TABS_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>
+      {currentProjectDisplayFilters?.active_tab !== "active" && (
+        <div className="hidden h-full sm:flex items-center gap-3 self-end">
+          {!isSearchOpen && (
+            <button
+              type="button"
+              className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+              onClick={() => {
+                setIsSearchOpen(true);
+                inputRef.current?.focus();
+              }}
+            >
+              <Search className="h-3.5 w-3.5" />
+            </button>
+          )}
+          <div
+            className={cn(
+              "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+              {
+                "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              }
+            )}
+          >
+            <Search className="h-3.5 w-3.5" />
+            <input
+              ref={inputRef}
+              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              onChange={(e) => updateSearchQuery(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+            />
+            {isSearchOpen && (
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  updateSearchQuery("");
+                  setIsSearchOpen(false);
+                }}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+          <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+            <CycleFiltersSelection filters={currentProjectFilters ?? {}} handleFiltersUpdate={handleFilters} />
+          </FiltersDropdown>
+          <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
+            {CYCLE_VIEW_LAYOUTS.map((layout) => (
+              <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
+                <button
+                  type="button"
+                  className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
+                    activeLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                  }`}
+                  onClick={() =>
+                    updateDisplayFilters(projectId, {
+                      layout: layout.key,
+                    })
+                  }
+                >
+                  <layout.icon
+                    strokeWidth={2}
+                    className={`h-3.5 w-3.5 ${
+                      activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                    }`}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx
index a321be0b592..ddb45b5e52c 100644
--- a/web/components/cycles/cycles-view.tsx
+++ b/web/components/cycles/cycles-view.tsx
@@ -1,43 +1,35 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
+import Image from "next/image";
+import { TCycleLayoutOptions } from "@plane/types";
 // hooks
-import { useCycle } from "hooks/store";
 // components
-import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles";
-// ui components
-import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "components/ui";
+import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "@/components/cycles";
+// ui
+import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
+import { useCycle, useCycleFilter } from "@/hooks/store";
+// assets
+import AllFiltersImage from "public/empty-state/cycle/all-filters.svg";
+import NameFilterImage from "public/empty-state/cycle/name-filter.svg";
 // types
-import { TCycleLayout, TCycleView } from "@plane/types";
 
 export interface ICyclesView {
-  filter: TCycleView;
-  layout: TCycleLayout;
+  layout: TCycleLayoutOptions;
   workspaceSlug: string;
   projectId: string;
   peekCycle: string | undefined;
 }
 
 export const CyclesView: FC<ICyclesView> = observer((props) => {
-  const { filter, layout, workspaceSlug, projectId, peekCycle } = props;
+  const { layout, workspaceSlug, projectId, peekCycle } = props;
   // store hooks
-  const {
-    currentProjectCompletedCycleIds,
-    currentProjectDraftCycleIds,
-    currentProjectUpcomingCycleIds,
-    currentProjectCycleIds,
-    loader,
-  } = useCycle();
+  const { getFilteredCycleIds, getFilteredCompletedCycleIds, loader } = useCycle();
+  const { searchQuery } = useCycleFilter();
+  // derived values
+  const filteredCycleIds = getFilteredCycleIds(projectId);
+  const filteredCompletedCycleIds = getFilteredCompletedCycleIds(projectId);
 
-  const cyclesList =
-    filter === "completed"
-      ? currentProjectCompletedCycleIds
-      : filter === "draft"
-      ? currentProjectDraftCycleIds
-      : filter === "upcoming"
-      ? currentProjectUpcomingCycleIds
-      : currentProjectCycleIds;
-
-  if (loader || !cyclesList)
+  if (loader || !filteredCycleIds)
     return (
       <>
         {layout === "list" && <CycleModuleListLayout />}
@@ -46,23 +38,45 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
       </>
     );
 
+  if (filteredCycleIds.length === 0 && filteredCompletedCycleIds?.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching cycles"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching cycles</h5>
+          <p className="text-custom-text-400 text-base">
+            {searchQuery.trim() === ""
+              ? "Remove the filters to see all cycles"
+              : "Remove the search criteria to see all cycles"}
+          </p>
+        </div>
+      </div>
+    );
+
   return (
     <>
       {layout === "list" && (
-        <CyclesList cycleIds={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
+        <CyclesList
+          completedCycleIds={filteredCompletedCycleIds ?? []}
+          cycleIds={filteredCycleIds}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+        />
       )}
-
       {layout === "board" && (
         <CyclesBoard
-          cycleIds={cyclesList}
-          filter={filter}
+          completedCycleIds={filteredCompletedCycleIds ?? []}
+          cycleIds={filteredCycleIds}
           workspaceSlug={workspaceSlug}
           projectId={projectId}
           peekCycle={peekCycle}
         />
       )}
-
-      {layout === "gantt" && <CyclesListGanttChartView cycleIds={cyclesList} workspaceSlug={workspaceSlug} />}
+      {layout === "gantt" && <CyclesListGanttChartView cycleIds={filteredCycleIds} workspaceSlug={workspaceSlug} />}
     </>
   );
 });
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 5dc0306ab45..5b9eb53cdce 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -1,17 +1,16 @@
 import { Fragment, useState } from "react";
-import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import { ICycle } from "@plane/types";
 // hooks
-import { useEventTracker, useCycle } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { CYCLE_DELETED } from "@/constants/event-tracker";
+import { useEventTracker, useCycle } from "@/hooks/store";
 // components
-import { Button } from "@plane/ui";
 // types
-import { ICycle } from "@plane/types";
 // constants
-import { CYCLE_DELETED } from "constants/event-tracker";
 
 interface ICycleDelete {
   cycle: ICycle;
@@ -31,8 +30,6 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   // store hooks
   const { captureCycleEvent } = useEventTracker();
   const { deleteCycle } = useCycle();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const formSubmit = async () => {
     if (!cycle) return;
@@ -41,8 +38,8 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
     try {
       await deleteCycle(workspaceSlug, projectId, cycle.id)
         .then(() => {
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Cycle deleted successfully.",
           });
@@ -62,8 +59,8 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
 
       handleClose();
     } catch (error) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Warning!",
         message: "Something went wrong please try again later.",
       });
@@ -106,7 +103,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                         <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20">
                           <AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
                         </div>
-                        <div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
+                        <div className="text-xl font-medium 2xl:text-2xl">Delete cycle</div>
                       </div>
                       <span>
                         <p className="text-sm text-custom-text-200">
@@ -121,8 +118,8 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                           Cancel
                         </Button>
 
-                        <Button variant="danger" size="sm" tabIndex={1} onClick={formSubmit}>
-                          {loader ? "Deleting..." : "Delete Cycle"}
+                        <Button variant="danger" size="sm" tabIndex={1} onClick={formSubmit} loading={loader}>
+                          {loader ? "Deleting" : "Delete"}
                         </Button>
                       </div>
                     </div>
diff --git a/web/components/cycles/dropdowns/filters/end-date.tsx b/web/components/cycles/dropdowns/filters/end-date.tsx
new file mode 100644
index 00000000000..69907118731
--- /dev/null
+++ b/web/components/cycles/dropdowns/filters/end-date.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterEndDate: 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_AFTER_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={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/dropdowns/filters/index.ts b/web/components/cycles/dropdowns/filters/index.ts
new file mode 100644
index 00000000000..3d097b6f06a
--- /dev/null
+++ b/web/components/cycles/dropdowns/filters/index.ts
@@ -0,0 +1,4 @@
+export * from "./end-date";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
diff --git a/web/components/cycles/dropdowns/filters/root.tsx b/web/components/cycles/dropdowns/filters/root.tsx
new file mode 100644
index 00000000000..57e9ec90c4e
--- /dev/null
+++ b/web/components/cycles/dropdowns/filters/root.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+import { TCycleFilters, TCycleGroups } from "@plane/types";
+// components
+import { FilterEndDate, FilterStartDate, FilterStatus } from "@/components/cycles";
+// types
+
+type Props = {
+  filters: TCycleFilters;
+  handleFiltersUpdate: (key: keyof TCycleFilters, value: string | string[]) => void;
+  isArchived?: boolean;
+};
+
+export const CycleFiltersSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFiltersUpdate, isArchived = false } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            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="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+        {/* cycle status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TCycleGroups[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* end date */}
+        <div className="py-2">
+          <FilterEndDate
+            appliedFilters={filters.end_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("end_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/cycles/dropdowns/filters/start-date.tsx b/web/components/cycles/dropdowns/filters/start-date.tsx
new file mode 100644
index 00000000000..2b55ada35aa
--- /dev/null
+++ b/web/components/cycles/dropdowns/filters/start-date.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  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_AFTER_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 italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/dropdowns/filters/status.tsx b/web/components/cycles/dropdowns/filters/status.tsx
new file mode 100644
index 00000000000..b1f07c0b1d5
--- /dev/null
+++ b/web/components/cycles/dropdowns/filters/status.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { TCycleGroups } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues";
+// types
+import { CYCLE_STATUS } from "@/constants/cycle";
+// constants
+
+type Props = {
+  appliedFilters: TCycleGroups[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = CYCLE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status of the cycle${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                title={status.title}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/cycles/dropdowns/index.ts b/web/components/cycles/dropdowns/index.ts
new file mode 100644
index 00000000000..302e3a1a6ed
--- /dev/null
+++ b/web/components/cycles/dropdowns/index.ts
@@ -0,0 +1 @@
+export * from "./filters";
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 799d8043828..f8092f8d066 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -1,14 +1,15 @@
 import { useEffect } from "react";
+
 import { Controller, useForm } from "react-hook-form";
-// components
-import { DateRangeDropdown, ProjectDropdown } from "components/dropdowns";
-// ui
-import { Button, Input, TextArea } from "@plane/ui";
-// helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-// types
 import { ICycle } from "@plane/types";
 
+import { Button, Input, TextArea } from "@plane/ui";
+
+import { DateRangeDropdown, ProjectDropdown } from "@/components/dropdowns";
+
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { shouldRenderProject } from "@/helpers/project.helper";
+
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>, dirtyFields: any) => Promise<void>;
   handleClose: () => void;
@@ -66,6 +67,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                     setActiveProject(val);
                   }}
                   buttonVariant="background-with-text"
+                  renderCondition={(project) => shouldRenderProject(project)}
                   tabIndex={7}
                 />
               )}
@@ -111,7 +113,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                     id="cycle_description"
                     name="description"
                     placeholder="Description..."
-                    className="!h-24 w-full resize-none text-sm"
+                    className="w-full text-sm resize-none min-h-24"
                     hasError={Boolean(errors?.description)}
                     value={value}
                     onChange={onChange}
@@ -135,8 +137,8 @@ export const CycleForm: React.FC<Props> = (props) => {
                         className="h-7"
                         minDate={new Date()}
                         value={{
-                          from: startDateValue ? new Date(startDateValue) : undefined,
-                          to: endDateValue ? new Date(endDateValue) : undefined,
+                          from: getDate(startDateValue),
+                          to: getDate(endDateValue),
                         }}
                         onSelect={(val) => {
                           onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
index 5d82c94a863..acc081b4d5b 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -1,11 +1,13 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
-import { useApplication, useCycle } from "hooks/store";
 // ui
 import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useApplication, useCycle } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   cycleId: string;
@@ -22,7 +24,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
   const { getCycleById } = useCycle();
   // derived values
   const cycleDetails = getCycleById(cycleId);
-
+  const { isMobile } = usePlatformOS();
   const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
 
   return (
@@ -33,17 +35,18 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
           cycleStatus === "current"
             ? "#09a953"
             : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : "",
+              ? "#f7ae59"
+              : cycleStatus === "completed"
+                ? "#3f76ff"
+                : cycleStatus === "draft"
+                  ? "rgb(var(--color-text-200))"
+                  : "",
       }}
       onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)}
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
+        isMobile={isMobile}
         tooltipContent={
           <div className="space-y-1">
             <h5>{cycleDetails?.name}</h5>
@@ -63,8 +66,6 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
 
 export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { cycleId } = props;
-  // router
-  const router = useRouter();
   // store hooks
   const {
     router: { workspaceSlug },
@@ -76,9 +77,9 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
 
   return (
-    <div
+    <Link
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`)}
+      href={`/${workspaceSlug}/projects/${cycleDetails?.project_id}/cycles/${cycleDetails?.id}`}
     >
       <ContrastIcon
         className="h-5 w-5 flex-shrink-0"
@@ -86,15 +87,15 @@ export const CycleGanttSidebarBlock: React.FC<Props> = observer((props) => {
           cycleStatus === "current"
             ? "#09a953"
             : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : ""
+              ? "#f7ae59"
+              : cycleStatus === "completed"
+                ? "#3f76ff"
+                : cycleStatus === "draft"
+                  ? "rgb(var(--color-text-200))"
+                  : ""
         }`}
       />
       <h6 className="flex-grow truncate text-sm font-medium">{cycleDetails?.name}</h6>
-    </div>
+    </Link>
   );
 });
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 646333aad90..6d84f73f061 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -1,15 +1,15 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { ICycle } from "@plane/types";
 // hooks
-import { useCycle, useUser } from "hooks/store";
+import { CycleGanttBlock } from "@/components/cycles";
+import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "@/components/gantt-chart";
+import { getDate } from "@/helpers/date-time.helper";
+import { useCycle } from "@/hooks/store";
 // components
-import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
-import { CycleGanttBlock } from "components/cycles";
 // types
-import { ICycle } from "@plane/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
 
 type Props = {
   workspaceSlug: string;
@@ -22,9 +22,6 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
   const { getCycleById, updateCycleDetails } = useCycle();
 
   const handleCycleUpdate = async (cycle: ICycle, data: IBlockUpdateData) => {
@@ -45,16 +42,13 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
       data: block,
       id: block?.id ?? "",
       sort_order: block?.sort_order ?? 0,
-      start_date: new Date(block?.start_date ?? ""),
-      target_date: new Date(block?.end_date ?? ""),
+      start_date: getDate(block?.start_date),
+      target_date: getDate(block?.end_date),
     }));
 
     return structuredBlocks;
   };
 
-  const isAllowed =
-    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
-
   return (
     <div className="h-full w-full overflow-y-auto">
       <GanttChartRoot
@@ -67,7 +61,7 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
         enableBlockLeftResize={false}
         enableBlockRightResize={false}
         enableBlockMove={false}
-        enableReorder={isAllowed}
+        enableReorder={false}
       />
     </div>
   );
diff --git a/web/components/cycles/index.ts b/web/components/cycles/index.ts
index db5e9de9eea..b1b718175eb 100644
--- a/web/components/cycles/index.ts
+++ b/web/components/cycles/index.ts
@@ -1,17 +1,19 @@
-export * from "./cycles-view";
-export * from "./active-cycle-details";
-export * from "./active-cycle-stats";
+export * from "./active-cycle";
+export * from "./applied-filters";
+export * from "./board/";
+export * from "./dropdowns";
 export * from "./gantt-chart";
+export * from "./list";
+export * from "./cycle-peek-overview";
+export * from "./cycles-view-header";
 export * from "./cycles-view";
+export * from "./delete-modal";
 export * from "./form";
 export * from "./modal";
+export * from "./quick-actions";
 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 "./delete-modal";
-export * from "./cycle-peek-overview";
-export * from "./cycles-list-item";
+
+// archived cycles
+export * from "./archived-cycles";
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/list/cycles-list-item.tsx
similarity index 50%
rename from web/components/cycles/cycles-list-item.tsx
rename to web/components/cycles/list/cycles-list-item.tsx
index 31958cd847f..7ee797bb249 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/list/cycles-list-item.tsx
@@ -1,25 +1,24 @@
-import { FC, MouseEvent, useState } from "react";
+import { FC, MouseEvent } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react";
-// hooks
-import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
-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 { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
-// constants
-import { CYCLE_STATUS } from "constants/cycle";
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { Check, Info, Star, User2 } from "lucide-react";
 // types
-import { TCycleGroups } from "@plane/types";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
+import type { TCycleGroups } from "@plane/types";
+// ui
+import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
+// components
+import { CycleQuickActions } from "@/components/cycles";
+// constants
+import { CYCLE_STATUS } from "@/constants/cycle";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TCyclesListItem = {
   cycleId: string;
@@ -29,104 +28,96 @@ type TCyclesListItem = {
   handleRemoveFromFavorites?: () => void;
   workspaceSlug: string;
   projectId: string;
+  isArchived?: boolean;
 };
 
 export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
-  const { cycleId, workspaceSlug, projectId } = props;
-  // states
-  const [updateModal, setUpdateModal] = useState(false);
-  const [deleteModal, setDeleteModal] = useState(false);
+  const { cycleId, workspaceSlug, projectId, isArchived } = props;
   // router
   const router = useRouter();
+  // hooks
+  const { isMobile } = usePlatformOS();
   // store hooks
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { getCycleById, addCycleToFavorites, removeCycleFromFavorites } = useCycle();
   const { getUserDetails } = useMember();
-  // toast alert
-  const { setToastAlert } = useToast();
-
-  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/${cycleId}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
-      });
-    });
-  };
 
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      .then(() => {
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      () => {
         captureEvent(CYCLE_FAVORITED, {
           cycle_id: cycleId,
           element: "List layout",
           state: "SUCCESS",
         });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
-      });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding cycle to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle added to favorites.",
+      },
+      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;
 
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      .then(() => {
-        captureEvent(CYCLE_UNFAVORITED, {
-          cycle_id: cycleId,
-          element: "List layout",
-          state: "SUCCESS",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    ).then(() => {
+      captureEvent(CYCLE_UNFAVORITED, {
+        cycle_id: cycleId,
+        element: "List layout",
+        state: "SUCCESS",
       });
-  };
-
-  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page list layout");
-    setUpdateModal(true);
-  };
+    });
 
-  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Cycles page list layout");
-    setDeleteModal(true);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing cycle from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Cycle removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the cycle from favorites. Please try again.",
+      },
+    });
   };
 
-  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     const { query } = router;
     e.preventDefault();
     e.stopPropagation();
 
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekCycle: cycleId },
-    });
+    if (query.peekCycle) {
+      delete query.peekCycle;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekCycle: cycleId },
+      });
+    }
   };
 
   const cycleDetails = getCycleById(cycleId);
@@ -137,10 +128,10 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   // TODO: change this logic once backend fix the response
   const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
   const isCompleted = cycleStatus === "completed";
-  const endDate = new Date(cycleDetails.end_date ?? "");
-  const startDate = new Date(cycleDetails.start_date ?? "");
+  const endDate = getDate(cycleDetails.end_date);
+  const startDate = getDate(cycleDetails.start_date);
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   const cycleTotalIssues =
     cycleDetails.backlog_issues +
@@ -163,21 +154,14 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
   return (
     <>
-      <CycleCreateUpdateModal
-        data={cycleDetails}
-        isOpen={updateModal}
-        handleClose={() => setUpdateModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-      <CycleDeleteModal
-        cycle={cycleDetails}
-        isOpen={deleteModal}
-        handleClose={() => setDeleteModal(false)}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
+      <Link
+        href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
+        onClick={(e) => {
+          if (isArchived) {
+            openCycleOverview(e);
+          }
+        }}
+      >
         <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 md:flex-row">
           <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
             <div className="relative flex w-full items-center gap-3 overflow-hidden">
@@ -199,18 +183,22 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
               <div className="relative flex items-center gap-2.5 overflow-hidden">
                 <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
-                <Tooltip tooltipContent={cycleDetails.name} position="top">
+                <Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
                   <span className="line-clamp-1 inline-block overflow-hidden truncate text-base font-medium">
                     {cycleDetails.name}
                   </span>
                 </Tooltip>
               </div>
 
-              <button onClick={openCycleOverview} className="flex-shrink-0 z-[5] invisible group-hover:visible">
+              <button onClick={openCycleOverview} className="invisible z-[5] flex-shrink-0 group-hover:visible">
                 <Info className="h-4 w-4 text-custom-text-400" />
               </button>
             </div>
-
+            <div className="text-xs text-custom-text-300 flex-shrink-0">
+              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
+            </div>
+          </div>
+          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
             {currentCycle && (
               <div
                 className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
@@ -224,19 +212,14 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                   : `${currentCycle.label}`}
               </div>
             )}
-          </div>
-          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 overflow-hidden md:w-auto md:flex-shrink-0 md:justify-end ">
-            <div className="text-xs text-custom-text-300">
-              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
-            </div>
 
             <div className="relative flex flex-shrink-0 items-center gap-3">
-              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`}>
+              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
                 <div className="flex w-10 cursor-default items-center justify-center">
                   {cycleDetails.assignee_ids?.length > 0 ? (
                     <AvatarGroup showTooltip={false}>
-                      {cycleDetails.assignee_ids?.map((assigne_id) => {
-                        const member = getUserDetails(assigne_id);
+                      {cycleDetails.assignee_ids?.map((assignee_id) => {
+                        const member = getUserDetails(assignee_id);
                         return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
                       })}
                     </AvatarGroup>
@@ -248,44 +231,23 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                 </div>
               </Tooltip>
 
-              {isEditingAllowed && (
-                <>
-                  {cycleDetails.is_favorite ? (
-                    <button type="button" onClick={handleRemoveFromFavorites}>
-                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                    </button>
-                  ) : (
-                    <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                    </button>
-                  )}
-
-                  <CustomMenu ellipsis>
-                    {!isCompleted && isEditingAllowed && (
-                      <>
-                        <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 cycle</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>
-                </>
-              )}
+              {isEditingAllowed &&
+                !isArchived &&
+                (cycleDetails.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  </button>
+                ))}
+              <CycleQuickActions
+                cycleId={cycleId}
+                projectId={projectId}
+                workspaceSlug={workspaceSlug}
+                isArchived={isArchived}
+              />
             </div>
           </div>
         </div>
diff --git a/web/components/cycles/list/cycles-list-map.tsx b/web/components/cycles/list/cycles-list-map.tsx
new file mode 100644
index 00000000000..7a99f5ab736
--- /dev/null
+++ b/web/components/cycles/list/cycles-list-map.tsx
@@ -0,0 +1,27 @@
+// components
+import { CyclesListItem } from "@/components/cycles";
+
+type Props = {
+  cycleIds: string[];
+  projectId: string;
+  workspaceSlug: string;
+  isArchived?: boolean;
+};
+
+export const CyclesListMap: React.FC<Props> = (props) => {
+  const { cycleIds, projectId, workspaceSlug, isArchived } = props;
+
+  return (
+    <>
+      {cycleIds.map((cycleId) => (
+        <CyclesListItem
+          key={cycleId}
+          cycleId={cycleId}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          isArchived={isArchived}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/web/components/cycles/list/index.ts b/web/components/cycles/list/index.ts
new file mode 100644
index 00000000000..46a3557d7fe
--- /dev/null
+++ b/web/components/cycles/list/index.ts
@@ -0,0 +1,3 @@
+export * from "./cycles-list-item";
+export * from "./cycles-list-map";
+export * from "./root";
diff --git a/web/components/cycles/list/root.tsx b/web/components/cycles/list/root.tsx
new file mode 100644
index 00000000000..0239f1d788f
--- /dev/null
+++ b/web/components/cycles/list/root.tsx
@@ -0,0 +1,60 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { ChevronRight } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+// components
+import { CyclePeekOverview, CyclesListMap } from "@/components/cycles";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export interface ICyclesList {
+  completedCycleIds: string[];
+  cycleIds: string[];
+  workspaceSlug: string;
+  projectId: string;
+  isArchived?: boolean;
+}
+
+export const CyclesList: FC<ICyclesList> = observer((props) => {
+  const { completedCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+          <CyclesListMap
+            cycleIds={cycleIds}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+            isArchived={isArchived}
+          />
+          {completedCycleIds.length !== 0 && (
+            <Disclosure as="div" className="pt-8 pl-3 space-y-4">
+              <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded ml-5 flex items-center gap-1">
+                {({ open }) => (
+                  <>
+                    Completed cycles ({completedCycleIds.length})
+                    <ChevronRight
+                      className={cn("h-3 w-3 transition-all", {
+                        "rotate-90": open,
+                      })}
+                    />
+                  </>
+                )}
+              </Disclosure.Button>
+              <Disclosure.Panel>
+                <CyclesListMap
+                  cycleIds={completedCycleIds}
+                  projectId={projectId}
+                  workspaceSlug={workspaceSlug}
+                  isArchived={isArchived}
+                />
+              </Disclosure.Panel>
+            </Disclosure>
+          )}
+        </div>
+        <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} isArchived={isArchived} />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index b22afb2b44d..6ed53eb326d 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
 // services
-import { CycleService } from "services/cycle.service";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { CycleForm } from "@/components/cycles";
+import { CYCLE_CREATED, CYCLE_UPDATED } from "@/constants/event-tracker";
+import { useEventTracker, useCycle, useProject } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
+import { CycleService } from "@/services/cycle.service";
 // hooks
-import { useEventTracker, useCycle, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useLocalStorage from "hooks/use-local-storage";
 // components
-import { CycleForm } from "components/cycles";
+// ui
 // types
-import type { CycleDateCheckData, ICycle, TCycleView } from "@plane/types";
 // constants
-import { CYCLE_CREATED, CYCLE_UPDATED } from "constants/event-tracker";
 
 type CycleModalProps = {
   isOpen: boolean;
@@ -32,10 +33,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
   const { captureCycleEvent } = useEventTracker();
   const { workspaceProjectIds } = useProject();
   const { createCycle, updateCycleDetails } = useCycle();
-  // toast alert
-  const { setToastAlert } = useToast();
 
-  const { setValue: setCycleTab } = useLocalStorage<TCycleView>("cycle_tab", "active");
+  const { setValue: setCycleTab } = useLocalStorage<TCycleTabOptions>("cycle_tab", "active");
 
   const handleCreateCycle = async (payload: Partial<ICycle>) => {
     if (!workspaceSlug || !projectId) return;
@@ -43,8 +42,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
     const selectedProjectId = payload.project_id ?? projectId.toString();
     await createCycle(workspaceSlug, selectedProjectId, payload)
       .then((res) => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Cycle created successfully.",
         });
@@ -54,10 +53,10 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
         });
       })
       .catch((err) => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: err.detail ?? "Error in creating cycle. Please try again.",
+          message: err?.detail ?? "Error in creating cycle. Please try again.",
         });
         captureCycleEvent({
           eventName: CYCLE_CREATED,
@@ -77,8 +76,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           eventName: CYCLE_UPDATED,
           payload: { ...res, changed_properties: changed_properties, state: "SUCCESS" },
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Cycle updated successfully.",
         });
@@ -88,18 +87,18 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           eventName: CYCLE_UPDATED,
           payload: { ...payload, state: "FAILED" },
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: err.detail ?? "Error in updating cycle. Please try again.",
+          message: err?.detail ?? "Error in updating cycle. Please try again.",
         });
       });
   };
 
-  const dateChecker = async (payload: CycleDateCheckData) => {
+  const dateChecker = async (projectId: string, payload: CycleDateCheckData) => {
     let status = false;
 
-    await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload).then((res) => {
+    await cycleService.cycleDateCheck(workspaceSlug, projectId, payload).then((res) => {
       status = res.status;
     });
 
@@ -117,13 +116,13 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
 
     if (payload.start_date && payload.end_date) {
       if (data?.start_date && data?.end_date)
-        isDateValid = await dateChecker({
+        isDateValid = await dateChecker(payload.project_id ?? projectId, {
           start_date: payload.start_date,
           end_date: payload.end_date,
           cycle_id: data.id,
         });
       else
-        isDateValid = await dateChecker({
+        isDateValid = await dateChecker(payload.project_id ?? projectId, {
           start_date: payload.start_date,
           end_date: payload.end_date,
         });
@@ -138,8 +137,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
       }
       handleClose();
     } else
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
       });
diff --git a/web/components/cycles/quick-actions.tsx b/web/components/cycles/quick-actions.tsx
new file mode 100644
index 00000000000..215f07beff2
--- /dev/null
+++ b/web/components/cycles/quick-actions.tsx
@@ -0,0 +1,184 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// icons
+import { ArchiveRestoreIcon, LinkIcon, Pencil, Trash2 } from "lucide-react";
+// ui
+import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ArchiveCycleModal, CycleCreateUpdateModal, CycleDeleteModal } from "@/components/cycles";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useCycle, useEventTracker, useUser } from "@/hooks/store";
+
+type Props = {
+  cycleId: string;
+  projectId: string;
+  workspaceSlug: string;
+  isArchived?: boolean;
+};
+
+export const CycleQuickActions: React.FC<Props> = observer((props) => {
+  const { cycleId, projectId, workspaceSlug, isArchived } = props;
+  // router
+  const router = useRouter();
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [archiveCycleModal, setArchiveCycleModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const {
+    membership: { currentWorkspaceAllProjectsRole },
+  } = useUser();
+  const { getCycleById, restoreCycle } = useCycle();
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
+  const isCompleted = cycleDetails?.status.toLowerCase() === "completed";
+  // auth
+  const isEditingAllowed =
+    !!currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId] >= EUserProjectRoles.MEMBER;
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTrackElement("Cycles page list layout");
+    setUpdateModal(true);
+  };
+
+  const handleArchiveCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setArchiveCycleModal(true);
+  };
+
+  const handleRestoreCycle = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await restoreCycle(workspaceSlug, projectId, cycleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your cycle can be found in project cycles.",
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Cycle could not be restored. Please try again.",
+        })
+      );
+  };
+
+  const handleDeleteCycle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTrackElement("Cycles page list layout");
+    setDeleteModal(true);
+  };
+
+  return (
+    <>
+      {cycleDetails && (
+        <div className="fixed">
+          <CycleCreateUpdateModal
+            data={cycleDetails}
+            isOpen={updateModal}
+            handleClose={() => setUpdateModal(false)}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+          />
+          <ArchiveCycleModal
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            cycleId={cycleId}
+            isOpen={archiveCycleModal}
+            handleClose={() => setArchiveCycleModal(false)}
+          />
+          <CycleDeleteModal
+            cycle={cycleDetails}
+            isOpen={deleteModal}
+            handleClose={() => setDeleteModal(false)}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+          />
+        </div>
+      )}
+      <CustomMenu ellipsis placement="bottom-end">
+        {!isCompleted && isEditingAllowed && !isArchived && (
+          <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>
+        )}
+        {isEditingAllowed && !isArchived && (
+          <CustomMenu.MenuItem onClick={handleArchiveCycle} disabled={!isCompleted}>
+            {isCompleted ? (
+              <div className="flex items-center gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                Archive cycle
+              </div>
+            ) : (
+              <div className="flex items-start gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                <div className="-mt-1">
+                  <p>Archive cycle</p>
+                  <p className="text-xs text-custom-text-400">
+                    Only completed cycle <br /> can be archived.
+                  </p>
+                </div>
+              </div>
+            )}
+          </CustomMenu.MenuItem>
+        )}
+        {isEditingAllowed && isArchived && (
+          <CustomMenu.MenuItem onClick={handleRestoreCycle}>
+            <span className="flex items-center justify-start gap-2">
+              <ArchiveRestoreIcon className="h-3 w-3" />
+              <span>Restore cycle</span>
+            </span>
+          </CustomMenu.MenuItem>
+        )}
+        {!isArchived && (
+          <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>
+        )}
+        {!isCompleted && isEditingAllowed && (
+          <div className="border-t pt-1 mt-1">
+            <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+              <span className="flex items-center justify-start gap-2">
+                <Trash2 className="h-3 w-3" />
+                <span>Delete cycle</span>
+              </span>
+            </CustomMenu.MenuItem>
+          </div>
+        )}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 646736bd2b6..e333564ee7f 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -1,37 +1,45 @@
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Disclosure, Transition } from "@headlessui/react";
-import isEmpty from "lodash/isEmpty";
-// services
-import { CycleService } from "services/cycle.service";
-// hooks
-import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
-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 { Avatar, CustomMenu, Loader, LayersIcon } from "@plane/ui";
 // icons
-import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, CalendarClock } from "lucide-react";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
-import { findHowManyDaysLeft, renderFormattedPayloadDate } from "helpers/date-time.helper";
+import {
+  ArchiveRestoreIcon,
+  ChevronDown,
+  LinkIcon,
+  Trash2,
+  UserCircle2,
+  AlertCircle,
+  ChevronRight,
+  CalendarClock,
+} from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
 // types
 import { ICycle } from "@plane/types";
+// ui
+import { Avatar, ArchiveIcon, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui";
+// components
+import { SidebarProgressStats } from "@/components/core";
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { ArchiveCycleModal, CycleDeleteModal } from "@/components/cycles";
+import { DateRangeDropdown } from "@/components/dropdowns";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { CYCLE_UPDATED } from "constants/event-tracker";
-// fetch-keys
-import { CYCLE_STATUS } from "constants/cycle";
-import { DateRangeDropdown } from "components/dropdowns";
+import { CYCLE_STATUS } from "@/constants/cycle";
+import { CYCLE_UPDATED } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// helpers
+import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store";
+// services
+import { CycleService } from "@/services/cycle.service";
 
 type Props = {
   cycleId: string;
   handleClose: () => void;
+  isArchived?: boolean;
 };
 
 const defaultValues: Partial<ICycle> = {
@@ -44,8 +52,9 @@ const cycleService = new CycleService();
 
 // TODO: refactor the whole component
 export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { cycleId, handleClose } = props;
+  const { cycleId, handleClose, isArchived } = props;
   // states
+  const [archiveCycleModal, setArchiveCycleModal] = useState(false);
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
   // router
   const router = useRouter();
@@ -55,13 +64,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { getCycleById, updateCycleDetails } = useCycle();
+  const { getCycleById, updateCycleDetails, restoreCycle } = useCycle();
   const { getUserDetails } = useMember();
   // derived values
   const cycleDetails = getCycleById(cycleId);
   const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by_id) : undefined;
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const { control, reset } = useForm({
     defaultValues,
@@ -98,20 +105,41 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleCopyText = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Link Copied!",
           message: "Cycle link copied to clipboard.",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Some error occurred",
         });
       });
   };
 
+  const handleRestoreCycle = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    await restoreCycle(workspaceSlug.toString(), projectId.toString(), cycleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your cycle can be found in project cycles.",
+        });
+        router.push(`/${workspaceSlug.toString()}/projects/${projectId.toString()}/cycles/${cycleId}`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Cycle could not be restored. Please try again.",
+        })
+      );
+  };
+
   useEffect(() => {
     if (cycleDetails)
       reset({
@@ -147,14 +175,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
     if (isDateValid) {
       submitChanges(payload, "date_range");
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: "Cycle updated successfully.",
       });
     } else {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message:
           "You already have a cycle on the given dates, if you want to create a draft cycle, you can do that by removing both the dates.",
@@ -186,8 +214,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
   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 startDate = getDate(cycleDetails?.start_date);
+  const endDate = getDate(cycleDetails?.end_date);
+
+  const isStartValid = startDate && startDate <= new Date();
+  const isEndValid = endDate && startDate && endDate >= startDate;
 
   const progressPercentage = cycleDetails
     ? isCompleted && cycleDetails?.progress_snapshot
@@ -228,19 +259,28 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <>
+    <div className="relative">
       {cycleDetails && workspaceSlug && projectId && (
-        <CycleDeleteModal
-          cycle={cycleDetails}
-          isOpen={cycleDeleteModal}
-          handleClose={() => setCycleDeleteModal(false)}
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-        />
+        <>
+          <ArchiveCycleModal
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            cycleId={cycleId}
+            isOpen={archiveCycleModal}
+            handleClose={() => setArchiveCycleModal(false)}
+          />
+          <CycleDeleteModal
+            cycle={cycleDetails}
+            isOpen={cycleDeleteModal}
+            handleClose={() => setCycleDeleteModal(false)}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+          />
+        </>
       )}
 
       <>
-        <div className="flex w-full items-center justify-between">
+        <div className="sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 py-5">
           <div>
             <button
               className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
@@ -250,22 +290,54 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             </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 && isEditingAllowed && (
+            {!isArchived && (
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+            )}
+            {isEditingAllowed && (
               <CustomMenu placement="bottom-end" ellipsis>
-                <CustomMenu.MenuItem
-                  onClick={() => {
-                    setTrackElement("CYCLE_PAGE_SIDEBAR");
-                    setCycleDeleteModal(true);
-                  }}
-                >
-                  <span className="flex items-center justify-start gap-2">
-                    <Trash2 className="h-3 w-3" />
-                    <span>Delete cycle</span>
-                  </span>
-                </CustomMenu.MenuItem>
+                {!isArchived && (
+                  <CustomMenu.MenuItem onClick={() => setArchiveCycleModal(true)} disabled={!isCompleted}>
+                    {isCompleted ? (
+                      <div className="flex items-center gap-2">
+                        <ArchiveIcon className="h-3 w-3" />
+                        Archive cycle
+                      </div>
+                    ) : (
+                      <div className="flex items-start gap-2">
+                        <ArchiveIcon className="h-3 w-3" />
+                        <div className="-mt-1">
+                          <p>Archive cycle</p>
+                          <p className="text-xs text-custom-text-400">
+                            Only completed cycle <br /> can be archived.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </CustomMenu.MenuItem>
+                )}
+                {isArchived && (
+                  <CustomMenu.MenuItem onClick={handleRestoreCycle}>
+                    <span className="flex items-center justify-start gap-2">
+                      <ArchiveRestoreIcon className="h-3 w-3" />
+                      <span>Restore cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
+                {!isCompleted && (
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      setTrackElement("CYCLE_PAGE_SIDEBAR");
+                      setCycleDeleteModal(true);
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <Trash2 className="h-3 w-3" />
+                      <span>Delete cycle</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
               </CustomMenu>
             )}
           </div>
@@ -291,9 +363,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         {cycleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
-            {cycleDetails.description}
-          </span>
+          <TextArea
+            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+            value={cycleDetails.description}
+            disabled
+          />
         )}
 
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
@@ -302,7 +376,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               <CalendarClock className="h-4 w-4" />
               <span className="text-base">Date range</span>
             </div>
-            <div className="w-3/5 h-7">
+            <div className="h-7 w-3/5">
               <Controller
                 control={control}
                 name="start_date"
@@ -317,8 +391,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                         buttonVariant="background-with-text"
                         minDate={new Date()}
                         value={{
-                          from: startDateValue ? new Date(startDateValue) : undefined,
-                          to: endDateValue ? new Date(endDateValue) : undefined,
+                          from: getDate(startDateValue),
+                          to: getDate(endDateValue),
                         }}
                         onSelect={(val) => {
                           onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
@@ -330,6 +404,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                           to: "End date",
                         }}
                         required={cycleDetails.status !== "draft"}
+                        disabled={isArchived}
                       />
                     )}
                   />
@@ -509,6 +584,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
         </div>
       </>
-    </>
+    </div>
   );
 });
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index adff1954578..b5e1aa253f9 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -1,15 +1,16 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { AlertCircle, Search, X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
 // hooks
-import useToast from "hooks/use-toast";
-import { useCycle, useIssues } from "hooks/store";
+// ui
+//icons
+import { ContrastIcon, TransferIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useIssues } from "@/hooks/store";
 //icons
-import { ContrastIcon, TransferIcon } from "@plane/ui";
-import { AlertCircle, Search, X } from "lucide-react";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   isOpen: boolean;
@@ -30,23 +31,21 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const transferIssue = async (payload: any) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
     // TODO: import transferIssuesFromCycle from store
     await transferIssuesFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), payload)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Issues transferred successfully",
           message: "Issues have been transferred successfully",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Issues cannot be transfer. Please try again.",
         });
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index 517df442106..d7a5a2178e4 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 
+import isEmpty from "lodash/isEmpty";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-import isEmpty from "lodash/isEmpty";
 // component
+import { AlertCircle } from "lucide-react";
 import { Button, TransferIcon } from "@plane/ui";
 // icon
-import { AlertCircle } from "lucide-react";
 // services
-import { CycleService } from "services/cycle.service";
+import { CYCLE_DETAILS } from "@/constants/fetch-keys";
+import { CycleService } from "@/services/cycle.service";
 // fetch-key
-import { CYCLE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   handleClick: () => void;
diff --git a/web/components/dashboard/home-dashboard-widgets.tsx b/web/components/dashboard/home-dashboard-widgets.tsx
index 2e2f9ef88b4..0b13f8f11c4 100644
--- a/web/components/dashboard/home-dashboard-widgets.tsx
+++ b/web/components/dashboard/home-dashboard-widgets.tsx
@@ -1,7 +1,6 @@
 import { observer } from "mobx-react-lite";
+import { TWidgetKeys } from "@plane/types";
 // hooks
-import { useApplication, useDashboard } from "hooks/store";
-// components
 import {
   AssignedIssuesWidget,
   CreatedIssuesWidget,
@@ -12,9 +11,10 @@ import {
   RecentCollaboratorsWidget,
   RecentProjectsWidget,
   WidgetProps,
-} from "components/dashboard";
+} from "@/components/dashboard";
+import { useApplication, useDashboard } from "@/hooks/store";
+// components
 // types
-import { TWidgetKeys } from "@plane/types";
 
 const WIDGETS_LIST: {
   [key in TWidgetKeys]: { component: React.FC<WidgetProps>; fullWidth: boolean };
diff --git a/web/components/dashboard/project-empty-state.tsx b/web/components/dashboard/project-empty-state.tsx
index bb7f82f341a..83973025621 100644
--- a/web/components/dashboard/project-empty-state.tsx
+++ b/web/components/dashboard/project-empty-state.tsx
@@ -1,13 +1,13 @@
-import Image from "next/image";
 import { observer } from "mobx-react-lite";
+import Image from "next/image";
 // hooks
-import { useApplication, useEventTracker, useUser } from "hooks/store";
-// ui
 import { Button } from "@plane/ui";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useApplication, useEventTracker, useUser } from "@/hooks/store";
+// ui
 // assets
 import ProjectEmptyStateImage from "public/empty-state/dashboard/project.svg";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const DashboardProjectEmptyState = observer(() => {
   // store hooks
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index 7c8fbd2a98e..2d4128dfdc8 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -1,23 +1,24 @@
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Tab } from "@headlessui/react";
+import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // hooks
-import { useDashboard } from "hooks/store";
-// components
 import {
   DurationFilterDropdown,
+  IssuesErrorState,
   TabsList,
   WidgetIssuesList,
   WidgetLoader,
   WidgetProps,
-} from "components/dashboard/widgets";
+} from "@/components/dashboard/widgets";
+import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@/constants/dashboard";
+import { getCustomDates, getRedirectionFilters, getTabKey } from "@/helpers/dashboard.helper";
+import { useDashboard } from "@/hooks/store";
+// components
 // helpers
-import { getCustomDates, getRedirectionFilters, getTabKey } from "helpers/dashboard.helper";
 // types
-import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "assigned_issues";
 
@@ -26,12 +27,15 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // states
   const [fetching, setFetching] = useState(false);
   // store hooks
-  const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
+  const { fetchWidgetStats, getWidgetDetails, getWidgetStats, getWidgetStatsError, updateDashboardWidgetFilters } =
+    useDashboard();
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? "none";
+  const widgetStatsError = getWidgetStatsError(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
   const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
+  const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +47,10 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.duration ?? selectedDurationFilter);
+    const filterDates = getCustomDates(
+      filters.duration ?? selectedDurationFilter,
+      filters.custom_dates ?? selectedCustomDates
+    );
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       issue_type: filters.tab ?? selectedTab,
@@ -53,7 +60,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(selectedDurationFilter);
+    const filterDates = getCustomDates(selectedDurationFilter, selectedCustomDates);
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
@@ -69,65 +76,91 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
   const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
 
-  if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
+  if ((!widgetDetails || !widgetStats) && !widgetStatsError) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-center justify-between gap-2 p-6 pl-7">
-        <Link
-          href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
-        >
-          Assigned to you
-        </Link>
-        <DurationFilterDropdown
-          value={selectedDurationFilter}
-          onChange={(val) => {
-            if (val === selectedDurationFilter) return;
-
-            let newTab = selectedTab;
-            // switch to pending tab if target date is changed to none
-            if (val === "none" && selectedTab !== "completed") newTab = "pending";
-            // switch to upcoming tab if target date is changed to other than none
-            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";
-
+      {widgetStatsError ? (
+        <IssuesErrorState
+          isRefreshing={fetching}
+          onClick={() =>
             handleUpdateFilters({
-              duration: val,
-              tab: newTab,
-            });
-          }}
+              duration: EDurationFilters.NONE,
+              tab: "pending",
+            })
+          }
         />
-      </div>
-      <Tab.Group
-        as="div"
-        selectedIndex={selectedTabIndex}
-        onChange={(i) => {
-          const newSelectedTab = tabsList[i];
-          handleUpdateFilters({ tab: newSelectedTab?.key ?? "completed" });
-        }}
-        className="h-full flex flex-col"
-      >
-        <div className="px-6">
-          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
-        </div>
-        <Tab.Panels as="div" className="h-full">
-          {tabsList.map((tab) => {
-            if (tab.key !== selectedTab) return null;
-
-            return (
-              <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
-                <WidgetIssuesList
-                  tab={tab.key}
-                  type="assigned"
-                  workspaceSlug={workspaceSlug}
-                  widgetStats={widgetStats}
-                  isLoading={fetching}
-                />
-              </Tab.Panel>
-            );
-          })}
-        </Tab.Panels>
-      </Tab.Group>
+      ) : (
+        widgetStats && (
+          <>
+            <div className="flex items-center justify-between gap-2 p-6 pl-7">
+              <Link
+                href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
+                className="text-lg font-semibold text-custom-text-300 hover:underline"
+              >
+                Assigned to you
+              </Link>
+              <DurationFilterDropdown
+                customDates={selectedCustomDates}
+                value={selectedDurationFilter}
+                onChange={(val, customDates) => {
+                  if (val === "custom" && customDates) {
+                    handleUpdateFilters({
+                      duration: val,
+                      custom_dates: customDates,
+                    });
+                    return;
+                  }
+
+                  if (val === selectedDurationFilter) return;
+
+                  let newTab = selectedTab;
+                  // switch to pending tab if target date is changed to none
+                  if (val === "none" && selectedTab !== "completed") newTab = "pending";
+                  // switch to upcoming tab if target date is changed to other than none
+                  if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed")
+                    newTab = "upcoming";
+
+                  handleUpdateFilters({
+                    duration: val,
+                    tab: newTab,
+                  });
+                }}
+              />
+            </div>
+            <Tab.Group
+              as="div"
+              selectedIndex={selectedTabIndex}
+              onChange={(i) => {
+                const newSelectedTab = tabsList[i];
+                handleUpdateFilters({ tab: newSelectedTab?.key ?? "completed" });
+              }}
+              className="h-full flex flex-col"
+            >
+              <div className="px-6">
+                <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
+              </div>
+              <Tab.Panels as="div" className="h-full">
+                {tabsList.map((tab) => {
+                  if (tab.key !== selectedTab) return null;
+
+                  return (
+                    <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
+                      <WidgetIssuesList
+                        tab={tab.key}
+                        type="assigned"
+                        workspaceSlug={workspaceSlug}
+                        widgetStats={widgetStats}
+                        isLoading={fetching}
+                      />
+                    </Tab.Panel>
+                  );
+                })}
+              </Tab.Panels>
+            </Tab.Group>
+          </>
+        )
+      )}
     </div>
   );
 });
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
index e7832883bc9..e7ab1be8ea3 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -1,23 +1,24 @@
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Tab } from "@headlessui/react";
+import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // hooks
-import { useDashboard } from "hooks/store";
-// components
 import {
   DurationFilterDropdown,
+  IssuesErrorState,
   TabsList,
   WidgetIssuesList,
   WidgetLoader,
   WidgetProps,
-} from "components/dashboard/widgets";
+} from "@/components/dashboard/widgets";
+import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@/constants/dashboard";
+import { getCustomDates, getRedirectionFilters, getTabKey } from "@/helpers/dashboard.helper";
+import { useDashboard } from "@/hooks/store";
+// components
 // helpers
-import { getCustomDates, getRedirectionFilters, getTabKey } from "helpers/dashboard.helper";
 // types
-import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "created_issues";
 
@@ -26,12 +27,15 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // states
   const [fetching, setFetching] = useState(false);
   // store hooks
-  const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
+  const { fetchWidgetStats, getWidgetDetails, getWidgetStats, getWidgetStatsError, updateDashboardWidgetFilters } =
+    useDashboard();
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? "none";
+  const widgetStatsError = getWidgetStatsError(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
   const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
+  const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +47,10 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.duration ?? selectedDurationFilter);
+    const filterDates = getCustomDates(
+      filters.duration ?? selectedDurationFilter,
+      filters.custom_dates ?? selectedCustomDates
+    );
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       issue_type: filters.tab ?? selectedTab,
@@ -52,7 +59,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(selectedDurationFilter);
+    const filterDates = getCustomDates(selectedDurationFilter, selectedCustomDates);
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
@@ -66,65 +73,91 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
   const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
 
-  if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
+  if ((!widgetDetails || !widgetStats) && !widgetStatsError) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-center justify-between gap-2 p-6 pl-7">
-        <Link
-          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
-          className="text-lg font-semibold text-custom-text-300 hover:underline"
-        >
-          Created by you
-        </Link>
-        <DurationFilterDropdown
-          value={selectedDurationFilter}
-          onChange={(val) => {
-            if (val === selectedDurationFilter) return;
-
-            let newTab = selectedTab;
-            // switch to pending tab if target date is changed to none
-            if (val === "none" && selectedTab !== "completed") newTab = "pending";
-            // switch to upcoming tab if target date is changed to other than none
-            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";
-
+      {widgetStatsError ? (
+        <IssuesErrorState
+          isRefreshing={fetching}
+          onClick={() =>
             handleUpdateFilters({
-              duration: val,
-              tab: newTab,
-            });
-          }}
+              duration: EDurationFilters.NONE,
+              tab: "pending",
+            })
+          }
         />
-      </div>
-      <Tab.Group
-        as="div"
-        selectedIndex={selectedTabIndex}
-        onChange={(i) => {
-          const newSelectedTab = tabsList[i];
-          handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
-        }}
-        className="h-full flex flex-col"
-      >
-        <div className="px-6">
-          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
-        </div>
-        <Tab.Panels as="div" className="h-full">
-          {tabsList.map((tab) => {
-            if (tab.key !== selectedTab) return null;
+      ) : (
+        widgetStats && (
+          <>
+            <div className="flex items-center justify-between gap-2 p-6 pl-7">
+              <Link
+                href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
+                className="text-lg font-semibold text-custom-text-300 hover:underline"
+              >
+                Created by you
+              </Link>
+              <DurationFilterDropdown
+                customDates={selectedCustomDates}
+                value={selectedDurationFilter}
+                onChange={(val, customDates) => {
+                  if (val === "custom" && customDates) {
+                    handleUpdateFilters({
+                      duration: val,
+                      custom_dates: customDates,
+                    });
+                    return;
+                  }
+
+                  if (val === selectedDurationFilter) return;
+
+                  let newTab = selectedTab;
+                  // switch to pending tab if target date is changed to none
+                  if (val === "none" && selectedTab !== "completed") newTab = "pending";
+                  // switch to upcoming tab if target date is changed to other than none
+                  if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed")
+                    newTab = "upcoming";
+
+                  handleUpdateFilters({
+                    duration: val,
+                    tab: newTab,
+                  });
+                }}
+              />
+            </div>
+            <Tab.Group
+              as="div"
+              selectedIndex={selectedTabIndex}
+              onChange={(i) => {
+                const newSelectedTab = tabsList[i];
+                handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
+              }}
+              className="h-full flex flex-col"
+            >
+              <div className="px-6">
+                <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
+              </div>
+              <Tab.Panels as="div" className="h-full">
+                {tabsList.map((tab) => {
+                  if (tab.key !== selectedTab) return null;
 
-            return (
-              <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
-                <WidgetIssuesList
-                  tab={tab.key}
-                  type="created"
-                  workspaceSlug={workspaceSlug}
-                  widgetStats={widgetStats}
-                  isLoading={fetching}
-                />
-              </Tab.Panel>
-            );
-          })}
-        </Tab.Panels>
-      </Tab.Group>
+                  return (
+                    <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
+                      <WidgetIssuesList
+                        tab={tab.key}
+                        type="created"
+                        workspaceSlug={workspaceSlug}
+                        widgetStats={widgetStats}
+                        isLoading={fetching}
+                      />
+                    </Tab.Panel>
+                  );
+                })}
+              </Tab.Panels>
+            </Tab.Group>
+          </>
+        )
+      )}
     </div>
   );
 });
diff --git a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
index 4844ea406e5..a9cd5862de8 100644
--- a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
+++ b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
@@ -1,36 +1,56 @@
+import { useState } from "react";
 import { ChevronDown } from "lucide-react";
-// ui
+// components
 import { CustomMenu } from "@plane/ui";
-// types
-import { TDurationFilterOptions } from "@plane/types";
+import { DateFilterModal } from "@/components/core";
+// ui
+// helpers
+import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@/constants/dashboard";
+import { getDurationFilterDropdownLabel } from "@/helpers/dashboard.helper";
 // constants
-import { DURATION_FILTER_OPTIONS } from "constants/dashboard";
 
 type Props = {
-  onChange: (value: TDurationFilterOptions) => void;
-  value: TDurationFilterOptions;
+  customDates?: string[];
+  onChange: (value: EDurationFilters, customDates?: string[]) => void;
+  value: EDurationFilters;
 };
 
 export const DurationFilterDropdown: React.FC<Props> = (props) => {
-  const { onChange, value } = props;
+  const { customDates, onChange, value } = props;
+  // states
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
 
   return (
-    <CustomMenu
-      className="flex-shrink-0"
-      customButton={
-        <div className="px-3 py-2 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 focus:bg-custom-background-80 text-xs font-medium whitespace-nowrap rounded-md outline-none flex items-center gap-2">
-          {DURATION_FILTER_OPTIONS.find((option) => option.key === value)?.label}
-          <ChevronDown className="h-3 w-3" />
-        </div>
-      }
-      placement="bottom-end"
-      closeOnSelect
-    >
+    <>
+      <DateFilterModal
+        isOpen={isDateFilterModalOpen}
+        handleClose={() => setIsDateFilterModalOpen(false)}
+        onSelect={(val) => onChange(EDurationFilters.CUSTOM, val)}
+        title="Due date"
+      />
+      <CustomMenu
+        className="flex-shrink-0"
+        customButton={
+          <div className="px-3 py-2 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 focus:bg-custom-background-80 text-xs font-medium whitespace-nowrap rounded-md outline-none flex items-center gap-2">
+            {getDurationFilterDropdownLabel(value, customDates ?? [])}
+            <ChevronDown className="h-3 w-3" />
+          </div>
+        }
+        placement="bottom-end"
+        closeOnSelect
+      >
         {DURATION_FILTER_OPTIONS.map((option) => (
-          <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
+          <CustomMenu.MenuItem
+            key={option.key}
+            onClick={() => {
+              if (option.key === "custom") setIsDateFilterModalOpen(true);
+              else onChange(option.key);
+            }}
+          >
             {option.label}
           </CustomMenu.MenuItem>
         ))}
-    </CustomMenu>
+      </CustomMenu>
+    </>
   );
 };
diff --git a/web/components/dashboard/widgets/empty-states/assigned-issues.tsx b/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
index f60d8efe60a..c9a25cfd390 100644
--- a/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
@@ -1,9 +1,9 @@
 import Image from "next/image";
 import { useTheme } from "next-themes";
-// types
 import { TIssuesListTypes } from "@plane/types";
+// types
+import { ASSIGNED_ISSUES_EMPTY_STATES } from "@/constants/dashboard";
 // constants
-import { ASSIGNED_ISSUES_EMPTY_STATES } from "constants/dashboard";
 
 type Props = {
   type: TIssuesListTypes;
diff --git a/web/components/dashboard/widgets/empty-states/created-issues.tsx b/web/components/dashboard/widgets/empty-states/created-issues.tsx
index fe93d4404a6..bc812de3549 100644
--- a/web/components/dashboard/widgets/empty-states/created-issues.tsx
+++ b/web/components/dashboard/widgets/empty-states/created-issues.tsx
@@ -1,9 +1,9 @@
 import Image from "next/image";
 import { useTheme } from "next-themes";
-// types
 import { TIssuesListTypes } from "@plane/types";
+// types
+import { CREATED_ISSUES_EMPTY_STATES } from "@/constants/dashboard";
 // constants
-import { CREATED_ISSUES_EMPTY_STATES } from "constants/dashboard";
 
 type Props = {
   type: TIssuesListTypes;
diff --git a/web/components/dashboard/widgets/error-states/index.ts b/web/components/dashboard/widgets/error-states/index.ts
new file mode 100644
index 00000000000..bd8854f3744
--- /dev/null
+++ b/web/components/dashboard/widgets/error-states/index.ts
@@ -0,0 +1 @@
+export * from "./issues";
diff --git a/web/components/dashboard/widgets/error-states/issues.tsx b/web/components/dashboard/widgets/error-states/issues.tsx
new file mode 100644
index 00000000000..6cfce13b43d
--- /dev/null
+++ b/web/components/dashboard/widgets/error-states/issues.tsx
@@ -0,0 +1,32 @@
+import { AlertTriangle, RefreshCcw } from "lucide-react";
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  isRefreshing: boolean;
+  onClick: () => void;
+};
+
+export const IssuesErrorState: React.FC<Props> = (props) => {
+  const { isRefreshing, onClick } = props;
+
+  return (
+    <div className="h-full w-full grid place-items-center">
+      <div className="text-center">
+        <div className="h-24 w-24 bg-red-500/20 rounded-full grid place-items-center mx-auto">
+          <AlertTriangle className="h-12 w-12 text-red-500" />
+        </div>
+        <p className="mt-7 text-custom-text-300 text-sm font-medium">There was an error in fetching widget details</p>
+        <Button
+          variant="neutral-primary"
+          prependIcon={<RefreshCcw className="h-3 w-3" />}
+          className="mt-2 mx-auto"
+          onClick={onClick}
+          loading={isRefreshing}
+        >
+          {isRefreshing ? "Retrying" : "Retry"}
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/dashboard/widgets/index.ts b/web/components/dashboard/widgets/index.ts
index a481a88817c..31fc645d410 100644
--- a/web/components/dashboard/widgets/index.ts
+++ b/web/components/dashboard/widgets/index.ts
@@ -1,5 +1,6 @@
 export * from "./dropdowns";
 export * from "./empty-states";
+export * from "./error-states";
 export * from "./issue-panels";
 export * from "./loaders";
 export * from "./assigned-issues";
diff --git a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
index 716a3afc18d..db2c07585dd 100644
--- a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
@@ -1,13 +1,13 @@
-import { observer } from "mobx-react-lite";
 import isToday from "date-fns/isToday";
+import { observer } from "mobx-react-lite";
+import { TIssue, TWidgetIssue } from "@plane/types";
 // hooks
-import { useIssueDetail, useMember, useProject } from "hooks/store";
 // ui
 import { Avatar, AvatarGroup, ControlLink, PriorityIcon } from "@plane/ui";
 // helpers
-import { findTotalDaysInRange, renderFormattedDate } from "helpers/date-time.helper";
+import { findTotalDaysInRange, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+import { useIssueDetail, useMember, useProject } from "@/hooks/store";
 // types
-import { TIssue, TWidgetIssue } from "@plane/types";
 
 export type IssueListItemProps = {
   issueId: string;
@@ -34,6 +34,8 @@ export const AssignedUpcomingIssueListItem: React.FC<IssueListItemProps> = obser
   const blockedByIssueProjectDetails =
     blockedByIssues.length === 1 ? getProjectById(blockedByIssues[0]?.project_id ?? "") : null;
 
+  const targetDate = getDate(issueDetails.target_date);
+
   return (
     <ControlLink
       href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
@@ -48,11 +50,7 @@ export const AssignedUpcomingIssueListItem: React.FC<IssueListItemProps> = obser
         <h6 className="text-sm flex-grow truncate">{issueDetails.name}</h6>
       </div>
       <div className="text-xs text-center">
-        {issueDetails.target_date
-          ? isToday(new Date(issueDetails.target_date))
-            ? "Today"
-            : renderFormattedDate(issueDetails.target_date)
-          : "-"}
+        {targetDate ? (isToday(targetDate) ? "Today" : renderFormattedDate(targetDate)) : "-"}
       </div>
       <div className="text-xs text-center">
         {blockedByIssues.length > 0
@@ -83,7 +81,7 @@ export const AssignedOverdueIssueListItem: React.FC<IssueListItemProps> = observ
   const blockedByIssueProjectDetails =
     blockedByIssues.length === 1 ? getProjectById(blockedByIssues[0]?.project_id ?? "") : null;
 
-  const dueBy = findTotalDaysInRange(new Date(issueDetails.target_date ?? ""), new Date(), false) ?? 0;
+  const dueBy = findTotalDaysInRange(getDate(issueDetails.target_date), new Date(), false) ?? 0;
 
   return (
     <ControlLink
@@ -157,6 +155,7 @@ export const CreatedUpcomingIssueListItem: React.FC<IssueListItemProps> = observ
   if (!issue) return null;
 
   const projectDetails = getProjectById(issue.project_id);
+  const targetDate = getDate(issue.target_date);
 
   return (
     <ControlLink
@@ -172,11 +171,7 @@ export const CreatedUpcomingIssueListItem: React.FC<IssueListItemProps> = observ
         <h6 className="text-sm flex-grow truncate">{issue.name}</h6>
       </div>
       <div className="text-xs text-center">
-        {issue.target_date
-          ? isToday(new Date(issue.target_date))
-            ? "Today"
-            : renderFormattedDate(issue.target_date)
-          : "-"}
+        {targetDate ? (isToday(targetDate) ? "Today" : renderFormattedDate(targetDate)) : "-"}
       </div>
       <div className="text-xs flex justify-center">
         {issue.assignee_ids && issue.assignee_ids?.length > 0 ? (
@@ -212,7 +207,7 @@ export const CreatedOverdueIssueListItem: React.FC<IssueListItemProps> = observe
 
   const projectDetails = getProjectById(issue.project_id);
 
-  const dueBy = findTotalDaysInRange(new Date(issue.target_date ?? ""), new Date(), false) ?? 0;
+  const dueBy: number = findTotalDaysInRange(getDate(issue.target_date), new Date(), false) ?? 0;
 
   return (
     <ControlLink
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index 16b2b95d9ee..c3822926738 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -1,7 +1,8 @@
 import Link from "next/link";
+import { TAssignedIssuesWidgetResponse, TCreatedIssuesWidgetResponse, TIssue, TIssuesListTypes } from "@plane/types";
 // hooks
-import { useIssueDetail } from "hooks/store";
 // components
+import { Loader, getButtonStyling } from "@plane/ui";
 import {
   AssignedCompletedIssueListItem,
   AssignedIssuesEmptyState,
@@ -12,14 +13,13 @@ import {
   CreatedOverdueIssueListItem,
   CreatedUpcomingIssueListItem,
   IssueListItemProps,
-} from "components/dashboard/widgets";
+} from "@/components/dashboard/widgets";
 // ui
-import { Loader, getButtonStyling } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
-import { getRedirectionFilters } from "helpers/dashboard.helper";
+import { cn } from "@/helpers/common.helper";
+import { getRedirectionFilters } from "@/helpers/dashboard.helper";
+import { useIssueDetail } from "@/hooks/store";
 // types
-import { TAssignedIssuesWidgetResponse, TCreatedIssuesWidgetResponse, TIssue, TIssuesListTypes } from "@plane/types";
 
 export type WidgetIssuesListProps = {
   isLoading: boolean;
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
index 306c2fdeb9a..d2b7df8ed0f 100644
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -1,14 +1,14 @@
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
+import { TIssuesListTypes } from "@plane/types";
 // helpers
-import { cn } from "helpers/common.helper";
+import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@/constants/dashboard";
+import { cn } from "@/helpers/common.helper";
 // types
-import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
 // constants
-import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 type Props = {
-  durationFilter: TDurationFilterOptions;
+  durationFilter: EDurationFilters;
   selectedTab: TIssuesListTypes;
 };
 
@@ -48,7 +48,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
           className={cn(
             "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
             {
-              "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
+              "text-custom-text-100": selectedTab === tab.key,
               "hover:text-custom-text-300": selectedTab !== tab.key,
             }
           )}
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
index 91e321b05f7..dcdeb3738e7 100644
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -1,82 +1,37 @@
-import { useEffect, useState } from "react";
-import Link from "next/link";
+import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types";
 // hooks
-import { useDashboard } from "hooks/store";
 // components
-import { MarimekkoGraph } from "components/ui";
 import {
   DurationFilterDropdown,
   IssuesByPriorityEmptyState,
   WidgetLoader,
   WidgetProps,
-} from "components/dashboard/widgets";
-// ui
-import { PriorityIcon } from "@plane/ui";
+} from "@/components/dashboard/widgets";
 // helpers
-import { getCustomDates } from "helpers/dashboard.helper";
 // types
-import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types";
 // constants
-import { PRIORITY_GRAPH_GRADIENTS } from "constants/dashboard";
-import { ISSUE_PRIORITIES } from "constants/issue";
-
-const TEXT_COLORS = {
-  urgent: "#F4A9AA",
-  high: "#AB4800",
-  medium: "#AB6400",
-  low: "#1F2D5C",
-  none: "#60646C",
-};
-
-const CustomBar = (props: any) => {
-  const { bar, workspaceSlug } = props;
-  // states
-  const [isMouseOver, setIsMouseOver] = useState(false);
-
-  return (
-    <Link href={`/${workspaceSlug}/workspace-views/assigned?priority=${bar?.id}`}>
-      <g
-        transform={`translate(${bar?.x},${bar?.y})`}
-        onMouseEnter={() => setIsMouseOver(true)}
-        onMouseLeave={() => setIsMouseOver(false)}
-      >
-        <rect
-          x={0}
-          y={isMouseOver ? -6 : 0}
-          width={bar?.width}
-          height={isMouseOver ? bar?.height + 6 : bar?.height}
-          fill={bar?.fill}
-          stroke={bar?.borderColor}
-          strokeWidth={bar?.borderWidth}
-          rx={4}
-          ry={4}
-          className="duration-300"
-        />
-        <text
-          x={-bar?.height + 10}
-          y={18}
-          fill={TEXT_COLORS[bar?.id as keyof typeof TEXT_COLORS]}
-          className="capitalize font-medium text-lg -rotate-90"
-          dominantBaseline="text-bottom"
-        >
-          {bar?.id}
-        </text>
-      </g>
-    </Link>
-  );
-};
+import { IssuesByPriorityGraph } from "@/components/graphs";
+import { EDurationFilters } from "@/constants/dashboard";
+import { getCustomDates } from "@/helpers/dashboard.helper";
+import { useDashboard } from "@/hooks/store";
 
 const WIDGET_KEY = "issues_by_priority";
 
 export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) => {
   const { dashboardId, workspaceSlug } = props;
+  // router
+  const router = useRouter();
   // store hooks
   const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TIssuesByPriorityWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedDuration = widgetDetails?.widget_filters.duration ?? "none";
+  const selectedDuration = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
+  const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];
 
   const handleUpdateFilters = async (filters: Partial<TIssuesByPriorityWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -86,7 +41,10 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
-    const filterDates = getCustomDates(filters.duration ?? selectedDuration);
+    const filterDates = getCustomDates(
+      filters.duration ?? selectedDuration,
+      filters.custom_dates ?? selectedCustomDates
+    );
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -94,7 +52,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(selectedDuration);
+    const filterDates = getCustomDates(selectedDuration, selectedCustomDates);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -105,34 +63,13 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   const totalCount = widgetStats.reduce((acc, item) => acc + item?.count, 0);
-  const chartData = widgetStats
-    .filter((i) => i.count !== 0)
-    .map((item) => ({
-      priority: item?.priority,
-      percentage: (item?.count / totalCount) * 100,
-      urgent: item?.priority === "urgent" ? 1 : 0,
-      high: item?.priority === "high" ? 1 : 0,
-      medium: item?.priority === "medium" ? 1 : 0,
-      low: item?.priority === "low" ? 1 : 0,
-      none: item?.priority === "none" ? 1 : 0,
-    }));
-
-  const CustomBarsLayer = (props: any) => {
-    const { bars } = props;
-
-    return (
-      <g>
-        {bars
-          ?.filter((b: any) => b?.value === 1) // render only bars with value 1
-          .map((bar: any) => (
-            <CustomBar key={bar?.key} bar={bar} workspaceSlug={workspaceSlug} />
-          ))}
-      </g>
-    );
-  };
+  const chartData = widgetStats.map((item) => ({
+    priority: item?.priority,
+    priority_count: item?.count,
+  }));
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
+    <div className="flex min-h-96 w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 py-6 duration-300 hover:shadow-custom-shadow-4xl">
       <div className="flex items-center justify-between gap-2 pl-7 pr-6">
         <Link
           href={`/${workspaceSlug}/workspace-views/assigned`}
@@ -141,64 +78,31 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
           Assigned by priority
         </Link>
         <DurationFilterDropdown
+          customDates={selectedCustomDates}
           value={selectedDuration}
-          onChange={(val) =>
+          onChange={(val, customDates) =>
             handleUpdateFilters({
               duration: val,
+              ...(val === "custom" ? { custom_dates: customDates } : {}),
             })
           }
         />
       </div>
       {totalCount > 0 ? (
-        <div className="flex items-center px-11 h-full">
-          <div className="w-full -mt-[11px]">
-            <MarimekkoGraph
+        <div className="flex h-full items-center">
+          <div className="-mt-[11px] w-full">
+            <IssuesByPriorityGraph
               data={chartData}
-              id="priority"
-              value="percentage"
-              dimensions={ISSUE_PRIORITIES.map((p) => ({
-                id: p.key,
-                value: p.key,
-              }))}
-              axisBottom={null}
-              axisLeft={null}
-              height="119px"
-              margin={{
-                top: 11,
-                right: 0,
-                bottom: 0,
-                left: 0,
+              onBarClick={(datum) => {
+                router.push(
+                  `/${workspaceSlug}/workspace-views/assigned?priority=${`${datum.data.priority}`.toLowerCase()}`
+                );
               }}
-              defs={PRIORITY_GRAPH_GRADIENTS}
-              fill={ISSUE_PRIORITIES.map((p) => ({
-                match: {
-                  id: p.key,
-                },
-                id: `gradient${p.title}`,
-              }))}
-              tooltip={() => <></>}
-              enableGridX={false}
-              enableGridY={false}
-              layers={[CustomBarsLayer]}
             />
-            <div className="flex items-center gap-1 w-full mt-3 text-sm font-semibold text-custom-text-300">
-              {chartData.map((item) => (
-                <p
-                  key={item.priority}
-                  className="flex items-center gap-1 flex-shrink-0"
-                  style={{
-                    width: `${item.percentage}%`,
-                  }}
-                >
-                  <PriorityIcon priority={item.priority} withContainer />
-                  {item.percentage.toFixed(0)}%
-                </p>
-              ))}
-            </div>
           </div>
         </div>
       ) : (
-        <div className="h-full grid place-items-center">
+        <div className="grid h-full place-items-center">
           <IssuesByPriorityEmptyState />
         </div>
       )}
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
index a0eb6c70f8c..dc3afe20fd6 100644
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -1,24 +1,24 @@
 import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
+import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types";
 // hooks
-import { useDashboard } from "hooks/store";
-// components
-import { PieGraph } from "components/ui";
 import {
   DurationFilterDropdown,
   IssuesByStateGroupEmptyState,
   WidgetLoader,
   WidgetProps,
-} from "components/dashboard/widgets";
+} from "@/components/dashboard/widgets";
+import { PieGraph } from "@/components/ui";
+import { EDurationFilters, STATE_GROUP_GRAPH_COLORS, STATE_GROUP_GRAPH_GRADIENTS } from "@/constants/dashboard";
+import { STATE_GROUPS } from "@/constants/state";
+import { getCustomDates } from "@/helpers/dashboard.helper";
+import { useDashboard } from "@/hooks/store";
+// components
 // helpers
-import { getCustomDates } from "helpers/dashboard.helper";
 // types
-import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types";
 // constants
-import { STATE_GROUP_GRAPH_COLORS, STATE_GROUP_GRAPH_GRADIENTS } from "constants/dashboard";
-import { STATE_GROUPS } from "constants/state";
 
 const WIDGET_KEY = "issues_by_state_groups";
 
@@ -34,7 +34,8 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TIssuesByStateGroupsWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedDuration = widgetDetails?.widget_filters.duration ?? "none";
+  const selectedDuration = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
+  const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];
 
   const handleUpdateFilters = async (filters: Partial<TIssuesByStateGroupsWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -44,7 +45,10 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
-    const filterDates = getCustomDates(filters.duration ?? selectedDuration);
+    const filterDates = getCustomDates(
+      filters.duration ?? selectedDuration,
+      filters.custom_dates ?? selectedCustomDates
+    );
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -53,7 +57,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   // fetch widget stats
   useEffect(() => {
-    const filterDates = getCustomDates(selectedDuration);
+    const filterDates = getCustomDates(selectedDuration, selectedCustomDates);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -75,14 +79,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       startedCount > 0
         ? "started"
         : unStartedCount > 0
-        ? "unstarted"
-        : backlogCount > 0
-        ? "backlog"
-        : completedCount > 0
-        ? "completed"
-        : canceledCount > 0
-        ? "cancelled"
-        : null;
+          ? "unstarted"
+          : backlogCount > 0
+            ? "backlog"
+            : completedCount > 0
+              ? "completed"
+              : canceledCount > 0
+                ? "cancelled"
+                : null;
 
     setActiveStateGroup(stateGroup);
     setDefaultStateGroup(stateGroup);
@@ -139,10 +143,12 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
           Assigned by state
         </Link>
         <DurationFilterDropdown
+          customDates={selectedCustomDates}
           value={selectedDuration}
-          onChange={(val) =>
+          onChange={(val, customDates) =>
             handleUpdateFilters({
               duration: val,
+              ...(val === "custom" ? { custom_dates: customDates } : {}),
             })
           }
         />
diff --git a/web/components/dashboard/widgets/loaders/loader.tsx b/web/components/dashboard/widgets/loaders/loader.tsx
index 141bb55336c..ae4038b38da 100644
--- a/web/components/dashboard/widgets/loaders/loader.tsx
+++ b/web/components/dashboard/widgets/loaders/loader.tsx
@@ -1,13 +1,13 @@
 // components
+import { TWidgetKeys } from "@plane/types";
 import { AssignedIssuesWidgetLoader } from "./assigned-issues";
 import { IssuesByPriorityWidgetLoader } from "./issues-by-priority";
 import { IssuesByStateGroupWidgetLoader } from "./issues-by-state-group";
 import { OverviewStatsWidgetLoader } from "./overview-stats";
 import { RecentActivityWidgetLoader } from "./recent-activity";
-import { RecentProjectsWidgetLoader } from "./recent-projects";
 import { RecentCollaboratorsWidgetLoader } from "./recent-collaborators";
+import { RecentProjectsWidgetLoader } from "./recent-projects";
 // types
-import { TWidgetKeys } from "@plane/types";
 
 type Props = {
   widgetKey: TWidgetKeys;
diff --git a/web/components/dashboard/widgets/loaders/recent-collaborators.tsx b/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
index d838967af76..dc2163128fc 100644
--- a/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
+++ b/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
@@ -2,17 +2,16 @@
 import { Loader } from "@plane/ui";
 
 export const RecentCollaboratorsWidgetLoader = () => (
-  <Loader className="bg-custom-background-100 rounded-xl p-6 space-y-9">
-    <Loader.Item height="17px" width="20%" />
-    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2">
-      {Array.from({ length: 8 }).map((_, index) => (
-        <div key={index} className="space-y-11 flex flex-col items-center">
+  <>
+    {Array.from({ length: 8 }).map((_, index) => (
+      <Loader key={index} className="bg-custom-background-100 rounded-xl px-6 pb-12">
+        <div className="space-y-11 flex flex-col items-center">
           <div className="rounded-full overflow-hidden h-[69px] w-[69px]">
             <Loader.Item height="69px" width="69px" />
           </div>
           <Loader.Item height="11px" width="70%" />
         </div>
-      ))}
-    </div>
-  </Loader>
+      </Loader>
+    ))}
+  </>
 );
diff --git a/web/components/dashboard/widgets/overview-stats.tsx b/web/components/dashboard/widgets/overview-stats.tsx
index 5a105cc1553..f8b4035cd24 100644
--- a/web/components/dashboard/widgets/overview-stats.tsx
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { TOverviewStatsWidgetResponse } from "@plane/types";
 // hooks
-import { useDashboard } from "hooks/store";
+import { WidgetLoader } from "@/components/dashboard/widgets";
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { useDashboard } from "@/hooks/store";
 // components
-import { WidgetLoader } from "components/dashboard/widgets";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
-import { TOverviewStatsWidgetResponse } from "@plane/types";
-import { cn } from "helpers/common.helper";
 
 export type WidgetProps = {
   dashboardId: string;
@@ -74,6 +74,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
     >
       {STATS_LIST.map((stat, index) => (
         <div
+          key={stat.key}
           className={cn(
             `w-full flex flex-col gap-2 hover:bg-custom-background-80`,
             index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
diff --git a/web/components/dashboard/widgets/recent-activity.tsx b/web/components/dashboard/widgets/recent-activity.tsx
index fc16946d8e1..bd69d1f6e4b 100644
--- a/web/components/dashboard/widgets/recent-activity.tsx
+++ b/web/components/dashboard/widgets/recent-activity.tsx
@@ -1,18 +1,19 @@
 import { useEffect } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { History } from "lucide-react";
+import { TRecentActivityWidgetResponse } from "@plane/types";
 // hooks
-import { useDashboard, useUser } from "hooks/store";
 // components
-import { ActivityIcon, ActivityMessage, IssueLink } from "components/core";
-import { RecentActivityEmptyState, WidgetLoader, WidgetProps } from "components/dashboard/widgets";
+import { Avatar, getButtonStyling } from "@plane/ui";
+import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core";
+import { RecentActivityEmptyState, WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
 // ui
-import { Avatar } from "@plane/ui";
 // helpers
-import { calculateTimeAgo } from "helpers/date-time.helper";
+import { cn } from "@/helpers/common.helper";
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { useDashboard, useUser } from "@/hooks/store";
 // types
-import { TRecentActivityWidgetResponse } from "@plane/types";
 
 const WIDGET_KEY = "recent_activity";
 
@@ -23,6 +24,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const { fetchWidgetStats, getWidgetStats } = useDashboard();
   const widgetStats = getWidgetStats<TRecentActivityWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const redirectionLink = `/${workspaceSlug}/profile/${currentUser?.id}/activity`;
 
   useEffect(() => {
     fetchWidgetStats(workspaceSlug, dashboardId, {
@@ -34,12 +36,12 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 min-h-96">
-      <Link href="/profile/activity" className="text-lg font-semibold text-custom-text-300 mx-7 hover:underline">
+    <div className="min-h-96 w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 py-6 duration-300 hover:shadow-custom-shadow-4xl">
+      <Link href={redirectionLink} className="mx-7 text-lg font-semibold text-custom-text-300 hover:underline">
         Your issue activities
       </Link>
       {widgetStats.length > 0 ? (
-        <div className="space-y-6 mt-4 mx-7">
+        <div className="mx-7 mt-4 space-y-6">
           {widgetStats.map((activity) => (
             <div key={activity.id} className="flex gap-5">
               <div className="flex-shrink-0">
@@ -47,7 +49,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
                   activity.new_value === "restore" ? (
                     <History className="h-3.5 w-3.5 text-custom-text-200" />
                   ) : (
-                    <div className="h-6 w-6 flex justify-center">
+                    <div className="flex h-6 w-6 justify-center">
                       <ActivityIcon activity={activity} />
                     </div>
                   )
@@ -69,7 +71,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
               <div className="-mt-1 break-words">
                 <p className="text-sm text-custom-text-200">
                   <span className="font-medium text-custom-text-100">
-                    {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail.display_name}{" "}
+                    {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail?.display_name}{" "}
                   </span>
                   {activity.field ? (
                     <ActivityMessage activity={activity} showIssue />
@@ -83,9 +85,18 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
               </div>
             </div>
           ))}
+          <Link
+            href={redirectionLink}
+            className={cn(
+              getButtonStyling("link-primary", "sm"),
+              "mx-auto w-min px-2 py-1 text-xs hover:bg-custom-primary-100/20"
+            )}
+          >
+            View all
+          </Link>
         </div>
       ) : (
-        <div className="h-full grid place-items-center">
+        <div className="grid h-full place-items-center">
           <RecentActivityEmptyState />
         </div>
       )}
diff --git a/web/components/dashboard/widgets/recent-collaborators.tsx b/web/components/dashboard/widgets/recent-collaborators.tsx
deleted file mode 100644
index 2fafbb9acaf..00000000000
--- a/web/components/dashboard/widgets/recent-collaborators.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useEffect } from "react";
-import Link from "next/link";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useDashboard, useMember, useUser } from "hooks/store";
-// components
-import { RecentCollaboratorsEmptyState, WidgetLoader, WidgetProps } from "components/dashboard/widgets";
-// ui
-import { Avatar } from "@plane/ui";
-// types
-import { TRecentCollaboratorsWidgetResponse } from "@plane/types";
-
-type CollaboratorListItemProps = {
-  issueCount: number;
-  userId: string;
-  workspaceSlug: string;
-};
-
-const WIDGET_KEY = "recent_collaborators";
-
-const CollaboratorListItem: React.FC<CollaboratorListItemProps> = observer((props) => {
-  const { issueCount, userId, workspaceSlug } = props;
-  // store hooks
-  const { currentUser } = useUser();
-  const { getUserDetails } = useMember();
-  // derived values
-  const userDetails = getUserDetails(userId);
-  const isCurrentUser = userId === currentUser?.id;
-
-  if (!userDetails) return null;
-
-  return (
-    <Link href={`/${workspaceSlug}/profile/${userId}`} className="group text-center">
-      <div className="flex justify-center">
-        <Avatar
-          src={userDetails.avatar}
-          name={isCurrentUser ? "You" : userDetails.display_name}
-          size={69}
-          className="!text-3xl !font-medium"
-          showTooltip={false}
-        />
-      </div>
-      <h6 className="mt-6 text-xs font-semibold group-hover:underline truncate">
-        {isCurrentUser ? "You" : userDetails?.display_name}
-      </h6>
-      <p className="text-sm mt-2">
-        {issueCount} active issue{issueCount > 1 ? "s" : ""}
-      </p>
-    </Link>
-  );
-});
-
-export const RecentCollaboratorsWidget: React.FC<WidgetProps> = observer((props) => {
-  const { dashboardId, workspaceSlug } = props;
-  // store hooks
-  const { fetchWidgetStats, getWidgetStats } = useDashboard();
-  const widgetStats = getWidgetStats<TRecentCollaboratorsWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
-
-  useEffect(() => {
-    fetchWidgetStats(workspaceSlug, dashboardId, {
-      widget_key: WIDGET_KEY,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
-
-  return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300">
-      <div className="px-7 pt-6">
-        <h4 className="text-lg font-semibold text-custom-text-300">Most active members</h4>
-        <p className="mt-2 text-xs font-medium text-custom-text-300">
-          Top eight active members in your project by last activity
-        </p>
-      </div>
-      {widgetStats.length > 1 ? (
-        <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
-          {widgetStats.map((user) => (
-            <CollaboratorListItem
-              key={user.user_id}
-              issueCount={user.active_issue_count}
-              userId={user.user_id}
-              workspaceSlug={workspaceSlug}
-            />
-          ))}
-        </div>
-      ) : (
-        <div className="h-full grid place-items-center">
-          <RecentCollaboratorsEmptyState />
-        </div>
-      )}
-    </div>
-  );
-});
diff --git a/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx b/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
new file mode 100644
index 00000000000..3367f8b8c17
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
@@ -0,0 +1,120 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+import { TRecentCollaboratorsWidgetResponse } from "@plane/types";
+// store hooks
+import { Avatar } from "@plane/ui";
+import { useDashboard, useMember, useUser } from "@/hooks/store";
+// components
+import { WidgetLoader } from "../loaders";
+// ui
+// types
+
+type CollaboratorListItemProps = {
+  issueCount: number;
+  userId: string;
+  workspaceSlug: string;
+};
+
+const CollaboratorListItem: React.FC<CollaboratorListItemProps> = observer((props) => {
+  const { issueCount, userId, workspaceSlug } = props;
+  // store hooks
+  const { currentUser } = useUser();
+  const { getUserDetails } = useMember();
+  // derived values
+  const userDetails = getUserDetails(userId);
+  const isCurrentUser = userId === currentUser?.id;
+
+  if (!userDetails) return null;
+
+  return (
+    <Link href={`/${workspaceSlug}/profile/${userId}`} className="group text-center">
+      <div className="flex justify-center">
+        <Avatar
+          src={userDetails.avatar}
+          name={isCurrentUser ? "You" : userDetails.display_name}
+          size={69}
+          className="!text-3xl !font-medium"
+          showTooltip={false}
+        />
+      </div>
+      <h6 className="mt-6 text-xs font-semibold group-hover:underline truncate">
+        {isCurrentUser ? "You" : userDetails?.display_name}
+      </h6>
+      <p className="text-sm mt-2">
+        {issueCount} active issue{issueCount > 1 ? "s" : ""}
+      </p>
+    </Link>
+  );
+});
+
+type CollaboratorsListProps = {
+  cursor: string;
+  dashboardId: string;
+  perPage: number;
+  searchQuery?: string;
+  updateIsLoading?: (isLoading: boolean) => void;
+  updateResultsCount: (count: number) => void;
+  updateTotalPages: (count: number) => void;
+  workspaceSlug: string;
+};
+
+const WIDGET_KEY = "recent_collaborators";
+
+export const CollaboratorsList: React.FC<CollaboratorsListProps> = (props) => {
+  const {
+    cursor,
+    dashboardId,
+    perPage,
+    searchQuery = "",
+    updateIsLoading,
+    updateResultsCount,
+    updateTotalPages,
+    workspaceSlug,
+  } = props;
+  // store hooks
+  const { fetchWidgetStats } = useDashboard();
+
+  const { data: widgetStats } = useSWR(
+    workspaceSlug && dashboardId && cursor
+      ? `WIDGET_STATS_${workspaceSlug}_${dashboardId}_${cursor}_${searchQuery}`
+      : null,
+    workspaceSlug && dashboardId && cursor
+      ? () =>
+          fetchWidgetStats(workspaceSlug, dashboardId, {
+            cursor,
+            per_page: perPage,
+            search: searchQuery,
+            widget_key: WIDGET_KEY,
+          })
+      : null
+  ) as {
+    data: TRecentCollaboratorsWidgetResponse | undefined;
+  };
+
+  useEffect(() => {
+    updateIsLoading?.(true);
+
+    if (!widgetStats) return;
+
+    updateIsLoading?.(false);
+    updateTotalPages(widgetStats.total_pages);
+    updateResultsCount(widgetStats.results?.length);
+  }, [updateIsLoading, updateResultsCount, updateTotalPages, widgetStats]);
+
+  if (!widgetStats || !widgetStats?.results) return <WidgetLoader widgetKey={WIDGET_KEY} />;
+
+  return (
+    <>
+      {widgetStats?.results?.map((user) => (
+        <CollaboratorListItem
+          key={user.user_id}
+          issueCount={user.active_issue_count}
+          userId={user.user_id}
+          workspaceSlug={workspaceSlug}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/web/components/dashboard/widgets/recent-collaborators/default-list.tsx b/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
new file mode 100644
index 00000000000..8fb884c9bac
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-collaborators/default-list.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+// components
+import { Button } from "@plane/ui";
+import { CollaboratorsList } from "./collaborators-list";
+// ui
+
+type Props = {
+  dashboardId: string;
+  perPage: number;
+  workspaceSlug: string;
+};
+
+export const DefaultCollaboratorsList: React.FC<Props> = (props) => {
+  const { dashboardId, perPage, workspaceSlug } = props;
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const collaboratorsPages: JSX.Element[] = [];
+  for (let i = 0; i < pageCount; i++)
+    collaboratorsPages.push(
+      <CollaboratorsList
+        key={i}
+        dashboardId={dashboardId}
+        cursor={`${perPage}:${i}:0`}
+        perPage={perPage}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+        workspaceSlug={workspaceSlug}
+      />
+    );
+
+  const showViewMoreButton = pageCount < totalPages && resultsCount !== 0;
+  const showViewLessButton = pageCount > 1;
+
+  return (
+    <>
+      <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
+        {collaboratorsPages}
+      </div>
+      {(showViewLessButton || showViewMoreButton) && (
+        <div className="flex items-center justify-center text-xs w-full">
+          {showViewLessButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={() => setPageCount(1)}
+            >
+              View less
+            </Button>
+          )}
+          {showViewMoreButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={handleLoadMore}
+            >
+              View more
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/dashboard/widgets/recent-collaborators/index.ts b/web/components/dashboard/widgets/recent-collaborators/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-collaborators/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/components/dashboard/widgets/recent-collaborators/root.tsx b/web/components/dashboard/widgets/recent-collaborators/root.tsx
new file mode 100644
index 00000000000..7f17e0f2c5d
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-collaborators/root.tsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { Search } from "lucide-react";
+// types
+import { WidgetProps } from "@/components/dashboard/widgets";
+// components
+import { DefaultCollaboratorsList } from "./default-list";
+import { SearchedCollaboratorsList } from "./search-list";
+
+const PER_PAGE = 8;
+
+export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
+  const { dashboardId, workspaceSlug } = props;
+  // states
+  const [searchQuery, setSearchQuery] = useState("");
+
+  return (
+    <div className="w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 duration-300 hover:shadow-custom-shadow-4xl">
+      <div className="flex items-start justify-between px-7 pt-6">
+        <div>
+          <h4 className="text-lg font-semibold text-custom-text-300">Collaborators</h4>
+          <p className="mt-2 text-xs font-medium text-custom-text-300">
+            View and find all members you collaborate with across projects
+          </p>
+        </div>
+        <div className="flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" />
+          <input
+            className="w-full border-none bg-transparent text-sm focus:outline-none"
+            placeholder="Search for collaborators"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+      </div>
+      {searchQuery.trim() !== "" ? (
+        <SearchedCollaboratorsList
+          dashboardId={dashboardId}
+          perPage={PER_PAGE}
+          searchQuery={searchQuery}
+          workspaceSlug={workspaceSlug}
+        />
+      ) : (
+        <DefaultCollaboratorsList dashboardId={dashboardId} perPage={PER_PAGE} workspaceSlug={workspaceSlug} />
+      )}
+    </div>
+  );
+};
diff --git a/web/components/dashboard/widgets/recent-collaborators/search-list.tsx b/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
new file mode 100644
index 00000000000..7323ad94489
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-collaborators/search-list.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// components
+// ui
+import { Button } from "@plane/ui";
+// assets
+import DarkImage from "public/empty-state/dashboard/dark/recent-collaborators-1.svg";
+import LightImage from "public/empty-state/dashboard/light/recent-collaborators-1.svg";
+import { CollaboratorsList } from "./collaborators-list";
+
+type Props = {
+  dashboardId: string;
+  perPage: number;
+  searchQuery: string;
+  workspaceSlug: string;
+};
+
+export const SearchedCollaboratorsList: React.FC<Props> = (props) => {
+  const { dashboardId, perPage, searchQuery, workspaceSlug } = props;
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  // next-themes
+  const { resolvedTheme } = useTheme();
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const collaboratorsPages: JSX.Element[] = [];
+  for (let i = 0; i < pageCount; i++)
+    collaboratorsPages.push(
+      <CollaboratorsList
+        key={i}
+        dashboardId={dashboardId}
+        cursor={`${perPage}:${i}:0`}
+        perPage={perPage}
+        searchQuery={searchQuery}
+        updateIsLoading={setIsLoading}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+        workspaceSlug={workspaceSlug}
+      />
+    );
+
+  const showViewMoreButton = pageCount < totalPages && resultsCount !== 0;
+  const showViewLessButton = pageCount > 1;
+
+  const emptyStateImage = resolvedTheme === "dark" ? DarkImage : LightImage;
+
+  return (
+    <>
+      <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
+        {collaboratorsPages}
+      </div>
+      {!isLoading && totalPages === 0 && (
+        <div className="flex flex-col items-center gap-6 mb-8">
+          <div className="h-24 w-24 flex-shrink-0">
+            <Image src={emptyStateImage} className="w-full h-full" alt="Recent collaborators" />
+          </div>
+          <p className="font-medium text-sm">No matching member</p>
+        </div>
+      )}
+      {(showViewLessButton || showViewMoreButton) && (
+        <div className="flex items-center justify-center text-xs w-full">
+          {showViewLessButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={() => setPageCount(1)}
+            >
+              View less
+            </Button>
+          )}
+          {showViewMoreButton && (
+            <Button
+              variant="link-primary"
+              size="sm"
+              className="my-3 hover:bg-custom-primary-100/20"
+              onClick={handleLoadMore}
+            >
+              View more
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
index 79be923334b..d52af922c16 100644
--- a/web/components/dashboard/widgets/recent-projects.tsx
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -1,20 +1,20 @@
 import { useEffect } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Plus } from "lucide-react";
+import { TRecentProjectsWidgetResponse } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
+import { Avatar, AvatarGroup } from "@plane/ui";
+import { WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
+import { ProjectLogo } from "@/components/project";
+import { PROJECT_BACKGROUND_COLORS } from "@/constants/dashboard";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
 // components
-import { WidgetLoader, WidgetProps } from "components/dashboard/widgets";
 // ui
-import { Avatar, AvatarGroup } from "@plane/ui";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 // types
-import { TRecentProjectsWidgetResponse } from "@plane/types";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { PROJECT_BACKGROUND_COLORS } from "constants/dashboard";
 
 const WIDGET_KEY = "recent_projects";
 
@@ -38,17 +38,9 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
       <div
         className={`h-[3.375rem] w-[3.375rem] grid place-items-center rounded border border-transparent flex-shrink-0 ${randomBgColor}`}
       >
-        {projectDetails.emoji ? (
-          <span className="grid h-7 w-7 flex-shrink-0 text-2xl place-items-center rounded uppercase">
-            {renderEmoji(projectDetails.emoji)}
-          </span>
-        ) : projectDetails.icon_prop ? (
-          <div className="grid h-7 w-7 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
-        ) : (
-          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-            {projectDetails.name.charAt(0)}
-          </span>
-        )}
+        <div className="h-7 w-7 grid place-items-center">
+          <ProjectLogo logo={projectDetails.logo_props} className="text-xl" />
+        </div>
       </div>
       <div className="flex-grow truncate">
         <h6 className="text-sm text-custom-text-300 font-medium group-hover:underline group-hover:text-custom-text-100 truncate">
diff --git a/web/components/dropdowns/buttons.tsx b/web/components/dropdowns/buttons.tsx
index 93d8c187cec..6195bcdadc6 100644
--- a/web/components/dropdowns/buttons.tsx
+++ b/web/components/dropdowns/buttons.tsx
@@ -1,10 +1,10 @@
 // helpers
-import { cn } from "helpers/common.helper";
+import { Tooltip } from "@plane/ui";
+import { cn } from "@/helpers/common.helper";
 // types
-import { TButtonVariants } from "./types";
-// constants
+import { usePlatformOS } from "@/hooks/use-platform-os";
 import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
-import { Tooltip } from "@plane/ui";
+import { TButtonVariants } from "./types";
 
 export type DropdownButtonProps = {
   children: React.ReactNode;
@@ -27,12 +27,11 @@ type ButtonProps = {
 
 export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
   const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip, variant } = props;
-
   const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
     ? BorderButton
     : BACKGROUND_BUTTON_VARIANTS.includes(variant)
-    ? BackgroundButton
-    : TransparentButton;
+      ? BackgroundButton
+      : TransparentButton;
 
   return (
     <ButtonToRender
@@ -49,9 +48,15 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
 
 const BorderButton: React.FC<ButtonProps> = (props) => {
   const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
 
   return (
-    <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={tooltipContent}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+    >
       <div
         className={cn(
           "h-full flex items-center gap-1.5 border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 rounded text-xs px-2 py-0.5",
@@ -67,9 +72,14 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
 
 const BackgroundButton: React.FC<ButtonProps> = (props) => {
   const { children, className, tooltipContent, tooltipHeading, showTooltip } = props;
-
+  const { isMobile } = usePlatformOS();
   return (
-    <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={tooltipContent}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+    >
       <div
         className={cn(
           "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80",
@@ -84,9 +94,14 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
 
 const TransparentButton: React.FC<ButtonProps> = (props) => {
   const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
-
+  const { isMobile } = usePlatformOS();
   return (
-    <Tooltip tooltipHeading={tooltipHeading} tooltipContent={tooltipContent} disabled={!showTooltip}>
+    <Tooltip
+      tooltipHeading={tooltipHeading}
+      tooltipContent={tooltipContent}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+    >
       <div
         className={cn(
           "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
diff --git a/web/components/dropdowns/cycle/cycle-options.tsx b/web/components/dropdowns/cycle/cycle-options.tsx
index e691569b7a9..8c1aba2f881 100644
--- a/web/components/dropdowns/cycle/cycle-options.tsx
+++ b/web/components/dropdowns/cycle/cycle-options.tsx
@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import { FC, useEffect, useRef, useState } from "react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
-//components
-import { ContrastIcon, CycleGroupIcon } from "@plane/ui";
-//store
-import { useApplication, useCycle } from "hooks/store";
-//hooks
 import { usePopper } from "react-popper";
-//icon
+// components
 import { Check, Search } from "lucide-react";
-//types
-import { Placement } from "@popperjs/core";
+import { Combobox } from "@headlessui/react";
+// icon
 import { TCycleGroups } from "@plane/types";
+// ui
+import { ContrastIcon, CycleGroupIcon } from "@plane/ui";
+// store hooks
+import { useApplication, useCycle } from "@/hooks/store";
+// types
 
 type DropdownOptions =
   | {
@@ -21,14 +21,14 @@ type DropdownOptions =
     }[]
   | undefined;
 
-interface Props {
+type CycleOptionsProps = {
   projectId: string;
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
   isOpen: boolean;
-}
+};
 
-export const CycleOptions = observer((props: any) => {
+export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
   const { projectId, isOpen, referenceElement, placement } = props;
 
   //state hooks
diff --git a/web/components/dropdowns/cycle/index.tsx b/web/components/dropdowns/cycle/index.tsx
index 2c05d9ddf06..ce721e0a1cc 100644
--- a/web/components/dropdowns/cycle/index.tsx
+++ b/web/components/dropdowns/cycle/index.tsx
@@ -1,21 +1,21 @@
 import { Fragment, ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { ChevronDown } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useCycle } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { ContrastIcon } from "@plane/ui";
+import { cn } from "@/helpers/common.helper";
+import { useCycle } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "../buttons";
 // icons
-import { ContrastIcon } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 import { TDropdownProps } from "../types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 import { CycleOptions } from "./cycle-options";
 
 type Props = TDropdownProps & {
@@ -41,7 +41,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     onChange,
     onClose,
-    placeholder = "Cycle",
+    placeholder = "",
     placement,
     projectId,
     showTooltip = false,
@@ -132,7 +132,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
               variant={buttonVariant}
             >
               {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
                 <span className="flex-grow truncate max-w-40">{selectedName ?? placeholder}</span>
               )}
               {dropdownArrow && (
diff --git a/web/components/dropdowns/date-range.tsx b/web/components/dropdowns/date-range.tsx
index d3ef691b9b1..8ae5726a81b 100644
--- a/web/components/dropdowns/date-range.tsx
+++ b/web/components/dropdowns/date-range.tsx
@@ -1,19 +1,19 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
-import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import { DateRange, DayPicker, Matcher } from "react-day-picker";
+import { usePopper } from "react-popper";
 import { ArrowRight, CalendarDays } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 // components
-import { DropdownButton } from "./buttons";
 // ui
 import { Button } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { DropdownButton } from "./buttons";
 // types
 import { TButtonVariants } from "./types";
 
@@ -149,6 +149,7 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
           if (!isOpen) handleKeyDown(e);
         } else handleKeyDown(e);
       }}
+      disabled={disabled}
     >
       <Combobox.Button as={React.Fragment}>
         <button
diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 570ea45da74..e126ec1bdeb 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -1,20 +1,20 @@
 import React, { useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
 import { DayPicker, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
 // hooks
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
-// helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   clearIconClassName?: string;
@@ -168,8 +168,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
             {...attributes.popper}
           >
             <DayPicker
-              selected={value ? new Date(value) : undefined}
-              defaultMonth={value ? new Date(value) : undefined}
+              selected={getDate(value)}
+              defaultMonth={getDate(value)}
               onSelect={(date) => {
                 dropdownOnChange(date ?? null);
               }}
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 663ca67cec7..1219a70110f 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -1,21 +1,21 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Triangle } from "lucide-react";
-import sortBy from "lodash/sortBy";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useApplication, useEstimate } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useEstimate } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
diff --git a/web/components/dropdowns/member/avatar.tsx b/web/components/dropdowns/member/avatar.tsx
index 067d609c5db..0c3445d0929 100644
--- a/web/components/dropdowns/member/avatar.tsx
+++ b/web/components/dropdowns/member/avatar.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useMember } from "hooks/store";
-// ui
 import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
+import { useMember } from "@/hooks/store";
+// ui
 
 type AvatarProps = {
   showTooltip: boolean;
diff --git a/web/components/dropdowns/member/index.tsx b/web/components/dropdowns/member/index.tsx
index 0513ec62713..5691fd9207a 100644
--- a/web/components/dropdowns/member/index.tsx
+++ b/web/components/dropdowns/member/index.tsx
@@ -1,21 +1,21 @@
 import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { ChevronDown } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useMember } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { cn } from "@/helpers/common.helper";
+import { useMember } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
-import { ButtonAvatars } from "./avatar";
 import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { ButtonAvatars } from "./avatar";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { MemberOptions } from "./member-options";
 import { MemberDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
-import { MemberOptions } from "./member-options";
 
 type Props = {
   projectId?: string;
@@ -37,6 +37,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     onChange,
     onClose,
     placeholder = "Members",
+    tooltipContent,
     placement,
     projectId,
     showTooltip = false,
@@ -123,7 +124,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
               className={buttonClassName}
               isActive={isOpen}
               tooltipHeading={placeholder}
-              tooltipContent={`${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
+              tooltipContent={tooltipContent ?? `${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
               showTooltip={showTooltip}
               variant={buttonVariant}
             >
diff --git a/web/components/dropdowns/member/member-options.tsx b/web/components/dropdowns/member/member-options.tsx
index 46a0b9cbad4..56f212fe091 100644
--- a/web/components/dropdowns/member/member-options.tsx
+++ b/web/components/dropdowns/member/member-options.tsx
@@ -1,16 +1,16 @@
 import { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Check, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 //components
 import { Avatar } from "@plane/ui";
 //store
-import { useApplication, useMember, useUser } from "hooks/store";
+import { useApplication, useMember, useUser } from "@/hooks/store";
 //hooks
-import { usePopper } from "react-popper";
 //icon
-import { Check, Search } from "lucide-react";
 //types
-import { Placement } from "@popperjs/core";
 
 interface Props {
   projectId?: string;
diff --git a/web/components/dropdowns/member/types.d.ts b/web/components/dropdowns/member/types.d.ts
index 21e6a534e04..bfae9c65ea2 100644
--- a/web/components/dropdowns/member/types.d.ts
+++ b/web/components/dropdowns/member/types.d.ts
@@ -5,6 +5,7 @@ export type MemberDropdownProps = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   placeholder?: string;
+  tooltipContent?: string;
   onClose?: () => void;
 } & (
     | {
diff --git a/web/components/dropdowns/module/index.tsx b/web/components/dropdowns/module/index.tsx
index 5e0a3977f55..1d843db8a7c 100644
--- a/web/components/dropdowns/module/index.tsx
+++ b/web/components/dropdowns/module/index.tsx
@@ -1,21 +1,22 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { ChevronDown, X } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useModule } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { DiceIcon, Tooltip } from "@plane/ui";
+import { cn } from "@/helpers/common.helper";
+import { useModule } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import { DropdownButton } from "../buttons";
 // icons
-import { DiceIcon, Tooltip } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
 import { TDropdownProps } from "../types";
 // constants
-import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
 import { ModuleOptions } from "./module-options";
 
 type Props = TDropdownProps & {
@@ -45,8 +46,9 @@ type ButtonContentProps = {
   hideIcon: boolean;
   hideText: boolean;
   onChange: (moduleIds: string[]) => void;
-  placeholder: string;
+  placeholder?: string;
   showCount: boolean;
+  showTooltip?: boolean;
   value: string | string[] | null;
 };
 
@@ -60,42 +62,51 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
     onChange,
     placeholder,
     showCount,
+    showTooltip = false,
     value,
   } = props;
   // store hooks
   const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
 
   if (Array.isArray(value))
     return (
       <>
         {showCount ? (
-          <div className="relative flex items-center gap-1">
+          <div className="relative flex items-center gap-1 max-w-full">
             {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
-            <div className="flex-grow truncate max-w-40">
-              {value.length > 0
-                ? value.length === 1
-                  ? `${getModuleById(value[0])?.name || "module"}`
-                  : `${value.length} Module${value.length === 1 ? "" : "s"}`
-                : placeholder}
-            </div>
+            {(value.length > 0 || !!placeholder) && (
+              <div className="max-w-40 flex-grow truncate">
+                {value.length > 0
+                  ? value.length === 1
+                    ? `${getModuleById(value[0])?.name || "module"}`
+                    : `${value.length} Module${value.length === 1 ? "" : "s"}`
+                  : placeholder}
+              </div>
+            )}
           </div>
         ) : value.length > 0 ? (
-          <div className="flex items-center gap-2 py-0.5 max-w-full flex-grow truncate flex-wrap">
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
                 <div
                   key={moduleId}
-                  className="flex items-center gap-1 max-w-full bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
+                  className="flex max-w-full items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-custom-text-200"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
-                    <Tooltip tooltipHeading="Title" tooltipContent={moduleDetails?.name}>
-                      <span className="text-xs font-medium flex-grow truncate max-w-40">{moduleDetails?.name}</span>
+                    <Tooltip
+                      tooltipHeading="Title"
+                      tooltipContent={moduleDetails?.name}
+                      disabled={!showTooltip}
+                      isMobile={isMobile}
+                    >
+                      <span className="max-w-40 flex-grow truncate text-xs font-medium">{moduleDetails?.name}</span>
                     </Tooltip>
                   )}
                   {!disabled && (
-                    <Tooltip tooltipContent="Remove">
+                    <Tooltip tooltipContent="Remove" disabled={!showTooltip} isMobile={isMobile}>
                       <button
                         type="button"
                         className="flex-shrink-0"
@@ -149,7 +160,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     multiple,
     onChange,
     onClose,
-    placeholder = "Module",
+    placeholder = "",
     placement,
     projectId,
     showCount = false,
@@ -265,9 +276,9 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
                 hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
                 placeholder={placeholder}
                 showCount={showCount}
+                showTooltip={showTooltip}
                 value={value}
-                // @ts-ignore
-                onChange={onChange}
+                onChange={onChange as any}
               />
             </DropdownButton>
           </button>
diff --git a/web/components/dropdowns/module/module-options.tsx b/web/components/dropdowns/module/module-options.tsx
index e7d205b126d..0650978bea0 100644
--- a/web/components/dropdowns/module/module-options.tsx
+++ b/web/components/dropdowns/module/module-options.tsx
@@ -1,17 +1,17 @@
 import { useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Check, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 //components
 import { DiceIcon } from "@plane/ui";
 //store
-import { useApplication, useModule } from "hooks/store";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useModule } from "@/hooks/store";
 //hooks
-import { usePopper } from "react-popper";
-import { cn } from "helpers/common.helper";
 //icon
-import { Check, Search } from "lucide-react";
 //types
-import { Placement } from "@popperjs/core";
 
 type DropdownOptions =
   | {
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index e0677c84371..49dd5b2c505 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -1,21 +1,22 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
-import { Combobox } from "@headlessui/react";
+import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
-import { useTheme } from "next-themes";
+import { Combobox } from "@headlessui/react";
+import { TIssuePriorities } from "@plane/types";
 // hooks
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// icons
 import { PriorityIcon, Tooltip } from "@plane/ui";
+import { ISSUE_PRIORITIES } from "@/constants/issue";
+import { cn } from "@/helpers/common.helper";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// icons
 // helpers
-import { cn } from "helpers/common.helper";
 // types
-import { TIssuePriorities } from "@plane/types";
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { ISSUE_PRIORITIES } from "constants/issue";
-import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -61,8 +62,15 @@ const BorderButton = (props: ButtonProps) => {
     none: "hover:bg-custom-background-80 border-custom-border-300",
   };
 
+  const { isMobile } = usePlatformOS();
+
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
+    <Tooltip
+      tooltipHeading="Priority"
+      tooltipContent={priorityDetails?.title ?? "None"}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+    >
       <div
         className={cn(
           "h-full flex items-center gap-1.5 border-[0.5px] rounded text-xs px-2 py-0.5",
@@ -130,8 +138,15 @@ const BackgroundButton = (props: ButtonProps) => {
     none: "bg-custom-background-80",
   };
 
+  const { isMobile } = usePlatformOS();
+
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
+    <Tooltip
+      tooltipHeading="Priority"
+      tooltipContent={priorityDetails?.title ?? "None"}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+    >
       <div
         className={cn(
           "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5",
@@ -200,8 +215,15 @@ const TransparentButton = (props: ButtonProps) => {
     none: "hover:text-custom-text-300",
   };
 
+  const { isMobile } = usePlatformOS();
+
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priorityDetails?.title ?? "None"} disabled={!showTooltip}>
+    <Tooltip
+      tooltipHeading="Priority"
+      tooltipContent={priorityDetails?.title ?? "None"}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+    >
       <div
         className={cn(
           "h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 hover:bg-custom-background-80",
@@ -342,8 +364,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
     ? BorderButton
     : BACKGROUND_BUTTON_VARIANTS.includes(buttonVariant)
-    ? BackgroundButton
-    : TransparentButton;
+      ? BackgroundButton
+      : TransparentButton;
 
   useEffect(() => {
     if (isOpen && inputRef.current) {
diff --git a/web/components/dropdowns/project.tsx b/web/components/dropdowns/project.tsx
index f6fb9205e86..95ed8cd62d4 100644
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@@ -1,21 +1,22 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+import { IProject } from "@plane/types";
 // hooks
-import { useProject } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { ProjectLogo } from "@/components/project";
+import { cn } from "@/helpers/common.helper";
+import { useProject } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // helpers
-import { cn } from "helpers/common.helper";
-import { renderEmoji } from "helpers/emoji.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -23,6 +24,7 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   onChange: (val: string) => void;
   onClose?: () => void;
+  renderCondition?: (project: IProject) => boolean;
   value: string | null;
 };
 
@@ -41,6 +43,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     onClose,
     placeholder = "Project",
     placement,
+    renderCondition,
     showTooltip = false,
     tabIndex,
     value,
@@ -71,19 +74,17 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
 
   const options = joinedProjectIds?.map((projectId) => {
     const projectDetails = getProjectById(projectId);
-
+    if (renderCondition && projectDetails && !renderCondition(projectDetails)) return;
     return {
       value: projectId,
       query: `${projectDetails?.name}`,
       content: (
         <div className="flex items-center gap-2">
-          <span className="grid place-items-center flex-shrink-0">
-            {projectDetails?.emoji
-              ? renderEmoji(projectDetails?.emoji)
-              : projectDetails?.icon_prop
-              ? renderEmoji(projectDetails?.icon_prop)
-              : null}
-          </span>
+          {projectDetails && (
+            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+              <ProjectLogo logo={projectDetails?.logo_props} className="text-sm" />
+            </span>
+          )}
           <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
       ),
@@ -91,7 +92,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
   });
 
   const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));
 
   const selectedProject = value ? getProjectById(value) : null;
 
@@ -169,13 +170,9 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
               showTooltip={showTooltip}
               variant={buttonVariant}
             >
-              {!hideIcon && (
-                <span className="grid place-items-center flex-shrink-0">
-                  {selectedProject?.emoji
-                    ? renderEmoji(selectedProject?.emoji)
-                    : selectedProject?.icon_prop
-                    ? renderEmoji(selectedProject?.icon_prop)
-                    : null}
+              {!hideIcon && selectedProject && (
+                <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                  <ProjectLogo logo={selectedProject.logo_props} className="text-sm" />
                 </span>
               )}
               {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
@@ -211,24 +208,27 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
               {filteredOptions ? (
                 filteredOptions.length > 0 ? (
-                  filteredOptions.map((option) => (
-                    <Combobox.Option
-                      key={option.value}
-                      value={option.value}
-                      className={({ active, selected }) =>
-                        `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                      }
-                    >
-                      {({ selected }) => (
-                        <>
-                          <span className="flex-grow truncate">{option.content}</span>
-                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                        </>
-                      )}
-                    </Combobox.Option>
-                  ))
+                  filteredOptions.map((option) => {
+                    if (!option) return;
+                    return (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+                            active ? "bg-custom-background-80" : ""
+                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            <span className="flex-grow truncate">{option.content}</span>
+                            {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    );
+                  })
                 ) : (
                   <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
                 )
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index 9fa2f38c84e..7775f39467f 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -1,22 +1,22 @@
 import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useApplication, useProjectState } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { Spinner, StateGroupIcon } from "@plane/ui";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useProjectState } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 import { DropdownButton } from "./buttons";
 // icons
-import { StateGroupIcon } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 import { TDropdownProps } from "./types";
 // constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -50,6 +50,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   // states
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
+  const [stateLoader, setStateLoader] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -74,6 +75,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   } = useApplication();
   const { fetchProjectStates, getProjectStates, getStateById } = useProjectState();
   const statesList = getProjectStates(projectId);
+  const defaultStateList = statesList?.find((state) => state.default);
+  const stateValue = value ? value : defaultStateList?.id;
 
   const options = statesList?.map((state) => ({
     value: state.id,
@@ -89,11 +92,19 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
 
-  const selectedState = getStateById(value);
+  const selectedState = stateValue ? getStateById(stateValue) : undefined;
 
-  const onOpen = () => {
-    if (!statesList && workspaceSlug) fetchProjectStates(workspaceSlug, projectId);
+  const onOpen = async () => {
+    if (!statesList && workspaceSlug) {
+      setStateLoader(true);
+      await fetchProjectStates(workspaceSlug, projectId);
+      setStateLoader(false);
+    }
   };
+  useEffect(() => {
+    if (projectId) onOpen();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
 
   const handleClose = () => {
     if (!isOpen) return;
@@ -141,7 +152,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
       ref={dropdownRef}
       tabIndex={tabIndex}
       className={cn("h-full", className)}
-      value={value}
+      value={stateValue}
       onChange={dropdownOnChange}
       disabled={disabled}
       onKeyDown={handleKeyDown}
@@ -178,18 +189,27 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
               showTooltip={showTooltip}
               variant={buttonVariant}
             >
-              {!hideIcon && (
-                <StateGroupIcon
-                  stateGroup={selectedState?.group ?? "backlog"}
-                  color={selectedState?.color}
-                  className="h-3 w-3 flex-shrink-0"
-                />
-              )}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedState?.name ?? "State"}</span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              {stateLoader ? (
+                <Spinner className="w-3.5 h-3.5" />
+              ) : (
+                <>
+                  {!hideIcon && (
+                    <StateGroupIcon
+                      stateGroup={selectedState?.group ?? "backlog"}
+                      color={selectedState?.color}
+                      className="h-3 w-3 flex-shrink-0"
+                    />
+                  )}
+                  {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+                    <span className="flex-grow truncate">{selectedState?.name ?? "State"}</span>
+                  )}
+                  {dropdownArrow && (
+                    <ChevronDown
+                      className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                      aria-hidden="true"
+                    />
+                  )}
+                </>
               )}
             </DropdownButton>
           </button>
diff --git a/web/components/emoji-icon-picker/emojis.json b/web/components/emoji-icon-picker/emojis.json
deleted file mode 100644
index 73b9b800fae..00000000000
--- a/web/components/emoji-icon-picker/emojis.json
+++ /dev/null
@@ -1,1090 +0,0 @@
-[
-  "8986",
-  "8987",
-  "9193",
-  "9194",
-  "9195",
-  "9196",
-  "9197",
-  "9198",
-  "9199",
-  "9200",
-  "9201",
-  "9202",
-  "9203",
-  "9208",
-  "9209",
-  "9210",
-  "9410",
-  "9748",
-  "9749",
-  "9757",
-  "9800",
-  "9801",
-  "9802",
-  "9803",
-  "9804",
-  "9805",
-  "9806",
-  "9807",
-  "9808",
-  "9809",
-  "9810",
-  "9811",
-  "9823",
-  "9855",
-  "9875",
-  "9889",
-  "9898",
-  "9899",
-  "9917",
-  "9918",
-  "9924",
-  "9925",
-  "9934",
-  "9935",
-  "9937",
-  "9939",
-  "9940",
-  "9961",
-  "9962",
-  "9968",
-  "9969",
-  "9970",
-  "9971",
-  "9972",
-  "9973",
-  "9975",
-  "9976",
-  "9977",
-  "9978",
-  "9981",
-  "9986",
-  "9989",
-  "9992",
-  "9993",
-  "9994",
-  "9995",
-  "9996",
-  "9997",
-  "9999",
-  "10002",
-  "10004",
-  "10006",
-  "10013",
-  "10017",
-  "10024",
-  "10035",
-  "10036",
-  "10052",
-  "10055",
-  "10060",
-  "10062",
-  "10067",
-  "10068",
-  "10069",
-  "10071",
-  "10083",
-  "10084",
-  "10133",
-  "10134",
-  "10135",
-  "10145",
-  "10160",
-  "10175",
-  "10548",
-  "10549",
-  "11013",
-  "11014",
-  "11015",
-  "11035",
-  "11036",
-  "11088",
-  "11093",
-  "12336",
-  "12349",
-  "12951",
-  "12953",
-  "126980",
-  "127183",
-  "127344",
-  "127345",
-  "127358",
-  "127359",
-  "127374",
-  "127377",
-  "127378",
-  "127379",
-  "127380",
-  "127381",
-  "127382",
-  "127383",
-  "127384",
-  "127385",
-  "127386",
-  "127489",
-  "127490",
-  "127514",
-  "127535",
-  "127538",
-  "127539",
-  "127540",
-  "127541",
-  "127542",
-  "127543",
-  "127544",
-  "127545",
-  "127546",
-  "127568",
-  "127569",
-  "127744",
-  "127745",
-  "127746",
-  "127747",
-  "127748",
-  "127749",
-  "127750",
-  "127751",
-  "127752",
-  "127753",
-  "127754",
-  "127755",
-  "127756",
-  "127757",
-  "127758",
-  "127759",
-  "127760",
-  "127761",
-  "127762",
-  "127763",
-  "127764",
-  "127765",
-  "127766",
-  "127767",
-  "127768",
-  "127769",
-  "127770",
-  "127771",
-  "127772",
-  "127773",
-  "127774",
-  "127775",
-  "127776",
-  "127777",
-  "127780",
-  "127781",
-  "127782",
-  "127783",
-  "127784",
-  "127785",
-  "127786",
-  "127787",
-  "127788",
-  "127789",
-  "127790",
-  "127791",
-  "127792",
-  "127793",
-  "127794",
-  "127795",
-  "127796",
-  "127797",
-  "127798",
-  "127799",
-  "127800",
-  "127801",
-  "127802",
-  "127803",
-  "127804",
-  "127805",
-  "127806",
-  "127807",
-  "127808",
-  "127809",
-  "127810",
-  "127811",
-  "127812",
-  "127813",
-  "127814",
-  "127815",
-  "127816",
-  "127817",
-  "127818",
-  "127819",
-  "127820",
-  "127821",
-  "127822",
-  "127823",
-  "127824",
-  "127825",
-  "127826",
-  "127827",
-  "127828",
-  "127829",
-  "127830",
-  "127831",
-  "127832",
-  "127833",
-  "127834",
-  "127835",
-  "127836",
-  "127837",
-  "127838",
-  "127839",
-  "127840",
-  "127841",
-  "127842",
-  "127843",
-  "127844",
-  "127845",
-  "127846",
-  "127847",
-  "127848",
-  "127849",
-  "127850",
-  "127851",
-  "127852",
-  "127853",
-  "127854",
-  "127855",
-  "127856",
-  "127857",
-  "127858",
-  "127859",
-  "127860",
-  "127861",
-  "127862",
-  "127863",
-  "127864",
-  "127865",
-  "127866",
-  "127867",
-  "127868",
-  "127869",
-  "127870",
-  "127871",
-  "127872",
-  "127873",
-  "127874",
-  "127875",
-  "127876",
-  "127877",
-  "127878",
-  "127879",
-  "127880",
-  "127881",
-  "127882",
-  "127883",
-  "127884",
-  "127885",
-  "127886",
-  "127887",
-  "127888",
-  "127889",
-  "127890",
-  "127891",
-  "127894",
-  "127895",
-  "127897",
-  "127898",
-  "127899",
-  "127902",
-  "127903",
-  "127904",
-  "127905",
-  "127906",
-  "127907",
-  "127908",
-  "127909",
-  "127910",
-  "127911",
-  "127912",
-  "127913",
-  "127914",
-  "127915",
-  "127916",
-  "127917",
-  "127918",
-  "127919",
-  "127920",
-  "127921",
-  "127922",
-  "127923",
-  "127924",
-  "127925",
-  "127926",
-  "127927",
-  "127928",
-  "127929",
-  "127930",
-  "127931",
-  "127932",
-  "127933",
-  "127934",
-  "127935",
-  "127936",
-  "127937",
-  "127938",
-  "127939",
-  "127940",
-  "127941",
-  "127942",
-  "127943",
-  "127944",
-  "127945",
-  "127946",
-  "127947",
-  "127948",
-  "127949",
-  "127950",
-  "127951",
-  "127952",
-  "127953",
-  "127954",
-  "127955",
-  "127956",
-  "127957",
-  "127958",
-  "127959",
-  "127960",
-  "127961",
-  "127962",
-  "127963",
-  "127964",
-  "127965",
-  "127966",
-  "127967",
-  "127968",
-  "127969",
-  "127970",
-  "127971",
-  "127972",
-  "127973",
-  "127974",
-  "127975",
-  "127976",
-  "127977",
-  "127978",
-  "127979",
-  "127980",
-  "127981",
-  "127982",
-  "127983",
-  "127984",
-  "127987",
-  "127988",
-  "127989",
-  "127991",
-  "127992",
-  "127993",
-  "127994",
-  "127995",
-  "127996",
-  "127997",
-  "127998",
-  "127999",
-  "128000",
-  "128001",
-  "128002",
-  "128003",
-  "128004",
-  "128005",
-  "128006",
-  "128007",
-  "128008",
-  "128009",
-  "128010",
-  "128011",
-  "128012",
-  "128013",
-  "128014",
-  "128015",
-  "128016",
-  "128017",
-  "128018",
-  "128019",
-  "128020",
-  "128021",
-  "128022",
-  "128023",
-  "128024",
-  "128025",
-  "128026",
-  "128027",
-  "128028",
-  "128029",
-  "128030",
-  "128031",
-  "128032",
-  "128033",
-  "128034",
-  "128035",
-  "128036",
-  "128037",
-  "128038",
-  "128039",
-  "128040",
-  "128041",
-  "128042",
-  "128043",
-  "128044",
-  "128045",
-  "128046",
-  "128047",
-  "128048",
-  "128049",
-  "128050",
-  "128051",
-  "128052",
-  "128053",
-  "128054",
-  "128055",
-  "128056",
-  "128057",
-  "128058",
-  "128059",
-  "128060",
-  "128061",
-  "128062",
-  "128063",
-  "128064",
-  "128065",
-  "128066",
-  "128067",
-  "128068",
-  "128069",
-  "128070",
-  "128071",
-  "128072",
-  "128073",
-  "128074",
-  "128075",
-  "128076",
-  "128077",
-  "128078",
-  "128079",
-  "128080",
-  "128081",
-  "128082",
-  "128083",
-  "128084",
-  "128085",
-  "128086",
-  "128087",
-  "128088",
-  "128089",
-  "128090",
-  "128091",
-  "128092",
-  "128093",
-  "128094",
-  "128095",
-  "128096",
-  "128097",
-  "128098",
-  "128099",
-  "128100",
-  "128101",
-  "128102",
-  "128103",
-  "128104",
-  "128105",
-  "128106",
-  "128107",
-  "128108",
-  "128109",
-  "128110",
-  "128111",
-  "128112",
-  "128113",
-  "128114",
-  "128115",
-  "128116",
-  "128117",
-  "128118",
-  "128119",
-  "128120",
-  "128121",
-  "128122",
-  "128123",
-  "128124",
-  "128125",
-  "128126",
-  "128127",
-  "128128",
-  "128129",
-  "128130",
-  "128131",
-  "128132",
-  "128133",
-  "128134",
-  "128135",
-  "128136",
-  "128137",
-  "128138",
-  "128139",
-  "128140",
-  "128141",
-  "128142",
-  "128143",
-  "128144",
-  "128145",
-  "128146",
-  "128147",
-  "128148",
-  "128149",
-  "128150",
-  "128151",
-  "128152",
-  "128153",
-  "128154",
-  "128155",
-  "128156",
-  "128157",
-  "128158",
-  "128159",
-  "128160",
-  "128161",
-  "128162",
-  "128163",
-  "128164",
-  "128165",
-  "128166",
-  "128167",
-  "128168",
-  "128169",
-  "128170",
-  "128171",
-  "128172",
-  "128173",
-  "128174",
-  "128175",
-  "128176",
-  "128177",
-  "128178",
-  "128179",
-  "128180",
-  "128181",
-  "128182",
-  "128183",
-  "128184",
-  "128185",
-  "128186",
-  "128187",
-  "128188",
-  "128189",
-  "128190",
-  "128191",
-  "128192",
-  "128193",
-  "128194",
-  "128195",
-  "128196",
-  "128197",
-  "128198",
-  "128199",
-  "128200",
-  "128201",
-  "128202",
-  "128203",
-  "128204",
-  "128205",
-  "128206",
-  "128207",
-  "128208",
-  "128209",
-  "128210",
-  "128211",
-  "128212",
-  "128213",
-  "128214",
-  "128215",
-  "128216",
-  "128217",
-  "128218",
-  "128219",
-  "128220",
-  "128221",
-  "128222",
-  "128223",
-  "128224",
-  "128225",
-  "128226",
-  "128227",
-  "128228",
-  "128229",
-  "128230",
-  "128231",
-  "128232",
-  "128233",
-  "128234",
-  "128235",
-  "128236",
-  "128237",
-  "128238",
-  "128239",
-  "128240",
-  "128241",
-  "128242",
-  "128243",
-  "128244",
-  "128245",
-  "128246",
-  "128247",
-  "128248",
-  "128249",
-  "128250",
-  "128251",
-  "128252",
-  "128253",
-  "128255",
-  "128256",
-  "128257",
-  "128258",
-  "128259",
-  "128260",
-  "128261",
-  "128262",
-  "128263",
-  "128264",
-  "128265",
-  "128266",
-  "128267",
-  "128268",
-  "128269",
-  "128270",
-  "128271",
-  "128272",
-  "128273",
-  "128274",
-  "128275",
-  "128276",
-  "128277",
-  "128278",
-  "128279",
-  "128280",
-  "128281",
-  "128282",
-  "128283",
-  "128284",
-  "128285",
-  "128286",
-  "128287",
-  "128288",
-  "128289",
-  "128290",
-  "128291",
-  "128292",
-  "128293",
-  "128294",
-  "128295",
-  "128296",
-  "128297",
-  "128298",
-  "128299",
-  "128300",
-  "128301",
-  "128302",
-  "128303",
-  "128304",
-  "128305",
-  "128306",
-  "128307",
-  "128308",
-  "128309",
-  "128310",
-  "128311",
-  "128312",
-  "128313",
-  "128314",
-  "128315",
-  "128316",
-  "128317",
-  "128329",
-  "128330",
-  "128331",
-  "128332",
-  "128333",
-  "128334",
-  "128336",
-  "128337",
-  "128338",
-  "128339",
-  "128340",
-  "128341",
-  "128342",
-  "128343",
-  "128344",
-  "128345",
-  "128346",
-  "128347",
-  "128348",
-  "128349",
-  "128350",
-  "128351",
-  "128352",
-  "128353",
-  "128354",
-  "128355",
-  "128356",
-  "128357",
-  "128358",
-  "128359",
-  "128367",
-  "128368",
-  "128371",
-  "128372",
-  "128373",
-  "128374",
-  "128375",
-  "128376",
-  "128377",
-  "128378",
-  "128391",
-  "128394",
-  "128395",
-  "128396",
-  "128397",
-  "128400",
-  "128405",
-  "128406",
-  "128420",
-  "128421",
-  "128424",
-  "128433",
-  "128434",
-  "128444",
-  "128450",
-  "128451",
-  "128452",
-  "128465",
-  "128466",
-  "128467",
-  "128476",
-  "128477",
-  "128478",
-  "128481",
-  "128483",
-  "128488",
-  "128495",
-  "128499",
-  "128506",
-  "128507",
-  "128508",
-  "128509",
-  "128510",
-  "128511",
-  "128512",
-  "128513",
-  "128514",
-  "128515",
-  "128516",
-  "128517",
-  "128518",
-  "128519",
-  "128520",
-  "128521",
-  "128522",
-  "128523",
-  "128524",
-  "128525",
-  "128526",
-  "128527",
-  "128528",
-  "128529",
-  "128530",
-  "128531",
-  "128532",
-  "128533",
-  "128534",
-  "128535",
-  "128536",
-  "128537",
-  "128538",
-  "128539",
-  "128540",
-  "128541",
-  "128542",
-  "128543",
-  "128544",
-  "128545",
-  "128546",
-  "128547",
-  "128548",
-  "128549",
-  "128550",
-  "128551",
-  "128552",
-  "128553",
-  "128554",
-  "128555",
-  "128556",
-  "128557",
-  "128558",
-  "128559",
-  "128560",
-  "128561",
-  "128562",
-  "128563",
-  "128564",
-  "128565",
-  "128566",
-  "128567",
-  "128568",
-  "128569",
-  "128570",
-  "128571",
-  "128572",
-  "128573",
-  "128574",
-  "128575",
-  "128576",
-  "128577",
-  "128578",
-  "128579",
-  "128580",
-  "128581",
-  "128582",
-  "128583",
-  "128584",
-  "128585",
-  "128586",
-  "128587",
-  "128588",
-  "128589",
-  "128590",
-  "128591",
-  "128640",
-  "128641",
-  "128642",
-  "128643",
-  "128644",
-  "128645",
-  "128646",
-  "128647",
-  "128648",
-  "128649",
-  "128650",
-  "128651",
-  "128652",
-  "128653",
-  "128654",
-  "128655",
-  "128656",
-  "128657",
-  "128658",
-  "128659",
-  "128660",
-  "128661",
-  "128662",
-  "128663",
-  "128664",
-  "128665",
-  "128666",
-  "128667",
-  "128668",
-  "128669",
-  "128670",
-  "128671",
-  "128672",
-  "128673",
-  "128674",
-  "128675",
-  "128676",
-  "128677",
-  "128678",
-  "128679",
-  "128680",
-  "128681",
-  "128682",
-  "128683",
-  "128684",
-  "128685",
-  "128686",
-  "128687",
-  "128688",
-  "128689",
-  "128690",
-  "128691",
-  "128692",
-  "128693",
-  "128694",
-  "128695",
-  "128696",
-  "128697",
-  "128698",
-  "128699",
-  "128700",
-  "128701",
-  "128702",
-  "128703",
-  "128704",
-  "128705",
-  "128706",
-  "128707",
-  "128708",
-  "128709",
-  "128715",
-  "128716",
-  "128717",
-  "128718",
-  "128719",
-  "128720",
-  "128721",
-  "128722",
-  "128736",
-  "128737",
-  "128738",
-  "128739",
-  "128740",
-  "128741",
-  "128745",
-  "128747",
-  "128748",
-  "128752",
-  "128755",
-  "128756",
-  "128757",
-  "128758",
-  "128759",
-  "128760",
-  "128761",
-  "128762",
-  "129296",
-  "129297",
-  "129298",
-  "129299",
-  "129300",
-  "129301",
-  "129302",
-  "129303",
-  "129304",
-  "129305",
-  "129306",
-  "129307",
-  "129308",
-  "129309",
-  "129310",
-  "129311",
-  "129312",
-  "129313",
-  "129314",
-  "129315",
-  "129316",
-  "129317",
-  "129318",
-  "129319",
-  "129320",
-  "129321",
-  "129322",
-  "129323",
-  "129324",
-  "129325",
-  "129326",
-  "129327",
-  "129328",
-  "129329",
-  "129330",
-  "129331",
-  "129332",
-  "129333",
-  "129334",
-  "129335",
-  "129336",
-  "129337",
-  "129338",
-  "129340",
-  "129341",
-  "129342",
-  "129344",
-  "129345",
-  "129346",
-  "129347",
-  "129348",
-  "129349",
-  "129351",
-  "129352",
-  "129353",
-  "129354",
-  "129355",
-  "129356",
-  "129357",
-  "129358",
-  "129359",
-  "129360",
-  "129361",
-  "129362",
-  "129363",
-  "129364",
-  "129365",
-  "129366",
-  "129367",
-  "129368",
-  "129369",
-  "129370",
-  "129371",
-  "129372",
-  "129373",
-  "129374",
-  "129375",
-  "129376",
-  "129377",
-  "129378",
-  "129379",
-  "129380",
-  "129381",
-  "129382",
-  "129383",
-  "129384",
-  "129385",
-  "129386",
-  "129387",
-  "129408",
-  "129409",
-  "129410",
-  "129411",
-  "129412",
-  "129413",
-  "129414",
-  "129415",
-  "129416",
-  "129417",
-  "129418",
-  "129419",
-  "129420",
-  "129421",
-  "129422",
-  "129423",
-  "129424",
-  "129425",
-  "129426",
-  "129427",
-  "129428",
-  "129429",
-  "129430",
-  "129431",
-  "129472",
-  "129488",
-  "129489",
-  "129490",
-  "129491",
-  "129492",
-  "129493",
-  "129494",
-  "129495",
-  "129496",
-  "129497",
-  "129498",
-  "129499",
-  "129500",
-  "129501",
-  "129502",
-  "129503",
-  "129504",
-  "129505",
-  "129506",
-  "129507",
-  "129508",
-  "129509",
-  "129510"
-]
diff --git a/web/components/emoji-icon-picker/helpers.ts b/web/components/emoji-icon-picker/helpers.ts
deleted file mode 100644
index ab59a7b0763..00000000000
--- a/web/components/emoji-icon-picker/helpers.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export const saveRecentEmoji = (emoji: string) => {
-  const recentEmojis = localStorage.getItem("recentEmojis");
-  if (recentEmojis) {
-    const recentEmojisArray = recentEmojis.split(",");
-    if (recentEmojisArray.includes(emoji)) {
-      const index = recentEmojisArray.indexOf(emoji);
-      recentEmojisArray.splice(index, 1);
-    }
-    recentEmojisArray.unshift(emoji);
-    if (recentEmojisArray.length > 18) {
-      recentEmojisArray.pop();
-    }
-    localStorage.setItem("recentEmojis", recentEmojisArray.join(","));
-  } else {
-    localStorage.setItem("recentEmojis", emoji);
-  }
-};
-
-export const getRecentEmojis = () => {
-  const recentEmojis = localStorage.getItem("recentEmojis");
-  if (recentEmojis) {
-    const recentEmojisArray = recentEmojis.split(",");
-    return recentEmojisArray;
-  }
-  return [];
-};
diff --git a/web/components/emoji-icon-picker/icons.json b/web/components/emoji-icon-picker/icons.json
deleted file mode 100644
index f844f22d451..00000000000
--- a/web/components/emoji-icon-picker/icons.json
+++ /dev/null
@@ -1,607 +0,0 @@
-{
-  "material_rounded": [
-    {
-      "name": "search"
-    },
-    {
-      "name": "home"
-    },
-    {
-      "name": "menu"
-    },
-    {
-      "name": "close"
-    },
-    {
-      "name": "settings"
-    },
-    {
-      "name": "done"
-    },
-    {
-      "name": "check_circle"
-    },
-    {
-      "name": "favorite"
-    },
-    {
-      "name": "add"
-    },
-    {
-      "name": "delete"
-    },
-    {
-      "name": "arrow_back"
-    },
-    {
-      "name": "star"
-    },
-    {
-      "name": "logout"
-    },
-    {
-      "name": "add_circle"
-    },
-    {
-      "name": "cancel"
-    },
-    {
-      "name": "arrow_drop_down"
-    },
-    {
-      "name": "more_vert"
-    },
-    {
-      "name": "check"
-    },
-    {
-      "name": "check_box"
-    },
-    {
-      "name": "toggle_on"
-    },
-    {
-      "name": "open_in_new"
-    },
-    {
-      "name": "refresh"
-    },
-    {
-      "name": "login"
-    },
-    {
-      "name": "radio_button_unchecked"
-    },
-    {
-      "name": "more_horiz"
-    },
-    {
-      "name": "apps"
-    },
-    {
-      "name": "radio_button_checked"
-    },
-    {
-      "name": "download"
-    },
-    {
-      "name": "remove"
-    },
-    {
-      "name": "toggle_off"
-    },
-    {
-      "name": "bolt"
-    },
-    {
-      "name": "arrow_upward"
-    },
-    {
-      "name": "filter_list"
-    },
-    {
-      "name": "delete_forever"
-    },
-    {
-      "name": "autorenew"
-    },
-    {
-      "name": "key"
-    },
-    {
-      "name": "sort"
-    },
-    {
-      "name": "sync"
-    },
-    {
-      "name": "add_box"
-    },
-    {
-      "name": "block"
-    },
-    {
-      "name": "restart_alt"
-    },
-    {
-      "name": "menu_open"
-    },
-    {
-      "name": "shopping_cart_checkout"
-    },
-    {
-      "name": "expand_circle_down"
-    },
-    {
-      "name": "backspace"
-    },
-    {
-      "name": "undo"
-    },
-    {
-      "name": "done_all"
-    },
-    {
-      "name": "do_not_disturb_on"
-    },
-    {
-      "name": "open_in_full"
-    },
-    {
-      "name": "double_arrow"
-    },
-    {
-      "name": "sync_alt"
-    },
-    {
-      "name": "zoom_in"
-    },
-    {
-      "name": "done_outline"
-    },
-    {
-      "name": "drag_indicator"
-    },
-    {
-      "name": "fullscreen"
-    },
-    {
-      "name": "star_half"
-    },
-    {
-      "name": "settings_accessibility"
-    },
-    {
-      "name": "reply"
-    },
-    {
-      "name": "exit_to_app"
-    },
-    {
-      "name": "unfold_more"
-    },
-    {
-      "name": "library_add"
-    },
-    {
-      "name": "cached"
-    },
-    {
-      "name": "select_check_box"
-    },
-    {
-      "name": "terminal"
-    },
-    {
-      "name": "change_circle"
-    },
-    {
-      "name": "disabled_by_default"
-    },
-    {
-      "name": "swap_horiz"
-    },
-    {
-      "name": "swap_vert"
-    },
-    {
-      "name": "app_registration"
-    },
-    {
-      "name": "download_for_offline"
-    },
-    {
-      "name": "close_fullscreen"
-    },
-    {
-      "name": "file_open"
-    },
-    {
-      "name": "minimize"
-    },
-    {
-      "name": "open_with"
-    },
-    {
-      "name": "dataset"
-    },
-    {
-      "name": "add_task"
-    },
-    {
-      "name": "start"
-    },
-    {
-      "name": "keyboard_voice"
-    },
-    {
-      "name": "create_new_folder"
-    },
-    {
-      "name": "forward"
-    },
-    {
-      "name": "download"
-    },
-    {
-      "name": "settings_applications"
-    },
-    {
-      "name": "compare_arrows"
-    },
-    {
-      "name": "redo"
-    },
-    {
-      "name": "zoom_out"
-    },
-    {
-      "name": "publish"
-    },
-    {
-      "name": "html"
-    },
-    {
-      "name": "token"
-    },
-    {
-      "name": "switch_access_shortcut"
-    },
-    {
-      "name": "fullscreen_exit"
-    },
-    {
-      "name": "sort_by_alpha"
-    },
-    {
-      "name": "delete_sweep"
-    },
-    {
-      "name": "indeterminate_check_box"
-    },
-    {
-      "name": "view_timeline"
-    },
-    {
-      "name": "settings_backup_restore"
-    },
-    {
-      "name": "arrow_drop_down_circle"
-    },
-    {
-      "name": "assistant_navigation"
-    },
-    {
-      "name": "sync_problem"
-    },
-    {
-      "name": "clear_all"
-    },
-    {
-      "name": "density_medium"
-    },
-    {
-      "name": "heart_plus"
-    },
-    {
-      "name": "filter_alt_off"
-    },
-    {
-      "name": "expand"
-    },
-    {
-      "name": "subdirectory_arrow_right"
-    },
-    {
-      "name": "download_done"
-    },
-    {
-      "name": "arrow_outward"
-    },
-    {
-      "name": "123"
-    },
-    {
-      "name": "swipe_left"
-    },
-    {
-      "name": "auto_mode"
-    },
-    {
-      "name": "saved_search"
-    },
-    {
-      "name": "place_item"
-    },
-    {
-      "name": "system_update_alt"
-    },
-    {
-      "name": "javascript"
-    },
-    {
-      "name": "search_off"
-    },
-    {
-      "name": "output"
-    },
-    {
-      "name": "select_all"
-    },
-    {
-      "name": "fit_screen"
-    },
-    {
-      "name": "swipe_up"
-    },
-    {
-      "name": "dynamic_form"
-    },
-    {
-      "name": "hide_source"
-    },
-    {
-      "name": "swipe_right"
-    },
-    {
-      "name": "switch_access_shortcut_add"
-    },
-    {
-      "name": "browse_gallery"
-    },
-    {
-      "name": "css"
-    },
-    {
-      "name": "density_small"
-    },
-    {
-      "name": "assistant_direction"
-    },
-    {
-      "name": "check_small"
-    },
-    {
-      "name": "youtube_searched_for"
-    },
-    {
-      "name": "move_up"
-    },
-    {
-      "name": "swap_horizontal_circle"
-    },
-    {
-      "name": "data_thresholding"
-    },
-    {
-      "name": "install_mobile"
-    },
-    {
-      "name": "move_down"
-    },
-    {
-      "name": "dataset_linked"
-    },
-    {
-      "name": "keyboard_command_key"
-    },
-    {
-      "name": "view_kanban"
-    },
-    {
-      "name": "swipe_down"
-    },
-    {
-      "name": "key_off"
-    },
-    {
-      "name": "transcribe"
-    },
-    {
-      "name": "send_time_extension"
-    },
-    {
-      "name": "swipe_down_alt"
-    },
-    {
-      "name": "swipe_left_alt"
-    },
-    {
-      "name": "swipe_right_alt"
-    },
-    {
-      "name": "swipe_up_alt"
-    },
-    {
-      "name": "keyboard_option_key"
-    },
-    {
-      "name": "cycle"
-    },
-    {
-      "name": "rebase"
-    },
-    {
-      "name": "rebase_edit"
-    },
-    {
-      "name": "empty_dashboard"
-    },
-    {
-      "name": "magic_exchange"
-    },
-    {
-      "name": "acute"
-    },
-    {
-      "name": "point_scan"
-    },
-    {
-      "name": "step_into"
-    },
-    {
-      "name": "cheer"
-    },
-    {
-      "name": "emoticon"
-    },
-    {
-      "name": "explosion"
-    },
-    {
-      "name": "water_bottle"
-    },
-    {
-      "name": "weather_hail"
-    },
-    {
-      "name": "syringe"
-    },
-    {
-      "name": "pill"
-    },
-    {
-      "name": "genetics"
-    },
-    {
-      "name": "allergy"
-    },
-    {
-      "name": "medical_mask"
-    },
-    {
-      "name": "body_fat"
-    },
-    {
-      "name": "barefoot"
-    },
-    {
-      "name": "infrared"
-    },
-    {
-      "name": "wrist"
-    },
-    {
-      "name": "metabolism"
-    },
-    {
-      "name": "conditions"
-    },
-    {
-      "name": "taunt"
-    },
-    {
-      "name": "altitude"
-    },
-    {
-      "name": "tibia"
-    },
-    {
-      "name": "footprint"
-    },
-    {
-      "name": "eyeglasses"
-    },
-    {
-      "name": "man_3"
-    },
-    {
-      "name": "woman_2"
-    },
-    {
-      "name": "rheumatology"
-    },
-    {
-      "name": "tornado"
-    },
-    {
-      "name": "landslide"
-    },
-    {
-      "name": "foggy"
-    },
-    {
-      "name": "severe_cold"
-    },
-    {
-      "name": "tsunami"
-    },
-    {
-      "name": "vape_free"
-    },
-    {
-      "name": "sign_language"
-    },
-    {
-      "name": "emoji_symbols"
-    },
-    {
-      "name": "clear_night"
-    },
-    {
-      "name": "emoji_food_beverage"
-    },
-    {
-      "name": "hive"
-    },
-    {
-      "name": "thunderstorm"
-    },
-    {
-      "name": "communication"
-    },
-    {
-      "name": "rocket"
-    },
-    {
-      "name": "pets"
-    },
-    {
-      "name": "public"
-    },
-    {
-      "name": "quiz"
-    },
-    {
-      "name": "mood"
-    },
-    {
-      "name": "gavel"
-    },
-    {
-      "name": "eco"
-    },
-    {
-      "name": "diamond"
-    },
-    {
-      "name": "forest"
-    },
-    {
-      "name": "rainy"
-    },
-    {
-      "name": "skull"
-    }
-  ]
-}
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
deleted file mode 100644
index 57d5d889672..00000000000
--- a/web/components/emoji-icon-picker/index.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-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 flex items-center justify-center"
-        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">Recent</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 left-4 top-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="ml-1 mt-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
deleted file mode 100644
index 8a0b54342dd..00000000000
--- a/web/components/emoji-icon-picker/types.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type Props = {
-  label: React.ReactNode;
-  value: any;
-  onChange: (
-    data:
-      | string
-      | {
-          name: string;
-          color: string;
-        }
-  ) => void;
-  onIconColorChange?: (data: any) => void;
-  disabled?: boolean;
-  tabIndex?: number;
-};
diff --git a/web/components/empty-state/comic-box-button.tsx b/web/components/empty-state/comic-box-button.tsx
index 607d74a9171..0bf546a2f08 100644
--- a/web/components/empty-state/comic-box-button.tsx
+++ b/web/components/empty-state/comic-box-button.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
+import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
 // popper
-import { usePopper } from "react-popper";
 // helper
 import { getButtonStyling } from "@plane/ui";
 
diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
index 4a5aeca0291..790bd5aeccd 100644
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@@ -1,119 +1,176 @@
 import React from "react";
 import Image from "next/image";
+import Link from "next/link";
+
+import { useTheme } from "next-themes";
+// hooks
 // components
+import { Button, TButtonVariant } from "@plane/ui";
+// constant
+import { EMPTY_STATE_DETAILS, EmptyStateType } from "@/constants/empty-state";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { useUser } from "@/hooks/store";
 import { ComicBoxButton } from "./comic-box-button";
-// ui
-import { Button, getButtonStyling } from "@plane/ui";
-// helper
-import { cn } from "helpers/common.helper";
 
-type Props = {
-  title: string;
-  description?: string;
-  image: any;
-  primaryButton?: {
-    icon?: any;
-    text: string;
-    onClick: () => void;
-  };
-  secondaryButton?: {
-    icon?: any;
-    text: string;
-    onClick: () => void;
-  };
-  comicBox?: {
-    title: string;
-    description: string;
-  };
-  size?: "sm" | "lg";
-  disabled?: boolean;
+export type EmptyStateProps = {
+  type: EmptyStateType;
+  size?: "sm" | "md" | "lg";
+  layout?: "screen-detailed" | "screen-simple";
+  additionalPath?: string;
+  primaryButtonOnClick?: () => void;
+  primaryButtonLink?: string;
+  secondaryButtonOnClick?: () => void;
 };
 
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  comicBox,
-  size = "sm",
-  disabled = false,
-}) => {
-  const emptyStateHeader = (
-    <>
-      {description ? (
-        <>
-          <h3 className="text-xl font-semibold">{title}</h3>
-          <p className="text-sm">{description}</p>
-        </>
-      ) : (
-        <h3 className="text-xl font-medium">{title}</h3>
-      )}
-    </>
-  );
+export const EmptyState: React.FC<EmptyStateProps> = (props) => {
+  const {
+    type,
+    size = "lg",
+    layout = "screen-detailed",
+    additionalPath = "",
+    primaryButtonOnClick,
+    primaryButtonLink,
+    secondaryButtonOnClick,
+  } = props;
+  // store
+  const {
+    membership: { currentWorkspaceRole, currentProjectRole },
+  } = useUser();
+  // theme
+  const { resolvedTheme } = useTheme();
 
-  const secondaryButtonElement = secondaryButton && (
-    <Button
-      size={size === "sm" ? "md" : "lg"}
-      variant="neutral-primary"
-      prependIcon={secondaryButton.icon}
-      onClick={secondaryButton.onClick}
-      disabled={disabled}
-    >
-      {secondaryButton.text}
-    </Button>
-  );
+  // if empty state type is not found
+  if (!EMPTY_STATE_DETAILS[type]) return null;
 
-  return (
-    <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5">
-      <div
-        className={cn("flex flex-col gap-5", {
-          "md:min-w-[24rem] max-w-[45rem]": size === "sm",
-          "md:min-w-[30rem] max-w-[60rem]": size === "lg",
-        })}
-      >
-        <div className="flex flex-col gap-1.5 flex-shrink">{emptyStateHeader}</div>
+  // current empty state details
+  const { key, title, description, path, primaryButton, secondaryButton, accessType, access } =
+    EMPTY_STATE_DETAILS[type];
+  // resolved empty state path
+  const resolvedEmptyStatePath = `${additionalPath && additionalPath !== "" ? `${path}${additionalPath}` : path}-${
+    resolvedTheme === "light" ? "light" : "dark"
+  }.webp`;
+  // current access type
+  const currentAccessType = accessType === "workspace" ? currentWorkspaceRole : currentProjectRole;
+  // permission
+  const isEditingAllowed = currentAccessType && access && currentAccessType >= access;
+  const anyButton = primaryButton || secondaryButton;
+
+  // primary button
+  const renderPrimaryButton = () => {
+    if (!primaryButton) return null;
+
+    const commonProps = {
+      size: size,
+      variant: "primary" as TButtonVariant,
+      prependIcon: primaryButton.icon,
+      onClick: primaryButtonOnClick ? primaryButtonOnClick : undefined,
+      disabled: !isEditingAllowed,
+    };
 
-        <Image
-          src={image}
-          alt={primaryButton?.text || "button image"}
-          width={384}
-          height={250}
-          layout="responsive"
-          lazyBoundary="100%"
+    if (primaryButton.comicBox) {
+      return (
+        <ComicBoxButton
+          label={primaryButton.text}
+          icon={primaryButton.icon}
+          title={primaryButton.comicBox?.title}
+          description={primaryButton.comicBox?.description}
+          onClick={primaryButtonOnClick}
+          disabled={!isEditingAllowed}
         />
+      );
+    } else if (primaryButtonLink) {
+      return (
+        <Link href={primaryButtonLink}>
+          <Button {...commonProps}>{primaryButton.text}</Button>
+        </Link>
+      );
+    } else {
+      return <Button {...commonProps}>{primaryButton.text}</Button>;
+    }
+  };
+  // secondary button
+  const renderSecondaryButton = () => {
+    if (!secondaryButton) return null;
+
+    return (
+      <Button
+        size={size}
+        variant="neutral-primary"
+        prependIcon={secondaryButton.icon}
+        onClick={secondaryButtonOnClick}
+        disabled={!isEditingAllowed}
+      >
+        {secondaryButton.text}
+      </Button>
+    );
+  };
+
+  return (
+    <>
+      {layout === "screen-detailed" && (
+        <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5">
+          <div
+            className={cn("flex flex-col gap-5", {
+              "md:min-w-[24rem] max-w-[45rem]": size === "sm",
+              "md:min-w-[30rem] max-w-[60rem]": size === "lg",
+            })}
+          >
+            <div className="flex flex-col gap-1.5 flex-shrink">
+              {description ? (
+                <>
+                  <h3 className="text-xl font-semibold">{title}</h3>
+                  <p className="text-sm">{description}</p>
+                </>
+              ) : (
+                <h3 className="text-xl font-medium">{title}</h3>
+              )}
+            </div>
 
-        <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
-          {primaryButton && (
+            {path && (
+              <Image
+                src={resolvedEmptyStatePath}
+                alt={key || "button image"}
+                width={384}
+                height={250}
+                layout="responsive"
+                lazyBoundary="100%"
+              />
+            )}
+
+            {anyButton && (
+              <>
+                <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
+                  {renderPrimaryButton()}
+                  {renderSecondaryButton()}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+      {layout === "screen-simple" && (
+        <div className="text-center flex flex-col gap-2.5 items-center">
+          <div className={`${size === "sm" ? "h-24 w-24" : "h-28 w-28"}`}>
+            <Image
+              src={resolvedEmptyStatePath}
+              alt={key || "button image"}
+              width={size === "sm" ? 78 : 96}
+              height={size === "sm" ? 78 : 96}
+              layout="responsive"
+              lazyBoundary="100%"
+            />
+          </div>
+          {description ? (
             <>
-              <div className="relative flex items-start justify-center">
-                {comicBox ? (
-                  <ComicBoxButton
-                    label={primaryButton.text}
-                    icon={primaryButton.icon}
-                    title={comicBox?.title}
-                    description={comicBox?.description}
-                    onClick={() => primaryButton.onClick()}
-                    disabled={disabled}
-                  />
-                ) : (
-                  <div
-                    className={`flex items-center gap-2.5 ${
-                      disabled ? "cursor-not-allowed" : "cursor-pointer"
-                    } ${getButtonStyling("primary", "lg", disabled)}`}
-                    onClick={() => primaryButton.onClick()}
-                  >
-                    {primaryButton.icon}
-                    <span className="leading-4">{primaryButton.text}</span>
-                  </div>
-                )}
-              </div>
+              <h3 className="text-lg font-medium text-custom-text-300 whitespace-pre-line">{title}</h3>
+              <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>
             </>
+          ) : (
+            <h3 className="text-sm font-medium text-custom-text-400 whitespace-pre-line">{title}</h3>
           )}
-
-          {secondaryButton && secondaryButtonElement}
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index 0a607e88db1..4bb495d85ee 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -1,17 +1,16 @@
 import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
+import { IEstimate, IEstimateFormData } from "@plane/types";
 // store hooks
-import { useEstimate } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
+import { checkDuplicates } from "@/helpers/array.helper";
+import { useEstimate } from "@/hooks/store";
 // ui
-import { Button, Input, TextArea } from "@plane/ui";
 // helpers
-import { checkDuplicates } from "helpers/array.helper";
 // types
-import { IEstimate, IEstimateFormData } from "@plane/types";
 
 type Props = {
   isOpen: boolean;
@@ -40,8 +39,6 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { createEstimate, updateEstimate } = useEstimate();
   // form info
-  // toast alert
-  const { setToastAlert } = useToast();
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
@@ -67,8 +64,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
         const error = err?.error;
         const errorString = Array.isArray(error) ? error[0] : error;
 
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message:
             errorString ?? err.status === 400
@@ -89,8 +86,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
         const error = err?.error;
         const errorString = Array.isArray(error) ? error[0] : error;
 
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: errorString ?? "Estimate could not be updated. Please try again.",
         });
@@ -99,8 +96,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
 
   const onSubmit = async (formData: FormValues) => {
     if (!formData.name || formData.name === "") {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Estimate title cannot be empty.",
       });
@@ -115,8 +112,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
       formData.value5 === "" ||
       formData.value6 === ""
     ) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Estimate point cannot be empty.",
       });
@@ -131,8 +128,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
       formData.value5.length > 20 ||
       formData.value6.length > 20
     ) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Estimate point cannot have more than 20 characters.",
       });
@@ -149,8 +146,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
         formData.value6,
       ])
     ) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Estimate points cannot have duplicate values.",
       });
@@ -272,7 +269,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
                         {Array(6)
                           .fill(0)
                           .map((_, i) => (
-                            <div className="flex items-center">
+                            <div className="flex items-center" key={i}>
                               <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">
@@ -315,8 +312,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
                             ? "Updating Estimate..."
                             : "Update Estimate"
                           : isSubmitting
-                          ? "Creating Estimate..."
-                          : "Create Estimate"}
+                            ? "Creating Estimate..."
+                            : "Create Estimate"}
                       </Button>
                     </div>
                   </form>
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index 8055ddb90d0..70ccb6a3b03 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -1,15 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import { IEstimate } from "@plane/types";
 // store hooks
-import { useEstimate } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { useEstimate } from "@/hooks/store";
 // types
-import { IEstimate } from "@plane/types";
 // ui
-import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -26,12 +25,11 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { deleteEstimate } = useEstimate();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleEstimateDelete = () => {
     if (!workspaceSlug || !projectId) return;
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
     const estimateId = data?.id!;
 
     deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId)
@@ -43,8 +41,8 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
         const error = err?.error;
         const errorString = Array.isArray(error) ? error[0] : error;
 
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: errorString ?? "Estimate could not be deleted. Please try again",
         });
diff --git a/web/components/estimates/estimate-list-item.tsx b/web/components/estimates/estimate-list-item.tsx
index b6effa71183..48cd3e5b7ad 100644
--- a/web/components/estimates/estimate-list-item.tsx
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -1,17 +1,16 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Pencil, Trash2 } from "lucide-react";
+import { IEstimate } from "@plane/types";
+import { Button, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { orderArrayBy } from "@/helpers/array.helper";
+import { useProject } from "@/hooks/store";
 // 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 "@plane/types";
 
 type Props = {
   estimate: IEstimate;
@@ -26,8 +25,6 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { currentProjectDetails, updateProject } = useProject();
-  // hooks
-  const { setToastAlert } = useToast();
 
   const handleUseEstimate = async () => {
     if (!workspaceSlug || !projectId) return;
@@ -38,8 +35,8 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
       const error = err?.error;
       const errorString = Array.isArray(error) ? error[0] : error;
 
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: errorString ?? "Estimate points could not be used. Please try again.",
       });
diff --git a/web/components/estimates/estimates-list.tsx b/web/components/estimates/estimates-list.tsx
index 1dabc618148..705dcbf88f6 100644
--- a/web/components/estimates/estimates-list.tsx
+++ b/web/components/estimates/estimates-list.tsx
@@ -1,21 +1,19 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
+import { IEstimate } from "@plane/types";
 // store hooks
-import { useEstimate, useProject, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "@/components/estimates";
+import { EmptyStateType } from "@/constants/empty-state";
+import { orderArrayBy } from "@/helpers/array.helper";
+import { useEstimate, useProject } from "@/hooks/store";
 // components
-import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button, Loader } from "@plane/ui";
 // types
-import { IEstimate } from "@plane/types";
 // helpers
-import { orderArrayBy } from "helpers/array.helper";
 // constants
-import { PROJECT_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 export const EstimatesList: React.FC = observer(() => {
   // states
@@ -25,14 +23,9 @@ export const EstimatesList: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { updateProject, currentProjectDetails } = useProject();
   const { projectEstimates, getProjectEstimateById } = useEstimate();
-  const { currentUser } = useUser();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const editEstimate = (estimate: IEstimate) => {
     setEstimateFormOpen(true);
@@ -50,18 +43,14 @@ export const EstimatesList: React.FC = observer(() => {
       const error = err?.error;
       const errorString = Array.isArray(error) ? error[0] : error;
 
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: errorString ?? "Estimate could not be disabled. Please try again",
       });
     });
   };
 
-  const emptyStateDetail = PROJECT_SETTINGS_EMPTY_STATE_DETAILS["estimate"];
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("project-settings", "estimates", isLightMode);
-
   return (
     <>
       <CreateUpdateEstimateModal
@@ -116,12 +105,7 @@ export const EstimatesList: React.FC = observer(() => {
           </section>
         ) : (
           <div className="h-full w-full py-8">
-            <EmptyState
-              title={emptyStateDetail.title}
-              description={emptyStateDetail.description}
-              image={emptyStateImage}
-              size="lg"
-            />
+            <EmptyState type={EmptyStateType.PROJECT_SETTINGS_ESTIMATE} />
           </div>
         )
       ) : (
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index b1f5297754c..ea712d63402 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
+import { IUser, IImporterService } from "@plane/types";
 // hooks
-import { useProject } from "hooks/store";
+import { Button, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { useProject } from "@/hooks/store";
 // services
-import { ProjectExportService } from "services/project";
-// hooks
-import useToast from "hooks/use-toast";
+import { ProjectExportService } from "@/services/project";
 // ui
-import { Button, CustomSearchSelect } from "@plane/ui";
 // types
-import { IUser, IImporterService } from "@plane/types";
 
 type Props = {
   isOpen: boolean;
@@ -34,8 +33,6 @@ export const Exporter: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { workspaceProjectIds, getProjectById } = useProject();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const options = workspaceProjectIds?.map((projectId) => {
     const projectDetails = getProjectById(projectId);
@@ -71,8 +68,8 @@ export const Exporter: React.FC<Props> = observer((props) => {
           mutateServices();
           router.push(`/${workspaceSlug}/settings/exports`);
           setExportLoading(false);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Export Successful",
             message: `You will be able to download the exported ${
               provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""
@@ -81,8 +78,8 @@ export const Exporter: React.FC<Props> = observer((props) => {
         })
         .catch(() => {
           setExportLoading(false);
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Export was unsuccessful. Please try again.",
           });
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index ed6a392207d..41ecf77f49a 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -1,30 +1,27 @@
 import { useState } from "react";
 
-import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
 import useSWR, { mutate } from "swr";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
-import useUserAuth from "hooks/use-user-auth";
+import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
+import { Button } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+import { Exporter, SingleExport } from "@/components/exporter";
+import { ImportExportSettingsLoader } from "@/components/ui";
+import { EmptyStateType } from "@/constants/empty-state";
+import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
+import { EXPORTERS_LIST } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
+import useUserAuth from "@/hooks/use-user-auth";
 // services
-import { IntegrationService } from "services/integrations";
+import { IntegrationService } from "@/services/integrations";
 // components
-import { Exporter, SingleExport } from "components/exporter";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button } from "@plane/ui";
-import { ImportExportSettingsLoader } from "components/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";
-
-import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 // services
 const integrationService = new IntegrationService();
@@ -37,8 +34,6 @@ const IntegrationGuide = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, provider } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { currentUser, currentUserLoader } = useUser();
   // custom hooks
@@ -51,10 +46,6 @@ const IntegrationGuide = observer(() => {
       : null
   );
 
-  const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["export"];
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("workspace-settings", "exports", isLightMode);
-
   const handleCsvClose = () => {
     router.replace(`/${workspaceSlug?.toString()}/settings/exports`);
   };
@@ -150,12 +141,7 @@ const IntegrationGuide = observer(() => {
                   </div>
                 ) : (
                   <div className="h-full w-full flex items-center justify-center">
-                    <EmptyState
-                      title={emptyStateDetail.title}
-                      description={emptyStateDetail.description}
-                      image={emptyStateImage}
-                      size="sm"
-                    />
+                    <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_EXPORT} size="sm" />
                   </div>
                 )
               ) : (
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 34e41fc3585..336e17f2394 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -1,10 +1,10 @@
 import { useState, FC } from "react";
 // ui
+import { IExportData } from "@plane/types";
 import { Button } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
 // types
-import { IExportData } from "@plane/types";
 
 type Props = {
   service: IExportData;
@@ -18,7 +18,8 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
 
   const checkExpiry = (inputDateString: string) => {
     const currentDate = new Date();
-    const expiryDate = new Date(inputDateString);
+    const expiryDate = getDate(inputDateString);
+    if (!expiryDate) return false;
     expiryDate.setDate(expiryDate.getDate() + 7);
     return expiryDate > currentDate;
   };
@@ -38,12 +39,12 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
               service.status === "completed"
                 ? "bg-green-500/20 text-green-500"
                 : service.status === "processing"
-                ? "bg-yellow-500/20 text-yellow-500"
-                : service.status === "failed"
-                ? "bg-red-500/20 text-red-500"
-                : service.status === "expired"
-                ? "bg-orange-500/20 text-orange-500"
-                : ""
+                  ? "bg-yellow-500/20 text-yellow-500"
+                  : service.status === "failed"
+                    ? "bg-red-500/20 text-red-500"
+                    : service.status === "expired"
+                      ? "bg-orange-500/20 text-orange-500"
+                      : ""
             }`}
           >
             {refreshing ? "Refreshing..." : service.status}
diff --git a/web/components/gantt-chart/blocks/block.tsx b/web/components/gantt-chart/blocks/block.tsx
index 1e0882aeec2..e0e464cf09a 100644
--- a/web/components/gantt-chart/blocks/block.tsx
+++ b/web/components/gantt-chart/blocks/block.tsx
@@ -1,16 +1,16 @@
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "../hooks";
-import { useIssueDetail } from "hooks/store";
 // components
-import { ChartAddBlock, ChartDraggable } from "../helpers";
 // helpers
-import { cn } from "helpers/common.helper";
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "@/helpers/common.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { useIssueDetail } from "@/hooks/store";
 // types
-import { IBlockUpdateData, IGanttBlock } from "../types";
 // constants
 import { BLOCK_HEIGHT } from "../constants";
+import { ChartAddBlock, ChartDraggable } from "../helpers";
+import { useGanttChart } from "../hooks";
+import { IBlockUpdateData, IGanttBlock } from "../types";
 
 type Props = {
   block: IGanttBlock;
@@ -45,12 +45,12 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
     totalBlockShifts: number,
     dragDirection: "left" | "right" | "move"
   ) => {
-    if (!block.start_date || !block.target_date) return;
+    const originalStartDate = getDate(block.start_date);
+    const originalTargetDate = getDate(block.target_date);
 
-    const originalStartDate = new Date(block.start_date);
-    const updatedStartDate = new Date(originalStartDate);
+    if (!originalStartDate || !originalTargetDate) return;
 
-    const originalTargetDate = new Date(block.target_date);
+    const updatedStartDate = new Date(originalStartDate);
     const updatedTargetDate = new Date(originalTargetDate);
 
     // update the start date on left resize
diff --git a/web/components/gantt-chart/blocks/blocks-list.tsx b/web/components/gantt-chart/blocks/blocks-list.tsx
index d98524ecc40..8eb1d877252 100644
--- a/web/components/gantt-chart/blocks/blocks-list.tsx
+++ b/web/components/gantt-chart/blocks/blocks-list.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react";
 // components
+import { HEADER_HEIGHT } from "../constants";
+import { IBlockUpdateData, IGanttBlock } from "../types";
 import { GanttChartBlock } from "./block";
 // types
-import { IBlockUpdateData, IGanttBlock } from "../types";
 // constants
-import { HEADER_HEIGHT } from "../constants";
 
 export type GanttChartBlocksProps = {
   itemsContainerWidth: number;
@@ -47,6 +47,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
 
         return (
           <GanttChartBlock
+            key={block.id}
             block={block}
             blockToRender={blockToRender}
             blockUpdateHandler={blockUpdateHandler}
diff --git a/web/components/gantt-chart/chart/header.tsx b/web/components/gantt-chart/chart/header.tsx
index 2ebd0360d17..e2722b22ae8 100644
--- a/web/components/gantt-chart/chart/header.tsx
+++ b/web/components/gantt-chart/chart/header.tsx
@@ -1,13 +1,13 @@
+import { observer } from "mobx-react";
 import { Expand, Shrink } from "lucide-react";
 // hooks
 // helpers
-import { cn } from "helpers/common.helper";
+import { VIEWS_LIST } from "@/components/gantt-chart/data";
+import { cn } from "@/helpers/common.helper";
 // types
+import { useGanttChart } from "../hooks/use-gantt-chart";
 import { IGanttBlock, TGanttViews } from "../types";
 // constants
-import { VIEWS_LIST } from "components/gantt-chart/data";
-import { useGanttChart } from "../hooks/use-gantt-chart";
-import { observer } from "mobx-react";
 
 type Props = {
   blocks: IGanttBlock[] | null;
@@ -25,7 +25,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
   const { currentView } = useGanttChart();
 
   return (
-    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2 z-10">
+    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
       <div className="flex items-center gap-2 text-lg font-medium">{title}</div>
       <div className="ml-auto">
         <div className="ml-auto text-sm font-medium">{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}</div>
diff --git a/web/components/gantt-chart/chart/main-content.tsx b/web/components/gantt-chart/chart/main-content.tsx
index 8a1c5de266d..99ea6c94e9a 100644
--- a/web/components/gantt-chart/chart/main-content.tsx
+++ b/web/components/gantt-chart/chart/main-content.tsx
@@ -1,7 +1,6 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "../hooks/use-gantt-chart";
 // components
 import {
   BiWeekChartView,
@@ -16,9 +15,10 @@ import {
   TGanttViews,
   WeekChartView,
   YearChartView,
-} from "components/gantt-chart";
+} from "@/components/gantt-chart";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+import { useGanttChart } from "../hooks/use-gantt-chart";
 
 type Props = {
   blocks: IGanttBlock[] | null;
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx
index be6229ce382..098ee76ed27 100644
--- a/web/components/gantt-chart/chart/root.tsx
+++ b/web/components/gantt-chart/chart/root.tsx
@@ -1,23 +1,23 @@
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "../hooks/use-gantt-chart";
 // components
-import { GanttChartHeader, GanttChartMainContent } from "components/gantt-chart";
+import { GanttChartHeader, GanttChartMainContent } from "@/components/gantt-chart";
 // views
-import {
-  generateMonthChart,
-  getNumberOfDaysBetweenTwoDatesInMonth,
-  getMonthChartItemPositionWidthInMonth,
-} from "../views";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
 // types
-import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
+import { SIDEBAR_WIDTH } from "../constants";
 import { currentViewDataWithView } from "../data";
 // constants
-import { SIDEBAR_WIDTH } from "../constants";
+import { useGanttChart } from "../hooks/use-gantt-chart";
+import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
+import {
+  generateMonthChart,
+  getNumberOfDaysBetweenTwoDatesInMonth,
+  getMonthChartItemPositionWidthInMonth,
+} from "../views";
 
 type ChartViewRootProps = {
   border: boolean;
@@ -64,9 +64,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     useGanttChart();
 
   // rendering the block structure
-  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
+  const renderBlockStructure = (view: ChartDataType, blocks: IGanttBlock[] | null) =>
     blocks
-      ? blocks.map((block: any) => ({
+      ? blocks.map((block: IGanttBlock) => ({
           ...block,
           position: getMonthChartItemPositionWidthInMonth(view, block),
         }))
diff --git a/web/components/gantt-chart/chart/views/bi-week.tsx b/web/components/gantt-chart/chart/views/bi-week.tsx
index f0ad084e9aa..e8188f4d7e3 100644
--- a/web/components/gantt-chart/chart/views/bi-week.tsx
+++ b/web/components/gantt-chart/chart/views/bi-week.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const BiWeekChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/views/day.tsx b/web/components/gantt-chart/chart/views/day.tsx
index 84b2edac41c..1f4e738112f 100644
--- a/web/components/gantt-chart/chart/views/day.tsx
+++ b/web/components/gantt-chart/chart/views/day.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const DayChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/views/hours.tsx b/web/components/gantt-chart/chart/views/hours.tsx
index bd1a7b6dd28..f1eec7ca825 100644
--- a/web/components/gantt-chart/chart/views/hours.tsx
+++ b/web/components/gantt-chart/chart/views/hours.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const HourChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/views/month.tsx b/web/components/gantt-chart/chart/views/month.tsx
index b67b453f1e1..b3a095778a7 100644
--- a/web/components/gantt-chart/chart/views/month.tsx
+++ b/web/components/gantt-chart/chart/views/month.tsx
@@ -1,13 +1,13 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
 // types
 import { IMonthBlock } from "../../views";
 // constants
-import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "components/gantt-chart/constants";
 
 export const MonthChartView: FC<any> = observer(() => {
   // chart hook
@@ -19,7 +19,7 @@ export const MonthChartView: FC<any> = observer(() => {
       {monthBlocks?.map((block, rootIndex) => (
         <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
           <div
-            className="w-full sticky top-0 z-[5] bg-custom-background-100"
+            className="w-full sticky top-0 z-[5] bg-custom-background-100 flex-shrink-0"
             style={{
               height: `${HEADER_HEIGHT}px`,
             }}
@@ -55,7 +55,7 @@ export const MonthChartView: FC<any> = observer(() => {
               ))}
             </div>
           </div>
-          <div className="h-full w-full flex divide-x divide-custom-border-100/50">
+          <div className="h-full w-full flex-grow flex divide-x divide-custom-border-100/50">
             {block?.children?.map((monthDay, index) => (
               <div
                 key={`column-${rootIndex}-${index}`}
diff --git a/web/components/gantt-chart/chart/views/quarter.tsx b/web/components/gantt-chart/chart/views/quarter.tsx
index b8adc4b3a50..fea43e1529d 100644
--- a/web/components/gantt-chart/chart/views/quarter.tsx
+++ b/web/components/gantt-chart/chart/views/quarter.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const QuarterChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/views/week.tsx b/web/components/gantt-chart/chart/views/week.tsx
index 981fc9236f0..51f78988241 100644
--- a/web/components/gantt-chart/chart/views/week.tsx
+++ b/web/components/gantt-chart/chart/views/week.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const WeekChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/chart/views/year.tsx b/web/components/gantt-chart/chart/views/year.tsx
index 659126ac33a..68b5d5c0594 100644
--- a/web/components/gantt-chart/chart/views/year.tsx
+++ b/web/components/gantt-chart/chart/views/year.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
+import { useGanttChart } from "@/components/gantt-chart/hooks/use-gantt-chart";
 
 export const YearChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/components/gantt-chart/contexts/index.tsx b/web/components/gantt-chart/contexts/index.tsx
index 1d8a19f1a60..1b3f035ed35 100644
--- a/web/components/gantt-chart/contexts/index.tsx
+++ b/web/components/gantt-chart/contexts/index.tsx
@@ -1,19 +1,23 @@
-import { createContext } from "react";
+import React, { FC, createContext } from "react";
 // mobx store
-import { GanttStore } from "store/issue/issue_gantt_view.store";
+import { GanttStore } from "@/store/issue/issue_gantt_view.store";
 
 let ganttViewStore = new GanttStore();
 
 export const GanttStoreContext = createContext<GanttStore>(ganttViewStore);
 
 const initializeStore = () => {
-  const _ganttStore = ganttViewStore ?? new GanttStore();
-  if (typeof window === "undefined") return _ganttStore;
-  if (!ganttViewStore) ganttViewStore = _ganttStore;
-  return _ganttStore;
+  const newGanttViewStore = ganttViewStore ?? new GanttStore();
+  if (typeof window === "undefined") return newGanttViewStore;
+  if (!ganttViewStore) ganttViewStore = newGanttViewStore;
+  return newGanttViewStore;
 };
 
-export const GanttStoreProvider = ({ children }: any) => {
+type GanttStoreProviderProps = {
+  children: React.ReactNode;
+};
+
+export const GanttStoreProvider: FC<GanttStoreProviderProps> = ({ children }) => {
   const store = initializeStore();
   return <GanttStoreContext.Provider value={store}>{children}</GanttStoreContext.Provider>;
 };
diff --git a/web/components/gantt-chart/helpers/add-block.tsx b/web/components/gantt-chart/helpers/add-block.tsx
index b7497013fb5..55257545317 100644
--- a/web/components/gantt-chart/helpers/add-block.tsx
+++ b/web/components/gantt-chart/helpers/add-block.tsx
@@ -1,14 +1,16 @@
 import { useEffect, useRef, useState } from "react";
 import { addDays } from "date-fns";
+import { observer } from "mobx-react";
 import { Plus } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
 // helpers
-import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { renderFormattedDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
-import { IBlockUpdateData, IGanttBlock } from "../types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 import { useGanttChart } from "../hooks/use-gantt-chart";
-import { observer } from "mobx-react";
+import { IBlockUpdateData, IGanttBlock } from "../types";
+// hooks
 
 type Props = {
   block: IGanttBlock;
@@ -23,6 +25,8 @@ export const ChartAddBlock: React.FC<Props> = observer((props) => {
   const [buttonStartDate, setButtonStartDate] = useState<Date | null>(null);
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
+  // hooks
+  const { isMobile } = usePlatformOS();
   // chart hook
   const { currentViewData } = useGanttChart();
 
@@ -73,7 +77,7 @@ export const ChartAddBlock: React.FC<Props> = observer((props) => {
     >
       <div ref={containerRef} className="h-full w-full" />
       {isButtonVisible && (
-        <Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)}>
+        <Tooltip tooltipContent={buttonStartDate && renderFormattedDate(buttonStartDate)} isMobile={isMobile}>
           <button
             type="button"
             className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-custom-background-80 p-1.5 rounded border border-custom-border-300 grid place-items-center text-custom-text-200 hover:text-custom-text-100"
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index c2b4dc61914..7e3390ba814 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
 import { ArrowRight } from "lucide-react";
 // hooks
-import { IGanttBlock } from "components/gantt-chart";
+import { IGanttBlock } from "@/components/gantt-chart";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
 // constants
 import { SIDEBAR_WIDTH } from "../constants";
 import { useGanttChart } from "../hooks/use-gantt-chart";
-import { observer } from "mobx-react";
 
 type Props = {
   block: IGanttBlock;
diff --git a/web/components/gantt-chart/hooks/use-gantt-chart.ts b/web/components/gantt-chart/hooks/use-gantt-chart.ts
index 23e025e9062..916b38adcb5 100644
--- a/web/components/gantt-chart/hooks/use-gantt-chart.ts
+++ b/web/components/gantt-chart/hooks/use-gantt-chart.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { GanttStoreContext } from "components/gantt-chart/contexts";
+import { GanttStoreContext } from "@/components/gantt-chart/contexts";
 // types
-import { IGanttStore } from "store/issue/issue_gantt_view.store";
+import { IGanttStore } from "@/store/issue/issue_gantt_view.store";
 
 export const useGanttChart = (): IGanttStore => {
   const context = useContext(GanttStoreContext);
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index 4df5d993184..10c1c0d98de 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
 // components
-import { ChartViewRoot, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
+import { ChartViewRoot, IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart";
 // context
-import { GanttStoreProvider } from "components/gantt-chart/contexts";
+import { GanttStoreProvider } from "@/components/gantt-chart/contexts";
 
 type GanttChartRootProps = {
   border?: boolean;
diff --git a/web/components/gantt-chart/sidebar/cycles/block.tsx b/web/components/gantt-chart/sidebar/cycles/block.tsx
index f1374c7531d..e9543e36728 100644
--- a/web/components/gantt-chart/sidebar/cycles/block.tsx
+++ b/web/components/gantt-chart/sidebar/cycles/block.tsx
@@ -2,16 +2,16 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { observer } from "mobx-react";
 import { MoreVertical } from "lucide-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks";
+import { CycleGanttSidebarBlock } from "@/components/cycles";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { useGanttChart } from "@/components/gantt-chart/hooks";
 // components
-import { CycleGanttSidebarBlock } from "components/cycles";
 // helpers
-import { cn } from "helpers/common.helper";
-import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { IGanttBlock } from "@/components/gantt-chart/types";
+import { cn } from "@/helpers/common.helper";
+import { findTotalDaysInRange } from "@/helpers/date-time.helper";
 // types
-import { IGanttBlock } from "components/gantt-chart/types";
 // constants
-import { BLOCK_HEIGHT } from "components/gantt-chart/constants";
 
 type Props = {
   block: IGanttBlock;
diff --git a/web/components/gantt-chart/sidebar/cycles/sidebar.tsx b/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
index 11f67a099f3..dd33419d7fe 100644
--- a/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
@@ -2,9 +2,9 @@ import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea
 // ui
 import { Loader } from "@plane/ui";
 // components
+import { IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart/types";
 import { CyclesSidebarBlock } from "./block";
 // types
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
 
 type Props = {
   title: string;
diff --git a/web/components/gantt-chart/sidebar/issues/block.tsx b/web/components/gantt-chart/sidebar/issues/block.tsx
index 03a17a65b03..ae670941d86 100644
--- a/web/components/gantt-chart/sidebar/issues/block.tsx
+++ b/web/components/gantt-chart/sidebar/issues/block.tsx
@@ -2,17 +2,17 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { observer } from "mobx-react";
 import { MoreVertical } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
-import { useGanttChart } from "components/gantt-chart/hooks";
+import { useGanttChart } from "@/components/gantt-chart/hooks";
 // components
-import { IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttSidebarBlock } from "@/components/issues";
 // helpers
-import { cn } from "helpers/common.helper";
-import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { cn } from "@/helpers/common.helper";
+import { findTotalDaysInRange } from "@/helpers/date-time.helper";
+import { useIssueDetail } from "@/hooks/store";
 // types
-import { IGanttBlock } from "../../types";
 // constants
 import { BLOCK_HEIGHT } from "../../constants";
+import { IGanttBlock } from "../../types";
 
 type Props = {
   block: IGanttBlock;
diff --git a/web/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/components/gantt-chart/sidebar/issues/sidebar.tsx
index 323938eec95..7528333f0c5 100644
--- a/web/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -1,10 +1,10 @@
 import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
 // components
-import { IssuesSidebarBlock } from "./block";
 // ui
 import { Loader } from "@plane/ui";
 // types
-import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
+import { IGanttBlock, IBlockUpdateData } from "@/components/gantt-chart/types";
+import { IssuesSidebarBlock } from "./block";
 
 type Props = {
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
diff --git a/web/components/gantt-chart/sidebar/modules/block.tsx b/web/components/gantt-chart/sidebar/modules/block.tsx
index 4b2e4722638..525d2171695 100644
--- a/web/components/gantt-chart/sidebar/modules/block.tsx
+++ b/web/components/gantt-chart/sidebar/modules/block.tsx
@@ -2,16 +2,16 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { observer } from "mobx-react";
 import { MoreVertical } from "lucide-react";
 // hooks
-import { useGanttChart } from "components/gantt-chart/hooks";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { useGanttChart } from "@/components/gantt-chart/hooks";
 // components
-import { ModuleGanttSidebarBlock } from "components/modules";
+import { IGanttBlock } from "@/components/gantt-chart/types";
+import { ModuleGanttSidebarBlock } from "@/components/modules";
 // helpers
-import { cn } from "helpers/common.helper";
-import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { cn } from "@/helpers/common.helper";
+import { findTotalDaysInRange } from "@/helpers/date-time.helper";
 // types
-import { IGanttBlock } from "components/gantt-chart/types";
 // constants
-import { BLOCK_HEIGHT } from "components/gantt-chart/constants";
 
 type Props = {
   block: IGanttBlock;
diff --git a/web/components/gantt-chart/sidebar/modules/sidebar.tsx b/web/components/gantt-chart/sidebar/modules/sidebar.tsx
index dee83fa79af..fd9478ffe9a 100644
--- a/web/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -2,9 +2,9 @@ import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea
 // ui
 import { Loader } from "@plane/ui";
 // components
+import { IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart";
 import { ModulesSidebarBlock } from "./block";
 // types
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
 
 type Props = {
   title: string;
diff --git a/web/components/gantt-chart/sidebar/project-views.tsx b/web/components/gantt-chart/sidebar/project-views.tsx
index a7e7c5e35ad..d46acfe29ab 100644
--- a/web/components/gantt-chart/sidebar/project-views.tsx
+++ b/web/components/gantt-chart/sidebar/project-views.tsx
@@ -2,9 +2,9 @@ import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea
 // ui
 import { Loader } from "@plane/ui";
 // components
+import { IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart/types";
 import { IssuesSidebarBlock } from "./issues/block";
 // types
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
 
 type Props = {
   title: string;
diff --git a/web/components/gantt-chart/sidebar/root.tsx b/web/components/gantt-chart/sidebar/root.tsx
index 0b877ba3390..287a668066e 100644
--- a/web/components/gantt-chart/sidebar/root.tsx
+++ b/web/components/gantt-chart/sidebar/root.tsx
@@ -1,5 +1,5 @@
 // components
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
+import { IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart";
 // constants
 import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
 
diff --git a/web/components/gantt-chart/types/index.ts b/web/components/gantt-chart/types/index.ts
index 6268e4363aa..cd90758fc38 100644
--- a/web/components/gantt-chart/types/index.ts
+++ b/web/components/gantt-chart/types/index.ts
@@ -6,8 +6,8 @@ export interface IGanttBlock {
     width: number;
   };
   sort_order: number;
-  start_date: Date | null;
-  target_date: Date | null;
+  start_date: Date | undefined;
+  target_date: Date | undefined;
 }
 
 export interface IBlockUpdateData {
diff --git a/web/components/gantt-chart/views/bi-week-view.ts b/web/components/gantt-chart/views/bi-week-view.ts
index 14c0aad15e4..6ace4bcc48e 100644
--- a/web/components/gantt-chart/views/bi-week-view.ts
+++ b/web/components/gantt-chart/views/bi-week-view.ts
@@ -1,7 +1,7 @@
 // types
+import { weeks, months } from "../data";
 import { ChartDataType } from "../types";
 // data
-import { weeks, months } from "../data";
 // helpers
 import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
diff --git a/web/components/gantt-chart/views/day-view.ts b/web/components/gantt-chart/views/day-view.ts
index 0801b7bb187..e8da6801cc5 100644
--- a/web/components/gantt-chart/views/day-view.ts
+++ b/web/components/gantt-chart/views/day-view.ts
@@ -1,7 +1,7 @@
 // types
+import { weeks, months } from "../data";
 import { ChartDataType } from "../types";
 // data
-import { weeks, months } from "../data";
 
 export const getWeekNumberByDate = (date: Date) => {
   const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
diff --git a/web/components/gantt-chart/views/helpers.ts b/web/components/gantt-chart/views/helpers.ts
index 94b614286ac..4bd295ce357 100644
--- a/web/components/gantt-chart/views/helpers.ts
+++ b/web/components/gantt-chart/views/helpers.ts
@@ -56,8 +56,8 @@ export const getAllDatesInWeekByWeekNumber = (weekNumber: number, year: number)
   const startDate = new Date(firstDayOfYear.getTime());
   startDate.setDate(startDate.getDate() + 7 * (weekNumber - 1));
 
-  var datesInWeek = [];
-  for (var i = 0; i < 7; i++) {
+  const datesInWeek = [];
+  for (let i = 0; i < 7; i++) {
     const currentDate = new Date(startDate.getTime());
     currentDate.setDate(currentDate.getDate() + i);
     datesInWeek.push(currentDate);
diff --git a/web/components/gantt-chart/views/hours-view.ts b/web/components/gantt-chart/views/hours-view.ts
index 0801b7bb187..e8da6801cc5 100644
--- a/web/components/gantt-chart/views/hours-view.ts
+++ b/web/components/gantt-chart/views/hours-view.ts
@@ -1,7 +1,7 @@
 // types
+import { weeks, months } from "../data";
 import { ChartDataType } from "../types";
 // data
-import { weeks, months } from "../data";
 
 export const getWeekNumberByDate = (date: Date) => {
   const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
diff --git a/web/components/gantt-chart/views/month-view.ts b/web/components/gantt-chart/views/month-view.ts
index 13d054da1ab..8bb63532430 100644
--- a/web/components/gantt-chart/views/month-view.ts
+++ b/web/components/gantt-chart/views/month-view.ts
@@ -1,7 +1,8 @@
 // types
+import { findTotalDaysInRange } from "@/helpers/date-time.helper";
+import { weeks, months } from "../data";
 import { ChartDataType, IGanttBlock } from "../types";
 // data
-import { weeks, months } from "../data";
 // helpers
 import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
@@ -167,18 +168,19 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
   const { startDate } = chartData.data;
   const { start_date: itemStartDate, target_date: itemTargetDate } = itemData;
 
-  if (!itemStartDate || !itemTargetDate) return null;
+  if (!itemStartDate || !itemTargetDate) return;
 
   startDate.setHours(0, 0, 0, 0);
   itemStartDate.setHours(0, 0, 0, 0);
   itemTargetDate.setHours(0, 0, 0, 0);
 
-  // position code starts
-  const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
-  const positionDaysDifference: number = Math.abs(Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24)));
+  const positionDaysDifference = findTotalDaysInRange(startDate, itemStartDate, false);
+
+  if (!positionDaysDifference) return;
+
   scrollPosition = positionDaysDifference * chartData.data.width;
 
-  var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
+  let diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
   diffMonths -= startDate.getMonth();
   diffMonths += itemStartDate.getMonth();
 
diff --git a/web/components/gantt-chart/views/quater-view.ts b/web/components/gantt-chart/views/quater-view.ts
index ed25974a3a5..9d45a43a131 100644
--- a/web/components/gantt-chart/views/quater-view.ts
+++ b/web/components/gantt-chart/views/quater-view.ts
@@ -1,7 +1,7 @@
 // types
+import { weeks, months } from "../data";
 import { ChartDataType } from "../types";
 // data
-import { weeks, months } from "../data";
 // helpers
 import { getDatesBetweenTwoDates, getWeeksByMonthAndYear } from "./helpers";
 
diff --git a/web/components/gantt-chart/views/week-view.ts b/web/components/gantt-chart/views/week-view.ts
index a65eb70b95c..bd4ae383d61 100644
--- a/web/components/gantt-chart/views/week-view.ts
+++ b/web/components/gantt-chart/views/week-view.ts
@@ -1,7 +1,7 @@
 // types
+import { weeks, months } from "../data";
 import { ChartDataType } from "../types";
 // data
-import { weeks, months } from "../data";
 // helpers
 import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
diff --git a/web/components/gantt-chart/views/year-view.ts b/web/components/gantt-chart/views/year-view.ts
index 82d397e97c2..69ff9dae890 100644
--- a/web/components/gantt-chart/views/year-view.ts
+++ b/web/components/gantt-chart/views/year-view.ts
@@ -1,7 +1,7 @@
 // types
+import { weeks, months } from "../data";
 import { ChartDataType } from "../types";
 // data
-import { weeks, months } from "../data";
 // helpers
 import { getDatesBetweenTwoDates, getWeeksByMonthAndYear } from "./helpers";
 
diff --git a/web/components/graphs/index.ts b/web/components/graphs/index.ts
new file mode 100644
index 00000000000..305c3944ea4
--- /dev/null
+++ b/web/components/graphs/index.ts
@@ -0,0 +1 @@
+export * from "./issues-by-priority";
diff --git a/web/components/graphs/issues-by-priority.tsx b/web/components/graphs/issues-by-priority.tsx
new file mode 100644
index 00000000000..d0f63f60497
--- /dev/null
+++ b/web/components/graphs/issues-by-priority.tsx
@@ -0,0 +1,103 @@
+import { ComputedDatum } from "@nivo/bar";
+import { Theme } from "@nivo/core";
+// components
+import { TIssuePriorities } from "@plane/types";
+import { BarGraph } from "@/components/ui";
+// helpers
+import { PRIORITY_GRAPH_GRADIENTS } from "@/constants/dashboard";
+import { ISSUE_PRIORITIES } from "@/constants/issue";
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
+// types
+// constants
+
+type Props = {
+  borderRadius?: number;
+  data: {
+    priority: TIssuePriorities;
+    priority_count: number;
+  }[];
+  height?: number;
+  onBarClick?: (
+    datum: ComputedDatum<any> & {
+      color: string;
+    }
+  ) => void;
+  padding?: number;
+  theme?: Theme;
+};
+
+const PRIORITY_TEXT_COLORS = {
+  urgent: "#CE2C31",
+  high: "#AB4800",
+  medium: "#AB6400",
+  low: "#1F2D5C",
+  none: "#60646C",
+};
+
+export const IssuesByPriorityGraph: React.FC<Props> = (props) => {
+  const { borderRadius = 8, data, height = 300, onBarClick, padding = 0.05, theme } = props;
+
+  const chartData = data.map((priority) => ({
+    priority: capitalizeFirstLetter(priority.priority),
+    value: priority.priority_count,
+  }));
+
+  return (
+    <BarGraph
+      data={chartData}
+      height={`${height}px`}
+      indexBy="priority"
+      keys={["value"]}
+      borderRadius={borderRadius}
+      padding={padding}
+      customYAxisTickValues={data.map((p) => p.priority_count)}
+      axisBottom={{
+        tickPadding: 8,
+        tickSize: 0,
+      }}
+      tooltip={(datum) => (
+        <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+          <span
+            className="h-3 w-3 rounded"
+            style={{
+              backgroundColor: PRIORITY_TEXT_COLORS[`${datum.data.priority}`.toLowerCase() as TIssuePriorities],
+            }}
+          />
+          <span className="font-medium text-custom-text-200">{datum.data.priority}:</span>
+          <span>{datum.value}</span>
+        </div>
+      )}
+      colors={({ data }) => `url(#gradient${data.priority})`}
+      defs={PRIORITY_GRAPH_GRADIENTS}
+      fill={ISSUE_PRIORITIES.map((p) => ({
+        match: {
+          id: p.key,
+        },
+        id: `gradient${p.title}`,
+      }))}
+      onClick={(datum) => {
+        if (onBarClick) onBarClick(datum);
+      }}
+      theme={{
+        axis: {
+          domain: {
+            line: {
+              stroke: "transparent",
+            },
+          },
+          ticks: {
+            text: {
+              fontSize: 13,
+            },
+          },
+        },
+        grid: {
+          line: {
+            stroke: "transparent",
+          },
+        },
+        ...theme,
+      }}
+    />
+  );
+};
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 7cdc2313319..35a646c1c95 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -1,8 +1,20 @@
 import { useCallback, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
+// components
+import { ArrowRight, Plus, PanelRight } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
+import { ProjectAnalyticsModal } from "@/components/analytics";
+import { BreadcrumbLink } from "@/components/common";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+import { ProjectLogo } from "@/components/project";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { cn } from "@/helpers/common.helper";
+import { truncateText } from "@/helpers/string.helper";
 import {
   useApplication,
   useEventTracker,
@@ -13,27 +25,14 @@ import {
   useProjectState,
   useUser,
   useIssues,
-} from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
-// components
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
-import { ProjectAnalyticsModal } from "components/analytics";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+} from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
-import { ArrowRight, Plus, PanelRight } from "lucide-react";
 // helpers
-import { truncateText } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
-import { cn } from "helpers/common.helper";
-import { CycleMobileHeader } from "components/cycles/cycle-mobile-header";
 
 const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   // router
@@ -43,6 +42,7 @@ const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   const { getCycleById } = useCycle();
   // derived values
   const cycle = getCycleById(cycleId);
+  //
 
   if (!cycle) return null;
 
@@ -84,6 +84,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const {
     project: { projectMemberIds },
   } = useMember();
+  const { isMobile } = usePlatformOS();
 
   const activeLayout = issueFilters?.displayFilters?.layout;
 
@@ -108,8 +109,10 @@ export const CycleIssuesHeader: React.FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -142,6 +145,12 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
+  const issueCount = cycleDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? cycleDetails.total_issues + cycleDetails?.sub_issues
+      : cycleDetails.total_issues
+    : undefined;
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -150,9 +159,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         cycleDetails={cycleDetails ?? undefined}
       />
       <div className="relative z-[15] w-full items-center gap-x-2 gap-y-4">
-        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
-            <SidebarHamburgerToggle />
             <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -163,13 +171,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                         label={currentProjectDetails?.name ?? "Project"}
                         href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                         icon={
-                          currentProjectDetails?.emoji ? (
-                            renderEmoji(currentProjectDetails.emoji)
-                          ) : currentProjectDetails?.icon_prop ? (
-                            renderEmoji(currentProjectDetails.icon_prop)
-                          ) : (
-                            <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                              {currentProjectDetails?.name.charAt(0)}
+                          currentProjectDetails && (
+                            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                              <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                             </span>
                           )
                         }
@@ -201,12 +205,25 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     label={
                       <>
                         <ContrastIcon className="h-3 w-3" />
-                        <div className=" w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
-                          {cycleDetails?.name && cycleDetails.name}
+                        <div className="flex items-center gap-2 w-auto max-w-[70px] sm:max-w-[200px] truncate">
+                          <p className="truncate">{cycleDetails?.name && cycleDetails.name}</p>
+                          {issueCount && issueCount > 0 ? (
+                            <Tooltip
+                              isMobile={isMobile}
+                              tooltipContent={`There are ${issueCount} ${
+                                issueCount > 1 ? "issues" : "issue"
+                              } in this cycle`}
+                              position="bottom"
+                            >
+                              <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                                {issueCount}
+                              </span>
+                            </Tooltip>
+                          ) : null}
                         </div>
                       </>
                     }
-                    className="ml-1.5 flex-shrink-0"
+                    className="ml-1.5 flex-shrink-0 truncate"
                     placement="bottom-start"
                   >
                     {currentProjectCycleIds?.map((cycleId) => (
@@ -281,9 +298,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             <PanelRight className={cn("w-4 h-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
           </button>
         </div>
-        <div className="block sm:block md:hidden">
-          <CycleMobileHeader />
-        </div>
       </div>
     </>
   );
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index 496fabecd46..22cd9adec02 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -1,24 +1,21 @@
-import { FC, useCallback } from "react";
-import { useRouter } from "next/router";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { List, Plus } from "lucide-react";
+import { useRouter } from "next/router";
+import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
-import { EUserProjectRoles } from "constants/project";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
-import { TCycleLayout } from "@plane/types";
-import { CYCLE_VIEW_LAYOUTS } from "constants/cycle";
-import useLocalStorage from "hooks/use-local-storage";
+import { BreadcrumbLink } from "@/components/common";
+import { ProjectLogo } from "@/components/project";
+import { EUserProjectRoles } from "@/constants/project";
+import { useApplication, useEventTracker, useProject, useUser } from "@/hooks/store";
 
 export const CyclesHeader: FC = observer(() => {
   // router
   const router = useRouter();
+  const { workspaceSlug } = router.query;
   // store hooks
   const {
     commandPalette: { toggleCreateCycleModal },
@@ -32,23 +29,10 @@ export const CyclesHeader: FC = observer(() => {
   const canUserCreateCycle =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
-  const { workspaceSlug } = router.query as {
-    workspaceSlug: string;
-  };
-  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
-
-  const handleCurrentLayout = useCallback(
-    (_layout: TCycleLayout) => {
-      setCycleLayout(_layout);
-    },
-    [setCycleLayout]
-  );
-
   return (
     <div className="relative z-10 items-center justify-between gap-x-2 gap-y-4">
-      <div className="flex border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="flex bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
@@ -58,13 +42,9 @@ export const CyclesHeader: FC = observer(() => {
                     label={currentProjectDetails?.name ?? "Project"}
                     href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                     icon={
-                      currentProjectDetails?.emoji ? (
-                        renderEmoji(currentProjectDetails.emoji)
-                      ) : currentProjectDetails?.icon_prop ? (
-                        renderEmoji(currentProjectDetails.icon_prop)
-                      ) : (
-                        <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                          {currentProjectDetails?.name.charAt(0)}
+                      currentProjectDetails && (
+                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                          <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                         </span>
                       )
                     }
@@ -73,7 +53,9 @@ export const CyclesHeader: FC = observer(() => {
               />
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
+                link={
+                  <BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>
@@ -94,34 +76,6 @@ export const CyclesHeader: FC = observer(() => {
           </div>
         )}
       </div>
-      <div className="flex justify-center sm:hidden">
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
-          // placement="bottom-start"
-          customButton={
-            <span className="flex items-center gap-2">
-              <List className="h-4 w-4" />
-              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
-            </span>
-          }
-          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
-          closeOnSelect
-        >
-          {CYCLE_VIEW_LAYOUTS.map((layout) => (
-            <CustomMenu.MenuItem
-              onClick={() => {
-                // handleLayoutChange(ISSUE_LAYOUTS[index].key);
-                handleCurrentLayout(layout.key as TCycleLayout);
-              }}
-              className="flex items-center gap-2"
-            >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
-      </div>
     </div>
   );
 });
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 3c40cbbffd1..2d58d9b160f 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -1,23 +1,23 @@
 import { useCallback, useState } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useLabel, useMember, useUser, useIssues } from "hooks/store";
+import { List, PlusIcon, Sheet } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
 // components
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+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 } from "@plane/types";
 // constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 const GLOBAL_VIEW_LAYOUTS = [
   { key: "list", title: "List", link: "/workspace-views", icon: List },
@@ -46,6 +46,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   const {
     workspace: { workspaceMemberIds },
   } = useMember();
+  const { isMobile } = usePlatformOS();
 
   const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
 
@@ -55,8 +56,10 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -107,9 +110,8 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative z-[15] flex h-[3.75rem] w-full 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="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
         <div className="relative flex gap-2">
-          <SidebarHamburgerToggle />
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
@@ -133,7 +135,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
             {GLOBAL_VIEW_LAYOUTS.map((layout) => (
               <Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
                 <span>
-                  <Tooltip tooltipContent={layout.title}>
+                  <Tooltip tooltipContent={layout.title} isMobile={isMobile}>
                     <div
                       className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
                         activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts
index d38da514924..b57b91534c1 100644
--- a/web/components/headers/index.ts
+++ b/web/components/headers/index.ts
@@ -17,7 +17,7 @@ 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-archives";
 export * from "./project-issue-details";
 export * from "./user-profile";
 export * from "./workspace-active-cycles";
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index b84504ee21b..59cc2a42955 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -1,8 +1,19 @@
 import { useCallback, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
+import { ArrowRight, PanelRight, Plus } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
+import { ProjectAnalyticsModal } from "@/components/analytics";
+import { BreadcrumbLink } from "@/components/common";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+import { ProjectLogo } from "@/components/project";
+import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { cn } from "@/helpers/common.helper";
+import { truncateText } from "@/helpers/string.helper";
 import {
   useApplication,
   useEventTracker,
@@ -13,27 +24,16 @@ import {
   useProjectState,
   useUser,
   useIssues,
-} from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
+} from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+import useLocalStorage from "@/hooks/use-local-storage";
 // components
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
-import { ProjectAnalyticsModal } from "components/analytics";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
-import { Breadcrumbs, Button, CustomMenu, DiceIcon, LayersIcon } from "@plane/ui";
 // icons
-import { ArrowRight, PanelRight, Plus } from "lucide-react";
 // helpers
-import { truncateText } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // constants
-import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
-import { cn } from "helpers/common.helper";
-import { ModuleMobileHeader } from "components/modules/module-mobile-header";
 
 const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
   // router
@@ -64,15 +64,14 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    moduleId: string;
-  };
+  const { workspaceSlug, projectId, moduleId } = router.query;
+  // hooks
+  const { isMobile } = usePlatformOS();
   // store hooks
   const {
-    issuesFilter: { issueFilters, updateFilters },
+    issuesFilter: { issueFilters },
   } = useIssues(EIssuesStoreType.MODULE);
+  const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
   const { projectModuleIds, getModuleById } = useModule();
   const {
     commandPalette: { toggleCreateIssueModal },
@@ -99,45 +98,47 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
 
   const handleLayoutChange = useCallback(
     (layout: TIssueLayouts) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, moduleId);
+      if (!projectId) return;
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
     },
-    [workspaceSlug, projectId, moduleId, updateFilters]
+    [projectId, moduleId, updateFilters]
   );
 
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
-      if (!workspaceSlug || !projectId) return;
+      if (!projectId) return;
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
 
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, moduleId);
+      updateFilters(projectId.toString(), EIssueFilterType.FILTERS, { [key]: newValues });
     },
-    [workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
+    [projectId, moduleId, issueFilters, updateFilters]
   );
 
   const handleDisplayFilters = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, moduleId);
+      if (!projectId) return;
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
     },
-    [workspaceSlug, projectId, moduleId, updateFilters]
+    [projectId, moduleId, updateFilters]
   );
 
   const handleDisplayProperties = useCallback(
     (property: Partial<IIssueDisplayProperties>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, moduleId);
+      if (!projectId) return;
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property);
     },
-    [workspaceSlug, projectId, moduleId, updateFilters]
+    [projectId, moduleId, updateFilters]
   );
 
   // derived values
@@ -145,6 +146,12 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
+  const issueCount = moduleDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? moduleDetails.total_issues + moduleDetails.sub_issues
+      : moduleDetails.total_issues
+    : undefined;
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -153,9 +160,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         moduleDetails={moduleDetails ?? undefined}
       />
       <div className="relative z-[15] items-center gap-x-2 gap-y-4">
-        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
           <div className="flex items-center gap-2">
-            <SidebarHamburgerToggle />
             <Breadcrumbs onBack={router.back}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -166,13 +172,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                         label={currentProjectDetails?.name ?? "Project"}
                         href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                         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)}
+                          currentProjectDetails && (
+                            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                              <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                             </span>
                           )
                         }
@@ -204,8 +206,21 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     label={
                       <>
                         <DiceIcon className="h-3 w-3" />
-                        <div className="w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
-                          {moduleDetails?.name && moduleDetails.name}
+                        <div className="flex items-center gap-2 w-auto max-w-[70px] sm:max-w-[200px] truncate">
+                          <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
+                          {issueCount && issueCount > 0 ? (
+                            <Tooltip
+                              isMobile={isMobile}
+                              tooltipContent={`There are ${issueCount} ${
+                                issueCount > 1 ? "issues" : "issue"
+                              } in this module`}
+                              position="bottom"
+                            >
+                              <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                                {issueCount}
+                              </span>
+                            </Tooltip>
+                          ) : null}
                         </div>
                       </>
                     }
@@ -293,7 +308,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             </button>
           </div>
         </div>
-        <ModuleMobileHeader />
       </div>
     </>
   );
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 9ad34678a72..37aa68fceb6 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -1,24 +1,33 @@
-import { useRouter } from "next/router";
+import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
+import { useRouter } from "next/router";
+import { ListFilter, Plus, Search, X } from "lucide-react";
+import { TModuleFilters } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
-// ui
-import { Breadcrumbs, Button, Tooltip, DiceIcon, CustomMenu } from "@plane/ui";
-// helper
-import { renderEmoji } from "helpers/emoji.helper";
-// constants
-import { MODULE_VIEW_LAYOUTS } from "constants/module";
-import { EUserProjectRoles } from "constants/project";
+import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+import { FiltersDropdown } from "@/components/issues";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules";
+import { ProjectLogo } from "@/components/project";
+import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
+import { EUserProjectRoles } from "@/constants/project";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useEventTracker, useMember, useModuleFilter, useProject, useUser } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+// constants
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// ui
+// helpers
+// types
 
 export const ModulesListHeader: React.FC = observer(() => {
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
   const { setTrackElement } = useEventTracker();
@@ -26,106 +35,192 @@ export const ModulesListHeader: React.FC = observer(() => {
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
+  const { isMobile } = usePlatformOS();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const {
+    currentProjectDisplayFilters: displayFilters,
+    currentProjectFilters: filters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useModuleFilter();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
 
-  const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = filters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [filters, projectId, updateFilters]
+  );
 
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // auth
   const canUserCreateModule =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
+
   return (
-    <div>
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 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">
-          <SidebarHamburgerToggle />
-          <div>
-            <Breadcrumbs onBack={router.back}>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    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>
-                      )
-                    }
-                  />
-                }
-              />
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
-              />
-            </Breadcrumbs>
-          </div>
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div>
+          <Breadcrumbs onBack={router.back}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
+                      </span>
+                    )
+                  }
+                />
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
+            />
+          </Breadcrumbs>
         </div>
-        <div className="flex items-center gap-2">
-          <div className="items-center gap-1 rounded bg-custom-background-80 p-1 hidden md:flex">
-            {MODULE_VIEW_LAYOUTS.map((layout) => (
-              <Tooltip key={layout.key} tooltipContent={layout.title}>
-                <button
-                  type="button"
-                  className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${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>
-          {canUserCreateModule && (
-            <Button
-              variant="primary"
-              size="sm"
-              prependIcon={<Plus />}
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex items-center">
+          {!isSearchOpen && (
+            <button
+              type="button"
+              className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
               onClick={() => {
-                setTrackElement("Modules page");
-                commandPaletteStore.toggleCreateModuleModal(true);
+                setIsSearchOpen(true);
+                inputRef.current?.focus();
               }}
             >
-              <div className="hidden sm:block">Add</div> Module
-            </Button>
+              <Search className="h-3.5 w-3.5" />
+            </button>
           )}
+          <div
+            className={cn(
+              "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+              {
+                "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              }
+            )}
+          >
+            <Search className="h-3.5 w-3.5" />
+            <input
+              ref={inputRef}
+              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              onChange={(e) => updateSearchQuery(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+            />
+            {isSearchOpen && (
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  // updateSearchQuery("");
+                  setIsSearchOpen(false);
+                }}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
         </div>
-      </div>
-      <div className="flex justify-center md:hidden">
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
-          // placement="bottom-start"
-          customButton={
-            <span className="flex items-center gap-2">
-              {modulesView === 'gantt_chart' ? <GanttChartSquare className="w-3 h-3" /> : modulesView === 'grid' ? <LayoutGrid className="w-3 h-3" /> : <List className="w-3 h-3" />}
-              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
-            </span>
-          }
-          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
-          closeOnSelect
-        >
+        <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
           {MODULE_VIEW_LAYOUTS.map((layout) => (
-            <CustomMenu.MenuItem
-              onClick={() => setModulesView(layout.key)}
-              className="flex items-center gap-2"
-            >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
-            </CustomMenu.MenuItem>
+            <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
+              <button
+                type="button"
+                className={cn(
+                  "group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100",
+                  {
+                    "bg-custom-background-100 shadow-custom-shadow-2xs": displayFilters?.layout === layout.key,
+                  }
+                )}
+                onClick={() => {
+                  if (!projectId) return;
+                  updateDisplayFilters(projectId.toString(), { layout: layout.key });
+                }}
+              >
+                <layout.icon
+                  strokeWidth={2}
+                  className={cn("h-3.5 w-3.5 text-custom-text-200", {
+                    "text-custom-text-100": displayFilters?.layout === layout.key,
+                  })}
+                />
+              </button>
+            </Tooltip>
           ))}
-        </CustomMenu>
+        </div>
+        <ModuleOrderByDropdown
+          value={displayFilters?.order_by}
+          onChange={(val) => {
+            if (!projectId || val === displayFilters?.order_by) return;
+            updateDisplayFilters(projectId.toString(), {
+              order_by: val,
+            });
+          }}
+        />
+        <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+          <ModuleFiltersSelection
+            displayFilters={displayFilters ?? {}}
+            filters={filters ?? {}}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            handleFiltersUpdate={handleFilters}
+            memberIds={workspaceMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
+        {canUserCreateModule && (
+          <Button
+            variant="primary"
+            size="sm"
+            prependIcon={<Plus />}
+            onClick={() => {
+              setTrackElement("Modules page");
+              commandPaletteStore.toggleCreateModuleModal(true);
+            }}
+          >
+            <div className="hidden sm:block">Add</div> Module
+          </Button>
+        )}
       </div>
     </div>
   );
 });
-
-
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index e2a427db78c..4130dffcefe 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -1,16 +1,15 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { FileText, Plus } from "lucide-react";
 // hooks
-import { useApplication, usePage, useProject } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
+import { BreadcrumbLink } from "@/components/common";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+import { ProjectLogo } from "@/components/project";
+import { useApplication, usePage, useProject } from "@/hooks/store";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -28,9 +27,8 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   const pageDetails = usePage(pageId as string);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -42,13 +40,9 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
                       href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                       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)}
+                        currentProjectDetails && (
+                          <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                            <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                           </span>
                         )
                       }
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index 1984971d6ed..30b626773c5 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -1,17 +1,16 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { FileText, Plus } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
+import { BreadcrumbLink } from "@/components/common";
+import { ProjectLogo } from "@/components/project";
+import { EUserProjectRoles } from "@/constants/project";
 // constants
-import { EUserProjectRoles } from "constants/project";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+import { useApplication, useEventTracker, useProject, useUser } from "@/hooks/store";
 
 export const PagesHeader = observer(() => {
   // router
@@ -31,9 +30,8 @@ export const PagesHeader = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -43,13 +41,9 @@ export const PagesHeader = observer(() => {
                   href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                   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)}
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                       </span>
                     )
                   }
diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
index e9f37bf6e2c..792842fe2da 100644
--- a/web/components/headers/profile-preferences.tsx
+++ b/web/components/headers/profile-preferences.tsx
@@ -1,6 +1,6 @@
 // components
 import { Breadcrumbs } from "@plane/ui";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
 
 export const ProfilePreferencesHeader = () => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
diff --git a/web/components/headers/profile-settings.tsx b/web/components/headers/profile-settings.tsx
index 24c69f0935d..e0402cda492 100644
--- a/web/components/headers/profile-settings.tsx
+++ b/web/components/headers/profile-settings.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
 // ui
-import { Breadcrumbs } from "@plane/ui";
 import { Settings } from "lucide-react";
-import { BreadcrumbLink } from "components/common";
+import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
 
 interface IProfileSettingHeader {
   title: string;
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index 9d4596f8357..9182a631434 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -1,22 +1,21 @@
 import { FC } from "react";
-import useSWR from "swr";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import useSWR from "swr";
 // hooks
-import { useProject } from "hooks/store";
+import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+import { ProjectLogo } from "@/components/project";
+import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+import { useProject } from "@/hooks/store";
+// components
 // ui
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // types
-import { TIssue } from "@plane/types";
+import { IssueArchiveService } from "@/services/issue";
 // constants
-import { ISSUE_DETAILS } from "constants/fetch-keys";
 // services
-import { IssueArchiveService } from "services/issue";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 const issueArchiveService = new IssueArchiveService();
 
@@ -25,9 +24,9 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, archivedIssueId } = router.query;
   // store hooks
-  const { currentProjectDetails, getProjectById } = useProject();
+  const { currentProjectDetails } = useProject();
 
-  const { data: issueDetails } = useSWR<TIssue | undefined>(
+  const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
     workspaceSlug && projectId && archivedIssueId
       ? () =>
@@ -40,9 +39,8 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   );
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -52,38 +50,43 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
                   href={`/${workspaceSlug}/projects`}
                   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)}
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                       </span>
                     )
                   }
                 />
               }
             />
-
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
                 <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
-                  label="Archived issues"
+                  href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                  label="Archives"
+                  icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                  label="Issues"
                   icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
                 />
               }
             />
-
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
                 <BreadcrumbLink
                   label={
-                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
-                    "..."
+                    currentProjectDetails && issueDetails
+                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
+                      : ""
                   }
                 />
               }
diff --git a/web/components/headers/project-archives.tsx b/web/components/headers/project-archives.tsx
new file mode 100644
index 00000000000..5cee12bdf6a
--- /dev/null
+++ b/web/components/headers/project-archives.tsx
@@ -0,0 +1,96 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+// ui
+import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+import { ProjectLogo } from "@/components/project";
+// constants
+import { PROJECT_ARCHIVES_BREADCRUMB_LIST } from "@/constants/archives";
+import { EIssuesStoreType } from "@/constants/issue";
+// hooks
+import { useIssues, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+export const ProjectArchivesHeader: FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  const activeTab = router.pathname.split("/").pop();
+  // store hooks
+  const {
+    issuesFilter: { issueFilters },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { currentProjectDetails } = useProject();
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails.archived_issues + currentProjectDetails.archived_sub_issues
+      : currentProjectDetails.archived_issues
+    : undefined;
+
+  const activeTabBreadcrumbDetail =
+    PROJECT_ARCHIVES_BREADCRUMB_LIST[activeTab as keyof typeof PROJECT_ARCHIVES_BREADCRUMB_LIST];
+
+  return (
+    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div className="flex items-center gap-2.5">
+          <Breadcrumbs onBack={router.back}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
+                      </span>
+                    )
+                  }
+                />
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                  label="Archives"
+                  icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
+            />
+            {activeTabBreadcrumbDetail && (
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    label={activeTabBreadcrumbDetail.label}
+                    icon={<activeTabBreadcrumbDetail.icon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+            )}
+          </Breadcrumbs>
+          {activeTab === "issues" && issueCount && issueCount > 0 ? (
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's archived`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 139ec025797..bdfaebc8de7 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -1,18 +1,19 @@
 import { FC, useCallback } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // hooks
-import { useIssues, useLabel, useMember, useProject, useProjectState } from "hooks/store";
 // components
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // ui
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helper
-import { renderEmoji } from "helpers/emoji.helper";
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { ProjectLogo } from "@/components/project";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const ProjectDraftIssueHeader: FC = observer(() => {
   // router
@@ -28,7 +29,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   const {
     project: { projectMemberIds },
   } = useMember();
-
+  const { isMobile } = usePlatformOS();
   const activeLayout = issueFilters?.displayFilters?.layout;
 
   const handleFiltersUpdate = useCallback(
@@ -37,8 +38,10 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -73,11 +76,17 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
     },
     [workspaceSlug, projectId, updateFilters]
   );
+
+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails.draft_issues + currentProjectDetails.draft_sub_issues
+      : currentProjectDetails.draft_issues
+    : undefined;
+
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
-        <div>
+        <div className="flex items-center gap-2.5">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
@@ -86,13 +95,9 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
                   href={`/${workspaceSlug}/projects`}
                   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)}
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                       </span>
                     )
                   }
@@ -107,6 +112,17 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
               }
             />
           </Breadcrumbs>
+          {issueCount && issueCount > 0 ? (
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's draft`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
         </div>
 
         <div className="ml-auto flex items-center gap-2">
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index b5260edd7ec..7ddf923802b 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -1,17 +1,16 @@
 import { FC, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Plus } from "lucide-react";
 // hooks
-import { useProject } from "hooks/store";
 // ui
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
-import { CreateInboxIssueModal } from "components/inbox";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
+import { CreateInboxIssueModal } from "@/components/inbox";
 // helper
-import { renderEmoji } from "helpers/emoji.helper";
+import { ProjectLogo } from "@/components/project";
+import { useProject } from "@/hooks/store";
 
 export const ProjectInboxHeader: FC = observer(() => {
   // states
@@ -23,9 +22,8 @@ export const ProjectInboxHeader: FC = observer(() => {
   const { currentProjectDetails } = useProject();
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -35,13 +33,9 @@ export const ProjectInboxHeader: FC = observer(() => {
                   href={`/${workspaceSlug}/projects`}
                   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)}
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                       </span>
                     )
                   }
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index 3732f2598af..a7952ad16f8 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -1,47 +1,36 @@
 import { FC } from "react";
-import useSWR from "swr";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useApplication, useProject } from "hooks/store";
-// ui
+import { PanelRight } from "lucide-react";
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+import { ProjectLogo } from "@/components/project";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
+// ui
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 // services
-import { IssueService } from "services/issue";
 // constants
-import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
-import { PanelRight } from "lucide-react";
-import { cn } from "helpers/common.helper";
-
-// services
-const issueService = new IssueService();
 
 export const ProjectIssueDetailsHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
   // store hooks
-  const { currentProjectDetails, getProjectById } = useProject();
+  const { currentProjectDetails } = useProject();
   const { theme: themeStore } = useApplication();
-
-  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 {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
   const isSidebarCollapsed = themeStore.issueDetailSidebarCollapsed;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs onBack={router.back}>
             <Breadcrumbs.BreadcrumbItem
@@ -51,13 +40,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
                   href={`/${workspaceSlug}/projects`}
                   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)}
+                    currentProjectDetails && (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                       </span>
                     )
                   }
@@ -81,8 +66,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
               link={
                 <BreadcrumbLink
                   label={
-                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
-                    "..."
+                    currentProjectDetails && issueDetails
+                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
+                      : ""
                   }
                 />
               }
@@ -91,7 +77,9 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
         </div>
       </div>
       <button className="block md:hidden" onClick={() => themeStore.toggleIssueDetailSidebar()}>
-        <PanelRight className={cn("w-4 h-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")} />
+        <PanelRight
+          className={cn("w-4 h-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
+        />
       </button>
     </div>
   );
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 43030c5c2d0..7c018d5c2fe 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -1,8 +1,16 @@
 import { useCallback, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // hooks
+import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
+import { ProjectAnalyticsModal } from "@/components/analytics";
+import { BreadcrumbLink } from "@/components/common";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+import { ProjectLogo } from "@/components/project";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
 import {
   useApplication,
   useEventTracker,
@@ -11,23 +19,14 @@ import {
   useProjectState,
   useUser,
   useMember,
-} from "hooks/store";
+} from "@/hooks/store";
+import { useIssues } from "@/hooks/store/use-issues";
 // components
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
-import { ProjectAnalyticsModal } from "components/analytics";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 // ui
-import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 // helper
-import { renderEmoji } from "helpers/emoji.helper";
-import { EUserProjectRoles } from "constants/project";
-import { useIssues } from "hooks/store/use-issues";
-import { IssuesMobileHeader } from "components/issues/issues-mobile-header";
 
 export const ProjectIssuesHeader: React.FC = observer(() => {
   // states
@@ -52,7 +51,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
-
+  const { isMobile } = usePlatformOS();
   const activeLayout = issueFilters?.displayFilters?.layout;
 
   const handleFiltersUpdate = useCallback(
@@ -61,8 +60,10 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -102,6 +103,12 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails?.total_issues + currentProjectDetails?.sub_issues
+      : currentProjectDetails?.total_issues
+    : undefined;
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -110,10 +117,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         projectDetails={currentProjectDetails ?? undefined}
       />
       <div className="relative z-[15] items-center gap-x-2 gap-y-4">
-        <div className="flex items-center gap-2 p-4 border-b border-custom-border-200 bg-custom-sidebar-background-100">
+        <div className="flex items-center gap-2 p-4 bg-custom-sidebar-background-100">
           <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-            <SidebarHamburgerToggle />
-            <div>
+            <div className="flex items-center gap-2.5">
               <Breadcrumbs onBack={() => router.back()}>
                 <Breadcrumbs.BreadcrumbItem
                   type="text"
@@ -123,17 +129,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                       label={currentProjectDetails?.name ?? "Project"}
                       icon={
                         currentProjectDetails ? (
-                          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="grid h-7 w-7 flex-shrink-0 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)}
+                          currentProjectDetails && (
+                            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                              <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                             </span>
                           )
                         ) : (
@@ -153,6 +151,17 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                   }
                 />
               </Breadcrumbs>
+              {issueCount && issueCount > 0 ? (
+                <Tooltip
+                  isMobile={isMobile}
+                  tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in this project`}
+                  position="bottom"
+                >
+                  <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                    {issueCount}
+                  </span>
+                </Tooltip>
+              ) : null}
             </div>
             {currentProjectDetails?.is_deployed && deployUrl && (
               <a
@@ -221,9 +230,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             </>
           )}
         </div>
-        <div className="block md:hidden">
-          <IssuesMobileHeader />
-        </div>
       </div>
     </>
   );
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index b70a4614f55..a212220ecbb 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -1,17 +1,16 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // ui
 import { Breadcrumbs, CustomMenu } from "@plane/ui";
 // helper
-import { renderEmoji } from "helpers/emoji.helper";
+import { BreadcrumbLink } from "@/components/common";
+import { ProjectLogo } from "@/components/project";
+import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
-import { useProject, useUser } from "hooks/store";
+import { useProject, useUser } from "@/hooks/store";
 // constants
-import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
 
 export interface IProjectSettingHeader {
   title: string;
@@ -31,8 +30,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
   if (currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER) return null;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-      <SidebarHamburgerToggle />
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <div className="z-50">
@@ -44,13 +42,9 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
                     href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                     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)}
+                      currentProjectDetails && (
+                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                          <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                         </span>
                       )
                     }
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 175534a79e7..6f545f25b1a 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -1,9 +1,22 @@
 import { useCallback } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Plus } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { Plus } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // hooks
+// components
+// ui
+import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+// helpers
+// types
+// constants
+import { ProjectLogo } from "@/components/project";
+import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { truncateText } from "@/helpers/string.helper";
 import {
   useApplication,
   useEventTracker,
@@ -14,30 +27,12 @@ import {
   useProjectState,
   useProjectView,
   useUser,
-} from "hooks/store";
-// components
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
-// ui
-import { Breadcrumbs, Button, 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 "@plane/types";
-// constants
-import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
+} from "@/hooks/store";
 
 export const ProjectViewIssuesHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    viewId: string;
-  };
+  const { workspaceSlug, projectId, viewId } = router.query;
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
@@ -61,43 +56,69 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
 
   const handleLayoutChange = useCallback(
     (layout: TIssueLayouts) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, viewId);
+      if (!workspaceSlug || !projectId || !viewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        { layout: layout },
+        viewId.toString()
+      );
     },
     [workspaceSlug, projectId, viewId, updateFilters]
   );
 
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
-      if (!workspaceSlug || !projectId) return;
+      if (!workspaceSlug || !projectId || !viewId) return;
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
       }
 
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, viewId);
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.FILTERS,
+        { [key]: newValues },
+        viewId.toString()
+      );
     },
     [workspaceSlug, projectId, viewId, issueFilters, updateFilters]
   );
 
   const handleDisplayFilters = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, viewId);
+      if (!workspaceSlug || !projectId || !viewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        viewId.toString()
+      );
     },
     [workspaceSlug, projectId, viewId, updateFilters]
   );
 
   const handleDisplayProperties = useCallback(
     (property: Partial<IIssueDisplayProperties>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, viewId);
+      if (!workspaceSlug || !projectId || !viewId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        EIssueFilterType.DISPLAY_PROPERTIES,
+        property,
+        viewId.toString()
+      );
     },
     [workspaceSlug, projectId, viewId, updateFilters]
   );
@@ -108,9 +129,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-[15] flex h-[3.75rem] w-full 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="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2">
-        <SidebarHamburgerToggle />
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -119,17 +139,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                 href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                 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="grid h-7 w-7 flex-shrink-0 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)}
+                  currentProjectDetails && (
+                    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                      <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                     </span>
                   )
                 }
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index bb070a22f57..971a9e26abd 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -1,16 +1,15 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
 // components
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
+import { ProjectLogo } from "@/components/project";
+import { EUserProjectRoles } from "@/constants/project";
 // constants
-import { EUserProjectRoles } from "constants/project";
+import { useApplication, useProject, useUser } from "@/hooks/store";
 
 export const ProjectViewsHeader: React.FC = observer(() => {
   // router
@@ -30,9 +29,8 @@ export const ProjectViewsHeader: React.FC = observer(() => {
 
   return (
     <>
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
@@ -42,17 +40,9 @@ export const ProjectViewsHeader: React.FC = observer(() => {
                     href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                     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="grid h-7 w-7 flex-shrink-0 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)}
+                      currentProjectDetails && (
+                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                          <ProjectLogo logo={currentProjectDetails?.logo_props} className="text-sm" />
                         </span>
                       )
                     }
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index f6dd7fd3cae..2f502bce596 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -1,30 +1,83 @@
+import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Search, Plus, Briefcase } from "lucide-react";
+import { Search, Plus, Briefcase, X, ListFilter } from "lucide-react";
+import { TProjectFilters } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
+// components
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+// helpers
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-// components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
+import { FiltersDropdown } from "@/components/issues";
+import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useEventTracker, useMember, useProject, useProjectFilter, useUser } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 export const ProjectsHeader = observer(() => {
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
   // store hooks
-  const { commandPalette: commandPaletteStore } = useApplication();
+  const {
+    commandPalette: commandPaletteStore,
+    router: { workspaceSlug },
+  } = useApplication();
   const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const { workspaceProjectIds, searchQuery, setSearchQuery } = useProject();
-
+  const { workspaceProjectIds } = useProject();
+  const {
+    currentWorkspaceDisplayFilters: displayFilters,
+    currentWorkspaceFilters: filters,
+    updateFilters,
+    updateDisplayFilters,
+    searchQuery,
+    updateSearchQuery,
+  } = useProjectFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+  // auth
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
+  const handleFilters = useCallback(
+    (key: keyof TProjectFilters, value: string | string[]) => {
+      if (!workspaceSlug) return;
+      const newValues = filters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, { [key]: newValues });
+    },
+    [filters, updateFilters, workspaceSlug]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else setIsSearchOpen(false);
+    }
+  };
+
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -34,18 +87,74 @@ export const ProjectsHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
-      <div className="flex w-full justify-end items-center gap-3">
+      <div className="w-full flex items-center justify-end gap-3">
         {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className=" flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
-            <Search className="h-3.5" />
-            <input
-              className="border-none w-full bg-transparent text-sm focus:outline-none"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search"
-            />
+          <div className="flex items-center">
+            {!isSearchOpen && (
+              <button
+                type="button"
+                className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+                onClick={() => {
+                  setIsSearchOpen(true);
+                  inputRef.current?.focus();
+                }}
+              >
+                <Search className="h-3.5 w-3.5" />
+              </button>
+            )}
+            <div
+              className={cn(
+                "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+                {
+                  "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+                }
+              )}
+            >
+              <Search className="h-3.5 w-3.5" />
+              <input
+                ref={inputRef}
+                className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 focus:outline-none"
+                placeholder="Search"
+                value={searchQuery}
+                onChange={(e) => updateSearchQuery(e.target.value)}
+                onKeyDown={handleInputKeyDown}
+              />
+              {isSearchOpen && (
+                <button
+                  type="button"
+                  className="grid place-items-center"
+                  onClick={() => {
+                    updateSearchQuery("");
+                    setIsSearchOpen(false);
+                  }}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </div>
           </div>
         )}
+        <ProjectOrderByDropdown
+          value={displayFilters?.order_by}
+          onChange={(val) => {
+            if (!workspaceSlug || val === displayFilters?.order_by) return;
+            updateDisplayFilters(workspaceSlug, {
+              order_by: val,
+            });
+          }}
+        />
+        <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+          <ProjectFiltersSelection
+            displayFilters={displayFilters ?? {}}
+            filters={filters ?? {}}
+            handleFiltersUpdate={handleFilters}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!workspaceSlug) return;
+              updateDisplayFilters(workspaceSlug, val);
+            }}
+            memberIds={workspaceMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
         {isAuthorizedUser && (
           <Button
             prependIcon={<Plus />}
@@ -54,9 +163,9 @@ export const ProjectsHeader = observer(() => {
               setTrackElement("Projects page");
               commandPaletteStore.toggleCreateProjectModal(true);
             }}
-            className="items-center"
+            className="items-center gap-1"
           >
-            <div className="hidden sm:block">Add</div> Project
+            <span className="hidden sm:inline-block">Add</span> Project
           </Button>
         )}
       </div>
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
index 30bc5b2a961..a1e49c7c6c3 100644
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@@ -1,23 +1,22 @@
 // ui
-import { Breadcrumbs, CustomMenu } from "@plane/ui";
-import { BreadcrumbLink } from "components/common";
-// components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { cn } from "helpers/common.helper";
 import { FC } from "react";
-import { useApplication, useUser } from "hooks/store";
-import { ChevronDown, PanelRight } from "lucide-react";
 import { observer } from "mobx-react-lite";
-import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "constants/profile";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { ChevronDown, PanelRight } from "lucide-react";
+import { Breadcrumbs, CustomMenu } from "@plane/ui";
+import { BreadcrumbLink } from "@/components/common";
+// components
+import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useUser } from "@/hooks/store";
 
 type TUserProfileHeader = {
-  type?: string | undefined
-}
+  type?: string | undefined;
+};
 
 export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
-  const { type = undefined } = props
+  const { type = undefined } = props;
 
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
@@ -34,45 +33,59 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
 
   const { theme: themStore } = useApplication();
 
-  return (<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 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">
-      <SidebarHamburgerToggle />
-      <div className="flex justify-between w-full">
-        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
-        </Breadcrumbs>
-        <div className="flex gap-4 md:hidden">
-          <CustomMenu
-            maxHeight={"md"}
-            className="flex flex-grow justify-center text-custom-text-200 text-sm"
-            placement="bottom-start"
-            customButton={
-              <div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md">
-                <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{type}</span>
-                <ChevronDown className="w-4 h-4 text-custom-text-400" />
-              </div>
-            }
-            customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
-            closeOnSelect
-          >
-            <></>
-            {tabsList.map((tab) => (
-              <CustomMenu.MenuItem
-                className="flex items-center gap-2"
-              >
-                <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`} className="text-custom-text-300 w-full">{tab.label}</Link>
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
-          <button className="transition-all block md:hidden" onClick={() => { themStore.toggleProfileSidebar() }}>
-            <PanelRight className={
-              cn("w-4 h-4 block md:hidden", !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")
-            } />
-          </button>
+  return (
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div className="flex justify-between w-full">
+          <Breadcrumbs>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={<BreadcrumbLink href="/profile" label="Activity Overview" />}
+            />
+          </Breadcrumbs>
+          <div className="flex gap-4 md:hidden">
+            <CustomMenu
+              maxHeight={"md"}
+              className="flex flex-grow justify-center text-custom-text-200 text-sm"
+              placement="bottom-start"
+              customButton={
+                <div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md">
+                  <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{type}</span>
+                  <ChevronDown className="w-4 h-4 text-custom-text-400" />
+                </div>
+              }
+              customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+              closeOnSelect
+            >
+              <></>
+              {tabsList.map((tab) => (
+                <CustomMenu.MenuItem className="flex items-center gap-2" key={tab.route}>
+                  <Link
+                    key={tab.route}
+                    href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}
+                    className="text-custom-text-300 w-full"
+                  >
+                    {tab.label}
+                  </Link>
+                </CustomMenu.MenuItem>
+              ))}
+            </CustomMenu>
+            <button
+              className="transition-all block md:hidden"
+              onClick={() => {
+                themStore.toggleProfileSidebar();
+              }}
+            >
+              <PanelRight
+                className={cn(
+                  "w-4 h-4 block md:hidden",
+                  !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
+                )}
+              />
+            </button>
+          </div>
         </div>
       </div>
     </div>
-  </div>)
+  );
 });
-
-
diff --git a/web/components/headers/workspace-active-cycles.tsx b/web/components/headers/workspace-active-cycles.tsx
index 195b8947159..9afa6ce6624 100644
--- a/web/components/headers/workspace-active-cycles.tsx
+++ b/web/components/headers/workspace-active-cycles.tsx
@@ -1,15 +1,13 @@
 import { observer } from "mobx-react-lite";
 // ui
+import { Crown } from "lucide-react";
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
-import { BreadcrumbLink } from "components/common";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "@/components/common";
 // icons
-import { Crown } from "lucide-react";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-      <SidebarHamburgerToggle />
       <div className="flex items-center gap-2">
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index a6ad67f05e0..f01420b2468 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -1,14 +1,13 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { BarChart2, PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
-import { useApplication } from "hooks/store";
-import { observer } from "mobx-react";
-import { cn } from "helpers/common.helper";
-import { useEffect } from "react";
+import { BreadcrumbLink } from "@/components/common";
+import { cn } from "@/helpers/common.helper";
+import { useApplication } from "@/hooks/store";
 
 export const WorkspaceAnalyticsHeader = observer(() => {
   const router = useRouter();
@@ -34,10 +33,9 @@ export const WorkspaceAnalyticsHeader = observer(() => {
   return (
     <>
       <div
-        className={`relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+        className={`relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4`}
       >
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
           <div className="flex items-center justify-between w-full">
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
@@ -47,11 +45,21 @@ export const WorkspaceAnalyticsHeader = observer(() => {
                 }
               />
             </Breadcrumbs>
-            {analytics_tab === 'custom' &&
-              <button className="block md:hidden" onClick={() => { themeStore.toggleWorkspaceAnalyticsSidebar() }}>
-                <PanelRight className={cn("w-4 h-4 block md:hidden", !themeStore.workspaceAnalyticsSidebarCollapsed ? "text-custom-primary-100" : "text-custom-text-200")} />
+            {analytics_tab === "custom" && (
+              <button
+                className="block md:hidden"
+                onClick={() => {
+                  themeStore.toggleWorkspaceAnalyticsSidebar();
+                }}
+              >
+                <PanelRight
+                  className={cn(
+                    "w-4 h-4 block md:hidden",
+                    !themeStore.workspaceAnalyticsSidebarCollapsed ? "text-custom-primary-100" : "text-custom-text-200"
+                  )}
+                />
               </button>
-            }
+            )}
           </div>
         </div>
       </div>
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 6b85577f67d..880b4440665 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -1,17 +1,16 @@
-import { LayoutGrid, Zap } from "lucide-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
+import { Home, Zap } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // hooks
-import { useEventTracker } from "hooks/store";
 // components
-import { BreadcrumbLink } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "@/components/common";
 // constants
-import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "constants/event-tracker";
+import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "@/constants/event-tracker";
+import { useEventTracker } from "@/hooks/store";
 
 export const WorkspaceDashboardHeader = () => {
   // hooks
@@ -20,16 +19,13 @@ export const WorkspaceDashboardHeader = () => {
 
   return (
     <>
-      <div className="relative z-[15] flex h-[3.75rem] 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="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={
-                  <BreadcrumbLink label="Dashboard" icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />} />
-                }
+                link={<BreadcrumbLink label="Home" icon={<Home className="h-4 w-4 text-custom-text-300" />} />}
               />
             </Breadcrumbs>
           </div>
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
index 5ced552048e..673d65ba49e 100644
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@@ -1,14 +1,13 @@
 import { FC } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // ui
-import { Breadcrumbs, CustomMenu } from "@plane/ui";
 import { Settings } from "lucide-react";
+import { Breadcrumbs, CustomMenu } from "@plane/ui";
 // hooks
-import { observer } from "mobx-react-lite";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
+import { WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
 
 export interface IWorkspaceSettingHeader {
   title: string;
@@ -23,7 +22,6 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 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">
-        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/icons/attachment-icon.tsx b/web/components/icons/attachment-icon.tsx
index 88fbd781ec7..617a73dbfd8 100644
--- a/web/components/icons/attachment-icon.tsx
+++ b/web/components/icons/attachment-icon.tsx
@@ -14,7 +14,7 @@ import {
   SvgIcon,
   TxtIcon,
   VideoIcon,
-} from "components/icons";
+} from "@/components/icons";
 
 export const getFileIcon = (fileType: string) => {
   switch (fileType) {
diff --git a/web/components/icons/module/module-status-icon.tsx b/web/components/icons/module/module-status-icon.tsx
index a8e87e55c9c..a31e218e17f 100644
--- a/web/components/icons/module/module-status-icon.tsx
+++ b/web/components/icons/module/module-status-icon.tsx
@@ -1,4 +1,5 @@
 // icons
+import { TModuleStatus } from "@plane/types";
 import {
   ModuleBacklogIcon,
   ModuleCancelledIcon,
@@ -6,9 +7,8 @@ import {
   ModuleInProgressIcon,
   ModulePausedIcon,
   ModulePlannedIcon,
-} from "components/icons";
+} from "@/components/icons";
 // types
-import { TModuleStatus } from "@plane/types";
 
 type Props = {
   status: TModuleStatus;
diff --git a/web/components/icons/priority-icon.tsx b/web/components/icons/priority-icon.tsx
index b23f56eabac..36ea67b3de0 100644
--- a/web/components/icons/priority-icon.tsx
+++ b/web/components/icons/priority-icon.tsx
@@ -14,12 +14,12 @@ export const PriorityIcon: React.FC<Props> = ({ priority, className = "" }) => {
       {priority === "urgent"
         ? "error"
         : priority === "high"
-        ? "signal_cellular_alt"
-        : priority === "medium"
-        ? "signal_cellular_alt_2_bar"
-        : priority === "low"
-        ? "signal_cellular_alt_1_bar"
-        : "block"}
+          ? "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/state/state-group-icon.tsx b/web/components/icons/state/state-group-icon.tsx
index 15debf5f22f..2e788de0f92 100644
--- a/web/components/icons/state/state-group-icon.tsx
+++ b/web/components/icons/state/state-group-icon.tsx
@@ -1,15 +1,15 @@
 // icons
+import { TStateGroups } from "@plane/types";
 import {
   StateGroupBacklogIcon,
   StateGroupCancelledIcon,
   StateGroupCompletedIcon,
   StateGroupStartedIcon,
   StateGroupUnstartedIcon,
-} from "components/icons";
+} from "@/components/icons";
 // types
-import { TStateGroups } from "@plane/types";
+import { STATE_GROUPS } from "@/constants/state";
 // constants
-import { STATE_GROUPS } from "constants/state";
 
 type Props = {
   className?: string;
diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
index 26f58131e77..38987681271 100644
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@@ -2,12 +2,12 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Inbox } from "lucide-react";
 // hooks
-import { useInboxIssues } from "hooks/store";
+import { Loader } from "@plane/ui";
+import { InboxIssueActionsHeader } from "@/components/inbox";
+import { InboxIssueDetailRoot } from "@/components/issues/issue-detail/inbox";
+import { useInboxIssues } from "@/hooks/store";
 // components
-import { InboxIssueActionsHeader } from "components/inbox";
-import { InboxIssueDetailRoot } from "components/issues/issue-detail/inbox";
 // ui
-import { Loader } from "@plane/ui";
 
 type TInboxContentRoot = {
   workspaceSlug: string;
diff --git a/web/components/inbox/inbox-issue-actions.tsx b/web/components/inbox/inbox-issue-actions.tsx
index 48d9157c63e..4c8a21592d7 100644
--- a/web/components/inbox/inbox-issue-actions.tsx
+++ b/web/components/inbox/inbox-issue-actions.tsx
@@ -1,26 +1,27 @@
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { DayPicker } from "react-day-picker";
+import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Trash2, XCircle } from "lucide-react";
 import { Popover } from "@headlessui/react";
-// hooks
-import { useUser, useInboxIssues, useIssueDetail, useWorkspace, useEventTracker } from "hooks/store";
-import useToast from "hooks/use-toast";
+// icons
+import type { TInboxDetailedStatus } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
   AcceptIssueModal,
   DeclineIssueModal,
   DeleteInboxIssueModal,
   SelectDuplicateInboxIssueModal,
-} from "components/inbox";
-// ui
-import { Button } from "@plane/ui";
-// icons
-import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Trash2, XCircle } from "lucide-react";
+} from "@/components/inbox";
+import { ISSUE_DELETED } from "@/constants/event-tracker";
+import { EUserProjectRoles } from "@/constants/project";
+// hooks
+import { getDate } from "@/helpers/date-time.helper";
+import { useUser, useInboxIssues, useIssueDetail, useWorkspace, useEventTracker } from "@/hooks/store";
 // types
-import type { TInboxStatus, TInboxDetailedStatus } from "@plane/types";
-import { EUserProjectRoles } from "constants/project";
-import { ISSUE_DELETED } from "constants/event-tracker";
+//helpers
 
 type TInboxIssueActionsHeader = {
   workspaceSlug: string;
@@ -30,7 +31,7 @@ type TInboxIssueActionsHeader = {
 };
 
 type TInboxIssueOperations = {
-  updateInboxIssueStatus: (data: TInboxStatus) => Promise<void>;
+  updateInboxIssueStatus: (data: TInboxDetailedStatus) => Promise<void>;
   removeInboxIssue: () => Promise<void>;
 };
 
@@ -51,7 +52,6 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
     currentUser,
     membership: { currentProjectRole },
   } = useUser();
-  const { setToastAlert } = useToast();
 
   // states
   const [date, setDate] = useState(new Date());
@@ -74,8 +74,8 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) throw new Error("Missing required parameters");
           await updateInboxIssueStatus(workspaceSlug, projectId, inboxId, inboxIssueId, data);
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Something went wrong while updating inbox status. Please try again.",
           });
@@ -98,8 +98,8 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
           });
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Something went wrong while deleting inbox issue. Please try again.",
           });
@@ -122,7 +122,6 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
       inboxIssueId,
       updateInboxIssueStatus,
       removeInboxIssue,
-      setToastAlert,
       captureIssueEvent,
       router,
     ]
@@ -171,11 +170,11 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   const today = new Date();
-  const tomorrow = new Date(today);
-  tomorrow.setDate(today.getDate() + 1);
+  const tomorrow = getDate(today);
+  tomorrow?.setDate(today.getDate() + 1);
   useEffect(() => {
     if (!issueStatus || !issueStatus.snoozed_till) return;
-    setDate(new Date(issueStatus.snoozed_till));
+    setDate(issueStatus.snoozed_till);
   }, [issueStatus]);
 
   if (!issueStatus || !issue || !inboxIssues) return <></>;
@@ -235,7 +234,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
       )}
 
       {inboxIssueId && (
-        <div className="px-4 w-full h-full relative flex items-center gap-2 justify-between">
+        <div className="relative flex h-full w-full items-center justify-between gap-2 px-4">
           <div className="flex items-center gap-x-2">
             <button
               type="button"
@@ -269,19 +268,23 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                     {({ close }) => (
                       <div className="flex h-full w-full flex-col gap-y-1">
                         <DayPicker
-                          selected={date ? new Date(date) : undefined}
-                          defaultMonth={date ? new Date(date) : undefined}
+                          selected={getDate(date)}
+                          defaultMonth={getDate(date)}
                           onSelect={(date) => {
                             if (!date) return;
                             setDate(date);
                           }}
                           mode="single"
                           className="border border-custom-border-200 rounded-md p-3"
-                          disabled={[
-                            {
-                              before: tomorrow,
-                            },
-                          ]}
+                          disabled={
+                            tomorrow
+                              ? [
+                                  {
+                                    before: tomorrow,
+                                  },
+                                ]
+                              : undefined
+                          }
                         />
                         <Button
                           variant="primary"
@@ -289,7 +292,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                             close();
                             inboxIssueOperations.updateInboxIssueStatus({
                               status: 0,
-                              snoozed_till: new Date(date),
+                              snoozed_till: date,
                             });
                           }}
                         >
diff --git a/web/components/inbox/inbox-issue-status.tsx b/web/components/inbox/inbox-issue-status.tsx
index 2d101f2aaf7..701feff6ba7 100644
--- a/web/components/inbox/inbox-issue-status.tsx
+++ b/web/components/inbox/inbox-issue-status.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useInboxIssues } from "hooks/store";
+import { INBOX_STATUS } from "@/constants/inbox";
+import { useInboxIssues } from "@/hooks/store";
 // constants
-import { INBOX_STATUS } from "constants/inbox";
 
 type Props = {
   workspaceSlug: string;
@@ -28,7 +28,7 @@ export const InboxIssueStatus: React.FC<Props> = observer((props) => {
   if (!inboxIssueStatusDetail) return <></>;
 
   const isSnoozedDatePassed =
-    inboxIssueDetail.status === 0 && new Date(inboxIssueDetail.snoozed_till ?? "") < new Date();
+    inboxIssueDetail.status === 0 && !!inboxIssueDetail.snoozed_till && inboxIssueDetail.snoozed_till < new Date();
 
   return (
     <div
@@ -46,7 +46,7 @@ export const InboxIssueStatus: React.FC<Props> = observer((props) => {
           workspaceSlug,
           projectId,
           inboxIssueDetail.duplicate_to ?? "",
-          new Date(inboxIssueDetail.snoozed_till ?? "")
+          inboxIssueDetail.snoozed_till
         )
       ) : (
         <span>{inboxIssueStatusDetail.title}</span>
diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
index 5ec63ea8add..d8ccb68b621 100644
--- a/web/components/inbox/modals/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
+import { CheckCircle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
+import type { TIssue } from "@plane/types";
 // icons
-import { CheckCircle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
-import type { TIssue } from "@plane/types";
-import { useProject } from "hooks/store";
+import { useProject } from "@/hooks/store";
 
 type Props = {
   data: TIssue;
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
index 84c4bef1ea8..c32bcf8f4b9 100644
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ b/web/components/inbox/modals/create-issue-modal.tsx
@@ -1,25 +1,24 @@
 import { Fragment, useRef, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Dialog, Transition } from "@headlessui/react";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { Sparkle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import { TIssue } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useWorkspace, useInboxIssues, useMention } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, Input, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+import { GptAssistantPopover } from "@/components/core";
+import { PriorityDropdown } from "@/components/dropdowns";
+import { ISSUE_CREATED } from "@/constants/event-tracker";
+import { useApplication, useEventTracker, useWorkspace, useInboxIssues, useMention } from "@/hooks/store";
 // services
-import { FileService } from "services/file.service";
-import { AIService } from "services/ai.service";
+import { AIService } from "@/services/ai.service";
+import { FileService } from "@/services/file.service";
 // components
-import { PriorityDropdown } from "components/dropdowns";
-import { GptAssistantPopover } from "components/core";
 // ui
-import { Button, Input, ToggleSwitch } from "@plane/ui";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -46,9 +45,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   // refs
   const editorRef = useRef<any>(null);
-  // toast alert
-  const { setToastAlert } = useToast();
-  const { mentionHighlights, mentionSuggestions } = useMention();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query as {
@@ -56,6 +52,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
     projectId: string;
     inboxId: string;
   };
+  // hooks
+  const { mentionHighlights, mentionSuggestions } = useMention();
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
 
@@ -75,7 +73,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
     reset,
     watch,
     getValues,
-    setValue,
   } = useForm({ defaultValues });
 
   const handleClose = () => {
@@ -121,9 +118,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
   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")}`);
+    editorRef.current?.setEditorValueAtCursorPosition(response);
   };
 
   const handleAutoGenerateDescription = async () => {
@@ -138,8 +133,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
       })
       .then((res) => {
         if (res.response === "")
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message:
               "Issue title isn't informative enough to generate the description. Please try with a different title.",
@@ -150,14 +145,14 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
         const error = err?.data?.error;
 
         if (err.status === 429)
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: error || "Some error occurred. Please try again.",
           });
diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
index a69c8d0e1c5..3fff8e20523 100644
--- a/web/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
+import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
+import type { TIssue } from "@plane/types";
 // icons
-import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
-import type { TIssue } from "@plane/types";
-import { useProject } from "hooks/store";
+import { useProject } from "@/hooks/store";
 
 type Props = {
   data: TIssue;
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
index c06621c034a..84a0a728a6f 100644
--- a/web/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
+import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useProject } from "hooks/store";
 // icons
-import { AlertTriangle } from "lucide-react";
+import type { TIssue } from "@plane/types";
 // ui
 import { Button } from "@plane/ui";
+import { useProject } from "@/hooks/store";
 // types
-import type { TIssue } from "@plane/types";
 
 type Props = {
   data: TIssue;
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index e4acca626e2..2df720dd8b2 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-
 // hooks
-import useToast from "hooks/use-toast";
-// services
-import { IssueService } from "services/issue";
-// ui
-import { Button, LayersIcon } from "@plane/ui";
 // icons
-import { Search } from "lucide-react";
-// fetch-keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
-import { useProject, useProjectState } from "hooks/store";
+// components
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+// services
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+import { PROJECT_ISSUES_LIST } from "@/constants/fetch-keys";
+import { useProject, useProjectState } from "@/hooks/store";
+import { IssueService } from "@/services/issue";
 
 type Props = {
   isOpen: boolean;
@@ -30,8 +31,6 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const [query, setQuery] = useState("");
   const [selectedItem, setSelectedItem] = useState<string>("");
 
-  const { setToastAlert } = useToast();
-
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
@@ -62,9 +61,9 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
   const handleSubmit = () => {
     if (!selectedItem || selectedItem.length === 0)
-      return setToastAlert({
+      return setToast({
         title: "Error",
-        type: "error",
+        type: TOAST_TYPE.ERROR,
       });
     onSubmit(selectedItem);
     handleClose();
@@ -163,12 +162,15 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                           </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-sm 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 className="flex flex-col items-center justify-center px-3 py-8 text-center">
+                          <EmptyState
+                            type={
+                              query === ""
+                                ? EmptyStateType.ISSUE_RELATION_EMPTY_STATE
+                                : EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
+                            }
+                            layout="screen-simple"
+                          />
                         </div>
                       )}
                     </Combobox.Options>
diff --git a/web/components/inbox/sidebar/filter/applied-filters.tsx b/web/components/inbox/sidebar/filter/applied-filters.tsx
index 0a43e11ccdf..4569cf5777e 100644
--- a/web/components/inbox/sidebar/filter/applied-filters.tsx
+++ b/web/components/inbox/sidebar/filter/applied-filters.tsx
@@ -1,16 +1,16 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // mobx store
-import { useInboxIssues } from "hooks/store";
 // icons
 import { X } from "lucide-react";
+import { TInboxIssueFilterOptions, TIssuePriorities } from "@plane/types";
 import { PriorityIcon } from "@plane/ui";
 // helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+import { INBOX_STATUS } from "@/constants/inbox";
+import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 // types
-import { TInboxIssueFilterOptions, TIssuePriorities } from "@plane/types";
+import { useInboxIssues } from "@/hooks/store";
 // constants
-import { INBOX_STATUS } from "constants/inbox";
 
 type TInboxIssueAppliedFilter = { workspaceSlug: string; projectId: string; inboxId: string };
 
@@ -80,12 +80,12 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
                             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"
+                                ? "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"
                           }`}
                         >
                           <div className="relative flex items-center gap-1">
diff --git a/web/components/inbox/sidebar/filter/filter-selection.tsx b/web/components/inbox/sidebar/filter/filter-selection.tsx
index a34cf187194..fc9dc20eb62 100644
--- a/web/components/inbox/sidebar/filter/filter-selection.tsx
+++ b/web/components/inbox/sidebar/filter/filter-selection.tsx
@@ -1,17 +1,17 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { TInboxIssueFilterOptions } from "@plane/types";
 // mobx store
-import { useInboxIssues } from "hooks/store";
 // ui
-import { MultiLevelDropdown } from "components/ui";
 // icons
 import { PriorityIcon } from "@plane/ui";
+import { MultiLevelDropdown } from "@/components/ui";
 // types
-import { TInboxIssueFilterOptions } from "@plane/types";
 // constants
-import { INBOX_STATUS } from "constants/inbox";
-import { ISSUE_PRIORITIES } from "constants/issue";
+import { INBOX_STATUS } from "@/constants/inbox";
+import { ISSUE_PRIORITIES } from "@/constants/issue";
+import { useInboxIssues } from "@/hooks/store";
 
 type TInboxIssueFilterSelection = { workspaceSlug: string; projectId: string; inboxId: string };
 
diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx
index a85b7a02eed..792ade8608a 100644
--- a/web/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/components/inbox/sidebar/inbox-list-item.tsx
@@ -5,13 +5,14 @@ import { useRouter } from "next/router";
 // icons
 import { CalendarDays } from "lucide-react";
 // hooks
-import { useInboxIssues, useIssueDetail, useProject } from "hooks/store";
 // ui
 import { Tooltip, PriorityIcon } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { InboxIssueStatus } from "@/components/inbox/inbox-issue-status";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 // components
-import { InboxIssueStatus } from "components/inbox/inbox-issue-status";
+import { useInboxIssues, useIssueDetail, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TInboxIssueListItem = {
   workspaceSlug: string;
@@ -33,7 +34,7 @@ export const InboxIssueListItem: FC<TInboxIssueListItem> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-
+  const { isMobile } = usePlatformOS();
   const inboxIssueDetail = getInboxIssueByIssueId(inboxId, issueId);
   const issue = getIssueById(issueId);
 
@@ -83,10 +84,14 @@ export const InboxIssueListItem: FC<TInboxIssueListItem> = observer((props) => {
           </div>
 
           <div className="flex flex-wrap items-center gap-2">
-            <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
+            <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`} isMobile={isMobile}>
               <PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
             </Tooltip>
-            <Tooltip tooltipHeading="Created on" tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}>
+            <Tooltip
+              tooltipHeading="Created on"
+              tooltipContent={`${renderFormattedDate(issue.created_at ?? "")}`}
+              isMobile={isMobile}
+            >
               <div className="flex items-center gap-1 rounded border border-custom-border-200 px-2 py-[0.19rem] text-xs text-custom-text-200 shadow-sm">
                 <CalendarDays size={12} strokeWidth={1.5} />
                 <span>{renderFormattedDate(issue.created_at ?? "")}</span>
diff --git a/web/components/inbox/sidebar/inbox-list.tsx b/web/components/inbox/sidebar/inbox-list.tsx
index bde6e66b295..9d77f6baf00 100644
--- a/web/components/inbox/sidebar/inbox-list.tsx
+++ b/web/components/inbox/sidebar/inbox-list.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useInboxIssues } from "hooks/store";
+import { useInboxIssues } from "@/hooks/store";
 // components
 import { InboxIssueListItem } from "../";
 
@@ -20,7 +20,13 @@ export const InboxIssueList: FC<TInboxIssueList> = observer((props) => {
   return (
     <div className="overflow-y-auto w-full h-full vertical-scrollbar scrollbar-md">
       {inboxIssueIds.map((issueId) => (
-        <InboxIssueListItem workspaceSlug={workspaceSlug} projectId={projectId} inboxId={inboxId} issueId={issueId} />
+        <InboxIssueListItem
+          key={issueId}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          inboxId={inboxId}
+          issueId={issueId}
+        />
       ))}
     </div>
   );
diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx
index adfc37dcf86..cedddba25af 100644
--- a/web/components/inbox/sidebar/root.tsx
+++ b/web/components/inbox/sidebar/root.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react";
-import { Inbox } from "lucide-react";
 import { observer } from "mobx-react";
+import { Inbox } from "lucide-react";
 // hooks
-import { useInboxIssues } from "hooks/store";
+import { InboxSidebarLoader } from "@/components/ui";
+import { useInboxIssues } from "@/hooks/store";
 // ui
-import { InboxSidebarLoader } from "components/ui";
 // components
 import { InboxIssueList, InboxIssueFilterSelection, InboxIssueAppliedFilter } from "../";
 
diff --git a/web/components/instance/ai-form.tsx b/web/components/instance/ai-form.tsx
index 50ea90096bc..680cb41ca56 100644
--- a/web/components/instance/ai-form.tsx
+++ b/web/components/instance/ai-form.tsx
@@ -1,13 +1,12 @@
 import { FC, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
+import { IFormattedInstanceConfiguration } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { IFormattedInstanceConfiguration } from "@plane/types";
+import { useApplication } from "@/hooks/store";
 // hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
 
 export interface IInstanceAIForm {
   config: IFormattedInstanceConfiguration;
@@ -24,8 +23,6 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   // store
   const { instance: instanceStore } = useApplication();
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -44,9 +41,9 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
     await instanceStore
       .updateInstanceConfigurations(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "AI Settings updated successfully",
         })
       )
diff --git a/web/components/instance/email-form.tsx b/web/components/instance/email-form.tsx
index 9a97f32883d..83056f7698f 100644
--- a/web/components/instance/email-form.tsx
+++ b/web/components/instance/email-form.tsx
@@ -1,13 +1,12 @@
 import { FC, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // ui
-import { Button, Input, ToggleSwitch } from "@plane/ui";
 import { Eye, EyeOff } from "lucide-react";
-// types
 import { IFormattedInstanceConfiguration } from "@plane/types";
+import { Button, Input, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+// types
+import { useApplication } from "@/hooks/store";
 // hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
 
 export interface IInstanceEmailForm {
   config: IFormattedInstanceConfiguration;
@@ -19,7 +18,7 @@ export interface EmailFormValues {
   EMAIL_HOST_USER: string;
   EMAIL_HOST_PASSWORD: string;
   EMAIL_USE_TLS: string;
-  // EMAIL_USE_SSL: string;
+  EMAIL_USE_SSL: string;
   EMAIL_FROM: string;
 }
 
@@ -29,8 +28,6 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { instance: instanceStore } = useApplication();
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -44,7 +41,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
       EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
       EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
-      // EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
       EMAIL_FROM: config["EMAIL_FROM"],
     },
   });
@@ -55,9 +52,9 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
     await instanceStore
       .updateInstanceConfigurations(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Email Settings updated successfully",
         })
       )
@@ -221,7 +218,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
           </div>
         </div>
 
-        {/* <div className="flex items-center gap-10 pt-4 mr-8">
+        <div className="flex items-center gap-10 pt-4 mr-8">
           <div className="grow">
             <div className="text-custom-text-100 font-medium text-sm">
               Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"}
@@ -245,7 +242,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
               )}
             />
           </div>
-        </div> */}
+        </div>
       </div>
 
       <div className="flex max-w-4xl items-center py-1">
diff --git a/web/components/instance/general-form.tsx b/web/components/instance/general-form.tsx
index 7fa06265f9d..b3c5471b728 100644
--- a/web/components/instance/general-form.tsx
+++ b/web/components/instance/general-form.tsx
@@ -1,12 +1,11 @@
 import { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { IInstance, IInstanceAdmin } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { IInstance, IInstanceAdmin } from "@plane/types";
+import { useApplication } from "@/hooks/store";
 // hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
 
 export interface IInstanceGeneralForm {
   instance: IInstance;
@@ -22,8 +21,6 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
   const { instance, instanceAdmins } = props;
   // store hooks
   const { instance: instanceStore } = useApplication();
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -42,9 +39,9 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
     await instanceStore
       .updateInstanceInfo(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Settings updated successfully",
         })
       )
diff --git a/web/components/instance/github-config-form.tsx b/web/components/instance/github-config-form.tsx
index 75639f82bd3..694eecb927d 100644
--- a/web/components/instance/github-config-form.tsx
+++ b/web/components/instance/github-config-form.tsx
@@ -1,13 +1,12 @@
 import { FC, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Copy, Eye, EyeOff } from "lucide-react";
+import { IFormattedInstanceConfiguration } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { IFormattedInstanceConfiguration } from "@plane/types";
+import { useApplication } from "@/hooks/store";
 // hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
 
 export interface IInstanceGithubConfigForm {
   config: IFormattedInstanceConfiguration;
@@ -24,8 +23,6 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
   const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { instance: instanceStore } = useApplication();
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -44,9 +41,9 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
     await instanceStore
       .updateInstanceConfigurations(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Github Configuration Settings updated successfully",
         })
       )
@@ -145,9 +142,9 @@ export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) =
             className="flex items-center justify-between py-2"
             onClick={() => {
               navigator.clipboard.writeText(originURL);
-              setToastAlert({
+              setToast({
                 message: "The Origin URL has been successfully copied to your clipboard",
-                type: "success",
+                type: TOAST_TYPE.SUCCESS,
                 title: "Copied to clipboard",
               });
             }}
diff --git a/web/components/instance/google-config-form.tsx b/web/components/instance/google-config-form.tsx
index cd7c3ab7d60..b25b240aa6b 100644
--- a/web/components/instance/google-config-form.tsx
+++ b/web/components/instance/google-config-form.tsx
@@ -1,13 +1,12 @@
 import { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Copy } from "lucide-react";
+import { IFormattedInstanceConfiguration } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { IFormattedInstanceConfiguration } from "@plane/types";
+import { useApplication } from "@/hooks/store";
 // hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
 
 export interface IInstanceGoogleConfigForm {
   config: IFormattedInstanceConfiguration;
@@ -22,8 +21,6 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
   const { config } = props;
   // store hooks
   const { instance: instanceStore } = useApplication();
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -42,9 +39,9 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
     await instanceStore
       .updateInstanceConfigurations(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Google Configuration Settings updated successfully",
         })
       )
@@ -94,9 +91,9 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
             className="flex items-center justify-between py-2"
             onClick={() => {
               navigator.clipboard.writeText(originURL);
-              setToastAlert({
+              setToast({
                 message: "The Origin URL has been successfully copied to your clipboard",
-                type: "success",
+                type: TOAST_TYPE.SUCCESS,
                 title: "Copied to clipboard",
               });
             }}
diff --git a/web/components/instance/help-section.tsx b/web/components/instance/help-section.tsx
index 30cc2a3638c..5f6603fe74c 100644
--- a/web/components/instance/help-section.tsx
+++ b/web/components/instance/help-section.tsx
@@ -1,11 +1,11 @@
 import { FC, useState, useRef } from "react";
-import { Transition } from "@headlessui/react";
 import Link from "next/link";
 import { FileText, HelpCircle, MessagesSquare, MoveLeft } from "lucide-react";
+import { Transition } from "@headlessui/react";
 // hooks
-import { useApplication } from "hooks/store";
-// icons
 import { DiscordIcon, GithubIcon } from "@plane/ui";
+import { useApplication } from "@/hooks/store";
+// icons
 // assets
 import packageJson from "package.json";
 
diff --git a/web/components/instance/image-config-form.tsx b/web/components/instance/image-config-form.tsx
index 93ce8871937..af8185b0e2d 100644
--- a/web/components/instance/image-config-form.tsx
+++ b/web/components/instance/image-config-form.tsx
@@ -1,13 +1,12 @@
 import { FC, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
+import { IFormattedInstanceConfiguration } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { IFormattedInstanceConfiguration } from "@plane/types";
+import { useApplication } from "@/hooks/store";
 // hooks
-import { useApplication } from "hooks/store";
-import useToast from "hooks/use-toast";
 
 export interface IInstanceImageConfigForm {
   config: IFormattedInstanceConfiguration;
@@ -23,8 +22,6 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
   const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { instance: instanceStore } = useApplication();
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -42,9 +39,9 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
     await instanceStore
       .updateInstanceConfigurations(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Image Configuration Settings updated successfully",
         })
       )
diff --git a/web/components/instance/instance-admin-restriction.tsx b/web/components/instance/instance-admin-restriction.tsx
index b407d0346d6..36bfa405adc 100644
--- a/web/components/instance/instance-admin-restriction.tsx
+++ b/web/components/instance/instance-admin-restriction.tsx
@@ -1,12 +1,12 @@
 import { FC } from "react";
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 // images
+import { LayoutGrid } from "lucide-react";
+import { Button } from "@plane/ui";
 import AccessDeniedImg from "public/auth/access-denied.svg";
 // ui
-import { Button } from "@plane/ui";
 // icons
-import { LayoutGrid } from "lucide-react";
 
 interface InstanceAdminRestrictionProps {
   redirectWorkspaceSlug: string;
diff --git a/web/components/instance/not-ready-view.tsx b/web/components/instance/not-ready-view.tsx
index f82a7b8f62c..6e5b68a101b 100644
--- a/web/components/instance/not-ready-view.tsx
+++ b/web/components/instance/not-ready-view.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import Image from "next/image";
+import Link from "next/link";
 import { useTheme } from "next-themes";
+// icons
+import { UserCog2 } from "lucide-react";
+// ui
+import { getButtonStyling } from "@plane/ui";
 // images
 import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
-import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 
 export const InstanceNotReady = () => {
   const { resolvedTheme } = useTheme();
@@ -25,6 +30,10 @@ export const InstanceNotReady = () => {
             <div className="flex w-full flex-col items-center gap-5 py-12 pb-20">
               <h3 className="text-2xl font-medium">Your Plane instance isn{"'"}t ready yet</h3>
               <p className="text-sm">Ask your Instance Admin to complete set-up first.</p>
+              <Link href="/god-mode" className={`${getButtonStyling("primary", "md")} mt-4`}>
+                <UserCog2 className="h-3.5 w-3.5" />
+                Get started
+              </Link>
             </div>
           </div>
         </div>
diff --git a/web/components/instance/setup-done-view.tsx b/web/components/instance/setup-done-view.tsx
index 163b00ca5de..6c15ac5a68c 100644
--- a/web/components/instance/setup-done-view.tsx
+++ b/web/components/instance/setup-done-view.tsx
@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication } from "hooks/store";
-// ui
-import { Button } from "@plane/ui";
 import { UserCog2 } from "lucide-react";
+import { Button } from "@plane/ui";
+import { useApplication } from "@/hooks/store";
+// ui
 // images
 import instanceSetupDone from "public/instance-setup-done.webp";
 import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
diff --git a/web/components/instance/setup-form/root.tsx b/web/components/instance/setup-form/root.tsx
index 2d98b45d666..5659d01293e 100644
--- a/web/components/instance/setup-form/root.tsx
+++ b/web/components/instance/setup-form/root.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 // components
-import { LatestFeatureBlock } from "components/common";
-import { InstanceSetupDone, InstanceSetupSignInForm } from "components/instance";
+import { LatestFeatureBlock } from "@/components/common";
+import { InstanceSetupDone, InstanceSetupSignInForm } from "@/components/instance";
 
 export enum EInstanceSetupSteps {
   SIGN_IN = "SIGN_IN",
diff --git a/web/components/instance/setup-form/sign-in-form.tsx b/web/components/instance/setup-form/sign-in-form.tsx
index c4a9de6a396..476b9b189e6 100644
--- a/web/components/instance/setup-form/sign-in-form.tsx
+++ b/web/components/instance/setup-form/sign-in-form.tsx
@@ -1,17 +1,15 @@
 import { FC, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { Eye, EyeOff, XCircle } from "lucide-react";
-// hooks
-import { useUser } from "hooks/store";
 // ui
-import { Input, Button } from "@plane/ui";
+import { Input, Button, TOAST_TYPE, setToast } from "@plane/ui";
+// helpers
+import { checkEmailValidity } from "@/helpers/string.helper";
+// hooks
+import { useUser } from "@/hooks/store";
 // services
-import { AuthService } from "services/auth.service";
+import { AuthService } from "@/services/auth.service";
 const authService = new AuthService();
-// hooks
-import useToast from "hooks/use-toast";
-// helpers
-import { checkEmailValidity } from "helpers/string.helper";
 
 interface InstanceSetupEmailFormValues {
   email: string;
@@ -40,8 +38,6 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
       password: "",
     },
   });
-  // hooks
-  const { setToastAlert } = useToast();
 
   const handleFormSubmit = async (formValues: InstanceSetupEmailFormValues) => {
     const payload = {
@@ -56,8 +52,8 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
         handleNextStep(formValues.email);
       })
       .catch((err) => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
diff --git a/web/components/instance/setup-view.tsx b/web/components/instance/setup-view.tsx
index e71f61cbcc7..6f4693e37da 100644
--- a/web/components/instance/setup-view.tsx
+++ b/web/components/instance/setup-view.tsx
@@ -2,9 +2,9 @@ import { useEffect, useCallback } from "react";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 // components
-import { InstanceSetupFormRoot } from "components/instance";
+import { InstanceSetupFormRoot } from "@/components/instance";
 // hooks
-import { useUser } from "hooks/store";
+import { useUser } from "@/hooks/store";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
diff --git a/web/components/instance/sidebar-dropdown.tsx b/web/components/instance/sidebar-dropdown.tsx
index 2bac426d62a..484ebe2c9f7 100644
--- a/web/components/instance/sidebar-dropdown.tsx
+++ b/web/components/instance/sidebar-dropdown.tsx
@@ -1,19 +1,18 @@
 import { Fragment } from "react";
-import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
 import { mutate } from "swr";
 // components
+import { LogIn, LogOut, Settings, UserCog2 } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 // icons
-import { LogIn, LogOut, Settings, UserCog2 } from "lucide-react";
 // hooks
-import { useApplication, useUser } from "hooks/store";
-// hooks
-import useToast from "hooks/use-toast";
+import { Avatar, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+import { useApplication, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // ui
-import { Avatar, Tooltip } from "@plane/ui";
 
 // Static Data
 const PROFILE_LINKS = [
@@ -35,9 +34,8 @@ export const InstanceSidebarDropdown = observer(() => {
   } = useApplication();
   const { signOut, currentUser, currentUserSettings } = useUser();
   // hooks
-  const { setToastAlert } = useToast();
   const { setTheme } = useTheme();
-
+  const { isMobile } = usePlatformOS();
   // redirect url for normal mode
   const redirectWorkspaceSlug =
     workspaceSlug ||
@@ -53,8 +51,8 @@ export const InstanceSidebarDropdown = observer(() => {
         router.push("/");
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Failed to sign out. Please try again.",
         })
@@ -76,7 +74,7 @@ export const InstanceSidebarDropdown = observer(() => {
           {!sidebarCollapsed && (
             <div className="flex w-full gap-2">
               <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
-              <Tooltip position="bottom-left" tooltipContent="Exit God Mode">
+              <Tooltip position="bottom-left" tooltipContent="Exit God Mode" isMobile={isMobile}>
                 <div className="flex-shrink-0">
                   <Link href={`/${redirectWorkspaceSlug}`}>
                     <span>
diff --git a/web/components/instance/sidebar-menu.tsx b/web/components/instance/sidebar-menu.tsx
index aa6779d3879..53d6dc8f5a5 100644
--- a/web/components/instance/sidebar-menu.tsx
+++ b/web/components/instance/sidebar-menu.tsx
@@ -2,9 +2,10 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 // hooks
-import { useApplication } from "hooks/store";
-// ui
 import { Tooltip } from "@plane/ui";
+import { useApplication } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// ui
 
 const INSTANCE_ADMIN_LINKS = [
   {
@@ -46,6 +47,7 @@ export const InstanceAdminSidebarMenu = () => {
   } = useApplication();
   // router
   const router = useRouter();
+  const { isMobile } = usePlatformOS();
 
   return (
     <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-6">
@@ -55,7 +57,13 @@ export const InstanceAdminSidebarMenu = () => {
         return (
           <Link key={index} href={item.href}>
             <div>
-              <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
+              <Tooltip
+                tooltipContent={item.name}
+                position="right"
+                className="ml-2"
+                disabled={!sidebarCollapsed}
+                isMobile={isMobile}
+              >
                 <div
                   className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
                     isActive
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index bc1351125e0..efd9bb0d20b 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -5,19 +5,17 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // headless ui
+import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import { IntegrationService } from "services/integrations/integration.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { IUser, IImporterService } from "@plane/types";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
+import { IntegrationService } from "@/services/integrations/integration.service";
 // ui
-import { Button, Input } from "@plane/ui";
 // icons
-import { AlertTriangle } from "lucide-react";
 // types
-import { IUser, IImporterService } from "@plane/types";
 // fetch-keys
-import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -36,8 +34,6 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const handleDeletion = () => {
     if (!workspaceSlug || !data) return;
 
@@ -52,8 +48,8 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
     integrationService
       .deleteImporterService(workspaceSlug as string, data.service, data.id)
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         })
diff --git a/web/components/integration/github/auth.tsx b/web/components/integration/github/auth.tsx
index 33deea68b3f..a40771751a5 100644
--- a/web/components/integration/github/auth.tsx
+++ b/web/components/integration/github/auth.tsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
+import { IWorkspaceIntegration } from "@plane/types";
 // hooks
-import { useApplication } from "hooks/store";
-import useIntegrationPopup from "hooks/use-integration-popup";
-// ui
 import { Button } from "@plane/ui";
+import { useApplication } from "@/hooks/store";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
+// ui
 // types
-import { IWorkspaceIntegration } from "@plane/types";
 
 type Props = {
   workspaceIntegration: false | IWorkspaceIntegration | undefined;
diff --git a/web/components/integration/github/import-configure.tsx b/web/components/integration/github/import-configure.tsx
index 731ba7c161a..94f8e07d324 100644
--- a/web/components/integration/github/import-configure.tsx
+++ b/web/components/integration/github/import-configure.tsx
@@ -1,8 +1,8 @@
 // components
+import { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 import { Button } from "@plane/ui";
-import { GithubAuth, TIntegrationSteps } from "components/integration";
+import { GithubAuth, TIntegrationSteps } from "@/components/integration";
 // types
-import { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 
 type Props = {
   provider: string | undefined;
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index 65f3e82b2e6..37862a739eb 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/components/integration/github/import-confirm.tsx
@@ -5,7 +5,7 @@ import { UseFormWatch } from "react-hook-form";
 // ui
 import { Button } from "@plane/ui";
 // types
-import { TFormValues, TIntegrationSteps } from "components/integration";
+import { TFormValues, TIntegrationSteps } from "@/components/integration";
 
 type Props = {
   handleStepChange: (value: TIntegrationSteps) => void;
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index 5c16b48a30d..1a4afbb0cbb 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -1,16 +1,16 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormWatch } from "react-hook-form";
+import { IWorkspaceIntegration } from "@plane/types";
 // hooks
-import { useProject } from "hooks/store";
 // components
-import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
-// ui
 import { Button, CustomSearchSelect, ToggleSwitch } from "@plane/ui";
+import { SelectRepository, TFormValues, TIntegrationSteps } from "@/components/integration";
+// ui
 // helpers
-import { truncateText } from "helpers/string.helper";
+import { truncateText } from "@/helpers/string.helper";
+import { useProject } from "@/hooks/store";
 // types
-import { IWorkspaceIntegration } from "@plane/types";
 
 type Props = {
   handleStepChange: (value: TIntegrationSteps) => void;
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index ad06544387c..ba4efb5f976 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -5,7 +5,7 @@ import { UseFormWatch } from "react-hook-form";
 // ui
 import { Button } from "@plane/ui";
 // types
-import { IUserDetails, SingleUserSelect, TFormValues, TIntegrationSteps } from "components/integration";
+import { IUserDetails, SingleUserSelect, TFormValues, TIntegrationSteps } from "@/components/integration";
 
 type Props = {
   handleStepChange: (value: TIntegrationSteps) => void;
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index 70e462a1088..1ab75c64e49 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -2,18 +2,17 @@ import { FC, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
-
 // react-hook-form
 import { UseFormSetValue } from "react-hook-form";
+import useSWR from "swr";
 // services
-import { GithubIntegrationService } from "services/integrations";
 // ui
 import { Button, Loader } from "@plane/ui";
 // types
-import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
+import { IUserDetails, TFormValues, TIntegrationSteps } from "@/components/integration";
 // fetch-keys
-import { GITHUB_REPOSITORY_INFO } from "constants/fetch-keys";
+import { GITHUB_REPOSITORY_INFO } from "@/constants/fetch-keys";
+import { GithubIntegrationService } from "@/services/integrations";
 
 type Props = {
   selectedRepo: any;
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index bc577328aa6..d5866e95a0c 100644
--- a/web/components/integration/github/root.tsx
+++ b/web/components/integration/github/root.tsx
@@ -1,34 +1,36 @@
 import React, { useState } from "react";
 
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
 
+import { useForm } from "react-hook-form";
 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 { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
+import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
+import { UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
 import {
   GithubImportConfigure,
   GithubImportData,
   GithubRepoDetails,
   GithubImportUsers,
   GithubImportConfirm,
-} from "components/integration";
+} from "@/components/integration";
 // icons
-import { UserGroupIcon } from "@plane/ui";
-import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
 // images
+import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
+import { IntegrationService, GithubIntegrationService } from "@/services/integrations";
 import GithubLogo from "public/services/github.png";
+// hooks
+// components
+// icons
+// images
 // types
-import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/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 {
@@ -92,8 +94,6 @@ export const GithubImporterRoot: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, provider } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const { handleSubmit, control, setValue, watch } = useForm<TFormValues>({
     defaultValues: defaultFormValues,
   });
@@ -149,8 +149,8 @@ export const GithubImporterRoot: React.FC = () => {
         mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Import was unsuccessful. Please try again.",
         })
diff --git a/web/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
index 22d12196365..f4ec4bb2f1d 100644
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { useRouter } from "next/router";
 import useSWRInfinite from "swr/infinite";
+import { IWorkspaceIntegration } from "@plane/types";
 // services
-import { ProjectService } from "services/project";
 // ui
 import { CustomSearchSelect } from "@plane/ui";
 // helpers
-import { truncateText } from "helpers/string.helper";
+import { truncateText } from "@/helpers/string.helper";
+import { ProjectService } from "@/services/project";
 // types
-import { IWorkspaceIntegration } from "@plane/types";
 
 type Props = {
   integration: IWorkspaceIntegration;
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index 8948fdf7953..9a13b27b597 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -1,14 +1,14 @@
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { IGithubRepoCollaborator } from "@plane/types";
 // services
-import { WorkspaceService } from "services/workspace.service";
-// ui
 import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
+import { WORKSPACE_MEMBERS } from "@/constants/fetch-keys";
+import { WorkspaceService } from "@/services/workspace.service";
+// ui
 // types
-import { IGithubRepoCollaborator } from "@plane/types";
 import { IUserDetails } from "./root";
 // fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   collaborator: IGithubRepoCollaborator;
@@ -44,16 +44,27 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null
   );
 
-  const options = members?.map((member) => ({
-    value: member.member.display_name,
-    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 options = members
+    ?.map((member) => {
+      if (!member?.member) return;
+      return {
+        value: member.member?.display_name,
+        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>
+        ),
+      };
+    })
+    .filter((member) => !!member) as
+    | {
+        value: string;
+        query: string;
+        content: JSX.Element;
+      }[]
+    | undefined;
 
   return (
     <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 29dfa5b30f3..4d11966ee95 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -1,30 +1,28 @@
 import { useState } from "react";
-import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
-import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
 // hooks
-import { useUser } from "hooks/store";
-import useUserAuth from "hooks/use-user-auth";
+import { RefreshCw } from "lucide-react";
+import { IImporterService } from "@plane/types";
+import { Button } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "@/components/integration";
+import { ImportExportSettingsLoader } from "@/components/ui";
+import { EmptyStateType } from "@/constants/empty-state";
+import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
+import { IMPORTERS_LIST } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
+import useUserAuth from "@/hooks/use-user-auth";
 // services
-import { IntegrationService } from "services/integrations";
+import { IntegrationService } from "@/services/integrations";
 // components
-import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button } from "@plane/ui";
-import { ImportExportSettingsLoader } from "components/ui";
 // icons
-import { RefreshCw } from "lucide-react";
 // types
-import { IImporterService } from "@plane/types";
-// fetch-keys
-import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 // constants
-import { IMPORTERS_LIST } from "constants/workspace";
-import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 // services
 const integrationService = new IntegrationService();
@@ -37,8 +35,6 @@ const IntegrationGuide = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, provider } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { currentUser, currentUserLoader } = useUser();
   // custom hooks
@@ -49,10 +45,6 @@ const IntegrationGuide = observer(() => {
     workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug as string) : null
   );
 
-  const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["import"];
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("workspace-settings", "imports", isLightMode);
-
   const handleDeleteImport = (importService: IImporterService) => {
     setImportToDelete(importService);
     setDeleteImportModal(true);
@@ -145,12 +137,7 @@ const IntegrationGuide = observer(() => {
                     </div>
                   ) : (
                     <div className="h-full w-full flex items-center justify-center">
-                      <EmptyState
-                        title={emptyStateDetail.title}
-                        description={emptyStateDetail.description}
-                        image={emptyStateImage}
-                        size="sm"
-                      />
+                      <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_IMPORT} size="sm" />
                     </div>
                   )
                 ) : (
diff --git a/web/components/integration/jira/confirm-import.tsx b/web/components/integration/jira/confirm-import.tsx
index 09588396dac..85d595181e5 100644
--- a/web/components/integration/jira/confirm-import.tsx
+++ b/web/components/integration/jira/confirm-import.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 // react hook form
 import { useFormContext } from "react-hook-form";
+import { IJiraImporterForm } from "@plane/types";
 
 // types
-import { IJiraImporterForm } from "@plane/types";
 
 export const JiraConfirmImport: React.FC = () => {
   const { watch } = useFormContext<IJiraImporterForm>();
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index ed2ea77ae42..ec4b2de2142 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -1,16 +1,16 @@
 import React from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { useFormContext, Controller } from "react-hook-form";
 import { Plus } from "lucide-react";
+import { IJiraImporterForm } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
 // components
 import { CustomSelect, Input } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useApplication, useEventTracker, useProject } from "@/hooks/store";
 // types
-import { IJiraImporterForm } from "@plane/types";
 
 export const JiraGetImportDetail: React.FC = observer(() => {
   // store hooks
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index 63cf84b4f7d..703c4b2506b 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -1,15 +1,15 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 import { useFormContext, useFieldArray, Controller } from "react-hook-form";
+import useSWR from "swr";
+import { IJiraImporterForm } from "@plane/types";
 // services
-import { WorkspaceService } from "services/workspace.service";
-// ui
 import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
+import { WORKSPACE_MEMBERS } from "@/constants/fetch-keys";
+import { WorkspaceService } from "@/services/workspace.service";
+// ui
 // types
-import { IJiraImporterForm } from "@plane/types";
 // fetch keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 const workspaceService = new WorkspaceService();
 
@@ -33,16 +33,27 @@ export const JiraImportUsers: FC = () => {
     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>
-    ),
-  }));
+  const options = members
+    ?.map((member) => {
+      if (!member?.member) return;
+      return {
+        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>
+        ),
+      };
+    })
+    .filter((member) => !!member) as
+    | {
+        value: string;
+        query: string;
+        content: JSX.Element;
+      }[]
+    | undefined;
 
   return (
     <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-200 overflow-y-auto">
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index 9e3166563d3..b69b6093b2e 100644
--- a/web/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -4,21 +4,20 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 
 // swr
+import { useFormContext, Controller } from "react-hook-form";
 import useSWR from "swr";
+import { IJiraImporterForm, IJiraMetadata } from "@plane/types";
 
 // react hook form
-import { useFormContext, Controller } from "react-hook-form";
 
 // services
-import { JiraImporterService } from "services/integrations";
+import { ToggleSwitch, Spinner } from "@plane/ui";
+import { JIRA_IMPORTER_DETAIL } from "@/constants/fetch-keys";
+import { JiraImporterService } from "@/services/integrations";
 
 // fetch keys
-import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
-
-import { IJiraImporterForm, IJiraMetadata } from "@plane/types";
 
 // components
-import { ToggleSwitch, Spinner } from "@plane/ui";
 
 import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
 
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index 3c610d03f27..b95ec198602 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -1,17 +1,21 @@
 import React, { useState } from "react";
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
 import { FormProvider, useForm } from "react-hook-form";
+import { mutate } from "swr";
 // icons
 import { ArrowLeft, Check, List, Settings } from "lucide-react";
+import { IJiraImporterForm } from "@plane/types";
 // services
-import { JiraImporterService } from "services/integrations";
 // fetch keys
-import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 // components
 import { Button, UserGroupIcon } from "@plane/ui";
+import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
+// assets
+import { JiraImporterService } from "@/services/integrations";
+import JiraLogo from "public/services/jira.svg";
+// types
 import {
   JiraGetImportDetail,
   JiraProjectDetail,
@@ -21,10 +25,6 @@ import {
   TJiraIntegrationSteps,
   IJiraIntegrationData,
 } from ".";
-// assets
-import JiraLogo from "public/services/jira.svg";
-// types
-import { IJiraImporterForm } from "@plane/types";
 
 const integrationWorkflowData: Array<{
   title: string;
diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
index f7bd0f5fa6c..c1d3f96c863 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -1,13 +1,13 @@
 // ui
+import { Trash2 } from "lucide-react";
+import { IImporterService } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // icons
-import { Trash2 } from "lucide-react";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { IMPORTERS_LIST } from "@/constants/workspace";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 // types
-import { IImporterService } from "@plane/types";
 // constants
-import { IMPORTERS_LIST } from "constants/workspace";
 
 type Props = {
   service: IImporterService;
@@ -29,10 +29,10 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
             service.status === "completed"
               ? "bg-green-500/20 text-green-500"
               : service.status === "processing"
-              ? "bg-yellow-500/20 text-yellow-500"
-              : service.status === "failed"
-              ? "bg-red-500/20 text-red-500"
-              : ""
+                ? "bg-yellow-500/20 text-yellow-500"
+                : service.status === "failed"
+                  ? "bg-red-500/20 text-red-500"
+                  : ""
           }`}
         >
           {refreshing ? "Refreshing..." : service.status}
@@ -40,7 +40,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
       </h4>
       <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
         <span>{renderFormattedDate(service.created_at)}</span>|
-        <span>Imported by {service.initiated_by_detail.display_name}</span>
+        <span>Imported by {service.initiated_by_detail?.display_name}</span>
       </div>
     </div>
     <CustomMenu ellipsis>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 3026d698114..426788cbdd7 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -1,25 +1,25 @@
 import { useState } from "react";
-
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import useSWR, { mutate } from "swr";
-// services
-import { IntegrationService } from "services/integrations";
-// hooks
-import { useApplication, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useIntegrationPopup from "hooks/use-integration-popup";
+import { CheckCircle } from "lucide-react";
+import { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 // ui
-import { Button, Loader, Tooltip } from "@plane/ui";
+import { Button, Loader, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+import { WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
+// hooks
+import { useApplication, useUser } from "@/hooks/store";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { IntegrationService } from "@/services/integrations";
 // 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 "@plane/types";
 // fetch-keys
-import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
 
 type Props = {
   integration: IAppIntegration;
@@ -54,11 +54,9 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const isUserAdmin = currentWorkspaceRole === 20;
-
+  const { isMobile } = usePlatformOS();
   const { startAuth, isConnecting: isInstalling } = useIntegrationPopup({
     provider: integration.provider,
     github_app_name: envConfig?.github_app_name || "",
@@ -87,8 +85,8 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
         );
         setDeletingIntegration(false);
 
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Deleted successfully!",
           message: `${integration.title} integration deleted successfully.`,
         });
@@ -96,8 +94,8 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
       .catch(() => {
         setDeletingIntegration(false);
 
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: `${integration.title} integration could not be deleted. Please try again.`,
         });
@@ -132,6 +130,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
       {workspaceIntegrations ? (
         isInstalled ? (
           <Tooltip
+            isMobile={isMobile}
             disabled={isUserAdmin}
             tooltipContent={!isUserAdmin ? "You don't have permission to perform this" : null}
           >
@@ -150,6 +149,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
           </Tooltip>
         ) : (
           <Tooltip
+            isMobile={isMobile}
             disabled={isUserAdmin}
             tooltipContent={!isUserAdmin ? "You don't have permission to perform this" : null}
           >
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 57fb8231986..a9214839bd4 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -1,18 +1,18 @@
 import { useState, useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
-import { observer } from "mobx-react-lite";
+import { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
 // hooks
-import { useApplication } from "hooks/store";
-import useIntegrationPopup from "hooks/use-integration-popup";
+import { Loader } from "@plane/ui";
+import { SLACK_CHANNEL_INFO } from "@/constants/fetch-keys";
+import { useApplication } from "@/hooks/store";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
 // services
-import { AppInstallationService } from "services/app_installation.service";
+import { AppInstallationService } from "@/services/app_installation.service";
 // ui
-import { Loader } from "@plane/ui";
 // types
-import { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
 // fetch-keys
-import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
 
 type Props = {
   integration: IWorkspaceIntegration;
diff --git a/web/components/issues/archive-issue-modal.tsx b/web/components/issues/archive-issue-modal.tsx
index 94c4c801a43..8ea747ffc74 100644
--- a/web/components/issues/archive-issue-modal.tsx
+++ b/web/components/issues/archive-issue-modal.tsx
@@ -1,13 +1,12 @@
 import { useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+import { TIssue } from "@plane/types";
 // hooks
-import { useProject } from "hooks/store";
-import { useIssues } from "hooks/store/use-issues";
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { useProject } from "@/hooks/store";
+import { useIssues } from "@/hooks/store/use-issues";
 // ui
-import { Button } from "@plane/ui";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   data?: TIssue;
@@ -24,8 +23,6 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
   // store hooks
   const { getProjectById } = useProject();
   const { issueMap } = useIssues();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   if (!dataId && !data) return null;
 
@@ -44,8 +41,8 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
     await onSubmit()
       .then(() => onClose())
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Issue could not be archived. Please try again.",
         })
@@ -84,10 +81,10 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
                   <h3 className="text-xl font-medium 2xl:text-2xl">
                     Archive issue {projectDetails?.identifier} {issue.sequence_id}
                   </h3>
-                  <p className="text-sm text-custom-text-200 mt-3">
+                  <p className="mt-3 text-sm text-custom-text-200">
                     Are you sure you want to archive the issue? All your archived issues can be restored later.
                   </p>
-                  <div className="flex justify-end gap-2 mt-3">
+                  <div className="mt-3 flex justify-end gap-2">
                     <Button variant="neutral-primary" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/issues/archived-issues-header.tsx
similarity index 56%
rename from web/components/headers/project-archived-issues.tsx
rename to web/components/issues/archived-issues-header.tsx
index d1da1c85971..cd5aca903c8 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/issues/archived-issues-header.tsx
@@ -1,23 +1,17 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft } from "lucide-react";
-// hooks
-import { useIssues, useLabel, useMember, useProject, useProjectState } from "hooks/store";
-// constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-// ui
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
-// components
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { BreadcrumbLink } from "components/common";
-// helpers
-import { renderEmoji } from "helpers/emoji.helper";
+import { useRouter } from "next/router";
 // types
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
+// constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+// hooks
+import { useIssues, useLabel, useMember, useProjectState } from "@/hooks/store";
 
-export const ProjectArchivedIssuesHeader: FC = observer(() => {
+export const ArchivedIssuesHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -25,16 +19,14 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const { currentProjectDetails } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
   const {
     project: { projectMemberIds },
   } = useMember();
-
   // for archived issues list layout is the only option
   const activeLayout = "list";
-
+  // hooks
   const handleFiltersUpdate = (key: keyof IIssueFilterOptions, value: string | string[]) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -70,56 +62,12 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   };
 
   return (
-    <div className="relative z-10 flex h-14 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">
-        <SidebarHamburgerToggle />
-        <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"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  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>
-                    )
-                  }
-                />
-              }
-            />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label="Archived issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-          </Breadcrumbs>
-        </div>
+    <div className="group relative flex border-b border-custom-border-200">
+      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+        <ArchiveTabsList />
       </div>
-
       {/* filter options */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 px-8">
         <FiltersDropdown title="Filters" placement="bottom-end">
           <FilterSelection
             filters={issueFilters?.filters || {}}
diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx
index 0d345a6191f..8a1ade183ce 100644
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/web/components/issues/attachment/attachment-detail.tsx
@@ -1,18 +1,20 @@
-import { FC, useState } from "react";
+import { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { AlertCircle, X } from "lucide-react";
+import { Tooltip } from "@plane/ui";
+import { getFileIcon } from "@/components/icons";
+import { convertBytesToSize, getFileExtension, getFileName } from "@/helpers/attachment.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { truncateText } from "@/helpers/string.helper";
+import { useIssueDetail, useMember } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // hooks
-import { useIssueDetail, useMember } from "hooks/store";
 // ui
-import { Tooltip } from "@plane/ui";
 // components
-import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal";
 // icons
-import { getFileIcon } from "components/icons";
 // helper
-import { truncateText } from "helpers/string.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper";
+import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal";
 // types
 import { TAttachmentOperations } from "./root";
 
@@ -24,25 +26,26 @@ type TIssueAttachmentsDetail = {
   disabled?: boolean;
 };
 
-export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
+export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((props) => {
   // props
   const { attachmentId, handleAttachmentOperations, disabled } = props;
   // store hooks
   const { getUserDetails } = useMember();
   const {
     attachment: { getAttachmentById },
+    isDeleteAttachmentModalOpen,
+    toggleDeleteAttachmentModal,
   } = useIssueDetail();
   // states
-  const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
-
+  const { isMobile } = usePlatformOS();
   const attachment = attachmentId && getAttachmentById(attachmentId);
 
   if (!attachment) return <></>;
   return (
     <>
       <IssueAttachmentDeleteModal
-        isOpen={attachmentDeleteModal}
-        setIsOpen={setAttachmentDeleteModal}
+        isOpen={isDeleteAttachmentModalOpen}
+        setIsOpen={() => toggleDeleteAttachmentModal(false)}
         handleAttachmentOperations={handleAttachmentOperations}
         data={attachment}
       />
@@ -56,10 +59,11 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
             <div className="h-7 w-7">{getFileIcon(getFileExtension(attachment.asset))}</div>
             <div className="flex flex-col gap-1">
               <div className="flex items-center gap-2">
-                <Tooltip tooltipContent={getFileName(attachment.attributes.name)}>
+                <Tooltip tooltipContent={getFileName(attachment.attributes.name)} isMobile={isMobile}>
                   <span className="text-sm">{truncateText(`${getFileName(attachment.attributes.name)}`, 10)}</span>
                 </Tooltip>
                 <Tooltip
+                  isMobile={isMobile}
                   tooltipContent={`${
                     getUserDetails(attachment.updated_by)?.display_name ?? ""
                   } uploaded on ${renderFormattedDate(attachment.updated_at)}`}
@@ -79,15 +83,11 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = (props) => {
         </Link>
 
         {!disabled && (
-          <button
-            onClick={() => {
-              setAttachmentDeleteModal(true);
-            }}
-          >
+          <button onClick={() => toggleDeleteAttachmentModal(true)}>
             <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
           </button>
         )}
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
index bf197980aa1..46b697691cf 100644
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -2,11 +2,11 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useDropzone } from "react-dropzone";
 // hooks
-import { useApplication } from "hooks/store";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
+import { MAX_FILE_SIZE } from "@/constants/common";
 // helpers
-import { generateFileName } from "helpers/attachment.helper";
+import { generateFileName } from "@/helpers/attachment.helper";
+import { useApplication } from "@/hooks/store";
 // types
 import { TAttachmentOperations } from "./root";
 
diff --git a/web/components/issues/attachment/attachments-list.tsx b/web/components/issues/attachment/attachments-list.tsx
index 2129a4f61b6..689761c87c9 100644
--- a/web/components/issues/attachment/attachments-list.tsx
+++ b/web/components/issues/attachment/attachments-list.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueAttachmentsDetail } from "./attachment-detail";
 // types
@@ -21,22 +21,21 @@ export const IssueAttachmentsList: FC<TIssueAttachmentsList> = observer((props)
   const {
     attachment: { getAttachmentsByIssueId },
   } = useIssueDetail();
-
+  // derived values
   const issueAttachments = getAttachmentsByIssueId(issueId);
 
   if (!issueAttachments) return <></>;
 
   return (
     <>
-      {issueAttachments &&
-        issueAttachments.length > 0 &&
-        issueAttachments.map((attachmentId) => (
-          <IssueAttachmentsDetail
-            attachmentId={attachmentId}
-            disabled={disabled}
-            handleAttachmentOperations={handleAttachmentOperations}
-          />
-        ))}
+      {issueAttachments?.map((attachmentId) => (
+        <IssueAttachmentsDetail
+          key={attachmentId}
+          attachmentId={attachmentId}
+          disabled={disabled}
+          handleAttachmentOperations={handleAttachmentOperations}
+        />
+      ))}
     </>
   );
 });
diff --git a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx b/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
index e01d2828e48..bd69c3cac1e 100644
--- a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
@@ -1,13 +1,13 @@
 import { FC, Fragment, Dispatch, SetStateAction, useState } from "react";
 import { AlertTriangle } from "lucide-react";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+import type { TIssueAttachment } from "@plane/types";
+// headless ui
 // ui
 import { Button } from "@plane/ui";
 // helper
-import { getFileName } from "helpers/attachment.helper";
+import { getFileName } from "@/helpers/attachment.helper";
 // types
-import type { TIssueAttachment } from "@plane/types";
 import { TAttachmentOperations } from "./root";
 
 export type TAttachmentOperationsRemoveModal = Exclude<TAttachmentOperations, "create">;
@@ -69,7 +69,7 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
                       </div>
                       <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                         <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                          Delete Attachment
+                          Delete attachment
                         </Dialog.Title>
                         <div className="mt-2">
                           <p className="text-sm text-custom-text-200">
@@ -94,7 +94,7 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
                       }}
                       disabled={loader}
                     >
-                      {loader ? "Deleting..." : "Delete"}
+                      {loader ? "Deleting" : "Delete"}
                     </Button>
                   </div>
                 </Dialog.Panel>
diff --git a/web/components/issues/attachment/root.tsx b/web/components/issues/attachment/root.tsx
index ffa17d3371e..c915ebce945 100644
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -1,7 +1,8 @@
 import { FC, useMemo } from "react";
 // hooks
-import { useEventTracker, useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { useEventTracker, useIssueDetail } from "@/hooks/store";
+// ui
 // components
 import { IssueAttachmentUpload } from "./attachment-upload";
 import { IssueAttachmentsList } from "./attachments-list";
@@ -24,19 +25,27 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
   // hooks
   const { createAttachment, removeAttachment } = useIssueDetail();
   const { captureIssueEvent } = useEventTracker();
-  const { setToastAlert } = useToast();
 
   const handleAttachmentOperations: TAttachmentOperations = useMemo(
     () => ({
       create: async (data: FormData) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
-          const res = await createAttachment(workspaceSlug, projectId, issueId, data);
-          setToastAlert({
-            message: "The attachment has been successfully uploaded",
-            type: "success",
-            title: "Attachment uploaded",
+
+          const attachmentUploadPromise = createAttachment(workspaceSlug, projectId, issueId, data);
+          setPromiseToast(attachmentUploadPromise, {
+            loading: "Uploading attachment...",
+            success: {
+              title: "Attachment uploaded",
+              message: () => "The attachment has been successfully uploaded",
+            },
+            error: {
+              title: "Attachment not uploaded",
+              message: () => "The attachment could not be uploaded",
+            },
           });
+
+          const res = await attachmentUploadPromise;
           captureIssueEvent({
             eventName: "Issue attachment added",
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
@@ -50,20 +59,15 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             eventName: "Issue attachment added",
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
           });
-          setToastAlert({
-            message: "The attachment could not be uploaded",
-            type: "error",
-            title: "Attachment not uploaded",
-          });
         }
       },
       remove: async (attachmentId: string) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
           await removeAttachment(workspaceSlug, projectId, issueId, attachmentId);
-          setToastAlert({
+          setToast({
             message: "The attachment has been successfully removed",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             title: "Attachment removed",
           });
           captureIssueEvent({
@@ -83,21 +87,21 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
               change_details: "",
             },
           });
-          setToastAlert({
+          setToast({
             message: "The Attachment could not be removed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             title: "Attachment not removed",
           });
         }
       },
     }),
-    [workspaceSlug, projectId, issueId, createAttachment, removeAttachment, setToastAlert]
+    [workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
   );
 
   return (
     <div className="relative py-3 space-y-3">
       <h3 className="text-lg">Attachments</h3>
-      <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
         <IssueAttachmentUpload
           workspaceSlug={workspaceSlug}
           disabled={disabled}
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 3a9c0653edf..57dccd4fc64 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -1,14 +1,12 @@
 import { useEffect, useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import { TIssue } from "@plane/types";
 // ui
-import { Button } from "@plane/ui";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { useIssues } from "hooks/store/use-issues";
-import { TIssue } from "@plane/types";
-import { useProject } from "hooks/store";
+import { useIssues, useProject } from "@/hooks/store";
+// hooks
 
 type Props = {
   isOpen: boolean;
@@ -25,7 +23,6 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
 
   const [isDeleting, setIsDeleting] = useState(false);
 
-  const { setToastAlert } = useToast();
   // hooks
   const { getProjectById } = useProject();
 
@@ -50,9 +47,9 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
           onClose();
         })
         .catch(() => {
-          setToastAlert({
+          setToast({
             title: "Error",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Failed to delete issue",
           });
         })
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index c64c147ea90..5af8a418e03 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -1,18 +1,18 @@
 import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
+import debounce from "lodash/debounce";
+import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
+import { TIssue } from "@plane/types";
 // hooks
-import useReloadConfirmations from "hooks/use-reload-confirmation";
-import debounce from "lodash/debounce";
-// components
 import { Loader, TextArea } from "@plane/ui";
-import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
+import { useMention, useWorkspace } from "@/hooks/store";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+// components
 // types
-import { TIssue } from "@plane/types";
+import { FileService } from "@/services/file.service";
 import { TIssueOperations } from "./issue-detail";
 // services
-import { FileService } from "services/file.service";
-import { useMention, useWorkspace } from "hooks/store";
-import { observer } from "mobx-react";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -71,16 +71,10 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
     async (formData: Partial<TIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
 
-      await issueOperations.update(
-        workspaceSlug,
-        projectId,
-        issueId,
-        {
-          name: formData.name ?? "",
-          description_html: formData.description_html ?? "<p></p>",
-        },
-        false
-      );
+      await issueOperations.update(workspaceSlug, projectId, issueId, {
+        name: formData.name ?? "",
+        description_html: formData.description_html ?? "<p></p>",
+      });
     },
     [workspaceSlug, projectId, issueId, issueOperations]
   );
@@ -142,7 +136,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
                   debouncedFormSave();
                 }}
                 required
-                className="min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                className="block min-h-min w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
                 hasError={Boolean(errors?.name)}
                 role="textbox"
               />
@@ -179,7 +173,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
                   setIsSubmitting={setIsSubmitting}
                   dragDropEnabled
                   customClassName="min-h-[150px] shadow-sm"
-                  onChange={(description: Object, description_html: string) => {
+                  onChange={(description: any, description_html: string) => {
                     setShowAlert(true);
                     setIsSubmitting("submitting");
                     onChange(description_html);
diff --git a/web/components/issues/description-input.tsx b/web/components/issues/description-input.tsx
index 79634fa84aa..75bfeccc754 100644
--- a/web/components/issues/description-input.tsx
+++ b/web/components/issues/description-input.tsx
@@ -1,16 +1,15 @@
 import { FC, useState, useEffect } from "react";
 // components
-import { Loader } from "@plane/ui";
 import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
-// store hooks
-import { useMention, useWorkspace } from "hooks/store";
+import { Loader } from "@plane/ui";
+// hooks
+import { useMention, useWorkspace } from "@/hooks/store";
+import useDebounce from "@/hooks/use-debounce";
 // services
-import { FileService } from "services/file.service";
+import { FileService } from "@/services/file.service";
 const fileService = new FileService();
 // types
 import { TIssueOperations } from "./issue-detail";
-// hooks
-import useDebounce from "hooks/use-debounce";
 
 export type IssueDescriptionInputProps = {
   workspaceSlug: string;
@@ -41,11 +40,9 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = (props) =>
 
   useEffect(() => {
     if (debouncedValue && debouncedValue !== value) {
-      issueOperations
-        .update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }, false)
-        .finally(() => {
-          setIsSubmitting("submitted");
-        });
+      issueOperations.update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }).finally(() => {
+        setIsSubmitting("submitted");
+      });
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,7 +77,7 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = (props) =>
       initialValue={initialValue}
       dragDropEnabled
       customClassName="min-h-[150px] shadow-sm"
-      onChange={(description: Object, description_html: string) => {
+      onChange={(description: any, description_html: string) => {
         setIsSubmitting("submitting");
         setDescriptionHTML(description_html === "" ? "<p></p>" : description_html);
       }}
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index d001a29c272..d1695b72285 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -16,3 +16,4 @@ export * from "./peek-overview";
 
 // archived issue
 export * from "./archive-issue-modal";
+export * from "./archived-issues-header";
diff --git a/web/components/issues/issue-detail/cycle-select.tsx b/web/components/issues/issue-detail/cycle-select.tsx
index 84dccefac48..77e854768dc 100644
--- a/web/components/issues/issue-detail/cycle-select.tsx
+++ b/web/components/issues/issue-detail/cycle-select.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
 // components
-import { CycleDropdown } from "components/dropdowns";
+import { CycleDropdown } from "@/components/dropdowns";
 // ui
-import { Spinner } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+import { useIssueDetail } from "@/hooks/store";
 // types
 import type { TIssueOperations } from "./root";
 
@@ -41,14 +40,14 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
   };
 
   return (
-    <div className={cn("flex items-center gap-1 h-full", className)}>
+    <div className={cn("flex h-full items-center gap-1", className)}>
       <CycleDropdown
         value={issue?.cycle_id ?? null}
         onChange={handleIssueCycleChange}
         projectId={projectId}
         disabled={disableSelect}
         buttonVariant="transparent-with-text"
-        className="w-full group"
+        className="group w-full"
         buttonContainerClassName="w-full text-left"
         buttonClassName={`text-sm justify-between  ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
         placeholder="No cycle"
@@ -56,7 +55,6 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
         dropdownArrow
         dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
       />
-      {isUpdating && <Spinner className="h-4 w-4" />}
     </div>
   );
 });
diff --git a/web/components/issues/issue-detail/inbox/index.ts b/web/components/issues/issue-detail/inbox/index.ts
index 97c28cc7cc8..0c4adc7d0fb 100644
--- a/web/components/issues/issue-detail/inbox/index.ts
+++ b/web/components/issues/issue-detail/inbox/index.ts
@@ -1,3 +1,3 @@
-export * from "./root"
-export * from "./main-content"
-export * from "./sidebar"
\ No newline at end of file
+export * from "./root";
+export * from "./main-content";
+export * from "./sidebar";
diff --git a/web/components/issues/issue-detail/inbox/main-content.tsx b/web/components/issues/issue-detail/inbox/main-content.tsx
index d753be02fec..2bea576c413 100644
--- a/web/components/issues/issue-detail/inbox/main-content.tsx
+++ b/web/components/issues/issue-detail/inbox/main-content.tsx
@@ -1,17 +1,17 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail, useProjectState, useUser } from "hooks/store";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { StateGroupIcon } from "@plane/ui";
+import { IssueUpdateStatus, TIssueOperations } from "@/components/issues";
+import { useIssueDetail, useProjectState, useUser } from "@/hooks/store";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // components
-import { IssueUpdateStatus, TIssueOperations } from "components/issues";
-import { IssueTitleInput } from "../../title-input";
+import { InboxIssueStatus } from "../../../inbox/inbox-issue-status";
 import { IssueDescriptionInput } from "../../description-input";
-import { IssueReaction } from "../reactions";
+import { IssueTitleInput } from "../../title-input";
 import { IssueActivity } from "../issue-activity";
-import { InboxIssueStatus } from "../../../inbox/inbox-issue-status";
+import { IssueReaction } from "../reactions";
 // ui
-import { StateGroupIcon } from "@plane/ui";
 
 type Props = {
   workspaceSlug: string;
@@ -65,7 +65,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           projectId={projectId}
           inboxId={inboxId}
           issueId={issueId}
-          showDescription={true}
+          showDescription
         />
 
         <div className="mb-2.5 flex items-center">
diff --git a/web/components/issues/issue-detail/inbox/root.tsx b/web/components/issues/issue-detail/inbox/root.tsx
index d96b36efae3..bab406d1fca 100644
--- a/web/components/issues/issue-detail/inbox/root.tsx
+++ b/web/components/issues/issue-detail/inbox/root.tsx
@@ -1,17 +1,17 @@
 import { FC, useMemo } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { TIssue } from "@plane/types";
 // components
-import { InboxIssueMainContent } from "./main-content";
-import { InboxIssueDetailsSidebar } from "./sidebar";
-// hooks
-import { useEventTracker, useInboxIssues, useIssueDetail, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { EUserProjectRoles } from "@/constants/project";
+import { useEventTracker, useInboxIssues, useIssueDetail, useUser } from "@/hooks/store";
+// ui
 // types
-import { TIssue } from "@plane/types";
 import { TIssueOperations } from "../root";
+import { InboxIssueMainContent } from "./main-content";
+import { InboxIssueDetailsSidebar } from "./sidebar";
 // constants
-import { EUserProjectRoles } from "constants/project";
 
 export type TInboxIssueDetailRoot = {
   workspaceSlug: string;
@@ -34,7 +34,6 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
     fetchComments,
   } = useIssueDetail();
   const { captureIssueEvent } = useEventTracker();
-  const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -48,22 +47,9 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
           console.error("Error fetching the parent issue");
         }
       },
-      update: async (
-        workspaceSlug: string,
-        projectId: string,
-        issueId: string,
-        data: Partial<TIssue>,
-        showToast: boolean = true
-      ) => {
+      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
         try {
           await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
-          if (showToast) {
-            setToastAlert({
-              title: "Issue updated successfully",
-              type: "success",
-              message: "Issue updated successfully",
-            });
-          }
           captureIssueEvent({
             eventName: "Inbox issue updated",
             payload: { ...data, state: "SUCCESS", element: "Inbox" },
@@ -74,9 +60,9 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Issue update failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Issue update failed",
           });
           captureIssueEvent({
@@ -93,9 +79,9 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await removeInboxIssue(workspaceSlug, projectId, inboxId, issueId);
-          setToastAlert({
+          setToast({
             title: "Issue deleted successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Issue deleted successfully",
           });
           captureIssueEvent({
@@ -109,15 +95,15 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
             payload: { id: issueId, state: "FAILED", element: "Inbox" },
             path: router.asPath,
           });
-          setToastAlert({
+          setToast({
             title: "Issue delete failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Issue delete failed",
           });
         }
       },
     }),
-    [inboxId, fetchInboxIssueById, updateInboxIssue, removeInboxIssue, setToastAlert]
+    [inboxId, fetchInboxIssueById, updateInboxIssue, removeInboxIssue]
   );
 
   useSWR(
diff --git a/web/components/issues/issue-detail/inbox/sidebar.tsx b/web/components/issues/issue-detail/inbox/sidebar.tsx
index 592791a85b1..6472eea270e 100644
--- a/web/components/issues/issue-detail/inbox/sidebar.tsx
+++ b/web/components/issues/issue-detail/inbox/sidebar.tsx
@@ -1,15 +1,18 @@
 import React from "react";
+
 import { observer } from "mobx-react-lite";
+
 import { CalendarCheck2, Signal, Tag } from "lucide-react";
+
 // hooks
-import { useIssueDetail, useProject, useProjectState } from "hooks/store";
 // components
-import { IssueLabel, TIssueOperations } from "components/issues";
-import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
-// icons
 import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
+import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns";
+import { IssueLabel, TIssueOperations } from "@/components/issues";
+// icons
 // helper
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string;
@@ -33,7 +36,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const projectDetails = issue ? getProjectById(issue.project_id) : null;
 
-  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  const minDate = issue.start_date ? getDate(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
 
   const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
diff --git a/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
index 575e8d8414a..c7842a8db40 100644
--- a/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityList } from "./activity/activity-list";
 import { IssueCommentCard } from "./comments/comment-card";
@@ -31,6 +31,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
       {activityComments.map((activityComment, index) =>
         activityComment.activity_type === "COMMENT" ? (
           <IssueCommentCard
+            key={activityComment.id}
             workspaceSlug={workspaceSlug}
             commentId={activityComment.id}
             activityOperations={activityOperations}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
index 2335e4d3250..5b7e3da530d 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
@@ -2,11 +2,11 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { RotateCcw } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { ArchiveIcon } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
 // ui
-import { ArchiveIcon } from "@plane/ui";
 
 type TIssueArchivedAtActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
index 449297cbed8..459283b8847 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { UserGroupIcon } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 // icons
-import { UserGroupIcon } from "@plane/ui";
 
 type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
@@ -27,7 +27,6 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
     >
       <>
         {activity.old_value === "" ? `added a new assignee ` : `removed the assignee `}
-
         <a
           href={`/${activity.workspace_detail?.slug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
           target="_blank"
@@ -36,7 +35,6 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
         >
           {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
         </a>
-
         {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}.
       </>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
index d9b4475c52a..9c43a714e4d 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Paperclip } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
index 8336e516f22..73285b8a883 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { ContrastIcon } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
 // icons
-import { ContrastIcon } from "@plane/ui";
 
 type TIssueCycleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
index e4538753569..0e8470da41d 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { LayersIcon } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
 // icons
-import { LayersIcon } from "@plane/ui";
 
 type TIssueDefaultActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/description.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
index 30f445ec0a5..70145245393 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
index e01b94e1b34..9179bfa380a 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Triangle } from "lucide-react";
 // hooks
-import { useEstimate, useIssueDetail } from "hooks/store";
+import { useEstimate, useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
@@ -33,13 +33,11 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
         {activity.new_value ? `set the estimate point to ` : `removed the estimate point `}
         {activity.new_value && (
           <>
-
             <span className="font-medium text-custom-text-100">
               {areEstimatesEnabledForCurrentProject
                 ? estimateValue
                 : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
             </span>
-
           </>
         )}
         {showIssue && (activity.new_value ? ` to ` : ` from `)}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index e209b4bbf23..e20cdcb60c8 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -1,13 +1,14 @@
 import { FC, ReactNode } from "react";
 import { Network } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
-// ui
 import { Tooltip } from "@plane/ui";
+import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "@/helpers/date-time.helper";
+import { useIssueDetail } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// ui
 // components
 import { IssueUser } from "../";
 // helpers
-import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
 
 type TIssueActivityBlockComponent = {
   icon?: ReactNode;
@@ -25,7 +26,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
   } = useIssueDetail();
 
   const activity = getActivityById(activityId);
-
+  const { isMobile } = usePlatformOS();
   if (!activity) return <></>;
   return (
     <div
@@ -33,7 +34,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden={true} />
+      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
       <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
@@ -42,6 +43,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
         <span> {children} </span>
         <span>
           <Tooltip
+            isMobile={isMobile}
             tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
           >
             <span className="whitespace-nowrap"> {calculateTimeAgo(activity.created_at)}</span>
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
index e86b1fb57e3..3055e779ca5 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
@@ -1,8 +1,9 @@
 import { FC } from "react";
 // hooks
-import { useIssueDetail } from "hooks/store";
-// ui
 import { Tooltip } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// ui
 
 type TIssueLink = {
   activityId: string;
@@ -14,12 +15,15 @@ export const IssueLink: FC<TIssueLink> = (props) => {
   const {
     activity: { getActivityById },
   } = useIssueDetail();
-
+  const { isMobile } = usePlatformOS();
   const activity = getActivityById(activityId);
 
   if (!activity) return <></>;
   return (
-    <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
+    <Tooltip
+      tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}
+      isMobile={isMobile}
+    >
       <a
         aria-disabled={activity.issue === null}
         href={`${
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
index 706eb783f2a..50b8db1ab6a 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import Link from "next/link";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 
 type TIssueUser = {
   activityId: string;
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
index b9c59c9b333..a88f634c43f 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Tag } from "lucide-react";
 // hooks
-import { useIssueDetail, useLabel } from "hooks/store";
+import { useIssueDetail, useLabel } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
index 15343392f99..7ef6244437d 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
index c8089d23308..aaddca6eac6 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { DiceIcon } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
 // icons
-import { DiceIcon } from "@plane/ui";
 
 type TIssueModuleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/name.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
index 7a78be7bde0..66747653d13 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
index afe814ee283..143197a163d 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { LayoutPanelTop } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
index 273bd319bb5..91a9268e1cf 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Signal } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
index e68a7c37371..aea04a5fec5 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
@@ -1,13 +1,13 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { TIssueRelationTypes } from "@plane/types";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { issueRelationObject } from "@/components/issues/issue-detail/relation-select";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
 // component helpers
-import { issueRelationObject } from "components/issues/issue-detail/relation-select";
 // types
-import { TIssueRelationTypes } from "@plane/types";
 
 type TIssueRelationActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
index 95b3cda80ec..4639d90ea76 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
@@ -2,11 +2,11 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { CalendarDays } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
 
 type TIssueStartDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
index 7cc47c2c8ae..081c6c4dbf9 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { DoubleCircleIcon } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 // icons
-import { DoubleCircleIcon } from "@plane/ui";
 
 type TIssueStateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
index a4b40ec3106..09e9bf8cc78 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
@@ -2,11 +2,11 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { CalendarDays } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
 
 type TIssueTargetDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
diff --git a/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx b/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
index 0f5f6876e8e..42d23eba580 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import {
   IssueDefaultActivity,
diff --git a/web/components/issues/issue-detail/issue-activity/activity/root.tsx b/web/components/issues/issue-detail/issue-activity/activity/root.tsx
index af44463d5a6..88dbead96ca 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/root.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityList } from "./activity-list";
 
@@ -23,6 +23,7 @@ export const IssueActivityRoot: FC<TIssueActivityRoot> = observer((props) => {
     <div>
       {activityIds.map((activityId, index) => (
         <IssueActivityList
+          key={activityId}
           activityId={activityId}
           ends={index === 0 ? "top" : index === activityIds.length - 1 ? "bottom" : undefined}
         />
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
index 4dbc36f6ba0..1858e6f1a93 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
 import { MessageCircle } from "lucide-react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { useIssueDetail } from "@/hooks/store";
 // helpers
-import { calculateTimeAgo } from "helpers/date-time.helper";
 
 type TIssueCommentBlock = {
   commentId: string;
@@ -24,7 +24,7 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = (props) => {
   if (!comment) return <></>;
   return (
     <div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}>
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden={true} />
+      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
       <div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-10 bg-gray-500 text-white border border-white uppercase font-medium">
         {comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? (
           <img
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 0c2c3cbb51d..883bb671640 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -1,21 +1,21 @@
 import { FC, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Check, Globe2, Lock, Pencil, Trash2, X } from "lucide-react";
+import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
+import { TIssueComment } from "@plane/types";
 // hooks
-import { useIssueDetail, useMention, useUser, useWorkspace } from "hooks/store";
+import { CustomMenu } from "@plane/ui";
+import { isEmptyHtmlString } from "@/helpers/string.helper";
+import { useIssueDetail, useMention, useUser, useWorkspace } from "@/hooks/store";
 // components
-import { IssueCommentBlock } from "./comment-block";
-import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
-import { IssueCommentReaction } from "../../reactions/issue-comment";
 // ui
-import { CustomMenu } from "@plane/ui";
 // services
-import { FileService } from "services/file.service";
+import { FileService } from "@/services/file.service";
 // types
-import { TIssueComment } from "@plane/types";
+import { IssueCommentReaction } from "../../reactions/issue-comment";
 import { TActivityOperations } from "../root";
+import { IssueCommentBlock } from "./comment-block";
 // helpers
-import { isEmptyHtmlString } from "helpers/string.helper";
 
 const fileService = new FileService();
 
@@ -139,7 +139,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
               value={watch("comment_html") ?? ""}
               debouncedUpdatesEnabled={false}
               customClassName="min-h-[50px] p-3 shadow-sm"
-              onChange={(comment_json: Object, comment_html: string) => setValue("comment_html", comment_html)}
+              onChange={(comment_json: any, comment_html: string) => setValue("comment_html", comment_html)}
               mentionSuggestions={mentionSuggestions}
               mentionHighlights={mentionHighlights}
             />
@@ -150,7 +150,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
               onClick={handleSubmit(onEnter)}
               disabled={isSubmitting || isEmpty}
               className={`group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300  ${
-                isEmpty ? "bg-gray-200 cursor-not-allowed" : "hover:bg-green-500"
+                isEmpty ? "cursor-not-allowed bg-gray-200" : "hover:bg-green-500"
               }`}
             >
               <Check
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
index af47328087b..e0a6044255e 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
@@ -1,18 +1,18 @@
 import { FC, useRef } from "react";
 import { useForm, Controller } from "react-hook-form";
-// components
+import { Globe2, Lock } from "lucide-react";
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import { TIssueComment } from "@plane/types";
+// components
 import { Button } from "@plane/ui";
 // services
-import { FileService } from "services/file.service";
+import { isEmptyHtmlString } from "@/helpers/string.helper";
+import { useMention, useWorkspace } from "@/hooks/store";
+import { FileService } from "@/services/file.service";
 // types
 import { TActivityOperations } from "../root";
-import { TIssueComment } from "@plane/types";
 // icons
-import { Globe2, Lock } from "lucide-react";
-import { useMention, useWorkspace } from "hooks/store";
 // helpers
-import { isEmptyHtmlString } from "helpers/string.helper";
 
 const fileService = new FileService();
 
@@ -97,7 +97,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 customClassName="p-2"
                 editorContentCustomClassNames="min-h-[35px]"
                 debouncedUpdatesEnabled={false}
-                onChange={(comment_json: Object, comment_html: string) => {
+                onChange={(comment_json: any, comment_html: string) => {
                   onChange(comment_html);
                 }}
                 mentionSuggestions={mentionSuggestions}
diff --git a/web/components/issues/issue-detail/issue-activity/comments/root.tsx b/web/components/issues/issue-detail/issue-activity/comments/root.tsx
index 4e2775c4ae5..52a500a16b1 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/root.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
+import { TActivityOperations } from "../root";
 import { IssueCommentCard } from "./comment-card";
 // types
-import { TActivityOperations } from "../root";
 
 type TIssueCommentRoot = {
   workspaceSlug: string;
@@ -28,6 +28,7 @@ export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
     <div>
       {commentIds.map((commentId, index) => (
         <IssueCommentCard
+          key={commentId}
           workspaceSlug={workspaceSlug}
           commentId={commentId}
           ends={index === 0 ? "top" : index === commentIds.length - 1 ? "bottom" : undefined}
diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx
index 695b248de20..75c8bfd4cff 100644
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -1,13 +1,14 @@
 import { FC, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { History, LucideIcon, MessageCircle, ListRestart } from "lucide-react";
+import { TIssueComment } from "@plane/types";
 // hooks
-import { useIssueDetail, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { useIssueDetail, useProject } from "@/hooks/store";
+// ui
 // components
 import { IssueActivityCommentRoot, IssueActivityRoot, IssueCommentRoot, IssueCommentCreate } from "./";
 // types
-import { TIssueComment } from "@plane/types";
 
 type TIssueActivity = {
   workspaceSlug: string;
@@ -45,7 +46,6 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   const { workspaceSlug, projectId, issueId } = props;
   // hooks
   const { createComment, updateComment, removeComment } = useIssueDetail();
-  const { setToastAlert } = useToast();
   const { getProjectById } = useProject();
   // state
   const [activityTab, setActivityTab] = useState<TActivityTabs>("all");
@@ -56,15 +56,15 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           await createComment(workspaceSlug, projectId, issueId, data);
-          setToastAlert({
+          setToast({
             title: "Comment created successfully.",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Comment created successfully.",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Comment creation failed.",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Comment creation failed. Please try again later.",
           });
         }
@@ -73,15 +73,15 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           await updateComment(workspaceSlug, projectId, issueId, commentId, data);
-          setToastAlert({
+          setToast({
             title: "Comment updated successfully.",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Comment updated successfully.",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Comment update failed.",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Comment update failed. Please try again later.",
           });
         }
@@ -90,21 +90,21 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           await removeComment(workspaceSlug, projectId, issueId, commentId);
-          setToastAlert({
+          setToast({
             title: "Comment removed successfully.",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Comment removed successfully.",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Comment remove failed.",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Comment remove failed. Please try again later.",
           });
         }
       },
     }),
-    [workspaceSlug, projectId, issueId, createComment, updateComment, removeComment, setToastAlert]
+    [workspaceSlug, projectId, issueId, createComment, updateComment, removeComment]
   );
 
   const project = getProjectById(projectId);
diff --git a/web/components/issues/issue-detail/label/create-label.tsx b/web/components/issues/issue-detail/label/create-label.tsx
index 72bc034f872..de376ce7997 100644
--- a/web/components/issues/issue-detail/label/create-label.tsx
+++ b/web/components/issues/issue-detail/label/create-label.tsx
@@ -1,16 +1,16 @@
 import { FC, useState, Fragment, useEffect } from "react";
-import { Plus, X, Loader } from "lucide-react";
-import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
-import { Popover, Transition } from "@headlessui/react";
+import { Controller, useForm } from "react-hook-form";
+import { usePopper } from "react-popper";
+import { Plus, X, Loader } from "lucide-react";
+import { Popover } from "@headlessui/react";
+import { IIssueLabel } from "@plane/types";
 // hooks
-import { useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
 // ui
-import { Input } from "@plane/ui";
 // types
 import { TLabelOperations } from "./root";
-import { IIssueLabel } from "@plane/types";
 
 type ILabelCreate = {
   workspaceSlug: string;
@@ -28,13 +28,14 @@ const defaultValues: Partial<IIssueLabel> = {
 export const LabelCreate: FC<ILabelCreate> = (props) => {
   const { workspaceSlug, projectId, issueId, labelOperations, disabled = false } = props;
   // hooks
-  const { setToastAlert } = useToast();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
   // state
   const [isCreateToggle, setIsCreateToggle] = useState(false);
   const handleIsCreateToggle = () => setIsCreateToggle(!isCreateToggle);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // react hook form
   const {
     handleSubmit,
@@ -46,6 +47,18 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
     defaultValues,
   });
 
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
   useEffect(() => {
     if (!isCreateToggle) return;
 
@@ -63,9 +76,9 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
       await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
       reset(defaultValues);
     } catch (error) {
-      setToastAlert({
+      setToast({
         title: "Label creation failed",
-        type: "error",
+        type: TOAST_TYPE.ERROR,
         message: "Label creation failed. Please try again sometime later.",
       });
     }
@@ -74,7 +87,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
   return (
     <>
       <div
-        className="flex-shrink-0 transition-all relative flex items-center gap-1 cursor-pointer border border-custom-border-100 rounded-full text-xs p-0.5 px-2 hover:bg-custom-background-90 text-custom-text-300 hover:text-custom-text-200"
+        className="relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200"
         onClick={handleIsCreateToggle}
       >
         <div className="flex-shrink-0">
@@ -84,38 +97,36 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
       </div>
 
       {isCreateToggle && (
-        <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleLabel)}>
+        <form className="relative flex items-center gap-x-2" onSubmit={handleSubmit(handleLabel)}>
           <div>
             <Controller
               name="color"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <Popover className="relative">
+                <Popover>
                   <>
-                    <Popover.Button className="grid place-items-center outline-none">
-                      {value && value?.trim() !== "" && (
-                        <span
-                          className="h-6 w-6 rounded"
-                          style={{
-                            backgroundColor: value ?? "black",
-                          }}
-                        />
-                      )}
+                    <Popover.Button as={Fragment}>
+                      <button type="button" ref={setReferenceElement} className="grid place-items-center outline-none">
+                        {value && value?.trim() !== "" && (
+                          <span
+                            className="h-6 w-6 rounded"
+                            style={{
+                              backgroundColor: value ?? "black",
+                            }}
+                          />
+                        )}
+                      </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 z-10 mt-1.5 max-w-xs px-2 sm:px-0">
-                        <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
-                      </Popover.Panel>
-                    </Transition>
+                    <Popover.Panel className="fixed z-10">
+                      <div
+                        className="p-2 max-w-xs sm:px-0"
+                        ref={setPopperElement}
+                        style={styles.popper}
+                        {...attributes.popper}
+                      >
+                        <TwitterPicker triangle={"hide"} color={value} onChange={(value) => onChange(value.hex)} />
+                      </div>
+                    </Popover.Panel>
                   </>
                 </Popover>
               )}
@@ -151,7 +162,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
             <X className="h-4 w-4 text-white" />
           </button>
           <button type="submit" className="grid place-items-center rounded bg-green-500 p-1.5" disabled={isSubmitting}>
-            {isSubmitting ? <Loader className="h-4 w-4 text-white spin" /> : <Plus className="h-4 w-4 text-white" />}
+            {isSubmitting ? <Loader className="spin h-4 w-4 text-white" /> : <Plus className="h-4 w-4 text-white" />}
           </button>
         </form>
       )}
diff --git a/web/components/issues/issue-detail/label/label-list-item.tsx b/web/components/issues/issue-detail/label/label-list-item.tsx
index 60792b01c62..2bb6d30d1f6 100644
--- a/web/components/issues/issue-detail/label/label-list-item.tsx
+++ b/web/components/issues/issue-detail/label/label-list-item.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
 import { X } from "lucide-react";
 // types
+import { useIssueDetail, useLabel } from "@/hooks/store";
 import { TLabelOperations } from "./root";
-import { useIssueDetail, useLabel } from "hooks/store";
 
 type TLabelListItem = {
   workspaceSlug: string;
diff --git a/web/components/issues/issue-detail/label/label-list.tsx b/web/components/issues/issue-detail/label/label-list.tsx
index fd714e002b6..07ba7276689 100644
--- a/web/components/issues/issue-detail/label/label-list.tsx
+++ b/web/components/issues/issue-detail/label/label-list.tsx
@@ -1,8 +1,9 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 // components
+import { useIssueDetail } from "@/hooks/store";
 import { LabelListItem } from "./label-list-item";
 // hooks
-import { useIssueDetail } from "hooks/store";
 // types
 import { TLabelOperations } from "./root";
 
@@ -14,7 +15,7 @@ type TLabelList = {
   disabled: boolean;
 };
 
-export const LabelList: FC<TLabelList> = (props) => {
+export const LabelList: FC<TLabelList> = observer((props) => {
   const { workspaceSlug, projectId, issueId, labelOperations, disabled } = props;
   // hooks
   const {
@@ -29,6 +30,7 @@ export const LabelList: FC<TLabelList> = (props) => {
     <>
       {issueLabels.map((labelId) => (
         <LabelListItem
+          key={labelId}
           workspaceSlug={workspaceSlug}
           projectId={projectId}
           issueId={issueId}
@@ -39,4 +41,4 @@ export const LabelList: FC<TLabelList> = (props) => {
       ))}
     </>
   );
-};
+});
diff --git a/web/components/issues/issue-detail/label/root.tsx b/web/components/issues/issue-detail/label/root.tsx
index 94f9b451f28..6309ada6423 100644
--- a/web/components/issues/issue-detail/label/root.tsx
+++ b/web/components/issues/issue-detail/label/root.tsx
@@ -1,12 +1,13 @@
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
+import { IIssueLabel, TIssue } from "@plane/types";
 // components
-import { LabelList, LabelCreate, IssueLabelSelectRoot } from "./";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
-import { useIssueDetail, useLabel } from "hooks/store";
+import { useIssueDetail, useLabel } from "@/hooks/store";
+// ui
 // types
-import { IIssueLabel, TIssue } from "@plane/types";
-import useToast from "hooks/use-toast";
+import { LabelList, LabelCreate, IssueLabelSelectRoot } from "./";
 
 export type TIssueLabel = {
   workspaceSlug: string;
@@ -27,7 +28,6 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
   // hooks
   const { updateIssue } = useIssueDetail();
   const { createLabel } = useLabel();
-  const { setToastAlert } = useToast();
 
   const labelOperations: TLabelOperations = useMemo(
     () => ({
@@ -35,16 +35,10 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
         try {
           if (onLabelUpdate) onLabelUpdate(data.label_ids || []);
           else await updateIssue(workspaceSlug, projectId, issueId, data);
-          if (!isInboxIssue)
-            setToastAlert({
-              title: "Issue updated successfully",
-              type: "success",
-              message: "Issue updated successfully",
-            });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Issue update failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Issue update failed",
           });
         }
@@ -53,23 +47,23 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
         try {
           const labelResponse = await createLabel(workspaceSlug, projectId, data);
           if (!isInboxIssue)
-            setToastAlert({
+            setToast({
               title: "Label created successfully",
-              type: "success",
+              type: TOAST_TYPE.SUCCESS,
               message: "Label created successfully",
             });
           return labelResponse;
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Label creation failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Label creation failed",
           });
           return error;
         }
       },
     }),
-    [updateIssue, createLabel, setToastAlert, onLabelUpdate]
+    [updateIssue, createLabel, onLabelUpdate]
   );
 
   return (
diff --git a/web/components/issues/issue-detail/label/select/label-select.tsx b/web/components/issues/issue-detail/label/select/label-select.tsx
index 11ff77d37ef..2882a1e0e77 100644
--- a/web/components/issues/issue-detail/label/select/label-select.tsx
+++ b/web/components/issues/issue-detail/label/select/label-select.tsx
@@ -2,10 +2,10 @@ import { Fragment, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { usePopper } from "react-popper";
 import { Check, Search, Tag } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useIssueDetail, useLabel } from "hooks/store";
+import { useIssueDetail, useLabel } from "@/hooks/store";
 // components
-import { Combobox } from "@headlessui/react";
 
 export interface IIssueLabelSelect {
   workspaceSlug: string;
@@ -24,7 +24,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
   // states
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState<Boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [query, setQuery] = useState("");
 
   const issue = getIssueById(issueId);
@@ -56,7 +56,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "bottom-start",
+    placement: "bottom-end",
     modifiers: [
       {
         name: "preventOverflow",
@@ -71,7 +71,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
 
   const label = (
     <div
-      className={`flex-shrink-0 transition-all relative flex items-center gap-1 cursor-pointer rounded-full text-xs p-0.5 px-2 hover:bg-custom-background-90 py-0.5 text-custom-text-300 hover:text-custom-text-200 border border-custom-border-100`}
+      className={`relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 py-0.5 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200`}
     >
       <div className="flex-shrink-0">
         <Tag className="h-2.5 w-2.5" />
@@ -102,7 +102,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
           <button
             ref={setReferenceElement}
             type="button"
-            className="rounded cursor-pointer"
+            className="cursor-pointer rounded"
             onClick={() => !projectLabels && fetchLabels()}
           >
             {label}
@@ -129,7 +129,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                 />
               </div>
             </div>
-            <div className={`mt-2 max-h-48 space-y-1 px-2 pr-0 overflow-y-scroll vertical-scrollbar scrollbar-sm`}>
+            <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
               {isLoading ? (
                 <p className="text-center text-custom-text-200">Loading...</p>
               ) : filteredOptions.length > 0 ? (
diff --git a/web/components/issues/issue-detail/label/select/root.tsx b/web/components/issues/issue-detail/label/select/root.tsx
index c31e1bc612c..de0bcca908a 100644
--- a/web/components/issues/issue-detail/label/select/root.tsx
+++ b/web/components/issues/issue-detail/label/select/root.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
 // components
+import { TLabelOperations } from "../root";
 import { IssueLabelSelect } from "./label-select";
 // types
-import { TLabelOperations } from "../root";
 
 type TIssueLabelSelectRoot = {
   workspaceSlug: string;
diff --git a/web/components/issues/issue-detail/links/create-update-link-modal.tsx b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
index fc9eb3838fc..9dfe64addff 100644
--- a/web/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/web/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -1,10 +1,10 @@
 import { FC, useEffect, Fragment } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
+import type { TIssueLinkEditableFields } from "@plane/types";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
-import type { TIssueLinkEditableFields } from "@plane/types";
 import { TLinkOperations } from "./root";
 
 export type TLinkOperationsModal = Exclude<TLinkOperations, "remove">;
@@ -152,8 +152,8 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = (props)
                           ? "Updating Link..."
                           : "Update Link"
                         : isSubmitting
-                        ? "Adding Link..."
-                        : "Add Link"}
+                          ? "Adding Link..."
+                          : "Add Link"}
                     </Button>
                   </div>
                 </form>
diff --git a/web/components/issues/issue-detail/links/link-detail.tsx b/web/components/issues/issue-detail/links/link-detail.tsx
index 6c37f86f993..0380542c23d 100644
--- a/web/components/issues/issue-detail/links/link-detail.tsx
+++ b/web/components/issues/issue-detail/links/link-detail.tsx
@@ -1,16 +1,16 @@
 import { FC, useState } from "react";
 // hooks
-import useToast from "hooks/use-toast";
-import { useIssueDetail, useMember } from "hooks/store";
 // ui
-import { ExternalLinkIcon, Tooltip } from "@plane/ui";
-// icons
 import { Pencil, Trash2, LinkIcon } from "lucide-react";
+import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+// icons
 // types
-import { IssueLinkCreateUpdateModal, TLinkOperationsModal } from "./create-update-link-modal";
 // helpers
-import { calculateTimeAgo } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+import { useIssueDetail, useMember } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { IssueLinkCreateUpdateModal, TLinkOperationsModal } from "./create-update-link-modal";
 
 export type TIssueLinkDetail = {
   linkId: string;
@@ -27,7 +27,6 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
     link: { getLinkById },
   } = useIssueDetail();
   const { getUserDetails } = useMember();
-  const { setToastAlert } = useToast();
 
   // state
   const [isIssueLinkModalOpen, setIsIssueLinkModalOpen] = useState(false);
@@ -35,7 +34,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
     toggleIssueLinkModalStore(modalToggle);
     setIsIssueLinkModalOpen(modalToggle);
   };
-
+  const { isMobile } = usePlatformOS();
   const linkDetail = getLinkById(linkId);
   if (!linkDetail) return <></>;
 
@@ -52,11 +51,11 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
 
       <div className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
         <div
-          className="flex w-full items-start justify-between gap-2 cursor-pointer"
+          className="flex w-full cursor-pointer items-start justify-between gap-2"
           onClick={() => {
             copyTextToClipboard(linkDetail.url);
-            setToastAlert({
-              type: "success",
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
               title: "Link copied!",
               message: "Link copied to clipboard",
             });
@@ -66,7 +65,10 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
             <span className="py-1">
               <LinkIcon className="h-3 w-3 flex-shrink-0" />
             </span>
-            <Tooltip tooltipContent={linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}>
+            <Tooltip
+              tooltipContent={linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+              isMobile={isMobile}
+            >
               <span className="truncate text-xs">
                 {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
               </span>
diff --git a/web/components/issues/issue-detail/links/links.tsx b/web/components/issues/issue-detail/links/links.tsx
index 368bddb9170..08538e481d9 100644
--- a/web/components/issues/issue-detail/links/links.tsx
+++ b/web/components/issues/issue-detail/links/links.tsx
@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // computed
+import { useIssueDetail, useUser } from "@/hooks/store";
 import { IssueLinkDetail } from "./link-detail";
 // hooks
-import { useIssueDetail, useUser } from "hooks/store";
 import { TLinkOperations } from "./root";
 
 export type TLinkOperationsModal = Exclude<TLinkOperations, "create">;
@@ -34,6 +34,7 @@ export const IssueLinkList: FC<TIssueLinkList> = observer((props) => {
         issueLinks.length > 0 &&
         issueLinks.map((linkId) => (
           <IssueLinkDetail
+            key={linkId}
             linkId={linkId}
             linkOperations={linkOperations}
             isNotAllowed={currentProjectRole === 5 || currentProjectRole === 10}
diff --git a/web/components/issues/issue-detail/links/root.tsx b/web/components/issues/issue-detail/links/root.tsx
index 94124085a49..3200ad93f07 100644
--- a/web/components/issues/issue-detail/links/root.tsx
+++ b/web/components/issues/issue-detail/links/root.tsx
@@ -1,13 +1,14 @@
 import { FC, useCallback, useMemo, useState } from "react";
 import { Plus } from "lucide-react";
+import { TIssueLink } from "@plane/types";
 // hooks
-import { useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { useIssueDetail } from "@/hooks/store";
+// ui
 // components
 import { IssueLinkCreateUpdateModal } from "./create-update-link-modal";
 import { IssueLinkList } from "./links";
 // types
-import { TIssueLink } from "@plane/types";
 
 export type TLinkOperations = {
   create: (data: Partial<TIssueLink>) => Promise<void>;
@@ -37,24 +38,22 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
     [toggleIssueLinkModalStore]
   );
 
-  const { setToastAlert } = useToast();
-
   const handleLinkOperations: TLinkOperations = useMemo(
     () => ({
       create: async (data: Partial<TIssueLink>) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
           await createLink(workspaceSlug, projectId, issueId, data);
-          setToastAlert({
+          setToast({
             message: "The link has been successfully created",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             title: "Link created",
           });
           toggleIssueLinkModal(false);
         } catch (error) {
-          setToastAlert({
+          setToast({
             message: "The link could not be created",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             title: "Link not created",
           });
         }
@@ -63,16 +62,16 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
           await updateLink(workspaceSlug, projectId, issueId, linkId, data);
-          setToastAlert({
+          setToast({
             message: "The link has been successfully updated",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             title: "Link updated",
           });
           toggleIssueLinkModal(false);
         } catch (error) {
-          setToastAlert({
+          setToast({
             message: "The link could not be updated",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             title: "Link not updated",
           });
         }
@@ -81,22 +80,22 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
           await removeLink(workspaceSlug, projectId, issueId, linkId);
-          setToastAlert({
+          setToast({
             message: "The link has been successfully removed",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             title: "Link removed",
           });
           toggleIssueLinkModal(false);
         } catch (error) {
-          setToastAlert({
+          setToast({
             message: "The link could not be removed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             title: "Link not removed",
           });
         }
       },
     }),
-    [workspaceSlug, projectId, issueId, createLink, updateLink, removeLink, setToastAlert, toggleIssueLinkModal]
+    [workspaceSlug, projectId, issueId, createLink, updateLink, removeLink, toggleIssueLinkModal]
   );
 
   return (
diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
index 719129d98fe..50d168dcaf8 100644
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@@ -1,18 +1,18 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail, useProjectState, useUser } from "hooks/store";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { StateGroupIcon } from "@plane/ui";
+import { IssueAttachmentRoot, IssueUpdateStatus } from "@/components/issues";
+import { useIssueDetail, useProjectState, useUser } from "@/hooks/store";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // components
-import { IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
-import { IssueTitleInput } from "../title-input";
 import { IssueDescriptionInput } from "../description-input";
-import { IssueParentDetail } from "./parent";
-import { IssueReaction } from "./reactions";
 import { SubIssuesRoot } from "../sub-issues";
+import { IssueTitleInput } from "../title-input";
 import { IssueActivity } from "./issue-activity";
+import { IssueParentDetail } from "./parent";
+import { IssueReaction } from "./reactions";
 // ui
-import { StateGroupIcon } from "@plane/ui";
 // types
 import { TIssueOperations } from "./root";
 
diff --git a/web/components/issues/issue-detail/module-select.tsx b/web/components/issues/issue-detail/module-select.tsx
index 41f4a06d609..d88e3bf957d 100644
--- a/web/components/issues/issue-detail/module-select.tsx
+++ b/web/components/issues/issue-detail/module-select.tsx
@@ -1,14 +1,13 @@
 import React, { useState } from "react";
-import { observer } from "mobx-react-lite";
 import xor from "lodash/xor";
+import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail } from "hooks/store";
 // components
-import { ModuleDropdown } from "components/dropdowns";
+import { ModuleDropdown } from "@/components/dropdowns";
 // ui
-import { Spinner } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+import { useIssueDetail } from "@/hooks/store";
 // types
 import type { TIssueOperations } from "./root";
 
@@ -58,24 +57,22 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
   };
 
   return (
-    <div className={cn(`flex items-center gap-1 h-full`, className)}>
+    <div className={cn(`flex h-full items-center gap-1`, className)}>
       <ModuleDropdown
         projectId={projectId}
         value={issue?.module_ids ?? []}
         onChange={handleIssueModuleChange}
         placeholder="No module"
         disabled={disableSelect}
-        className="w-full h-full group"
+        className="group h-full w-full"
         buttonContainerClassName="w-full"
         buttonClassName={`min-h-8 text-sm justify-between ${issue?.module_ids?.length ? "" : "text-custom-text-400"}`}
         buttonVariant="transparent-with-text"
         hideIcon
         dropdownArrow
         dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
-        showTooltip
         multiple
       />
-      {isUpdating && <Spinner className="h-4 w-4" />}
     </div>
   );
 });
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
index 9a1aa48ad87..b121ddc7864 100644
--- a/web/components/issues/issue-detail/parent-select.tsx
+++ b/web/components/issues/issue-detail/parent-select.tsx
@@ -1,15 +1,16 @@
 import React from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Pencil, X } from "lucide-react";
 // hooks
-import { useIssueDetail, useProject } from "hooks/store";
 // components
-import { ParentIssuesListModal } from "components/issues";
-// ui
 import { Tooltip } from "@plane/ui";
+import { ParentIssuesListModal } from "@/components/issues";
+// ui
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+import { useIssueDetail, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
 import { TIssueOperations } from "./root";
 
@@ -35,7 +36,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
   const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
   const parentIssueProjectDetails =
     parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
-
+  const { isMobile } = usePlatformOS();
   const handleParentIssue = async (_issueId: string | null = null) => {
     try {
       await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
@@ -73,7 +74,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
       >
         {issue.parent_id && parentIssue ? (
           <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
-            <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name}>
+            <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
               <Link
                 href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
                 target="_blank"
@@ -86,7 +87,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
             </Tooltip>
 
             {!disabled && (
-              <Tooltip tooltipContent="Remove" position="bottom">
+              <Tooltip tooltipContent="Remove" position="bottom" isMobile={isMobile}>
                 <span
                   onClick={(e) => {
                     e.preventDefault();
diff --git a/web/components/issues/issue-detail/parent/root.tsx b/web/components/issues/issue-detail/parent/root.tsx
index a1c755e6213..9fce5948c50 100644
--- a/web/components/issues/issue-detail/parent/root.tsx
+++ b/web/components/issues/issue-detail/parent/root.tsx
@@ -1,15 +1,15 @@
 import { FC } from "react";
 import Link from "next/link";
 import { MinusCircle } from "lucide-react";
+import { TIssue } from "@plane/types";
 // component
-import { IssueParentSiblings } from "./siblings";
 // ui
 import { CustomMenu } from "@plane/ui";
 // hooks
-import { useIssues, useProject, useProjectState } from "hooks/store";
+import { useIssues, useProject, useProjectState } from "@/hooks/store";
 // types
 import { TIssueOperations } from "../root";
-import { TIssue } from "@plane/types";
+import { IssueParentSiblings } from "./siblings";
 
 export type TIssueParentDetail = {
   workspaceSlug: string;
diff --git a/web/components/issues/issue-detail/parent/sibling-item.tsx b/web/components/issues/issue-detail/parent/sibling-item.tsx
index cbcf4741bbb..c6eef2a9e32 100644
--- a/web/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/web/components/issues/issue-detail/parent/sibling-item.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 // ui
 import { CustomMenu, LayersIcon } from "@plane/ui";
 // hooks
-import { useIssueDetail, useProject } from "hooks/store";
+import { useIssueDetail, useProject } from "@/hooks/store";
 
 type TIssueParentSiblingItem = {
   issueId: string;
diff --git a/web/components/issues/issue-detail/parent/siblings.tsx b/web/components/issues/issue-detail/parent/siblings.tsx
index 45eca81d454..56e93fc0f11 100644
--- a/web/components/issues/issue-detail/parent/siblings.tsx
+++ b/web/components/issues/issue-detail/parent/siblings.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import useSWR from "swr";
+import { TIssue } from "@plane/types";
 // components
-import { IssueParentSiblingItem } from "./sibling-item";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // types
-import { TIssue } from "@plane/types";
+import { IssueParentSiblingItem } from "./sibling-item";
 
 export type TIssueParentSiblings = {
   currentIssue: TIssue;
@@ -39,7 +39,9 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
           Loading
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
-        subIssueIds.map((issueId) => currentIssue.id != issueId && <IssueParentSiblingItem issueId={issueId} />)
+        subIssueIds.map(
+          (issueId) => currentIssue.id != issueId && <IssueParentSiblingItem key={issueId} issueId={issueId} />
+        )
       ) : (
         <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
           No sibling issues
diff --git a/web/components/issues/issue-detail/reactions/issue-comment.tsx b/web/components/issues/issue-detail/reactions/issue-comment.tsx
index 30a8621e4f4..2925a593d29 100644
--- a/web/components/issues/issue-detail/reactions/issue-comment.tsx
+++ b/web/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -1,13 +1,14 @@
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
+import { IUser } from "@plane/types";
 // components
-import { ReactionSelector } from "./reaction-selector";
-// hooks
-import { useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+import { renderEmoji } from "@/helpers/emoji.helper";
+import { formatTextList } from "@/helpers/issue.helper";
+import { useIssueDetail, useMember } from "@/hooks/store";
+// helper
 // types
-import { IUser } from "@plane/types";
-import { renderEmoji } from "helpers/emoji.helper";
+import { ReactionSelector } from "./reaction-selector";
 
 export type TIssueCommentReaction = {
   workspaceSlug: string;
@@ -21,11 +22,11 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
 
   // hooks
   const {
-    commentReaction: { getCommentReactionsByCommentId, commentReactionsByUser },
+    commentReaction: { getCommentReactionsByCommentId, commentReactionsByUser, getCommentReactionById },
     createCommentReaction,
     removeCommentReaction,
   } = useIssueDetail();
-  const { setToastAlert } = useToast();
+  const { getUserDetails } = useMember();
 
   const reactionIds = getCommentReactionsByCommentId(commentId);
   const userReactions = commentReactionsByUser(commentId, currentUser.id).map((r) => r.reaction);
@@ -36,15 +37,15 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
         try {
           if (!workspaceSlug || !projectId || !commentId) throw new Error("Missing fields");
           await createCommentReaction(workspaceSlug, projectId, commentId, reaction);
-          setToastAlert({
+          setToast({
             title: "Reaction created successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Reaction created successfully",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Reaction creation failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Reaction creation failed",
           });
         }
@@ -53,15 +54,15 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
         try {
           if (!workspaceSlug || !projectId || !commentId || !currentUser?.id) throw new Error("Missing fields");
           removeCommentReaction(workspaceSlug, projectId, commentId, reaction, currentUser.id);
-          setToastAlert({
+          setToast({
             title: "Reaction removed successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Reaction removed successfully",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Reaction remove failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Reaction remove failed",
           });
         }
@@ -71,18 +72,20 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
         else await issueCommentReactionOperations.create(reaction);
       },
     }),
-    [
-      workspaceSlug,
-      projectId,
-      commentId,
-      currentUser,
-      createCommentReaction,
-      removeCommentReaction,
-      setToastAlert,
-      userReactions,
-    ]
+    [workspaceSlug, projectId, commentId, currentUser, createCommentReaction, removeCommentReaction, userReactions]
   );
 
+  const getReactionUsers = (reaction: string): string => {
+    const reactionUsers = (reactionIds?.[reaction] || [])
+      .map((reactionId) => {
+        const reactionDetails = getCommentReactionById(reactionId);
+        return reactionDetails ? getUserDetails(reactionDetails.actor)?.display_name : null;
+      })
+      .filter((displayName): displayName is string => !!displayName);
+    const formattedUsers = formatTextList(reactionUsers);
+    return formattedUsers;
+  };
+
   return (
     <div className="mt-4 relative flex items-center gap-1.5">
       <ReactionSelector
@@ -97,19 +100,21 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
           (reaction) =>
             reactionIds[reaction]?.length > 0 && (
               <>
-                <button
-                  type="button"
-                  onClick={() => issueCommentReactionOperations.react(reaction)}
-                  key={reaction}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
-                    userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80"
-                  }`}
-                >
-                  <span>{renderEmoji(reaction)}</span>
-                  <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
-                    {(reactionIds || {})[reaction].length}{" "}
-                  </span>
-                </button>
+                <Tooltip tooltipContent={getReactionUsers(reaction)}>
+                  <button
+                    type="button"
+                    onClick={() => issueCommentReactionOperations.react(reaction)}
+                    key={reaction}
+                    className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                      userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80"
+                    }`}
+                  >
+                    <span>{renderEmoji(reaction)}</span>
+                    <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
+                      {(reactionIds || {})[reaction].length}{" "}
+                    </span>
+                  </button>
+                </Tooltip>
               </>
             )
         )}
diff --git a/web/components/issues/issue-detail/reactions/issue.tsx b/web/components/issues/issue-detail/reactions/issue.tsx
index d6b33e36bb8..27b463813e4 100644
--- a/web/components/issues/issue-detail/reactions/issue.tsx
+++ b/web/components/issues/issue-detail/reactions/issue.tsx
@@ -1,13 +1,15 @@
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-// components
-import { ReactionSelector } from "./reaction-selector";
+import { IUser } from "@plane/types";
 // hooks
-import { useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
+// ui
+import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+// helpers
+import { renderEmoji } from "@/helpers/emoji.helper";
+import { formatTextList } from "@/helpers/issue.helper";
+import { useIssueDetail, useMember } from "@/hooks/store";
 // types
-import { IUser } from "@plane/types";
-import { renderEmoji } from "helpers/emoji.helper";
+import { ReactionSelector } from "./reaction-selector";
 
 export type TIssueReaction = {
   workspaceSlug: string;
@@ -20,11 +22,11 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
   const { workspaceSlug, projectId, issueId, currentUser } = props;
   // hooks
   const {
-    reaction: { getReactionsByIssueId, reactionsByUser },
+    reaction: { getReactionsByIssueId, reactionsByUser, getReactionById },
     createReaction,
     removeReaction,
   } = useIssueDetail();
-  const { setToastAlert } = useToast();
+  const { getUserDetails } = useMember();
 
   const reactionIds = getReactionsByIssueId(issueId);
   const userReactions = reactionsByUser(issueId, currentUser.id).map((r) => r.reaction);
@@ -35,15 +37,15 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           await createReaction(workspaceSlug, projectId, issueId, reaction);
-          setToastAlert({
+          setToast({
             title: "Reaction created successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Reaction created successfully",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Reaction creation failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Reaction creation failed",
           });
         }
@@ -52,15 +54,15 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
         try {
           if (!workspaceSlug || !projectId || !issueId || !currentUser?.id) throw new Error("Missing fields");
           await removeReaction(workspaceSlug, projectId, issueId, reaction, currentUser.id);
-          setToastAlert({
+          setToast({
             title: "Reaction removed successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Reaction removed successfully",
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Reaction remove failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Reaction remove failed",
           });
         }
@@ -70,9 +72,21 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
         else await issueReactionOperations.create(reaction);
       },
     }),
-    [workspaceSlug, projectId, issueId, currentUser, createReaction, removeReaction, setToastAlert, userReactions]
+    [workspaceSlug, projectId, issueId, currentUser, createReaction, removeReaction, userReactions]
   );
 
+  const getReactionUsers = (reaction: string): string => {
+    const reactionUsers = (reactionIds?.[reaction] || [])
+      .map((reactionId) => {
+        const reactionDetails = getReactionById(reactionId);
+        return reactionDetails ? getUserDetails(reactionDetails.actor)?.display_name : null;
+      })
+      .filter((displayName): displayName is string => !!displayName);
+
+    const formattedUsers = formatTextList(reactionUsers);
+    return formattedUsers;
+  };
+
   return (
     <div className="mt-4 relative flex items-center gap-1.5">
       <ReactionSelector size="md" position="top" value={userReactions} onSelect={issueReactionOperations.react} />
@@ -82,19 +96,21 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
           (reaction) =>
             reactionIds[reaction]?.length > 0 && (
               <>
-                <button
-                  type="button"
-                  onClick={() => issueReactionOperations.react(reaction)}
-                  key={reaction}
-                  className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
-                    userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80"
-                  }`}
-                >
-                  <span>{renderEmoji(reaction)}</span>
-                  <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
-                    {(reactionIds || {})[reaction].length}{" "}
-                  </span>
-                </button>
+                <Tooltip tooltipContent={getReactionUsers(reaction)}>
+                  <button
+                    type="button"
+                    onClick={() => issueReactionOperations.react(reaction)}
+                    key={reaction}
+                    className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                      userReactions.includes(reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80"
+                    }`}
+                  >
+                    <span>{renderEmoji(reaction)}</span>
+                    <span className={userReactions.includes(reaction) ? "text-custom-primary-100" : ""}>
+                      {(reactionIds || {})[reaction].length}{" "}
+                    </span>
+                  </button>
+                </Tooltip>
               </>
             )
         )}
diff --git a/web/components/issues/issue-detail/reactions/reaction-selector.tsx b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
index 0782e7e15e3..da517e975b5 100644
--- a/web/components/issues/issue-detail/reactions/reaction-selector.tsx
+++ b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
@@ -1,9 +1,9 @@
 import { Fragment } from "react";
+import { SmilePlus } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 // helper
-import { renderEmoji } from "helpers/emoji.helper";
+import { renderEmoji } from "@/helpers/emoji.helper";
 // icons
-import { SmilePlus } from "lucide-react";
 
 const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
 
diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx
index 67bba869742..a0e97fbe3f0 100644
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -1,18 +1,18 @@
 import React from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { CircleDot, CopyPlus, Pencil, X, XCircle } from "lucide-react";
+import { TIssueRelationTypes, ISearchIssueResponse } from "@plane/types";
 // hooks
-import { useIssueDetail, useIssues, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { RelatedIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+import { ExistingIssuesListModal } from "@/components/core";
+import { cn } from "@/helpers/common.helper";
+import { useIssueDetail, useIssues, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
-import { ExistingIssuesListModal } from "components/core";
 // ui
-import { RelatedIcon, Tooltip } from "@plane/ui";
 // helpers
-import { cn } from "helpers/common.helper";
 // types
-import { TIssueRelationTypes, ISearchIssueResponse } from "@plane/types";
 
 export type TRelationObject = { className: string; icon: (size: number) => React.ReactElement; placeholder: string };
 
@@ -60,15 +60,13 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
     toggleRelationModal,
   } = useIssueDetail();
   const { issueMap } = useIssues();
-  // toast alert
-  const { setToastAlert } = useToast();
-
+  const { isMobile } = usePlatformOS();
   const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey);
 
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one issue.",
       });
@@ -102,7 +100,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
       <button
         type="button"
         className={cn(
-          "group flex items-center gap-2 px-2 py-0.5 rounded outline-none",
+          "group flex items-center gap-2 rounded px-2 py-0.5 outline-none",
           {
             "cursor-not-allowed": disabled,
             "hover:bg-custom-background-80": !disabled,
@@ -113,9 +111,9 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
         onClick={() => toggleRelationModal(relationKey)}
         disabled={disabled}
       >
-        <div className="flex items-start justify-between w-full">
+        <div className="flex w-full items-start justify-between">
           {relationIssueIds.length > 0 ? (
-            <div className="flex items-center gap-2 py-0.5 flex-wrap">
+            <div className="flex flex-wrap items-center gap-2 py-0.5">
               {relationIssueIds.map((relationIssueId) => {
                 const currentIssue = issueMap[relationIssueId];
                 if (!currentIssue) return;
@@ -125,9 +123,9 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                 return (
                   <div
                     key={relationIssueId}
-                    className={`group flex items-center gap-1 rounded px-1.5 pt-1 pb-1 leading-3 hover:bg-custom-background-90 ${issueRelationObject[relationKey].className}`}
+                    className={`group flex items-center gap-1 rounded px-1.5 pb-1 pt-1 leading-3 hover:bg-custom-background-90 ${issueRelationObject[relationKey].className}`}
                   >
-                    <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name}>
+                    <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name} isMobile={isMobile}>
                       <Link
                         href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
                         target="_blank"
@@ -139,7 +137,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                       </Link>
                     </Tooltip>
                     {!disabled && (
-                      <Tooltip tooltipContent="Remove" position="bottom">
+                      <Tooltip tooltipContent="Remove" position="bottom" isMobile={isMobile}>
                         <span
                           onClick={(e) => {
                             e.preventDefault();
@@ -160,7 +158,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
           )}
           {!disabled && (
             <span
-              className={cn("p-1 flex-shrink-0 opacity-0 group-hover:opacity-100", {
+              className={cn("flex-shrink-0 p-1 opacity-0 group-hover:opacity-100", {
                 "text-custom-text-400": relationIssueIds.length === 0,
               })}
             >
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index 0e343d9a87c..53e8d870711 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -1,33 +1,28 @@
 import { FC, useMemo } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
+import { TIssue } from "@plane/types";
 // components
-import { IssuePeekOverview } from "components/issues";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { EmptyState } from "@/components/common";
+import { IssuePeekOverview } from "@/components/issues";
+import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED } from "@/constants/event-tracker";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "@/hooks/store";
+import emptyIssue from "public/empty-state/issue.svg";
 import { IssueMainContent } from "./main-content";
 import { IssueDetailsSidebar } from "./sidebar";
 // ui
-import { EmptyState } from "components/common";
 // images
-import emptyIssue from "public/empty-state/issue.svg";
 // hooks
-import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
 // types
-import { TIssue } from "@plane/types";
+// ui
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
-import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED } from "constants/event-tracker";
-import { observer } from "mobx-react";
 
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
-  update: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: Partial<TIssue>,
-    showToast?: boolean
-  ) => Promise<void>;
+  update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
   remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   archive?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   restore?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -76,7 +71,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
     issues: { removeIssue: removeArchivedIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
   const { captureIssueEvent } = useEventTracker();
-  const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -91,22 +85,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
           console.error("Error fetching the parent issue");
         }
       },
-      update: async (
-        workspaceSlug: string,
-        projectId: string,
-        issueId: string,
-        data: Partial<TIssue>,
-        showToast: boolean = true
-      ) => {
+      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
         try {
           await updateIssue(workspaceSlug, projectId, issueId, data);
-          if (showToast) {
-            setToastAlert({
-              title: "Issue updated successfully",
-              type: "success",
-              message: "Issue updated successfully",
-            });
-          }
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { ...data, issueId, state: "SUCCESS", element: "Issue detail page" },
@@ -126,21 +107,20 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
+          setToast({
             title: "Issue update failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Issue update failed",
           });
         }
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          let response;
-          if (is_archived) response = await removeArchivedIssue(workspaceSlug, projectId, issueId);
-          else response = await removeIssue(workspaceSlug, projectId, issueId);
-          setToastAlert({
+          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else await removeIssue(workspaceSlug, projectId, issueId);
+          setToast({
             title: "Issue deleted successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Issue deleted successfully",
           });
           captureIssueEvent({
@@ -149,9 +129,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Issue delete failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Issue delete failed",
           });
           captureIssueEvent({
@@ -164,8 +144,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Issue archived successfully.",
           });
@@ -175,8 +155,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Issue could not be archived. Please try again.",
           });
@@ -189,12 +169,19 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-          setToastAlert({
-            title: "Cycle added to issue successfully",
-            type: "success",
-            message: "Issue added to issue successfully",
+          const addToCyclePromise = addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          setPromiseToast(addToCyclePromise, {
+            loading: "Adding cycle to issue...",
+            success: {
+              title: "Success!",
+              message: () => "Cycle added to issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Cycle add to issue failed",
+            },
           });
+          await addToCyclePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { ...issueIds, state: "SUCCESS", element: "Issue detail page" },
@@ -214,24 +201,26 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Cycle add to issue failed",
-            type: "error",
-            message: "Cycle add to issue failed",
-          });
         }
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
-          const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
-          setToastAlert({
-            title: "Cycle removed from issue successfully",
-            type: "success",
-            message: "Cycle removed from issue successfully",
+          const removeFromCyclePromise = removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          setPromiseToast(removeFromCyclePromise, {
+            loading: "Removing cycle from issue...",
+            success: {
+              title: "Success!",
+              message: () => "Cycle removed from issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Cycle remove from issue failed",
+            },
           });
+          await removeFromCyclePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
-            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            payload: { issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
               change_details: "",
@@ -248,21 +237,23 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Cycle remove from issue failed",
-            type: "error",
-            message: "Cycle remove from issue failed",
-          });
         }
       },
       addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
         try {
-          const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
-          setToastAlert({
-            title: "Module added to issue successfully",
-            type: "success",
-            message: "Module added to issue successfully",
+          const addToModulePromise = addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
+          setPromiseToast(addToModulePromise, {
+            loading: "Adding module to issue...",
+            success: {
+              title: "Success!",
+              message: () => "Module added to issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Module add to issue failed",
+            },
           });
+          const response = await addToModulePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
@@ -282,21 +273,23 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Module add to issue failed",
-            type: "error",
-            message: "Module add to issue failed",
-          });
         }
       },
       removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
         try {
-          await removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
-          setToastAlert({
-            title: "Module removed from issue successfully",
-            type: "success",
-            message: "Module removed from issue successfully",
+          const removeFromModulePromise = removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+          setPromiseToast(removeFromModulePromise, {
+            loading: "Removing module from issue...",
+            success: {
+              title: "Success!",
+              message: () => "Module removed from issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Module remove from issue failed",
+            },
           });
+          await removeFromModulePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
@@ -316,11 +309,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Module remove from issue failed",
-            type: "error",
-            message: "Module remove from issue failed",
-          });
         }
       },
       removeModulesFromIssue: async (
@@ -329,20 +317,19 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         issueId: string,
         moduleIds: string[]
       ) => {
-        try {
-          await removeModulesFromIssue(workspaceSlug, projectId, issueId, moduleIds);
-          setToastAlert({
-            type: "success",
-            title: "Successful!",
-            message: "Issue removed from module successfully.",
-          });
-        } catch (error) {
-          setToastAlert({
-            type: "error",
+        const removeModulesFromIssuePromise = removeModulesFromIssue(workspaceSlug, projectId, issueId, moduleIds);
+        setPromiseToast(removeModulesFromIssuePromise, {
+          loading: "Removing module from issue...",
+          success: {
+            title: "Success!",
+            message: () => "Module removed from issue successfully",
+          },
+          error: {
             title: "Error!",
-            message: "Issue could not be removed from module. Please try again.",
-          });
-        }
+            message: () => "Module remove from issue failed",
+          },
+        });
+        await removeModulesFromIssuePromise;
       },
     }),
     [
@@ -357,7 +344,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
       addModulesToIssue,
       removeIssueFromModule,
       removeModulesFromIssue,
-      setToastAlert,
     ]
   );
 
@@ -379,8 +365,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
           }}
         />
       ) : (
-        <div className="flex w-full h-full overflow-hidden">
-          <div className="h-full w-full max-w-2/3 space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
+        <div className="flex h-full w-full overflow-hidden">
+          <div className="max-w-2/3 h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -390,7 +376,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             />
           </div>
           <div
-            className="h-full w-full min-w-[300px] lg:min-w-80 xl:min-w-96 sm:w-1/2 md:w-1/3 space-y-5 overflow-hidden border-l border-custom-border-200 py-5 fixed md:relative bg-custom-sidebar-background-100 right-0 z-[5]"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] overflow-hidden border-l border-custom-border-200 bg-custom-sidebar-background-100 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
             style={themeStore.issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index a65cb7f1647..ce5b54770ea 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import {
   LinkIcon,
   Signal,
@@ -15,9 +15,27 @@ import {
   CalendarCheck2,
 } from "lucide-react";
 // hooks
-import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
 // components
+import {
+  ArchiveIcon,
+  ContrastIcon,
+  DiceIcon,
+  DoubleCircleIcon,
+  RelatedIcon,
+  Tooltip,
+  UserGroupIcon,
+  TOAST_TYPE,
+  setToast,
+} from "@plane/ui";
+import {
+  DateDropdown,
+  EstimateDropdown,
+  PriorityDropdown,
+  MemberDropdown,
+  StateDropdown,
+} from "@/components/dropdowns";
+// ui
+// helpers
 import {
   DeleteIssueModal,
   IssueLinkRoot,
@@ -27,19 +45,23 @@ import {
   IssueParentSelect,
   IssueLabel,
   ArchiveIssueModal,
-} from "components/issues";
+} from "@/components/issues";
+// helpers
+// types
+import { STATE_GROUPS } from "@/constants/state";
+import { cn } from "@/helpers/common.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+// types
+import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import type { TIssueOperations } from "./root";
 import { IssueSubscription } from "./subscription";
-import { DateDropdown, EstimateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
 // icons
-import { ArchiveIcon, ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon, Tooltip, UserGroupIcon } from "@plane/ui";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
-import { cn } from "helpers/common.helper";
-import { shouldHighlightIssueDueDate } from "helpers/issue.helper";
 // types
-import type { TIssueOperations } from "./root";
-import { STATE_GROUPS } from "constants/state";
 
 type Props = {
   workspaceSlug: string;
@@ -61,20 +83,19 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const { getProjectById } = useProject();
   const { currentUser } = useUser();
   const { areEstimatesEnabledForCurrentProject } = useEstimate();
-  const { setToastAlert } = useToast();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
   const { getStateById } = useProjectState();
-
+  const { isMobile } = usePlatformOS();
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
 
   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",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
         message: "Issue link copied to clipboard.",
       });
@@ -89,7 +110,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleArchiveIssue = async () => {
     if (!issueOperations.archive) return;
     await issueOperations.archive(workspaceSlug, projectId, issueId);
-    router.push(`/${workspaceSlug}/projects/${projectId}/archived-issues/${issue.id}`);
+    router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/${issue.id}`);
   };
   // derived values
   const projectDetails = getProjectById(issue.project_id);
@@ -99,10 +120,10 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const isInArchivableGroup =
     !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
 
-  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  const minDate = issue.start_date ? getDate(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
 
-  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  const maxDate = issue.target_date ? getDate(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
 
   return (
@@ -125,11 +146,11 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             {currentUser && !is_archived && (
               <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
             )}
-            <div className="flex items-center flex-wrap gap-2.5 text-custom-text-300">
-              <Tooltip tooltipContent="Copy link">
+            <div className="flex flex-wrap items-center gap-2.5 text-custom-text-300">
+              <Tooltip tooltipContent="Copy link" isMobile={isMobile}>
                 <button
                   type="button"
-                  className="h-5 w-5 grid place-items-center hover:text-custom-text-200 rounded focus:outline-none focus:ring-2 focus:ring-custom-primary"
+                  className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
                   onClick={handleCopyText}
                 >
                   <LinkIcon className="h-4 w-4" />
@@ -137,12 +158,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               </Tooltip>
               {isArchivingAllowed && (
                 <Tooltip
+                  isMobile={isMobile}
                   tooltipContent={isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"}
                 >
                   <button
                     type="button"
                     className={cn(
-                      "h-5 w-5 grid place-items-center rounded focus:outline-none focus:ring-2 focus:ring-custom-primary",
+                      "grid h-5 w-5 place-items-center rounded focus:outline-none focus:ring-2 focus:ring-custom-primary",
                       {
                         "hover:text-custom-text-200": isInArchivableGroup,
                         "cursor-not-allowed text-custom-text-400": !isInArchivableGroup,
@@ -158,10 +180,10 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 </Tooltip>
               )}
               {is_editable && (
-                <Tooltip tooltipContent="Delete">
+                <Tooltip tooltipContent="Delete" isMobile={isMobile}>
                   <button
                     type="button"
-                    className="h-5 w-5 grid place-items-center hover:text-custom-text-200 rounded focus:outline-none focus:ring-2 focus:ring-custom-primary"
+                    className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
                     onClick={() => setDeleteIssueModal(true)}
                   >
                     <Trash2 className="h-4 w-4" />
@@ -173,11 +195,11 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         <div className="h-full w-full overflow-y-auto px-6">
-          <h5 className="text-sm font-medium mt-6">Properties</h5>
+          <h5 className="mt-6 text-sm font-medium">Properties</h5>
           {/* TODO: render properties using a common component */}
-          <div className={`mt-3 mb-2 space-y-2.5 ${!is_editable ? "opacity-60" : ""}`}>
-            <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+          <div className={`mb-2 mt-3 space-y-2.5 ${!is_editable ? "opacity-60" : ""}`}>
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
                 <span>State</span>
               </div>
@@ -187,7 +209,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 projectId={projectId?.toString() ?? ""}
                 disabled={!is_editable}
                 buttonVariant="transparent-with-text"
-                className="w-3/5 flex-grow group"
+                className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName="text-sm"
                 dropdownArrow
@@ -195,8 +217,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
@@ -208,7 +230,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 placeholder="Add assignees"
                 multiple
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
-                className="w-3/5 flex-grow group"
+                className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-sm justify-between ${
                   issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
@@ -219,8 +241,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <Signal className="h-4 w-4 flex-shrink-0" />
                 <span>Priority</span>
               </div>
@@ -235,8 +257,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarClock className="h-4 w-4 flex-shrink-0" />
                 <span>Start date</span>
               </div>
@@ -251,7 +273,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 maxDate={maxDate ?? undefined}
                 disabled={!is_editable}
                 buttonVariant="transparent-with-text"
-                className="w-3/5 flex-grow group"
+                className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
                 hideIcon
@@ -261,8 +283,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
                 <span>Due date</span>
               </div>
@@ -277,7 +299,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 minDate={minDate ?? undefined}
                 disabled={!is_editable}
                 buttonVariant="transparent-with-text"
-                className="w-3/5 flex-grow group"
+                className="group w-3/5 flex-grow"
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={cn("text-sm", {
                   "text-custom-text-400": !issue.target_date,
@@ -291,8 +313,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
 
             {areEstimatesEnabledForCurrentProject && (
-              <div className="flex items-center gap-2 h-8">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex h-8 items-center gap-2">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                   <Triangle className="h-4 w-4 flex-shrink-0" />
                   <span>Estimate</span>
                 </div>
@@ -302,7 +324,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                   projectId={projectId}
                   disabled={!is_editable}
                   buttonVariant="transparent-with-text"
-                  className="w-3/5 flex-grow group"
+                  className="group w-3/5 flex-grow"
                   buttonContainerClassName="w-full text-left"
                   buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
                   placeholder="None"
@@ -314,8 +336,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             )}
 
             {projectDetails?.module_view && (
-              <div className="flex gap-2 min-h-8">
-                <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex min-h-8 gap-2">
+                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                   <DiceIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Module</span>
                 </div>
@@ -331,8 +353,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             )}
 
             {projectDetails?.cycle_view && (
-              <div className="flex items-center gap-2 h-8">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex h-8 items-center gap-2">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                   <ContrastIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Cycle</span>
                 </div>
@@ -347,13 +369,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               </div>
             )}
 
-            <div className="flex items-center gap-2 h-8">
-              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
                 <span>Parent</span>
               </div>
               <IssueParentSelect
-                className="w-3/5 flex-grow h-full"
+                className="h-full w-3/5 flex-grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
@@ -362,13 +384,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex min-h-8 gap-2">
+              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                 <RelatedIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Relates to</span>
               </div>
               <IssueRelationSelect
-                className="w-3/5 flex-grow min-h-8 h-full"
+                className="h-full min-h-8 w-3/5 flex-grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
@@ -377,13 +399,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex min-h-8 gap-2">
+              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                 <XCircle className="h-4 w-4 flex-shrink-0" />
                 <span>Blocking</span>
               </div>
               <IssueRelationSelect
-                className="w-3/5 flex-grow min-h-8 h-full"
+                className="h-full min-h-8 w-3/5 flex-grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
@@ -392,13 +414,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex min-h-8 gap-2">
+              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                 <CircleDot className="h-4 w-4 flex-shrink-0" />
                 <span>Blocked by</span>
               </div>
               <IssueRelationSelect
-                className="w-3/5 flex-grow min-h-8 h-full"
+                className="h-full min-h-8 w-3/5 flex-grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
@@ -407,13 +429,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex min-h-8 gap-2">
+              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                 <CopyPlus className="h-4 w-4 flex-shrink-0" />
                 <span>Duplicate of</span>
               </div>
               <IssueRelationSelect
-                className="w-3/5 flex-grow min-h-8 h-full"
+                className="h-full min-h-8 w-3/5 flex-grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 issueId={issueId}
@@ -422,12 +444,12 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex gap-2 min-h-8">
-              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+            <div className="flex min-h-8 gap-2">
+              <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                 <Tag className="h-4 w-4 flex-shrink-0" />
                 <span>Labels</span>
               </div>
-              <div className="w-3/5 flex-grow min-h-8 h-full">
+              <div className="h-full min-h-8 w-3/5 flex-grow">
                 <IssueLabel
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
index 7321ef27f55..43fffd3fd08 100644
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -1,12 +1,11 @@
-import { Bell, BellOff } from "lucide-react";
-import { observer } from "mobx-react-lite";
 import { FC, useState } from "react";
+import isNil from "lodash/isNil";
+import { observer } from "mobx-react-lite";
+import { Bell, BellOff } from "lucide-react";
 // UI
-import { Button, Loader } from "@plane/ui";
+import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
-import { useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
-import isNil from "lodash/isNil";
+import { useIssueDetail } from "@/hooks/store";
 
 export type TIssueSubscription = {
   workspaceSlug: string;
@@ -22,7 +21,6 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
     createSubscription,
     removeSubscription,
   } = useIssueDetail();
-  const { setToastAlert } = useToast();
   // state
   const [loading, setLoading] = useState(false);
 
@@ -33,16 +31,16 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
     try {
       if (isSubscribed) await removeSubscription(workspaceSlug, projectId, issueId);
       else await createSubscription(workspaceSlug, projectId, issueId);
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: `Issue ${isSubscribed ? `unsubscribed` : `subscribed`} successfully.!`,
         message: `Issue ${isSubscribed ? `unsubscribed` : `subscribed`} successfully.!`,
       });
       setLoading(false);
     } catch (error) {
       setLoading(false);
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error",
         message: "Something went wrong. Please try again later.",
       });
diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index 43f62e5bee4..d5b263776b2 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -1,57 +1,55 @@
-import { FC, useCallback } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
+import { FC } from "react";
 import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TGroupedIssues } from "@plane/types";
 // components
-import { CalendarChart } from "components/issues";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { CalendarChart } from "@/components/issues";
 // hooks
-import useToast from "hooks/use-toast";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useIssues, useUser } from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+// ui
 // types
-import { TGroupedIssues, TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
-import { EIssueActions } from "../types";
 import { handleDragDrop } from "./utils";
-import { useIssues, useUser } from "hooks/store";
-import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
-import { EUserProjectRoles } from "constants/project";
+
+type CalendarStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW;
 
 interface IBaseCalendarRoot {
-  issueStore: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues;
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   QuickActions: FC<IQuickActionProps>;
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.RESTORE]?: (issue: TIssue) => Promise<void>;
-  };
+  storeType: CalendarStoreType;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   isCompletedCycle?: boolean;
 }
 
 export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
-  const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId, isCompletedCycle = false } = props;
+  const { QuickActions, storeType, addIssuesToView, viewId, isCompletedCycle = false } = props;
 
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   // hooks
-  const { setToastAlert } = useToast();
-  const { issueMap } = useIssues();
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { issues, issuesFilter, issueMap } = useIssues(storeType);
+  const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
+    useIssuesActions(storeType);
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
-  const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
+  const displayFilters = issuesFilter.issueFilters?.displayFilters;
 
-  const groupedIssueIds = (issueStore.groupedIssueIds ?? {}) as TGroupedIssues;
+  const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
 
   const onDragEnd = async (result: DropResult) => {
     if (!result) return;
@@ -68,70 +66,49 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
         result.destination,
         workspaceSlug?.toString(),
         projectId?.toString(),
-        issueStore,
         issueMap,
         groupedIssueIds,
-        viewId
+        updateIssue
       ).catch((err) => {
-        setToastAlert({
+        setToast({
           title: "Error",
-          type: "error",
-          message: err.detail ?? "Failed to perform this action",
+          type: TOAST_TYPE.ERROR,
+          message: err?.detail ?? "Failed to perform this action",
         });
       });
     }
   };
 
-  const handleIssues = useCallback(
-    async (date: string, issue: TIssue, action: EIssueActions) => {
-      if (issueActions[action]) {
-        await issueActions[action]!(issue);
-      }
-    },
-    [issueActions]
-  );
-
   return (
     <>
       <div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
         <DragDropContext onDragEnd={onDragEnd}>
           <CalendarChart
-            issuesFilterStore={issuesFilterStore}
+            issuesFilterStore={issuesFilter}
             issues={issueMap}
             groupedIssueIds={groupedIssueIds}
             layout={displayFilters?.calendar?.layout}
             showWeekends={displayFilters?.calendar?.show_weekends ?? false}
-            quickActions={(issue, customActionButton) => (
+            quickActions={(issue, customActionButton, placement) => (
               <QuickActions
                 customActionButton={customActionButton}
                 issue={issue}
-                handleDelete={async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.DELETE)}
-                handleUpdate={
-                  issueActions[EIssueActions.UPDATE]
-                    ? async (data) => handleIssues(issue.target_date ?? "", data, EIssueActions.UPDATE)
-                    : undefined
-                }
-                handleRemoveFromView={
-                  issueActions[EIssueActions.REMOVE]
-                    ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
-                    : undefined
-                }
-                handleArchive={
-                  issueActions[EIssueActions.ARCHIVE]
-                    ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.ARCHIVE)
-                    : undefined
-                }
-                handleRestore={
-                  issueActions[EIssueActions.RESTORE]
-                    ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.RESTORE)
-                    : undefined
+                handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+                handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+                handleRemoveFromView={async () =>
+                  removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)
                 }
+                handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+                handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
                 readOnly={!isEditingAllowed || isCompletedCycle}
+                placements={placement}
               />
             )}
-            quickAddCallback={issueStore.quickAddIssue}
+            addIssuesToView={addIssuesToView}
+            quickAddCallback={issues.quickAddIssue}
             viewId={viewId}
             readOnly={!isEditingAllowed || isCompletedCycle}
+            updateFilters={updateFilters}
           />
         </DragDropContext>
       </div>
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index badb849fb87..8c6a7ebe92c 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -1,21 +1,36 @@
+import { useState } from "react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TGroupedIssues,
+  TIssue,
+  TIssueKanbanFilters,
+  TIssueMap,
+} from "@plane/types";
 // hooks
-import { useIssues, useUser } from "hooks/store";
+import { Spinner } from "@plane/ui";
+import { CalendarHeader, CalendarIssueBlocks, CalendarWeekDays, CalendarWeekHeader } from "@/components/issues";
+import { MONTHS_LIST } from "@/constants/calendar";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { useIssues, useUser } from "@/hooks/store";
+import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import useSize from "@/hooks/use-window-size";
 // components
-import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
 // ui
-import { Spinner } from "@plane/ui";
 // types
-import { ICalendarWeek } from "./types";
-import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
+import { ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IModuleIssuesFilter } from "@/store/issue/module";
+import { IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+import type { ICalendarWeek } from "./types";
+// helpers
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { useCalendarView } from "hooks/store/use-calendar-view";
-import { EIssuesStoreType } from "constants/issue";
-import { ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssuesFilter } from "store/issue/project-views";
 
 type Props = {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
@@ -23,15 +38,21 @@ type Props = {
   groupedIssueIds: TGroupedIssues;
   layout: "month" | "week" | undefined;
   showWeekends: boolean;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
     data: TIssue,
     viewId?: string
   ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   readOnly?: boolean;
+  updateFilters?: (
+    projectId: string,
+    filterType: EIssueFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+  ) => Promise<void>;
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
@@ -43,9 +64,13 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     showWeekends,
     quickActions,
     quickAddCallback,
+    addIssuesToView,
     viewId,
+    updateFilters,
     readOnly = false,
   } = props;
+  // states
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
   // store hooks
   const {
     issues: { viewFlags },
@@ -54,6 +79,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const [windowWidth] = useSize();
 
   const { enableIssueCreation } = viewFlags || {};
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -62,18 +88,30 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
 
   const allWeeksOfActiveMonth = issueCalendarView.allWeeksOfActiveMonth;
 
-  if (!calendarPayload)
+  const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
+
+  if (!calendarPayload || !formattedDatePayload)
     return (
       <div className="grid h-full w-full place-items-center">
         <Spinner />
       </div>
     );
 
+  const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
+
   return (
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
-        <CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
-        <div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
+        <CalendarHeader
+          setSelectedDate={setSelectedDate}
+          issuesFilterStore={issuesFilterStore}
+          updateFilters={updateFilters}
+        />
+        <div
+          className={cn("flex md:h-full w-full flex-col overflow-y-auto", {
+            "vertical-scrollbar scrollbar-lg": windowWidth > 768,
+          })}
+        >
           <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
           <div className="h-full w-full">
             {layout === "month" && (
@@ -81,6 +119,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                 {allWeeksOfActiveMonth &&
                   Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                     <CalendarWeekDays
+                      selectedDate={selectedDate}
+                      setSelectedDate={setSelectedDate}
                       issuesFilterStore={issuesFilterStore}
                       key={weekIndex}
                       week={week}
@@ -90,6 +130,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                       disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
                       quickActions={quickActions}
                       quickAddCallback={quickAddCallback}
+                      addIssuesToView={addIssuesToView}
                       viewId={viewId}
                       readOnly={readOnly}
                     />
@@ -98,6 +139,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
             )}
             {layout === "week" && (
               <CalendarWeekDays
+                selectedDate={selectedDate}
+                setSelectedDate={setSelectedDate}
                 issuesFilterStore={issuesFilterStore}
                 week={issueCalendarView.allDaysOfActiveWeek}
                 issues={issues}
@@ -106,11 +149,35 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                 disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
                 quickActions={quickActions}
                 quickAddCallback={quickAddCallback}
+                addIssuesToView={addIssuesToView}
                 viewId={viewId}
                 readOnly={readOnly}
               />
             )}
           </div>
+
+          {/* mobile view */}
+          <div className="md:hidden">
+            <p className="p-4 text-xl font-semibold">
+              {`${selectedDate.getDate()} ${
+                MONTHS_LIST[selectedDate.getMonth() + 1].title
+              }, ${selectedDate.getFullYear()}`}
+            </p>
+            <CalendarIssueBlocks
+              date={selectedDate}
+              issues={issues}
+              issueIdList={issueIdList}
+              quickActions={quickActions}
+              enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+              quickAddCallback={quickAddCallback}
+              addIssuesToView={addIssuesToView}
+              viewId={viewId}
+              readOnly={readOnly}
+              isDragDisabled
+              isMobileView
+            />
+          </div>
         </div>
       </div>
     </>
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index f92365a58a7..ba404988877 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -1,24 +1,26 @@
-import { useState } from "react";
-import { observer } from "mobx-react-lite";
 import { Droppable } from "@hello-pangea/dnd";
+import { Placement } from "@popperjs/core";
+import { observer } from "mobx-react-lite";
+import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
 // components
-import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues";
+import { CalendarIssueBlocks, ICalendarDate } from "@/components/issues";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { MONTHS_LIST } from "@/constants/calendar";
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // constants
-import { MONTHS_LIST } from "constants/calendar";
-import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
-import { ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssuesFilter } from "store/issue/project-views";
+// types
+import { ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IModuleIssuesFilter } from "@/store/issue/module";
+import { IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 
 type Props = {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   date: ICalendarDate;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
   quickAddCallback?: (
@@ -27,8 +29,11 @@ type Props = {
     data: TIssue,
     viewId?: string
   ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
@@ -41,10 +46,13 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     enableQuickIssueCreate,
     disableIssueCreation,
     quickAddCallback,
+    addIssuesToView,
     viewId,
     readOnly = false,
+    selectedDate,
+    setSelectedDate,
   } = props;
-  const [showAllIssues, setShowAllIssues] = useState(false);
+
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
 
   const formattedDatePayload = renderFormattedPayloadDate(date.date);
@@ -54,13 +62,14 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
   const totalIssues = issueIdList?.length ?? 0;
 
   const isToday = date.date.toDateString() === new Date().toDateString();
+  const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
 
   return (
     <>
       <div className="group relative flex h-full w-full flex-col bg-custom-background-90">
         {/* header */}
         <div
-          className={`flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
+          className={`hidden md:flex items-center justify-end flex-shrink-0 px-2 py-1.5 text-right text-xs ${
             calendarLayout === "month" // if month layout, highlight current month days
               ? date.is_current_month
                 ? "font-medium"
@@ -83,7 +92,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
         </div>
 
         {/* content */}
-        <div className="h-full w-full">
+        <div className="h-full w-full hidden md:block">
           <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
             {(provided, snapshot) => (
               <div
@@ -96,45 +105,45 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                 ref={provided.innerRef}
               >
                 <CalendarIssueBlocks
+                  date={date.date}
                   issues={issues}
                   issueIdList={issueIdList}
                   quickActions={quickActions}
-                  showAllIssues={showAllIssues}
                   isDragDisabled={readOnly}
+                  addIssuesToView={addIssuesToView}
+                  disableIssueCreation={disableIssueCreation}
+                  enableQuickIssueCreate={enableQuickIssueCreate}
+                  quickAddCallback={quickAddCallback}
+                  viewId={viewId}
+                  readOnly={readOnly}
                 />
-
-                {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
-                  <div className="px-2 py-1">
-                    <CalendarQuickAddIssueForm
-                      formKey="target_date"
-                      groupId={formattedDatePayload}
-                      prePopulatedData={{
-                        target_date: renderFormattedPayloadDate(date.date) ?? undefined,
-                      }}
-                      quickAddCallback={quickAddCallback}
-                      viewId={viewId}
-                      onOpen={() => setShowAllIssues(true)}
-                    />
-                  </div>
-                )}
-
-                {totalIssues > 4 && (
-                  <div className="flex items-center px-2.5 py-1">
-                    <button
-                      type="button"
-                      className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium  hover:bg-custom-background-80 hover:text-custom-text-300"
-                      onClick={() => setShowAllIssues((prevData) => !prevData)}
-                    >
-                      {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-                    </button>
-                  </div>
-                )}
-
                 {provided.placeholder}
               </div>
             )}
           </Droppable>
         </div>
+
+        {/* Mobile view content */}
+        <div
+          onClick={() => setSelectedDate(date.date)}
+          className={cn(
+            "text-sm py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer",
+            {
+              "bg-custom-background-100": date.date.getDay() !== 0 && date.date.getDay() !== 6,
+            }
+          )}
+        >
+          <div
+            className={cn("h-6 w-6  rounded-full flex items-center justify-center ", {
+              "bg-custom-primary-100 text-white": isSelectedDate,
+              "bg-custom-primary-100/10 text-custom-primary-100 ": isToday && !isSelectedDate,
+            })}
+          >
+            {date.date.getDate()}
+          </div>
+
+          {totalIssues > 0 && <div className="flex flex-shrink-0 h-1.5 w-1.5 bg-custom-primary-100 rounded mt-1" />}
+        </div>
       </div>
     </>
   );
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 2443ae17bf6..8bb0a2ec1f7 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -1,17 +1,19 @@
 import React, { useState } from "react";
-import { Popover, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { usePopper } from "react-popper";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Popover, Transition } from "@headlessui/react";
 //hooks
-import { useCalendarView } from "hooks/store";
 // icons
-import { ChevronLeft, ChevronRight } from "lucide-react";
 // constants
-import { MONTHS_LIST } from "constants/calendar";
-import { ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssuesFilter } from "store/issue/project-views";
+import { MONTHS_LIST } from "@/constants/calendar";
+import { getDate } from "@/helpers/date-time.helper";
+import { useCalendarView } from "@/hooks/store";
+import { ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IModuleIssuesFilter } from "@/store/issue/module";
+import { IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+// helpers
 
 interface Props {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
@@ -47,8 +49,10 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
 
     const daysList = Object.keys(allDaysOfActiveWeek);
 
-    const firstDay = new Date(daysList[0]);
-    const lastDay = new Date(daysList[daysList.length - 1]);
+    const firstDay = getDate(daysList[0]);
+    const lastDay = getDate(daysList[daysList.length - 1]);
+
+    if (!firstDay || !lastDay) return "Week view";
 
     if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear())
       return `${MONTHS_LIST[firstDay.getMonth() + 1].title} ${firstDay.getFullYear()}`;
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 3168e07eec5..94d9731ef4b 100644
--- a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -1,36 +1,48 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
-import { Popover, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { usePopper } from "react-popper";
+import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
+import { Popover, Transition } from "@headlessui/react";
 // hooks
-import { useCalendarView } from "hooks/store";
 // ui
-import { ToggleSwitch } from "@plane/ui";
 // icons
-import { Check, ChevronUp } from "lucide-react";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TCalendarLayouts,
+  TIssueKanbanFilters,
+} from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
 // types
-import { TCalendarLayouts } from "@plane/types";
 // constants
-import { CALENDAR_LAYOUTS } from "constants/calendar";
-import { EIssueFilterType } from "constants/issue";
-import { ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssuesFilter } from "store/issue/project-views";
+import { CALENDAR_LAYOUTS } from "@/constants/calendar";
+import { EIssueFilterType } from "@/constants/issue";
+import { useCalendarView } from "@/hooks/store";
+import useSize from "@/hooks/use-window-size";
+import { ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IModuleIssuesFilter } from "@/store/issue/module";
+import { IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 
 interface ICalendarHeader {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
-  viewId?: string;
+  updateFilters?: (
+    projectId: string,
+    filterType: EIssueFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+  ) => Promise<void>;
 }
 
 export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((props) => {
-  const { issuesFilterStore, viewId } = props;
+  const { issuesFilterStore, updateFilters } = props;
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { projectId } = router.query;
 
   const issueCalendarView = useCalendarView();
+  const [windowWidth] = useSize();
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -50,65 +62,57 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
   const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
   const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
-  const handleLayoutChange = (layout: TCalendarLayouts) => {
-    if (!workspaceSlug || !projectId) return;
+  const handleLayoutChange = (layout: TCalendarLayouts, closePopover: any) => {
+    if (!projectId || !updateFilters) return;
 
-    issuesFilterStore.updateFilters(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      EIssueFilterType.DISPLAY_FILTERS,
-      {
-        calendar: {
-          ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
-          layout,
-        },
+    updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
+      calendar: {
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
+        layout,
       },
-      viewId
-    );
+    });
 
     issueCalendarView.updateCalendarPayload(
       layout === "month"
         ? issueCalendarView.calendarFilters.activeMonthDate
         : issueCalendarView.calendarFilters.activeWeekDate
     );
+    if (windowWidth <= 768) closePopover(); // close the popover on mobile
   };
 
   const handleToggleWeekends = () => {
     const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
 
-    if (!workspaceSlug || !projectId) return;
+    if (!projectId || !updateFilters) return;
 
-    issuesFilterStore.updateFilters(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      EIssueFilterType.DISPLAY_FILTERS,
-      {
-        calendar: {
-          ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
-          show_weekends: !showWeekends,
-        },
+    updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
+      calendar: {
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
+        show_weekends: !showWeekends,
       },
-      viewId
-    );
+    });
   };
 
   return (
     <Popover className="relative">
-      {({ open }) => (
+      {({ open, close: closePopover }) => (
         <>
           <Popover.Button as={React.Fragment}>
-            <button
-              type="button"
-              ref={setReferenceElement}
-              className={`flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
-                open ? "text-custom-text-100" : "text-custom-text-200"
-              }`}
-            >
-              <div className="font-medium">Options</div>
+            <button type="button" ref={setReferenceElement}>
               <div
-                className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                className={`hidden md:flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
               >
-                <ChevronUp width={12} strokeWidth={2} />
+                <div className="font-medium">Options</div>
+                <div
+                  className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                >
+                  <ChevronUp width={12} strokeWidth={2} />
+                </div>
+              </div>
+              <div className="md:hidden">
+                <MoreVerticalIcon className="h-4 text-custom-text-200" strokeWidth={2} />
               </div>
             </button>
           </Popover.Button>
@@ -134,7 +138,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                       key={layout}
                       type="button"
                       className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
-                      onClick={() => handleLayoutChange(layoutDetails.key)}
+                      onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
                     >
                       {layoutDetails.title}
                       {calendarLayout === layout && <Check size={12} strokeWidth={2} />}
@@ -146,7 +150,12 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                     onClick={handleToggleWeekends}
                   >
                     Show weekends
-                    <ToggleSwitch value={showWeekends} onChange={() => {}} />
+                    <ToggleSwitch
+                      value={showWeekends}
+                      onChange={() => {
+                        if (windowWidth <= 768) closePopover(); // close the popover on mobile
+                      }}
+                    />
                   </button>
                 </div>
               </div>
diff --git a/web/components/issues/issue-layouts/calendar/header.tsx b/web/components/issues/issue-layouts/calendar/header.tsx
index ebbb510fc68..c07bd4a7b12 100644
--- a/web/components/issues/issue-layouts/calendar/header.tsx
+++ b/web/components/issues/issue-layouts/calendar/header.tsx
@@ -1,22 +1,34 @@
 import { observer } from "mobx-react-lite";
 
 // components
-import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "components/issues";
-// icons
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCalendarView } from "hooks/store/use-calendar-view";
-import { ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssuesFilter } from "store/issue/project-views";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssueKanbanFilters,
+} from "@plane/types";
+import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "@/components/issues";
+// icons
+import { EIssueFilterType } from "@/constants/issue";
+import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import { ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IModuleIssuesFilter } from "@/store/issue/module";
+import { IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 
 interface ICalendarHeader {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
-  viewId?: string;
+  updateFilters?: (
+    projectId: string,
+    filterType: EIssueFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+  ) => Promise<void>;
+  setSelectedDate: (date: Date) => void;
 }
 
 export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
-  const { issuesFilterStore, viewId } = props;
+  const { issuesFilterStore, updateFilters, setSelectedDate } = props;
 
   const issueCalendarView = useCalendarView();
 
@@ -80,6 +92,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
       activeMonthDate: firstDayOfCurrentMonth,
       activeWeekDate: today,
     });
+    setSelectedDate(today);
   };
 
   return (
@@ -101,7 +114,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
         >
           Today
         </button>
-        <CalendarOptionsDropdown issuesFilterStore={issuesFilterStore} viewId={viewId} />
+        <CalendarOptionsDropdown issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
       </div>
     </div>
   );
diff --git a/web/components/issues/issue-layouts/calendar/index.ts b/web/components/issues/issue-layouts/calendar/index.ts
index 69fce666261..527a9eff481 100644
--- a/web/components/issues/issue-layouts/calendar/index.ts
+++ b/web/components/issues/issue-layouts/calendar/index.ts
@@ -5,6 +5,8 @@ export * from "./types.d";
 export * from "./day-tile";
 export * from "./header";
 export * from "./issue-blocks";
+export * from "./issue-block-root";
+export * from "./issue-block";
 export * from "./week-days";
 export * from "./week-header";
 export * from "./quick-add-issue-form";
diff --git a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx
new file mode 100644
index 00000000000..f7fd7ab5224
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Placement } from "@popperjs/core";
+// components
+import { TIssue, TIssueMap } from "@plane/types";
+import { CalendarIssueBlock } from "@/components/issues";
+// types
+
+type Props = {
+  issues: TIssueMap | undefined;
+  issueId: string;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
+  isDragging?: boolean;
+};
+
+export const CalendarIssueBlockRoot: React.FC<Props> = (props) => {
+  const { issues, issueId, quickActions, isDragging } = props;
+
+  if (!issues?.[issueId]) return null;
+
+  const issue = issues?.[issueId];
+
+  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} />;
+};
diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx
new file mode 100644
index 00000000000..713049ac39b
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -0,0 +1,119 @@
+import { useState, useRef } from "react";
+import { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { MoreHorizontal } from "lucide-react";
+import { TIssue } from "@plane/types";
+// components
+import { Tooltip, ControlLink } from "@plane/ui";
+// hooks
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+// helpers
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  issue: TIssue;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
+  isDragging?: boolean;
+};
+
+export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
+  const { issue, quickActions, isDragging = false } = props;
+  // hooks
+  const {
+    router: { workspaceSlug, projectId },
+  } = useApplication();
+  const { getProjectIdentifierById } = useProject();
+  const { getProjectStates } = useProjectState();
+  const { peekIssue, setPeekIssue } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+
+  const menuActionRef = useRef<HTMLDivElement | null>(null);
+
+  const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
+
+  const handleIssuePeekOverview = (issue: TIssue) =>
+    workspaceSlug &&
+    issue &&
+    issue.project_id &&
+    issue.id &&
+    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+
+  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+  const customActionButton = (
+    <div
+      ref={menuActionRef}
+      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
+        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
+      }`}
+      onClick={() => setIsMenuActive(!isMenuActive)}
+    >
+      <MoreHorizontal className="h-3.5 w-3.5" />
+    </div>
+  );
+
+  const isMenuActionRefAboveScreenBottom =
+    menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
+
+  const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
+
+  return (
+    <ControlLink
+      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+      target="_blank"
+      onClick={() => handleIssuePeekOverview(issue)}
+      className="w-full cursor-pointer text-sm text-custom-text-100"
+      disabled={!!issue?.tempId}
+    >
+      <>
+        {issue?.tempId !== undefined && (
+          <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+        )}
+
+        <div
+          className={cn(
+            "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded border-b md:border-[0.5px] border-custom-border-200 hover:border-custom-border-400 md:px-1 px-4 py-1.5 ",
+            {
+              "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
+            },
+            { "bg-custom-background-100 hover:bg-custom-background-90": !isDragging },
+            {
+              "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issue.id,
+            }
+          )}
+        >
+          <div className="flex h-full items-center gap-1.5 truncate">
+            <span
+              className="h-full w-0.5 flex-shrink-0 rounded"
+              style={{
+                backgroundColor: stateColor,
+              }}
+            />
+            <div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
+              {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
+            </div>
+            <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+              <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
+            </Tooltip>
+          </div>
+          <div
+            className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
+              isMenuActive ? "!block" : ""
+            }`}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          >
+            {quickActions(issue, customActionButton, placement)}
+          </div>
+        </div>
+      </>
+    </ControlLink>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index b5d0c434609..79cc84ecb1b 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -1,72 +1,62 @@
-import { useState, useRef } from "react";
-import { observer } from "mobx-react-lite";
+import { useState } from "react";
 import { Draggable } from "@hello-pangea/dnd";
-import { MoreHorizontal } from "lucide-react";
+import { Placement } from "@popperjs/core";
+import { observer } from "mobx-react-lite";
+import { TIssue, TIssueMap } from "@plane/types";
 // components
-import { Tooltip, ControlLink } from "@plane/ui";
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { CalendarQuickAddIssueForm, CalendarIssueBlockRoot } from "@/components/issues";
 // helpers
-import { cn } from "helpers/common.helper";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
-import { TIssue, TIssueMap } from "@plane/types";
-import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
 
 type Props = {
+  date: Date;
   issues: TIssueMap | undefined;
   issueIdList: string[] | null;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
-  showAllIssues?: boolean;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   isDragDisabled?: boolean;
+  enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    viewId?: string
+  ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  viewId?: string;
+  readOnly?: boolean;
+  isMobileView?: boolean;
 };
 
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
-  const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
-  // hooks
   const {
-    router: { workspaceSlug, projectId },
-  } = useApplication();
-  const { getProjectIdentifierById } = useProject();
-  const { getProjectStates } = useProjectState();
-  const { peekIssue, setPeekIssue } = useIssueDetail();
+    date,
+    issues,
+    issueIdList,
+    quickActions,
+    isDragDisabled = false,
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    addIssuesToView,
+    viewId,
+    readOnly,
+    isMobileView = false,
+  } = props;
   // states
-  const [isMenuActive, setIsMenuActive] = useState(false);
-
-  const menuActionRef = useRef<HTMLDivElement | null>(null);
-
-  const handleIssuePeekOverview = (issue: TIssue) =>
-    workspaceSlug &&
-    issue &&
-    issue.project_id &&
-    issue.id &&
-    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+  const [showAllIssues, setShowAllIssues] = useState(false);
 
-  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+  const formattedDatePayload = renderFormattedPayloadDate(date);
+  const totalIssues = issueIdList?.length ?? 0;
 
-  const customActionButton = (
-    <div
-      ref={menuActionRef}
-      className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
-        isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
-      }`}
-      onClick={() => setIsMenuActive(!isMenuActive)}
-    >
-      <MoreHorizontal className="h-3.5 w-3.5" />
-    </div>
-  );
+  if (!formattedDatePayload) return null;
 
   return (
     <>
-      {issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => {
-        if (!issues?.[issueId]) return null;
-
-        const issue = issues?.[issueId];
-
-        const stateColor =
-          getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
-
-        return (
-          <Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
+      {issueIdList?.slice(0, showAllIssues || isMobileView ? issueIdList.length : 4).map((issueId, index) =>
+        !isMobileView ? (
+          <Draggable key={issueId} draggableId={issueId} index={index} isDragDisabled={isDragDisabled}>
             {(provided, snapshot) => (
               <div
                 className="relative cursor-pointer p-1 px-2"
@@ -74,63 +64,46 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                 {...provided.dragHandleProps}
                 ref={provided.innerRef}
               >
-                <ControlLink
-                  href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-                  target="_blank"
-                  onClick={() => handleIssuePeekOverview(issue)}
-                  className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-                  disabled={!!issue?.tempId}
-                >
-                  <>
-                    {issue?.tempId !== undefined && (
-                      <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-                    )}
-
-                    <div
-                      className={cn(
-                        "group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-custom-border-200 hover:border-custom-border-400 px-1 py-1.5 ",
-                        {
-                          "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100":
-                            snapshot.isDragging,
-                        },
-                        { "bg-custom-background-100 hover:bg-custom-background-90": !snapshot.isDragging },
-                        {
-                          "border border-custom-primary-70 hover:border-custom-primary-70":
-                            peekIssue?.issueId === issue.id,
-                        }
-                      )}
-                    >
-                      <div className="flex h-full items-center gap-1.5">
-                        <span
-                          className="h-full w-0.5 flex-shrink-0 rounded"
-                          style={{
-                            backgroundColor: stateColor,
-                          }}
-                        />
-                        <div className="flex-shrink-0 text-xs text-custom-text-300">
-                          {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
-                        </div>
-                        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                          <div className="truncate text-xs">{issue.name}</div>
-                        </Tooltip>
-                      </div>
-                      <div
-                        className={`hidden h-5 w-5 group-hover/calendar-block:block ${isMenuActive ? "!block" : ""}`}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                        }}
-                      >
-                        {quickActions(issue, customActionButton)}
-                      </div>
-                    </div>
-                  </>
-                </ControlLink>
+                <CalendarIssueBlockRoot
+                  issues={issues}
+                  issueId={issueId}
+                  quickActions={quickActions}
+                  isDragging={snapshot.isDragging}
+                />
               </div>
             )}
           </Draggable>
-        );
-      })}
+        ) : (
+          <CalendarIssueBlockRoot key={issueId} issues={issues} issueId={issueId} quickActions={quickActions} />
+        )
+      )}
+
+      {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
+        <div className="px-1 md:px-2 py-1 border-custom-border-200 border-b md:border-none">
+          <CalendarQuickAddIssueForm
+            formKey="target_date"
+            groupId={formattedDatePayload}
+            prePopulatedData={{
+              target_date: formattedDatePayload,
+            }}
+            quickAddCallback={quickAddCallback}
+            addIssuesToView={addIssuesToView}
+            viewId={viewId}
+            onOpen={() => setShowAllIssues(true)}
+          />
+        </div>
+      )}
+      {totalIssues > 4 && (
+        <div className="hidden md:flex items-center px-2.5 py-1">
+          <button
+            type="button"
+            className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium  hover:bg-custom-background-80 hover:text-custom-text-300"
+            onClick={() => setShowAllIssues(!showAllIssues)}
+          >
+            {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+          </button>
+        </div>
+      )}
     </>
   );
 });
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index 6db9323facc..7e17496d484 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -1,20 +1,25 @@
 import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
+// components
+import { PlusIcon } from "lucide-react";
+import { ISearchIssueResponse, TIssue } from "@plane/types";
+import { TOAST_TYPE, setPromiseToast, setToast, CustomMenu } from "@plane/ui";
+import { ExistingIssuesListModal } from "@/components/core";
 // hooks
-import { useEventTracker, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useKeypress from "hooks/use-keypress";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { ISSUE_CREATED } from "@/constants/event-tracker";
+import { cn } from "@/helpers/common.helper";
+import { createIssuePayload } from "@/helpers/issue.helper";
+import { useEventTracker, useIssueDetail, useProject } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // helpers
-import { createIssuePayload } from "helpers/issue.helper";
 // icons
-import { PlusIcon } from "lucide-react";
+// ui
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { ISSUE_CREATED } from "constants/event-tracker";
+// helper
 
 type Props = {
   formKey: keyof TIssue;
@@ -27,6 +32,7 @@ type Props = {
     data: TIssue,
     viewId?: string
   ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   onOpen?: () => void;
 };
@@ -44,7 +50,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-sm md:text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -52,30 +58,33 @@ const Inputs = (props: any) => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full rounded-md bg-transparent py-1.5 pr-2 text-xs font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full rounded-md bg-transparent py-1.5 pr-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
 };
 
 export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
-  const { formKey, prePopulatedData, quickAddCallback, viewId, onOpen } = props;
+  const { formKey, prePopulatedData, quickAddCallback, addIssuesToView, viewId, onOpen } = props;
 
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, moduleId } = router.query;
   // store hooks
   const { getProjectById } = useProject();
   const { captureIssueEvent } = useEventTracker();
+  const { updateIssue } = useIssueDetail();
   // refs
   const ref = useRef<HTMLDivElement>(null);
   // states
   const [isOpen, setIsOpen] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
-
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isExistingIssueModalOpen, setIsExistingIssueModalOpen] = useState(false);
   // derived values
   const projectDetail = projectId ? getProjectById(projectId.toString()) : null;
+  const ExistingIssuesListModalPayload = moduleId
+    ? { module: moduleId.toString(), target_date: "none" }
+    : { cycle: true, target_date: "none" };
 
   const {
     reset,
@@ -102,13 +111,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
     Object.keys(errors).forEach((key) => {
       const error = errors[key as keyof TIssue];
 
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: error?.message?.toString() || "Some error occurred. Please try again.",
       });
     });
-  }, [errors, setToastAlert]);
+  }, [errors]);
 
   const onSubmitHandler = async (formData: TIssue) => {
     if (isSubmitting || !workspaceSlug || !projectId) return;
@@ -120,49 +129,89 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
       ...formData,
     });
 
-    try {
-      quickAddCallback &&
-        (await quickAddCallback(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          {
-            ...payload,
-          },
-          viewId
-        ).then((res) => {
+    if (quickAddCallback) {
+      const quickAddPromise = quickAddCallback(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          ...payload,
+        },
+        viewId
+      );
+      setPromiseToast<any>(quickAddPromise, {
+        loading: "Adding issue...",
+        success: {
+          title: "Success!",
+          message: () => "Issue created successfully.",
+        },
+        error: {
+          title: "Error!",
+          message: (err) => err?.message || "Some error occurred. Please try again.",
+        },
+      });
+
+      await quickAddPromise
+        .then((res) => {
           captureIssueEvent({
             eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
             path: router.asPath,
           });
-        }));
-      setToastAlert({
-        type: "success",
-        title: "Success!",
-        message: "Issue created successfully.",
-      });
-    } catch (err: any) {
-      console.error(err);
-      captureIssueEvent({
-        eventName: ISSUE_CREATED,
-        payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
-        path: router.asPath,
-      });
-      setToastAlert({
-        type: "error",
+        })
+        .catch(() => {
+          captureIssueEvent({
+            eventName: ISSUE_CREATED,
+            payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
+            path: router.asPath,
+          });
+        });
+    }
+  };
+
+  const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const issueIds = data.map((i) => i.id);
+
+    try {
+      // To handle all updates in parallel
+      await Promise.all(
+        data.map((issue) =>
+          updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, prePopulatedData ?? {})
+        )
+      );
+      if (addIssuesToView) {
+        await addIssuesToView(issueIds);
+      }
+    } catch (error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: err?.message || "Some error occurred. Please try again.",
+        message: "Something went wrong. Please try again.",
       });
     }
   };
 
-  const handleOpen = () => {
+  const handleNewIssue = () => {
     setIsOpen(true);
     if (onOpen) onOpen();
   };
+  const handleExistingIssue = () => {
+    setIsExistingIssueModalOpen(true);
+  };
 
   return (
     <>
+      {workspaceSlug && projectId && (
+        <ExistingIssuesListModal
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          isOpen={isExistingIssueModalOpen}
+          handleClose={() => setIsExistingIssueModalOpen(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={handleAddIssuesToView}
+        />
+      )}
       {isOpen && (
         <div
           ref={ref}
@@ -172,7 +221,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
         >
           <form
             onSubmit={handleSubmit(onSubmitHandler)}
-            className="z-50 flex w-full items-center gap-x-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 shadow-custom-shadow-2xs transition-opacity"
+            className="z-50 flex w-full items-center gap-x-2 rounded md:border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 md:shadow-custom-shadow-2xs transition-opacity"
           >
             <Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetails={projectDetail} />
           </form>
@@ -180,15 +229,38 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
       )}
 
       {!isOpen && (
-        <div className="hidden rounded border-[0.5px] border-custom-border-200 group-hover:block">
-          <button
-            type="button"
-            className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100"
-            onClick={handleOpen}
-          >
-            <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
+          className={cn("md:opacity-0 rounded md:border-[0.5px] border-custom-border-200 md:group-hover:opacity-100", {
+            block: isMenuOpen,
+          })}
+        >
+          {addIssuesToView ? (
+            <CustomMenu
+              placement="bottom-start"
+              menuButtonOnClick={() => setIsMenuOpen(true)}
+              onMenuClose={() => setIsMenuOpen(false)}
+              className="w-full"
+              customButtonClassName="w-full"
+              customButton={
+                <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100">
+                  <PlusIcon className="h-3.5 w-3.5 stroke-2 flex-shrink-0" />
+                  <span className="text-sm font-medium flex-shrink-0 text-custom-primary-100">New Issue</span>
+                </div>
+              }
+            >
+              <CustomMenu.MenuItem onClick={handleNewIssue}>New Issue</CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={handleExistingIssue}>Add existing issue</CustomMenu.MenuItem>
+            </CustomMenu>
+          ) : (
+            <button
+              type="button"
+              className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100"
+              onClick={handleNewIssue}
+            >
+              <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/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 4daf68b9f5f..44f606b213c 100644
--- a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -1,59 +1,42 @@
-import { useRouter } from "next/router";
+import { useCallback } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 //hooks
-import { useCycle, useIssues } from "hooks/store";
+import { CycleIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useIssues } from "@/hooks/store";
 // components
-import { CycleIssueQuickActions } from "components/issues";
-// types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
 import { BaseCalendarRoot } from "../base-calendar-root";
-import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
+// types
+// constants
 
 export const CycleCalendarLayout: React.FC = observer(() => {
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCompletedCycleIds } = useCycle();
-
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, cycleId.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId || !projectId) return;
-        await issues.removeIssueFromCycle(workspaceSlug.toString(), issue.project_id, cycleId.toString(), issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-        await issues.archiveIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      },
-    }),
-    [issues, workspaceSlug, cycleId, projectId]
-  );
+  const { issues } = useIssues(EIssuesStoreType.CYCLE);
 
   if (!cycleId) return null;
 
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
 
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) throw new Error();
+      return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+    },
+    [issues?.addIssueToCycle, workspaceSlug, projectId, cycleId]
+  );
+
   return (
     <BaseCalendarRoot
-      issueStore={issues}
-      issuesFilterStore={issuesFilter}
       QuickActions={CycleIssueQuickActions}
-      issueActions={issueActions}
+      addIssuesToView={addIssuesToView}
       viewId={cycleId.toString()}
       isCompletedCycle={isCompletedCycle}
+      storeType={EIssuesStoreType.CYCLE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
index cb474d25ec6..b1b1de32a41 100644
--- a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -1,54 +1,37 @@
-import { useRouter } from "next/router";
+import { useCallback } from "react";
 import { observer } from "mobx-react-lite";
-// hoks
-import { useIssues } from "hooks/store";
+import { useRouter } from "next/router";
+// hooks
 // components
-import { ModuleIssueQuickActions } from "components/issues";
+import { ModuleIssueQuickActions } from "@/components/issues";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
+// constants
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 import { BaseCalendarRoot } from "../base-calendar-root";
-import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
 
 export const ModuleCalendarLayout: React.FC = observer(() => {
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    moduleId: string;
-  };
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { issues } = useIssues(EIssuesStoreType.MODULE);
+
+  if (!moduleId) return null;
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue, moduleId);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id, moduleId);
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        await issues.removeIssueFromModule(workspaceSlug, issue.project_id, moduleId, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        await issues.archiveIssue(workspaceSlug, issue.project_id, issue.id, moduleId);
-      },
-    }),
-    [issues, workspaceSlug, moduleId]
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !moduleId) throw new Error();
+      return issues.addIssuesToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
+    },
+    [issues?.addIssuesToModule, workspaceSlug, projectId, moduleId]
   );
 
   return (
     <BaseCalendarRoot
-      issueStore={issues}
-      issuesFilterStore={issuesFilter}
       QuickActions={ModuleIssueQuickActions}
-      issueActions={issueActions}
-      viewId={moduleId}
+      storeType={EIssuesStoreType.MODULE}
+      addIssuesToView={addIssuesToView}
+      viewId={moduleId.toString()}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
index d42a8c5d217..ae92f668c04 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -1,48 +1,10 @@
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 // hooks
-import { useIssues } from "hooks/store";
+import { ProjectIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
 import { BaseCalendarRoot } from "../base-calendar-root";
-import { EIssueActions } from "../../types";
-import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
 
-export const CalendarLayout: React.FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.archiveIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
-
-  return (
-    <BaseCalendarRoot
-      issueStore={issues}
-      issuesFilterStore={issuesFilter}
-      QuickActions={ProjectIssueQuickActions}
-      issueActions={issueActions}
-    />
-  );
-});
+export const CalendarLayout: React.FC = observer(() => (
+  <BaseCalendarRoot QuickActions={ProjectIssueQuickActions} storeType={EIssuesStoreType.PROJECT} />
+));
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
index 0110aea2bc1..fcd7110dd47 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -1,40 +1,23 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useIssues } from "hooks/store";
+import { ProjectIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
-import { BaseCalendarRoot } from "../base-calendar-root";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
+import { BaseCalendarRoot } from "../base-calendar-root";
 // constants
-import { EIssuesStoreType } from "constants/issue";
-
-export interface IViewCalendarLayout {
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-  };
-}
 
-export const ProjectViewCalendarLayout: React.FC<IViewCalendarLayout> = observer((props) => {
-  const { issueActions } = props;
-  // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+export const ProjectViewCalendarLayout: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { viewId } = router.query;
 
   return (
     <BaseCalendarRoot
-      issueStore={issues}
-      issuesFilterStore={issuesFilter}
       QuickActions={ProjectIssueQuickActions}
-      issueActions={issueActions}
       viewId={viewId?.toString()}
+      storeType={EIssuesStoreType.PROJECT_VIEW}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/calendar/utils.ts b/web/components/issues/issue-layouts/calendar/utils.ts
index 82d9ce0ce5f..fd96ff64764 100644
--- a/web/components/issues/issue-layouts/calendar/utils.ts
+++ b/web/components/issues/issue-layouts/calendar/utils.ts
@@ -1,21 +1,16 @@
 import { DraggableLocation } from "@hello-pangea/dnd";
-import { ICycleIssues } from "store/issue/cycle";
-import { IModuleIssues } from "store/issue/module";
-import { IProjectIssues } from "store/issue/project";
-import { IProjectViewIssues } from "store/issue/project-views";
-import { TGroupedIssues, IIssueMap } from "@plane/types";
+import { TGroupedIssues, IIssueMap, TIssue } from "@plane/types";
 
 export const handleDragDrop = async (
   source: DraggableLocation,
   destination: DraggableLocation,
   workspaceSlug: string | undefined,
   projectId: string | undefined,
-  store: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues,
   issueMap: IIssueMap,
   issueWithIds: TGroupedIssues,
-  viewId: string | null = null // it can be moduleId, cycleId
+  updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>
 ) => {
-  if (!issueMap || !issueWithIds || !workspaceSlug || !projectId) return;
+  if (!issueMap || !issueWithIds || !workspaceSlug || !projectId || !updateIssue) return;
 
   const sourceColumnId = source?.droppableId || null;
   const destinationColumnId = destination?.droppableId || null;
@@ -31,12 +26,11 @@ export const handleDragDrop = async (
     const [removed] = sourceIssues.splice(source.index, 1);
     const removedIssueDetail = issueMap[removed];
 
-    const updateIssue = {
+    const updatedIssue = {
       id: removedIssueDetail?.id,
       target_date: destinationColumnId,
     };
 
-    if (viewId) return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue, viewId);
-    else return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
+    return await updateIssue(projectId, updatedIssue.id, updatedIssue);
   }
 };
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
index 5a640a56695..429c237e205 100644
--- a/web/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -1,22 +1,23 @@
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
+import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
 // components
-import { CalendarDayTile } from "components/issues";
+import { CalendarDayTile } from "@/components/issues";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
+import { ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IModuleIssuesFilter } from "@/store/issue/module";
+import { IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 import { ICalendarDate, ICalendarWeek } from "./types";
-import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
-import { ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssuesFilter } from "store/issue/project-views";
 
 type Props = {
   issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
   week: ICalendarWeek | undefined;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
   quickAddCallback?: (
@@ -25,8 +26,11 @@ type Props = {
     data: TIssue,
     viewId?: string
   ) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
   viewId?: string;
   readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@@ -39,8 +43,11 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     enableQuickIssueCreate,
     disableIssueCreation,
     quickAddCallback,
+    addIssuesToView,
     viewId,
     readOnly = false,
+    selectedDate,
+    setSelectedDate,
   } = props;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -50,7 +57,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
+      className={`grid md:divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
         calendarLayout === "month" ? "" : "h-full"
       }`}
     >
@@ -59,6 +66,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
 
         return (
           <CalendarDayTile
+            selectedDate={selectedDate}
+            setSelectedDate={setSelectedDate}
             issuesFilterStore={issuesFilterStore}
             key={renderFormattedPayloadDate(date.date)}
             date={date}
@@ -68,6 +77,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             enableQuickIssueCreate={enableQuickIssueCreate}
             disableIssueCreation={disableIssueCreation}
             quickAddCallback={quickAddCallback}
+            addIssuesToView={addIssuesToView}
             viewId={viewId}
             readOnly={readOnly}
           />
diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
index a4b714c94e9..1b26adedd02 100644
--- a/web/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 
 // constants
-import { DAYS_LIST } from "constants/calendar";
+import { DAYS_LIST } from "@/constants/calendar";
 
 type Props = {
   isLoading: boolean;
@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative sticky top-0 z-[1] grid md:divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
@@ -24,7 +24,10 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
         if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
 
         return (
-          <div key={day.shortTitle} className="flex h-11 items-center justify-end bg-custom-background-90 px-4">
+          <div
+            key={day.shortTitle}
+            className="flex h-11 items-center justify-center md:justify-end bg-custom-background-90 px-4"
+          >
             {day.shortTitle}
           </div>
         );
diff --git a/web/components/issues/issue-layouts/empty-states/archived-issues.tsx b/web/components/issues/issue-layouts/empty-states/archived-issues.tsx
index 0c8fb377a9e..4c7ed1aee1d 100644
--- a/web/components/issues/issue-layouts/empty-states/archived-issues.tsx
+++ b/web/components/issues/issue-layouts/empty-states/archived-issues.tsx
@@ -1,49 +1,27 @@
+import size from "lodash/size";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import size from "lodash/size";
-import { useTheme } from "next-themes";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useUser } from "hooks/store";
 // components
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { EmptyState } from "@/components/empty-state";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { EMPTY_FILTER_STATE_DETAILS, EMPTY_ISSUE_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-
-interface EmptyStateProps {
-  title: string;
-  image: string;
-  description?: string;
-  comicBox?: { title: string; description: string };
-  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  secondaryButton?: { text: string; onClick: () => void };
-  size?: "lg" | "sm" | undefined;
-  disabled?: boolean | undefined;
-}
 
 export const ProjectArchivedEmptyState: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
   const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
 
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const EmptyStateImagePath = getEmptyStateImagePath("archived", "empty-issues", isLightMode);
-
   const issueFilterCount = size(
     Object.fromEntries(
       Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
@@ -54,40 +32,27 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
     if (!workspaceSlug || !projectId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
       ...newFilters,
     });
   };
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
-  const emptyStateProps: EmptyStateProps =
-    issueFilterCount > 0
-      ? {
-          title: EMPTY_FILTER_STATE_DETAILS["archived"].title,
-          image: currentLayoutEmptyStateImagePath,
-          secondaryButton: {
-            text: EMPTY_FILTER_STATE_DETAILS["archived"].secondaryButton?.text,
-            onClick: handleClearAllFilters,
-          },
-        }
-      : {
-          title: EMPTY_ISSUE_STATE_DETAILS["archived"].title,
-          description: EMPTY_ISSUE_STATE_DETAILS["archived"].description,
-          image: EmptyStateImagePath,
-          primaryButton: {
-            text: EMPTY_ISSUE_STATE_DETAILS["archived"].primaryButton.text,
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`),
-          },
-          size: "sm",
-          disabled: !isEditingAllowed,
-        };
+  const emptyStateType =
+    issueFilterCount > 0 ? EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER : EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES;
+  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState {...emptyStateProps} />
+      <EmptyState
+        type={emptyStateType}
+        additionalPath={additionalPath}
+        primaryButtonLink={
+          issueFilterCount > 0 ? undefined : `/${workspaceSlug}/projects/${projectId}/settings/automations`
+        }
+        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
+      />
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx
index 4b767617362..0f0b27c0cfb 100644
--- a/web/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -1,19 +1,18 @@
 import { useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
-import { PlusIcon } from "lucide-react";
-import { useTheme } from "next-themes";
+import { ISearchIssueResponse, TIssueLayouts } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { ExistingIssuesListModal } from "@/components/core";
 // components
-import { ExistingIssuesListModal } from "components/core";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { EmptyState } from "@/components/empty-state";
 // types
-import { ISearchIssueResponse, TIssueLayouts } from "@plane/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
-import { CYCLE_EMPTY_STATE_DETAILS, EMPTY_FILTER_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useApplication, useCycle, useEventTracker, useIssues } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string | undefined;
@@ -24,88 +23,54 @@ type Props = {
   isEmptyFilters?: boolean;
 };
 
-interface EmptyStateProps {
-  title: string;
-  image: string;
-  description?: string;
-  comicBox?: { title: string; description: string };
-  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  secondaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  size?: "lg" | "sm" | undefined;
-  disabled?: boolean | undefined;
-}
-
 export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, cycleId, activeLayout, handleClearAllFilters, isEmptyFilters = false } = props;
   // states
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
+  const { getCycleById } = useCycle();
   const { issues } = useIssues(EIssuesStoreType.CYCLE);
-  const { updateIssue, fetchIssue } = useIssueDetail();
   const {
     commandPalette: { toggleCreateIssueModal },
   } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentProjectRole: userRole },
-    currentUser,
-  } = useUser();
 
-  const { setToastAlert } = useToast();
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
 
   const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
     const issueIds = data.map((i) => i.id);
 
-    await issues.addIssueToCycle(workspaceSlug.toString(), projectId, cycleId.toString(), issueIds).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Selected issues could not be added to the cycle. Please try again.",
-      });
-    });
+    await issues
+      .addIssueToCycle(workspaceSlug.toString(), projectId, cycleId.toString(), issueIds)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Issues added to the cycle successfully.",
+        })
+      )
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        })
+      );
   };
 
-  const emptyStateDetail = CYCLE_EMPTY_STATE_DETAILS["no-issues"];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const emptyStateImage = getEmptyStateImagePath("cycle-issues", activeLayout ?? "list", isLightMode);
+  const isCompletedCycleSnapshotAvailable = !isEmpty(cycleDetails?.progress_snapshot ?? {});
 
-  const isEditingAllowed = !!userRole && userRole >= EUserProjectRoles.MEMBER;
+  const isCompletedAndEmpty = isCompletedCycleSnapshotAvailable || cycleDetails?.status.toLowerCase() === "completed";
 
-  const emptyStateProps: EmptyStateProps = isEmptyFilters
-    ? {
-        title: EMPTY_FILTER_STATE_DETAILS["project"].title,
-        image: currentLayoutEmptyStateImagePath,
-        secondaryButton: {
-          text: EMPTY_FILTER_STATE_DETAILS["project"].secondaryButton.text,
-          onClick: handleClearAllFilters,
-        },
-      }
-    : {
-        title: emptyStateDetail.title,
-        description: emptyStateDetail.description,
-        image: emptyStateImage,
-        primaryButton: {
-          text: emptyStateDetail.primaryButton.text,
-          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-          onClick: () => {
-            setTrackElement("Cycle issue empty state");
-            toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
-          },
-        },
-        secondaryButton: {
-          text: emptyStateDetail.secondaryButton.text,
-          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-          onClick: () => setCycleIssuesListModal(true),
-        },
-        size: "sm",
-        disabled: !isEditingAllowed,
-      };
+  const emptyStateType = isCompletedAndEmpty
+    ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
+    : isEmptyFilters
+      ? EmptyStateType.PROJECT_EMPTY_FILTER
+      : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
+  const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
+  const emptyStateSize = isEmptyFilters ? "lg" : "sm";
 
   return (
     <>
@@ -118,7 +83,22 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
         handleOnSubmit={handleAddIssuesToCycle}
       />
       <div className="grid h-full w-full place-items-center">
-        <EmptyState {...emptyStateProps} />
+        <EmptyState
+          type={emptyStateType}
+          additionalPath={additionalPath}
+          size={emptyStateSize}
+          primaryButtonOnClick={
+            !isCompletedAndEmpty && !isEmptyFilters
+              ? () => {
+                  setTrackElement("Cycle issue empty state");
+                  toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+                }
+              : undefined
+          }
+          secondaryButtonOnClick={
+            !isCompletedAndEmpty && isEmptyFilters ? handleClearAllFilters : () => setCycleIssuesListModal(true)
+          }
+        />
       </div>
     </>
   );
diff --git a/web/components/issues/issue-layouts/empty-states/draft-issues.tsx b/web/components/issues/issue-layouts/empty-states/draft-issues.tsx
index c496cc5fe2d..f521afb1549 100644
--- a/web/components/issues/issue-layouts/empty-states/draft-issues.tsx
+++ b/web/components/issues/issue-layouts/empty-states/draft-issues.tsx
@@ -1,49 +1,26 @@
+import size from "lodash/size";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import size from "lodash/size";
-import { useTheme } from "next-themes";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useUser } from "hooks/store";
 // components
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { EmptyState } from "@/components/empty-state";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { EMPTY_FILTER_STATE_DETAILS, EMPTY_ISSUE_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-
-interface EmptyStateProps {
-  title: string;
-  image: string;
-  description?: string;
-  comicBox?: { title: string; description: string };
-  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  secondaryButton?: { text: string; onClick: () => void };
-  size?: "lg" | "sm" | undefined;
-  disabled?: boolean | undefined;
-}
 
 export const ProjectDraftEmptyState: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
   const { issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
 
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const EmptyStateImagePath = getEmptyStateImagePath("draft", "draft-issues-empty", isLightMode);
-
   const issueFilterCount = size(
     Object.fromEntries(
       Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
@@ -54,36 +31,26 @@ export const ProjectDraftEmptyState: React.FC = observer(() => {
     if (!workspaceSlug || !projectId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
       ...newFilters,
     });
   };
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
-  const emptyStateProps: EmptyStateProps =
-    issueFilterCount > 0
-      ? {
-          title: EMPTY_FILTER_STATE_DETAILS["draft"].title,
-          image: currentLayoutEmptyStateImagePath,
-          secondaryButton: {
-            text: EMPTY_FILTER_STATE_DETAILS["draft"].secondaryButton.text,
-            onClick: handleClearAllFilters,
-          },
-        }
-      : {
-          title: EMPTY_ISSUE_STATE_DETAILS["draft"].title,
-          description: EMPTY_ISSUE_STATE_DETAILS["draft"].description,
-          image: EmptyStateImagePath,
-          size: "sm",
-          disabled: !isEditingAllowed,
-        };
+  const emptyStateType =
+    issueFilterCount > 0 ? EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER : EmptyStateType.PROJECT_DRAFT_NO_ISSUES;
+  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
+  const emptyStateSize = issueFilterCount > 0 ? "lg" : "sm";
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState {...emptyStateProps} />
+      <EmptyState
+        type={emptyStateType}
+        additionalPath={additionalPath}
+        size={emptyStateSize}
+        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
+      />
     </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
index bf898aec489..e7177bf0272 100644
--- a/web/components/issues/issue-layouts/empty-states/global-view.tsx
+++ b/web/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react-lite";
 import { Plus, PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
+import { EmptyState } from "@/components/common";
+import { useApplication, useEventTracker, useProject } from "@/hooks/store";
 // components
-import { EmptyState } from "components/common";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
 import emptyProject from "public/empty-state/project.svg";
diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx
index ef7ec729c07..c1d7c4b26b6 100644
--- a/web/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/components/issues/issue-layouts/empty-states/module.tsx
@@ -1,19 +1,18 @@
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { PlusIcon } from "lucide-react";
-import { useTheme } from "next-themes";
+import { ISearchIssueResponse, TIssueLayouts } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// ui
 // components
-import { ExistingIssuesListModal } from "components/core";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { ExistingIssuesListModal } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
 // types
-import { ISearchIssueResponse, TIssueLayouts } from "@plane/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
-import { EMPTY_FILTER_STATE_DETAILS, MODULE_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useApplication, useEventTracker, useIssues } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string | undefined;
@@ -24,35 +23,16 @@ type Props = {
   isEmptyFilters?: boolean;
 };
 
-interface EmptyStateProps {
-  title: string;
-  image: string;
-  description?: string;
-  comicBox?: { title: string; description: string };
-  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  secondaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  size?: "lg" | "sm" | undefined;
-  disabled?: boolean | undefined;
-}
-
 export const ModuleEmptyState: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, moduleId, activeLayout, handleClearAllFilters, isEmptyFilters = false } = props;
   // states
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { issues } = useIssues(EIssuesStoreType.MODULE);
   const {
     commandPalette: { toggleCreateIssueModal },
   } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentProjectRole: userRole },
-    currentUser,
-  } = useUser();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
@@ -60,51 +40,24 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
     const issueIds = data.map((i) => i.id);
     await issues
       .addIssuesToModule(workspaceSlug.toString(), projectId?.toString(), moduleId.toString(), issueIds)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Issues added to the module successfully.",
+        })
+      )
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Selected issues could not be added to the module. Please try again.",
         })
       );
   };
 
-  const emptyStateDetail = MODULE_EMPTY_STATE_DETAILS["no-issues"];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const emptyStateImage = getEmptyStateImagePath("module-issues", activeLayout ?? "list", isLightMode);
-
-  const isEditingAllowed = !!userRole && userRole >= EUserProjectRoles.MEMBER;
-
-  const emptyStateProps: EmptyStateProps = isEmptyFilters
-    ? {
-        title: EMPTY_FILTER_STATE_DETAILS["project"].title,
-        image: currentLayoutEmptyStateImagePath,
-        secondaryButton: {
-          text: EMPTY_FILTER_STATE_DETAILS["project"].secondaryButton.text,
-          onClick: handleClearAllFilters,
-        },
-      }
-    : {
-        title: emptyStateDetail.title,
-        description: emptyStateDetail.description,
-        image: emptyStateImage,
-        primaryButton: {
-          text: emptyStateDetail.primaryButton.text,
-          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-          onClick: () => {
-            setTrackElement("Module issue empty state");
-            toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-          },
-        },
-        secondaryButton: {
-          text: emptyStateDetail.secondaryButton.text,
-          icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-          onClick: () => setModuleIssuesListModal(true),
-        },
-        disabled: !isEditingAllowed,
-      };
+  const emptyStateType = isEmptyFilters ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_MODULE_ISSUES;
+  const additionalPath = activeLayout ?? "list";
 
   return (
     <>
@@ -117,7 +70,19 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
         handleOnSubmit={handleAddIssuesToModule}
       />
       <div className="grid h-full w-full place-items-center">
-        <EmptyState {...emptyStateProps} />
+        <EmptyState
+          type={emptyStateType}
+          additionalPath={additionalPath}
+          primaryButtonOnClick={
+            isEmptyFilters
+              ? undefined
+              : () => {
+                  setTrackElement("Module issue empty state");
+                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                }
+          }
+          secondaryButtonOnClick={isEmptyFilters ? handleClearAllFilters : () => setModuleIssuesListModal(true)}
+        />
       </div>
     </>
   );
diff --git a/web/components/issues/issue-layouts/empty-states/project-issues.tsx b/web/components/issues/issue-layouts/empty-states/project-issues.tsx
index c7185934c20..e77e4e7ae83 100644
--- a/web/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -1,51 +1,29 @@
+import size from "lodash/size";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import size from "lodash/size";
-import { useTheme } from "next-themes";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 // components
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { EmptyState } from "@/components/empty-state";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { EMPTY_FILTER_STATE_DETAILS, EMPTY_ISSUE_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useApplication, useEventTracker, useIssues } from "@/hooks/store";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-
-interface EmptyStateProps {
-  title: string;
-  image: string;
-  description?: string;
-  comicBox?: { title: string; description: string };
-  primaryButton?: { text: string; icon?: React.ReactNode; onClick: () => void };
-  secondaryButton?: { text: string; onClick: () => void };
-  size?: "lg" | "sm" | undefined;
-  disabled?: boolean | undefined;
-}
 
 export const ProjectEmptyState: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
+
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
 
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
-  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "issues", isLightMode);
-
   const issueFilterCount = size(
     Object.fromEntries(
       Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
@@ -56,47 +34,33 @@ export const ProjectEmptyState: React.FC = observer(() => {
     if (!workspaceSlug || !projectId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
       ...newFilters,
     });
   };
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
-  const emptyStateProps: EmptyStateProps =
-    issueFilterCount > 0
-      ? {
-          title: EMPTY_FILTER_STATE_DETAILS["project"].title,
-          image: currentLayoutEmptyStateImagePath,
-          secondaryButton: {
-            text: EMPTY_FILTER_STATE_DETAILS["project"].secondaryButton.text,
-            onClick: handleClearAllFilters,
-          },
-        }
-      : {
-          title: EMPTY_ISSUE_STATE_DETAILS["project"].title,
-          description: EMPTY_ISSUE_STATE_DETAILS["project"].description,
-          image: EmptyStateImagePath,
-          comicBox: {
-            title: EMPTY_ISSUE_STATE_DETAILS["project"].comicBox.title,
-            description: EMPTY_ISSUE_STATE_DETAILS["project"].comicBox.description,
-          },
-          primaryButton: {
-            text: EMPTY_ISSUE_STATE_DETAILS["project"].primaryButton.text,
-            onClick: () => {
-              setTrackElement("Project issue empty state");
-              commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-            },
-          },
-          size: "lg",
-          disabled: !isEditingAllowed,
-        };
+  const emptyStateType = issueFilterCount > 0 ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_NO_ISSUES;
+  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
+  const emptyStateSize = issueFilterCount > 0 ? "lg" : "sm";
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState {...emptyStateProps} />
+      <EmptyState
+        type={emptyStateType}
+        additionalPath={additionalPath}
+        size={emptyStateSize}
+        primaryButtonOnClick={
+          issueFilterCount > 0
+            ? undefined
+            : () => {
+                setTrackElement("Project issue empty state");
+                commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+              }
+        }
+        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
+      />
     </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
index 2da9a826ff9..fc4bc6ea99c 100644
--- a/web/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/web/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -1,12 +1,12 @@
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
+import { EmptyState } from "@/components/common";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useApplication, useEventTracker } from "@/hooks/store";
 // components
-import { EmptyState } from "components/common";
 // assets
 import emptyIssue from "public/empty-state/issue.svg";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectViewEmptyState: React.FC = observer(() => {
   // store hooks
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index 6299bebd7dd..4f139727f13 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
+import { TCycleGroups } from "@plane/types";
 // hooks
-import { useCycle } from "hooks/store";
-// ui
 import { CycleGroupIcon } from "@plane/ui";
+import { useCycle } from "@/hooks/store";
+// ui
 // types
-import { TCycleGroups } from "@plane/types";
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
index 891fd6dddeb..5abbe0f62b7 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -2,10 +2,10 @@ import { observer } from "mobx-react-lite";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { capitalizeFirstLetter } from "helpers/string.helper";
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+import { renderFormattedDate } 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;
@@ -18,7 +18,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   const getDateLabel = (value: string): string => {
     let dateLabel = "";
 
-    const dateDetails = DATE_FILTER_OPTIONS.find((d) => d.value === value);
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
 
     if (dateDetails) dateLabel = dateDetails.name;
     else {
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
index 03b0c5138e4..279b57c9461 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -1,9 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
-import { useRouter } from "next/router";
+import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // hooks
-import { useApplication, useUser } from "hooks/store";
-// components
 import {
   AppliedCycleFilters,
   AppliedDateFilters,
@@ -14,13 +12,14 @@ import {
   AppliedProjectFilters,
   AppliedStateFilters,
   AppliedStateGroupFilters,
-} from "components/issues";
+} from "@/components/issues";
+import { EUserProjectRoles } from "@/constants/project";
+import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
+import { useApplication, useUser } from "@/hooks/store";
+// components
 // helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
@@ -56,14 +55,15 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         const filterKey = key as keyof IIssueFilterOptions;
 
         if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
 
         return (
           <div
             key={filterKey}
             className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
           >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-            <div className="flex flex-wrap items-center gap-1">
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
                   editable={isEditingAllowed}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
index 799233d0135..ba9453c296b 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -2,8 +2,8 @@ import { observer } from "mobx-react-lite";
 
 // icons
 import { X } from "lucide-react";
-// types
 import { IIssueLabel } from "@plane/types";
+// types
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
index ff5034c97d0..e12db6962f3 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -3,7 +3,7 @@ import { X } from "lucide-react";
 // ui
 import { Avatar } from "@plane/ui";
 // types
-import { useMember } from "hooks/store";
+import { useMember } from "@/hooks/store";
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
index 790383f61a5..1105f5306e9 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // hooks
-import { useModule } from "hooks/store";
-// ui
 import { DiceIcon } from "@plane/ui";
+import { useModule } from "@/hooks/store";
+// ui
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index be3240b5511..23652b4be8e 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react-lite";
 
 // icons
-import { PriorityIcon } from "@plane/ui";
 import { X } from "lucide-react";
-// types
 import { TIssuePriorities } from "@plane/types";
+import { PriorityIcon } from "@plane/ui";
+// types
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
index 4c5affe8d4a..16e73602783 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // hooks
-import { useProject } from "hooks/store";
-// helpers
-import { renderEmoji } from "helpers/emoji.helper";
+import { ProjectLogo } from "@/components/project";
+import { useProject } from "@/hooks/store";
+// components
 
 type Props = {
   handleRemove: (val: string) => void;
@@ -25,15 +25,9 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={projectId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            {projectDetails.emoji ? (
-              <span className="grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</span>
-            ) : projectDetails.icon_prop ? (
-              <div className="-my-1 grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
-            ) : (
-              <span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                {projectDetails?.name.charAt(0)}
-              </span>
-            )}
+            <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+              <ProjectLogo logo={projectDetails.logo_props} className="text-sm" />
+            </span>
             <span className="normal-case">{projectDetails.name}</span>
             {editable && (
               <button
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
index 227dc025bcd..3687549dac7 100644
--- 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
@@ -1,12 +1,12 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useLabel, useProjectState } from "hooks/store";
+import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
-import { AppliedFiltersList, SaveFilterView } from "components/issues";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   // router
@@ -56,7 +56,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
 
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
 
     updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
@@ -68,7 +68,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
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
index daa194c9d5e..bd176f0d3da 100644
--- 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
@@ -1,21 +1,17 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useLabel, useProjectState } from "hooks/store";
+import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
-import { AppliedFiltersList, SaveFilterView } from "components/issues";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 
 export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    cycleId: string;
-  };
+  const { workspaceSlug, projectId, cycleId } = router.query;
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
@@ -37,13 +33,13 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId || !cycleId) return;
     if (!value) {
       updateFilters(
-        workspaceSlug,
-        projectId,
+        workspaceSlug.toString(),
+        projectId.toString(),
         EIssueFilterType.FILTERS,
         {
           [key]: null,
         },
-        cycleId
+        cycleId.toString()
       );
       return;
     }
@@ -52,13 +48,13 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
     newValues = newValues.filter((val) => val !== value);
 
     updateFilters(
-      workspaceSlug,
-      projectId,
+      workspaceSlug.toString(),
+      projectId.toString(),
       EIssueFilterType.FILTERS,
       {
         [key]: newValues,
       },
-      cycleId
+      cycleId.toString()
     );
   };
 
@@ -66,16 +62,22 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId || !cycleId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
-    updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { ...newFilters }, cycleId);
+    updateFilters(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      EIssueFilterType.FILTERS,
+      { ...newFilters },
+      cycleId.toString()
+    );
   };
 
   // return if no filters are applied
-  if (Object.keys(appliedFilters).length === 0) return null;
+  if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
@@ -84,7 +86,11 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
         states={projectStates}
       />
 
-      <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
+      <SaveFilterView
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        filterParams={appliedFilters}
+      />
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
index e9024afeb7b..9227a3bb613 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
@@ -1,12 +1,12 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useLabel, useProjectState } from "hooks/store";
+import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
-import { AppliedFiltersList, SaveFilterView } from "components/issues";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 
 export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
   // router
@@ -53,7 +53,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
 
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
 
     updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, { ...newFilters });
@@ -63,7 +63,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
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
index c03e8650474..a2dee16dc59 100644
--- 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
@@ -1,18 +1,18 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import isEqual from "lodash/isEqual";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
 // hooks
-import { useEventTracker, useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
 //ui
 import { Button } from "@plane/ui";
 // components
-import { AppliedFiltersList } from "components/issues";
+import { AppliedFiltersList } from "@/components/issues";
 // types
-import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
+import { GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "@/constants/workspace";
 // constants
-import { GLOBAL_VIEW_UPDATED } from "constants/event-tracker";
+import { useEventTracker, useGlobalView, useIssues, useLabel, useUser } from "@/hooks/store";
 
 type Props = {
   globalViewId: string;
@@ -76,7 +76,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
     if (!workspaceSlug || !globalViewId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     updateFilters(
       workspaceSlug.toString(),
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
index 055c32d2068..4213556367e 100644
--- 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
@@ -1,21 +1,17 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useLabel, useProjectState } from "hooks/store";
+import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
-import { AppliedFiltersList, SaveFilterView } from "components/issues";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 
 export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    moduleId: string;
-  };
+  const { workspaceSlug, projectId, moduleId } = router.query;
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
@@ -36,13 +32,13 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId || !moduleId) return;
     if (!value) {
       updateFilters(
-        workspaceSlug,
-        projectId,
+        workspaceSlug.toString(),
+        projectId.toString(),
         EIssueFilterType.FILTERS,
         {
           [key]: null,
         },
-        moduleId
+        moduleId.toString()
       );
       return;
     }
@@ -51,13 +47,13 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
     newValues = newValues.filter((val) => val !== value);
 
     updateFilters(
-      workspaceSlug,
-      projectId,
+      workspaceSlug.toString(),
+      projectId.toString(),
       EIssueFilterType.FILTERS,
       {
         [key]: newValues,
       },
-      moduleId
+      moduleId.toString()
     );
   };
 
@@ -65,16 +61,22 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId || !moduleId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
-    updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { ...newFilters }, moduleId);
+    updateFilters(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      EIssueFilterType.FILTERS,
+      { ...newFilters },
+      moduleId.toString()
+    );
   };
 
   // return if no filters are applied
-  if (Object.keys(appliedFilters).length === 0) return null;
+  if (!workspaceSlug || !projectId || Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
@@ -83,7 +85,11 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
         states={projectStates}
       />
 
-      <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />
+      <SaveFilterView
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        filterParams={appliedFilters}
+      />
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
index 7a6c3933605..81268f0a5d0 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
@@ -1,13 +1,13 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useLabel } from "hooks/store";
 // components
-import { AppliedFiltersList } from "components/issues";
+import { AppliedFiltersList } from "@/components/issues";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { useWorkspaceIssueProperties } from "hooks/use-workspace-issue-properties";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useLabel } from "@/hooks/store";
+import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
 
 export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
   // router
@@ -57,7 +57,7 @@ export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !userId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.FILTERS, { ...newFilters }, userId.toString());
   };
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
index 68b5e6727cc..275ca39cd46 100644
--- 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
@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useLabel, useProjectState, useUser } from "hooks/store";
-import { useIssues } from "hooks/store/use-issues";
 // components
-import { AppliedFiltersList, SaveFilterView } from "components/issues";
+import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useLabel, useProjectState, useUser } from "@/hooks/store";
+import { useIssues } from "@/hooks/store/use-issues";
 // types
-import { IIssueFilterOptions } from "@plane/types";
 
 export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   // router
@@ -59,7 +59,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, { ...newFilters });
   };
@@ -68,7 +68,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
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
index 0768064ec77..af4a9692b9a 100644
--- 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
@@ -1,24 +1,20 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import isEqual from "lodash/isEqual";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useIssues, useLabel, useProjectState, useProjectView } from "hooks/store";
+import { Button } from "@plane/ui";
+import { AppliedFiltersList } from "@/components/issues";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues, useLabel, useProjectState, useProjectView } from "@/hooks/store";
 // components
-import { AppliedFiltersList } from "components/issues";
 // ui
-import { Button } from "@plane/ui";
 // types
-import { IIssueFilterOptions } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 
 export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query as {
-    workspaceSlug: string;
-    projectId: string;
-    viewId: string;
-  };
+  const { workspaceSlug, projectId, viewId } = router.query;
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
@@ -39,16 +35,16 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   });
 
   const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !viewId) return;
     if (!value) {
       updateFilters(
-        workspaceSlug,
-        projectId,
+        workspaceSlug.toString(),
+        projectId.toString(),
         EIssueFilterType.FILTERS,
         {
           [key]: null,
         },
-        viewId
+        viewId.toString()
       );
       return;
     }
@@ -57,23 +53,29 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
     newValues = newValues.filter((val) => val !== value);
 
     updateFilters(
-      workspaceSlug,
-      projectId,
+      workspaceSlug.toString(),
+      projectId.toString(),
       EIssueFilterType.FILTERS,
       {
         [key]: newValues,
       },
-      viewId
+      viewId.toString()
     );
   };
 
   const handleClearAllFilters = () => {
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !viewId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
-    updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { ...newFilters }, viewId);
+    updateFilters(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      EIssueFilterType.FILTERS,
+      { ...newFilters },
+      viewId.toString()
+    );
   };
 
   const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters);
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
index 620a8f78138..4de28bc33ca 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react-lite";
 
 // icons
-import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
 import { TStateGroups } from "@plane/types";
+import { StateGroupIcon } from "@plane/ui";
 
 type Props = {
   handleRemove: (val: string) => void;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
index 59a873162ec..ff10d53a18e 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react-lite";
 
 // icons
-import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
-// types
 import { IState } from "@plane/types";
+import { StateGroupIcon } from "@plane/ui";
+// types
 
 type Props = {
   handleRemove: (val: string) => void;
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
index 131bea46bce..d270d6a1ccd 100644
--- 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
@@ -1,5 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueGroupByOptions } from "@plane/types";
 
 // components
 import {
@@ -9,10 +10,9 @@ import {
   FilterIssueType,
   FilterOrderBy,
   FilterSubGroupBy,
-} from "components/issues";
+} from "@/components/issues";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueGroupByOptions } from "@plane/types";
-import { ILayoutDisplayFiltersOptions } from "constants/issue";
+import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions;
@@ -37,7 +37,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
     Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
 
   return (
-    <div className="relative h-full w-full divide-y divide-custom-border-200 overflow-hidden overflow-y-auto px-2.5">
+    <div className="vertical-scrollbar scrollbar-sm relative h-full w-full divide-y divide-custom-border-200 overflow-hidden overflow-y-auto px-2.5">
       {/* display properties */}
       {layoutDisplayFiltersOptions?.display_properties && (
         <div className="py-2">
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
index f97140185ec..54cb0a439d8 100644
--- 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
@@ -1,12 +1,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { IIssueDisplayProperties } from "@plane/types";
 // components
+import { ISSUE_DISPLAY_PROPERTIES } from "@/constants/issue";
 import { FilterHeader } from "../helpers/filter-header";
 // types
-import { IIssueDisplayProperties } from "@plane/types";
 // constants
-import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -14,19 +13,10 @@ type Props = {
 };
 
 export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
-  const router = useRouter();
-  const { moduleId, cycleId } = router.query;
   const { displayProperties, handleUpdate } = props;
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
-  const handleDisplayPropertyVisibility = (key: keyof IIssueDisplayProperties): boolean => {
-    const visibility = true;
-    if (key === "modules" && moduleId) return false;
-    if (key === "cycle" && cycleId) return false;
-    return visibility;
-  };
-
   return (
     <>
       <FilterHeader
@@ -36,27 +26,24 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div className="mt-1 flex flex-wrap items-center gap-2">
-          {ISSUE_DISPLAY_PROPERTIES.map(
-            (displayProperty) =>
-              handleDisplayPropertyVisibility(displayProperty?.key) && (
-                <button
-                  key={displayProperty.key}
-                  type="button"
-                  className={`rounded border px-2 py-0.5 text-xs transition-all ${
-                    displayProperties?.[displayProperty.key]
-                      ? "border-custom-primary-100 bg-custom-primary-100 text-white"
-                      : "border-custom-border-200 hover:bg-custom-background-80"
-                  }`}
-                  onClick={() =>
-                    handleUpdate({
-                      [displayProperty.key]: !displayProperties?.[displayProperty.key],
-                    })
-                  }
-                >
-                  {displayProperty.title}
-                </button>
-              )
-          )}
+          {ISSUE_DISPLAY_PROPERTIES.map((displayProperty) => (
+            <button
+              key={displayProperty.key}
+              type="button"
+              className={`rounded border px-2 py-0.5 text-xs transition-all ${
+                displayProperties?.[displayProperty.key]
+                  ? "border-custom-primary-100 bg-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
index 0feb1d89190..604adf5db0a 100644
--- 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
@@ -1,12 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "@plane/types";
 
 // components
-import { FilterOption } from "components/issues";
+import { FilterOption } from "@/components/issues";
 // types
-import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "@plane/types";
+import { ISSUE_EXTRA_OPTIONS } from "@/constants/issue";
 // constants
-import { ISSUE_EXTRA_OPTIONS } from "constants/issue";
 
 type Props = {
   selectedExtraOptions: {
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
index a4478e83456..f05452f2186 100644
--- 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
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
+import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // types
-import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
+import { ISSUE_GROUP_BY_OPTIONS } from "@/constants/issue";
 // constants
-import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions;
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
index 59c83a2003a..57fbc9add76 100644
--- 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
@@ -1,12 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssueTypeFilters } from "@plane/types";
 
 // components
-import { FilterHeader, FilterOption } from "components/issues";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // types
-import { TIssueTypeFilters } from "@plane/types";
+import { ISSUE_FILTER_OPTIONS } from "@/constants/issue";
 // constants
-import { ISSUE_FILTER_OPTIONS } from "constants/issue";
 
 type Props = {
   selectedIssueType: TIssueTypeFilters | undefined;
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
index e417c650ecd..aa69868ca22 100644
--- 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
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
+import { TIssueOrderByOptions } from "@plane/types";
 
 // components
-import { FilterHeader, FilterOption } from "components/issues";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // types
-import { TIssueOrderByOptions } from "@plane/types";
+import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // constants
-import { ISSUE_ORDER_BY_OPTIONS } from "constants/issue";
 
 type Props = {
   selectedOrderBy: TIssueOrderByOptions | undefined;
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
index 198148a8403..2d49719a3b5 100644
--- 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
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
+import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // types
-import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
+import { ISSUE_GROUP_BY_OPTIONS } from "@/constants/issue";
 // constants
-import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions;
diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 168e31bc0f3..e7edaebc81c 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useMember } from "hooks/store";
+import { Avatar, Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar, Loader } from "@plane/ui";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -24,15 +25,23 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = memberIds?.filter((memberId) =>
-    getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -44,10 +53,10 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((memberId) => {
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
                   const member = getUserDetails(memberId);
 
                   if (!member) return null;
@@ -61,13 +70,13 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
                     />
                   );
                 })}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
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
index 7bde26ab9fb..071f3c03aeb 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useMember } from "hooks/store";
+import { Avatar, Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar, Loader } from "@plane/ui";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -22,16 +23,25 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
   // store hooks
   const { getUserDetails } = useMember();
 
-  const filteredOptions = memberIds?.filter((memberId) =>
-    getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -43,10 +53,10 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((memberId) => {
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
                   const member = getUserDetails(memberId);
 
                   if (!member) return null;
@@ -60,13 +70,13 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                     />
                   );
                 })}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
index 47b3b05068e..4e3fe6fb00b 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -1,13 +1,13 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react";
+import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react";
+import { TCycleGroups } from "@plane/types";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-import { useApplication, useCycle } from "hooks/store";
-// ui
 import { Loader, CycleGroupIcon } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useApplication, useCycle } from "@/hooks/store";
+// ui
 // types
-import { TCycleGroups } from "@plane/types";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -31,16 +31,24 @@ export const FilterCycle: React.FC<Props> = observer((props) => {
   const cycleIds = projectId ? getProjectCycleIds(projectId) : undefined;
   const cycles = cycleIds?.map((projectId) => getCycleById(projectId)!) ?? null;
   const appliedFiltersCount = appliedFilters?.length ?? 0;
-  const filteredOptions = sortBy(
-    cycles?.filter((cycle) => cycle.name.toLowerCase().includes(searchQuery.toLowerCase())),
-    (cycle) => cycle.name.toLowerCase()
-  );
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (cycles || []).filter((cycle) =>
+      cycle.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (cycle) => !appliedFilters?.includes(cycle.id),
+      (cycle) => cycle.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   const cycleStatus = (status: TCycleGroups) => (status ? status.toLocaleLowerCase() : "draft") as TCycleGroups;
@@ -54,10 +62,10 @@ export const FilterCycle: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((cycle) => (
+                {sortedOptions.slice(0, itemsToRender).map((cycle) => (
                   <FilterOption
                     key={cycle.id}
                     isChecked={appliedFilters?.includes(cycle.id) ? true : false}
@@ -69,13 +77,13 @@ export const FilterCycle: React.FC<Props> = observer((props) => {
                     activePulse={cycleStatus(cycle?.status) === "current" ? true : false}
                   />
                 ))}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
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
index afdee86f2cc..7e6e44ebf2e 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -1,9 +1,8 @@
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
+import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // hooks
-import { useApplication } from "hooks/store";
-// components
 import {
   FilterAssignees,
   FilterMentions,
@@ -17,11 +16,12 @@ import {
   FilterTargetDate,
   FilterCycle,
   FilterModule,
-} from "components/issues";
+} from "@/components/issues";
+import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
+import { useApplication } from "@/hooks/store";
+// components
 // types
-import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // constants
-import { ILayoutDisplayFiltersOptions } from "constants/issue";
 
 type Props = {
   filters: IIssueFilterOptions;
@@ -63,7 +63,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         {/* priority */}
         {isFilterEnabled("priority") && (
           <div className="py-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
index b226f42b3d4..c93472ff96b 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
+import { IIssueLabel } from "@plane/types";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-// ui
 import { Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// ui
 // types
-import { IIssueLabel } from "@plane/types";
 
 const LabelIcons = ({ color }: { color: string }) => (
   <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
@@ -26,13 +27,23 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (labels || []).filter((label) =>
+      label.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (label) => !(appliedFilters ?? []).includes(label.id),
+      (label) => label.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -44,10 +55,10 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                {sortedOptions.slice(0, itemsToRender).map((label) => (
                   <FilterOption
                     key={label?.id}
                     isChecked={appliedFilters?.includes(label?.id) ? true : false}
@@ -56,13 +67,13 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                     title={label.name}
                   />
                 ))}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index a6af9833a4e..b1b07043479 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useMember } from "hooks/store";
+import { Loader, Avatar } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Loader, Avatar } from "@plane/ui";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -24,15 +25,23 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = memberIds?.filter((memberId) =>
-    getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -44,10 +53,10 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((memberId) => {
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
                   const member = getUserDetails(memberId);
 
                   if (!member) return null;
@@ -61,13 +70,13 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
                     />
                   );
                 })}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/module.tsx b/web/components/issues/issue-layouts/filters/header/filters/module.tsx
index 49e00f84d44..f4b3d0e1919 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react";
+import React, { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-import { useApplication, useModule } from "hooks/store";
-// ui
 import { Loader, DiceIcon } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useApplication, useModule } from "@/hooks/store";
+// ui
 
 type Props = {
   appliedFilters: string[] | null;
@@ -29,16 +29,24 @@ export const FilterModule: React.FC<Props> = observer((props) => {
   const moduleIds = projectId ? getProjectModuleIds(projectId) : undefined;
   const modules = moduleIds?.map((projectId) => getModuleById(projectId)!) ?? null;
   const appliedFiltersCount = appliedFilters?.length ?? 0;
-  const filteredOptions = sortBy(
-    modules?.filter((module) => module.name.toLowerCase().includes(searchQuery.toLowerCase())),
-    (module) => module.name.toLowerCase()
-  );
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (modules || []).filter((module) =>
+      module.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (module) => !appliedFilters?.includes(module.id),
+      (module) => module.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -50,10 +58,10 @@ export const FilterModule: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((cycle) => (
+                {sortedOptions.slice(0, itemsToRender).map((cycle) => (
                   <FilterOption
                     key={cycle.id}
                     isChecked={appliedFilters?.includes(cycle.id) ? true : false}
@@ -62,13 +70,13 @@ export const FilterModule: React.FC<Props> = observer((props) => {
                     title={cycle.name}
                   />
                 ))}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
index 839e25e3d77..fc44e3044ac 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -5,10 +5,10 @@ import { observer } from "mobx-react-lite";
 import { PriorityIcon } from "@plane/ui";
 
 // components
-import { FilterHeader, FilterOption } from "components/issues";
+import { FilterHeader, FilterOption } from "@/components/issues";
 
 // constants
-import { ISSUE_PRIORITIES } from "constants/issue";
+import { ISSUE_PRIORITIES } from "@/constants/issue";
 
 type Props = {
   appliedFilters: string[] | null;
diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
index 61b7d50c1e4..b3924cd3438 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -1,13 +1,15 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
+import { Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // hooks
-import { useProject } from "hooks/store";
+import { ProjectLogo } from "@/components/project";
+import { useProject } from "@/hooks/store";
+// components
 // ui
-import { Loader } from "@plane/ui";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -25,13 +27,23 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
   // derived values
   const projects = workspaceProjectIds?.map((projectId) => getProjectById(projectId)!) ?? null;
   const appliedFiltersCount = appliedFilters?.length ?? 0;
-  const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (projects || []).filter((project) =>
+      project.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    return sortBy(filteredOptions, [
+      (project) => !(appliedFilters ?? []).includes(project.id),
+      (project) => project.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -43,39 +55,29 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((project) => (
+                {sortedOptions.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="-my-1 grid flex-shrink-0 place-items-center">
-                          {renderEmoji(project.icon_prop)}
-                        </div>
-                      ) : (
-                        <span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                          {project?.name.charAt(0)}
-                        </span>
-                      )
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <ProjectLogo logo={project.logo_props} className="text-sm" />
+                      </span>
                     }
                     title={project.name}
                   />
                 ))}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
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
index 2cb7151588e..b1c68aaedc9 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-import { DateFilterModal } from "components/core";
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
-import { DATE_FILTER_OPTIONS } from "constants/filters";
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -21,7 +21,20 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isCustomFateApplied = appliedFilters?.filter((f) => f.includes("-")) || [];
+    return isCustomFateApplied.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
 
   return (
     <>
@@ -51,7 +64,7 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
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
index ea90971463e..3ad5b36e32d 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-// icons
 import { StateGroupIcon } from "@plane/ui";
-import { STATE_GROUPS } from "constants/state";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// icons
+import { STATE_GROUPS } from "@/constants/state";
 // constants
 
 type Props = {
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
index c13a69b0a92..56340e6db4a 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
+import { IState } from "@plane/types";
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-// ui
 import { Loader, StateGroupIcon } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// ui
 // types
-import { IState } from "@plane/types";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -22,13 +23,18 @@ export const FilterState: React.FC<Props> = observer((props) => {
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (states ?? []).filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+    return sortBy(filteredOptions, [(s) => !(appliedFilters ?? []).includes(s.id), (s) => s.name.toLowerCase()]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
 
   const handleViewToggle = () => {
-    if (!filteredOptions) return;
+    if (!sortedOptions) return;
 
-    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
-    else setItemsToRender(filteredOptions.length);
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
   };
 
   return (
@@ -40,10 +46,10 @@ export const FilterState: React.FC<Props> = observer((props) => {
       />
       {previewEnabled && (
         <div>
-          {filteredOptions ? (
-            filteredOptions.length > 0 ? (
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
               <>
-                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                {sortedOptions.slice(0, itemsToRender).map((state) => (
                   <FilterOption
                     key={state.id}
                     isChecked={appliedFilters?.includes(state.id) ? true : false}
@@ -52,13 +58,13 @@ export const FilterState: React.FC<Props> = observer((props) => {
                     title={state.name}
                   />
                 ))}
-                {filteredOptions.length > 5 && (
+                {sortedOptions.length > 5 && (
                   <button
                     type="button"
                     className="ml-8 text-xs font-medium text-custom-primary-100"
                     onClick={handleViewToggle}
                   >
-                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
                   </button>
                 )}
               </>
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
index b168af668e2..f696e66cf19 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 // components
-import { FilterHeader, FilterOption } from "components/issues";
-import { DateFilterModal } from "components/core";
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
-import { DATE_FILTER_OPTIONS } from "constants/filters";
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -21,7 +21,20 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isCustomFateApplied = appliedFilters?.filter((f) => f.includes("-")) || [];
+    return isCustomFateApplied.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
 
   return (
     <>
@@ -51,7 +64,7 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index 33b86ada1ff..be4e5e9a94c 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -1,14 +1,15 @@
 import React, { Fragment, useState } from "react";
+import { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
+import { ChevronUp } from "lucide-react";
 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;
+  icon?: React.ReactNode;
   title?: string;
   placement?: Placement;
   disabled?: boolean;
@@ -17,7 +18,7 @@ type Props = {
 };
 
 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;
+  const { children, icon, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -34,22 +35,27 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              {menuButton ? <button role="button" ref={setReferenceElement}>
-                {menuButton}
-              </button> : <Button
-                disabled={disabled}
-                ref={setReferenceElement}
-                variant="neutral-primary"
-                size="sm"
-                appendIcon={
-                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
-                }
-                tabIndex={tabIndex}
-              >
-                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                  <span>{title}</span>
-                </div>
-              </Button>}
+              {menuButton ? (
+                <button role="button" ref={setReferenceElement}>
+                  {menuButton}
+                </button>
+              ) : (
+                <Button
+                  disabled={disabled}
+                  ref={setReferenceElement}
+                  variant="neutral-primary"
+                  size="sm"
+                  prependIcon={icon}
+                  appendIcon={
+                    <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                  }
+                  tabIndex={tabIndex}
+                >
+                  <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                    <span>{title}</span>
+                  </div>
+                </Button>
+              )}
             </Popover.Button>
             <Transition
               as={Fragment}
@@ -60,9 +66,9 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel>
+              <Popover.Panel className="fixed z-10">
                 <div
-                  className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+                  className="overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg my-1"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 305be7efff5..42d3633ae16 100644
--- a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 // ui
+import { TIssueLayouts } from "@plane/types";
 import { Tooltip } from "@plane/ui";
 // types
-import { TIssueLayouts } from "@plane/types";
-// constants
-import { ISSUE_LAYOUTS } from "constants/issue";
+import { ISSUE_LAYOUTS } from "@/constants/issue";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
 
 type Props = {
   layouts: TIssueLayouts[];
@@ -15,11 +16,12 @@ type Props = {
 
 export const LayoutSelection: React.FC<Props> = (props) => {
   const { layouts, onChange, selectedLayout } = props;
+  const { isMobile } = usePlatformOS();
 
   return (
     <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
-        <Tooltip key={layout.key} tooltipContent={layout.title}>
+        <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
           <button
             type="button"
             className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
diff --git a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index ec33872ebb4..935dc5d93f8 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -1,50 +1,49 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TIssue, TUnGroupedIssues } from "@plane/types";
 // hooks
-import { useIssues, useUser } from "hooks/store";
+import { GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "@/components/gantt-chart";
+import { GanttQuickAddIssueForm, IssueGanttBlock } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { renderIssueBlocksStructure } from "@/helpers/issue.helper";
+import { useIssues, useUser } from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
 // components
-import { GanttQuickAddIssueForm, IssueGanttBlock } from "components/issues";
-import { GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "components/gantt-chart";
 // helpers
-import { renderIssueBlocksStructure } from "helpers/issue.helper";
 // types
-import { TIssue, TUnGroupedIssues } from "@plane/types";
-import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
-import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
-import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssueActions } from "../types";
 
+type GanttStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW;
 interface IBaseGanttRoot {
-  issueFiltersStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
-  issueStore: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues;
   viewId?: string;
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-  };
+  storeType: GanttStoreType;
 }
 
 export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
-  const { issueFiltersStore, issueStore, viewId } = props;
+  const { viewId, storeType } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+
+  const { issues, issuesFilter } = useIssues(storeType);
+  const { updateIssue } = useIssuesActions(storeType);
   // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { issueMap } = useIssues();
-  const appliedDisplayFilters = issueFiltersStore.issueFilters?.displayFilters;
+  const appliedDisplayFilters = issuesFilter.issueFilters?.displayFilters;
 
-  const issueIds = (issueStore.groupedIssueIds ?? []) as TUnGroupedIssues;
-  const { enableIssueCreation } = issueStore?.viewFlags || {};
+  const issueIds = (issues.groupedIssueIds ?? []) as TUnGroupedIssues;
+  const { enableIssueCreation } = issues?.viewFlags || {};
 
-  const issues = issueIds.map((id) => issueMap?.[id]);
+  const issuesArray = issueIds.map((id) => issueMap?.[id]);
 
   const updateIssueBlockStructure = async (issue: TIssue, data: IBlockUpdateData) => {
     if (!workspaceSlug) return;
@@ -52,7 +51,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
     const payload: any = { ...data };
     if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
 
-    await issueStore.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, payload, viewId);
+    updateIssue && (await updateIssue(issue.project_id, issue.id, payload));
   };
 
   const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@@ -64,7 +63,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           border={false}
           title="Issues"
           loaderTitle="Issues"
-          blocks={issues ? renderIssueBlocksStructure(issues as TIssue[]) : null}
+          blocks={issues ? renderIssueBlocksStructure(issuesArray) : null}
           blockUpdateHandler={updateIssueBlockStructure}
           blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} />}
           sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks />}
@@ -75,7 +74,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           enableAddBlock={isAllowed}
           quickAdd={
             enableIssueCreation && isAllowed ? (
-              <GanttQuickAddIssueForm quickAddCallback={issueStore.quickAddIssue} viewId={viewId} />
+              <GanttQuickAddIssueForm quickAddCallback={issues.quickAddIssue} viewId={viewId} />
             ) : undefined
           }
           showAllBlocks
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index 209d876ac56..aff992b66e6 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,10 +1,11 @@
 import { observer } from "mobx-react";
 // hooks
-import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
 // ui
 import { Tooltip, StateGroupIcon, ControlLink } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { useApplication, useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   issueId: string;
@@ -31,6 +32,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
     issueDetails &&
     !issueDetails.tempId &&
     setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
+  const { isMobile } = usePlatformOS();
 
   return (
     <div
@@ -42,6 +44,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
+        isMobile={isMobile}
         tooltipContent={
           <div className="space-y-1">
             <h5>{issueDetails?.name}</h5>
@@ -83,6 +86,7 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
     workspaceSlug &&
     issueDetails &&
     setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
+  const { isMobile } = usePlatformOS();
 
   return (
     <ControlLink
@@ -97,7 +101,7 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
         <div className="flex-shrink-0 text-xs text-custom-text-300">
           {projectIdentifier} {issueDetails?.sequence_id}
         </div>
-        <Tooltip tooltipHeading="Title" tooltipContent={issueDetails?.name}>
+        <Tooltip tooltipContent={issueDetails?.name} isMobile={isMobile}>
           <span className="flex-grow truncate text-sm font-medium">{issueDetails?.name}</span>
         </Tooltip>
       </div>
diff --git a/web/components/issues/issue-layouts/gantt/cycle-root.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
index cf1f6121ae2..c0ece0f9f24 100644
--- a/web/components/issues/issue-layouts/gantt/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -1,48 +1,14 @@
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
-import { useCycle, useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
-import { EIssuesStoreType } from "constants/issue";
-import { EIssueActions } from "../types";
-import { TIssue } from "@plane/types";
 
 export const CycleGanttLayout: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, cycleId } = router.query;
-  // store hooks
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
-  const { fetchCycleDetails } = useCycle();
+  const { cycleId } = router.query;
 
-  const issueActions = {
-    [EIssueActions.UPDATE]: async (issue: TIssue) => {
-      if (!workspaceSlug || !cycleId) return;
-
-      await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, cycleId.toString());
-      fetchCycleDetails(workspaceSlug.toString(), issue.project_id, cycleId.toString());
-    },
-    [EIssueActions.DELETE]: async (issue: TIssue) => {
-      if (!workspaceSlug || !cycleId) return;
-
-      await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      fetchCycleDetails(workspaceSlug.toString(), issue.project_id, cycleId.toString());
-    },
-    [EIssueActions.REMOVE]: async (issue: TIssue) => {
-      if (!workspaceSlug || !cycleId || !issue.id) return;
-
-      await issues.removeIssueFromCycle(workspaceSlug.toString(), issue.project_id, cycleId.toString(), issue.id);
-      fetchCycleDetails(workspaceSlug.toString(), issue.project_id, cycleId.toString());
-    },
-  };
-
-  return (
-    <BaseGanttRoot
-      issueActions={issueActions}
-      issueFiltersStore={issuesFilter}
-      issueStore={issues}
-      viewId={cycleId?.toString()}
-    />
-  );
+  return <BaseGanttRoot viewId={cycleId?.toString()} storeType={EIssuesStoreType.CYCLE} />;
 });
diff --git a/web/components/issues/issue-layouts/gantt/module-root.tsx b/web/components/issues/issue-layouts/gantt/module-root.tsx
index c7c8e8b0379..23ebdbc2da2 100644
--- a/web/components/issues/issue-layouts/gantt/module-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -1,48 +1,14 @@
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
-import { useIssues, useModule } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
-import { EIssuesStoreType } from "constants/issue";
-import { EIssueActions } from "../types";
-import { TIssue } from "@plane/types";
 
 export const ModuleGanttLayout: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query;
-  // store hooks
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
-  const { fetchModuleDetails } = useModule();
+  const { moduleId } = router.query;
 
-  const issueActions = {
-    [EIssueActions.UPDATE]: async (issue: TIssue) => {
-      if (!workspaceSlug || !moduleId) return;
-
-      await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId.toString());
-      fetchModuleDetails(workspaceSlug.toString(), issue.project_id, moduleId.toString());
-    },
-    [EIssueActions.DELETE]: async (issue: TIssue) => {
-      if (!workspaceSlug || !moduleId) return;
-
-      await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
-      fetchModuleDetails(workspaceSlug.toString(), issue.project_id, moduleId.toString());
-    },
-    [EIssueActions.REMOVE]: async (issue: TIssue) => {
-      if (!workspaceSlug || !moduleId || !issue.id) return;
-
-      await issues.removeIssueFromModule(workspaceSlug.toString(), issue.project_id, moduleId.toString(), issue.id);
-      fetchModuleDetails(workspaceSlug.toString(), issue.project_id, moduleId.toString());
-    },
-  };
-
-  return (
-    <BaseGanttRoot
-      issueActions={issueActions}
-      issueFiltersStore={issuesFilter}
-      issueStore={issues}
-      viewId={moduleId?.toString()}
-    />
-  );
+  return <BaseGanttRoot viewId={moduleId?.toString()} storeType={EIssuesStoreType.MODULE} />;
 });
diff --git a/web/components/issues/issue-layouts/gantt/project-root.tsx b/web/components/issues/issue-layouts/gantt/project-root.tsx
index 18fd3ecef00..1c0dba11284 100644
--- a/web/components/issues/issue-layouts/gantt/project-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/project-root.tsx
@@ -1,33 +1,8 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
-import { EIssuesStoreType } from "constants/issue";
-import { EIssueActions } from "../types";
-import { TIssue } from "@plane/types";
 
-export const GanttLayout: React.FC = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // store hooks
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
-
-  const issueActions = {
-    [EIssueActions.UPDATE]: async (issue: TIssue) => {
-      if (!workspaceSlug) return;
-
-      await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
-    },
-    [EIssueActions.DELETE]: async (issue: TIssue) => {
-      if (!workspaceSlug) return;
-
-      await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-    },
-  };
-
-  return <BaseGanttRoot issueFiltersStore={issuesFilter} issueStore={issues} issueActions={issueActions} />;
-});
+export const GanttLayout: React.FC = observer(() => <BaseGanttRoot storeType={EIssuesStoreType.PROJECT} />);
diff --git a/web/components/issues/issue-layouts/gantt/project-view-root.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
index 1ed02c2c960..45c0ff3eb3c 100644
--- a/web/components/issues/issue-layouts/gantt/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -1,37 +1,16 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
 import { BaseGanttRoot } from "./base-gantt-root";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 // types
-import { EIssueActions } from "../types";
-import { TIssue } from "@plane/types";
-
-export interface IViewGanttLayout {
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-  };
-}
 
-export const ProjectViewGanttLayout: React.FC<IViewGanttLayout> = observer((props) => {
-  const { issueActions } = props;
-  // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+export const ProjectViewGanttLayout: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { viewId } = router.query;
 
-  return (
-    <BaseGanttRoot
-      issueFiltersStore={issuesFilter}
-      issueStore={issues}
-      issueActions={issueActions}
-      viewId={viewId?.toString()}
-    />
-  );
+  return <BaseGanttRoot viewId={viewId?.toString()} storeType={EIssuesStoreType.PROJECT_VIEW} />;
 });
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index 7ed6a87306f..d0fb69ab3e3 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -1,21 +1,22 @@
 import { useEffect, useState, useRef, FC } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
+import { IProject, TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useKeypress from "hooks/use-keypress";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { setPromiseToast } from "@plane/ui";
+import { ISSUE_CREATED } from "@/constants/event-tracker";
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { createIssuePayload } from "@/helpers/issue.helper";
+import { useEventTracker, useProject } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { createIssuePayload } from "helpers/issue.helper";
-import { cn } from "helpers/common.helper";
+// ui
 // types
-import { IProject, TIssue } from "@plane/types";
 // constants
-import { ISSUE_CREATED } from "constants/event-tracker";
 
 interface IInputProps {
   formKey: string;
@@ -70,7 +71,6 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
   // hooks
   const { getProjectById } = useProject();
   const { captureIssueEvent } = useEventTracker();
-  const { setToastAlert } = useToast();
 
   const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
 
@@ -110,31 +110,35 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
       target_date: renderFormattedPayloadDate(targetDate),
     });
 
-    try {
-      quickAddCallback &&
-        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
+    if (quickAddCallback) {
+      const quickAddPromise = quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId);
+      setPromiseToast<any>(quickAddPromise, {
+        loading: "Adding issue...",
+        success: {
+          title: "Success!",
+          message: () => "Issue created successfully.",
+        },
+        error: {
+          title: "Error!",
+          message: (err) => err?.message || "Some error occurred. Please try again.",
+        },
+      });
+
+      await quickAddPromise
+        .then((res) => {
           captureIssueEvent({
             eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Gantt quick add" },
             path: router.asPath,
           });
-        }));
-      setToastAlert({
-        type: "success",
-        title: "Success!",
-        message: "Issue created successfully.",
-      });
-    } catch (err: any) {
-      captureIssueEvent({
-        eventName: ISSUE_CREATED,
-        payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
-        path: router.asPath,
-      });
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: err?.message || "Some error occurred. Please try again.",
-      });
+        })
+        .catch(() => {
+          captureIssueEvent({
+            eventName: ISSUE_CREATED,
+            payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
+            path: router.asPath,
+          });
+        });
     }
   };
   return (
@@ -159,7 +163,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
       ) : (
         <button
           type="button"
-          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100 bg-custom-background-100 border-custom-border-200 border-t-[1px]"
+          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 border-t-[1px] border-custom-border-200 bg-custom-background-100 p-3 py-3 text-custom-primary-100"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 7bdaf282d22..41043085315 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,52 +1,36 @@
 import { FC, useCallback, useRef, useState } from "react";
 import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable } from "@hello-pangea/dnd";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { DeleteIssueModal } from "@/components/issues";
+import { ISSUE_DELETED } from "@/constants/event-tracker";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useEventTracker, useIssues, useUser } from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
 // ui
-import { Spinner } from "@plane/ui";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../types";
 import { IQuickActionProps } from "../list/list-view-types";
-import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
 //components
 import { KanBan } from "./default";
 import { KanBanSwimLanes } from "./swimlanes";
-import { DeleteIssueModal } from "components/issues";
-import { EUserProjectRoles } from "constants/project";
-import { useIssues } from "hooks/store/use-issues";
 import { handleDragDrop } from "./utils";
-import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
-import { IDraftIssues, IDraftIssuesFilter } from "store/issue/draft";
-import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile";
-import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
-import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
-import { EIssueFilterType, TCreateModalStoreTypes } from "constants/issue";
-import { ISSUE_DELETED } from "constants/event-tracker";
 
+export type KanbanStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.DRAFT
+  | EIssuesStoreType.PROFILE;
 export interface IBaseKanBanLayout {
-  issues: IProjectIssues | ICycleIssues | IDraftIssues | IModuleIssues | IProjectViewIssues | IProfileIssues;
-  issuesFilter:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IDraftIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProfileIssuesFilter;
   QuickActions: FC<IQuickActionProps>;
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.RESTORE]?: (issue: TIssue) => Promise<void>;
-  };
   showLoader?: boolean;
   viewId?: string;
-  storeType?: TCreateModalStoreTypes;
+  storeType: KanbanStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
   isCompletedCycle?: boolean;
@@ -60,10 +44,7 @@ type KanbanDragState = {
 
 export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
   const {
-    issues,
-    issuesFilter,
     QuickActions,
-    issueActions,
     showLoader,
     viewId,
     storeType,
@@ -79,9 +60,9 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     membership: { currentProjectRole },
   } = useUser();
   const { captureIssueEvent } = useEventTracker();
-  const { issueMap } = useIssues();
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { issueMap, issuesFilter, issues } = useIssues(storeType);
+  const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
+    useIssuesActions(storeType);
 
   const issueIds = issues?.groupedIssueIds || [];
 
@@ -152,72 +133,56 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
           result.destination,
           workspaceSlug?.toString(),
           projectId?.toString(),
-          issues,
           sub_group_by,
           group_by,
           issueMap,
           issueIds,
-          viewId
+          updateIssue,
+          removeIssue
         ).catch((err) => {
-          setToastAlert({
+          setToast({
             title: "Error",
-            type: "error",
-            message: err.detail ?? "Failed to perform this action",
+            type: TOAST_TYPE.ERROR,
+            message: err?.detail ?? "Failed to perform this action",
           });
         });
       }
     }
   };
 
-  const handleIssues = useCallback(
-    async (issue: TIssue, action: EIssueActions) => {
-      if (issueActions[action]) {
-        await issueActions[action]!(issue);
-      }
-    },
-    [issueActions]
-  );
-
   const renderQuickActions = useCallback(
     (issue: TIssue, customActionButton?: React.ReactElement) => (
       <QuickActions
         customActionButton={customActionButton}
         issue={issue}
-        handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
-        handleUpdate={
-          issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
-        }
-        handleRemoveFromView={
-          issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
-        }
-        handleArchive={
-          issueActions[EIssueActions.ARCHIVE] ? async () => handleIssues(issue, EIssueActions.ARCHIVE) : undefined
-        }
-        handleRestore={
-          issueActions[EIssueActions.RESTORE] ? async () => handleIssues(issue, EIssueActions.RESTORE) : undefined
-        }
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
         readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [issueActions, handleIssues]
+    [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
   );
 
   const handleDeleteIssue = async () => {
-    if (!handleDragDrop) return;
+    if (!handleDragDrop || !dragState.draggedIssueId) return;
     await handleDragDrop(
       dragState.source,
       dragState.destination,
       workspaceSlug?.toString(),
       projectId?.toString(),
-      issues,
       sub_group_by,
       group_by,
       issueMap,
       issueIds,
-      viewId
+      updateIssue,
+      removeIssue
     ).finally(() => {
-      handleIssues(issueMap[dragState.draggedIssueId!], EIssueActions.DELETE);
+      const draggedIssue = issueMap[dragState.draggedIssueId!];
+      removeIssue(draggedIssue.project_id, draggedIssue.id);
       setDeleteIssueModal(false);
       setDragState({});
       captureIssueEvent({
@@ -230,18 +195,12 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const handleKanbanFilters = (toggle: "group_by" | "sub_group_by", value: string) => {
     if (workspaceSlug && projectId) {
-      let _kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
-      if (_kanbanFilters.includes(value)) _kanbanFilters = _kanbanFilters.filter((_value) => _value != value);
-      else _kanbanFilters.push(value);
-      issuesFilter.updateFilters(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        EIssueFilterType.KANBAN_FILTERS,
-        {
-          [toggle]: _kanbanFilters,
-        },
-        viewId
-      );
+      let kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
+      if (kanbanFilters.includes(value)) kanbanFilters = kanbanFilters.filter((_value) => _value != value);
+      else kanbanFilters.push(value);
+      updateFilters(projectId.toString(), EIssueFilterType.KANBAN_FILTERS, {
+        [toggle]: kanbanFilters,
+      });
     }
   };
 
@@ -263,7 +222,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       )}
 
       <div
-        className="flex relative h-full w-full overflow-auto bg-custom-background-90 vertical-scrollbar horizontal-scrollbar scrollbar-lg"
+        className="vertical-scrollbar horizontal-scrollbar scrollbar-lg relative flex h-full w-full overflow-auto bg-custom-background-90"
         ref={scrollableContainerRef}
       >
         <div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">
@@ -291,14 +250,14 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               </Droppable>
             </div>
 
-            <div className="w-max h-max">
+            <div className="h-max w-max">
               <KanBanView
                 issuesMap={issueMap}
                 issueIds={issueIds}
                 displayProperties={displayProperties}
                 sub_group_by={sub_group_by}
                 group_by={group_by}
-                handleIssues={handleIssues}
+                updateIssue={updateIssue}
                 quickActions={renderQuickActions}
                 handleKanbanFilters={handleKanbanFilters}
                 kanbanFilters={kanbanFilters}
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index be27f77068a..aafba1df699 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -1,19 +1,19 @@
 import { MutableRefObject, memo } from "react";
 import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
+import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 // hooks
-import { useApplication, useIssueDetail, useProject } from "hooks/store";
+import { Tooltip, ControlLink } from "@plane/ui";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
-import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import { IssueProperties } from "../properties/all-properties";
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 // ui
-import { Tooltip, ControlLink } from "@plane/ui";
 // types
-import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
-import { EIssueActions } from "../types";
 // helper
-import { cn } from "helpers/common.helper";
-import RenderIfVisible from "components/core/render-if-visible-HOC";
 
 interface IssueBlockProps {
   peekIssueId?: string;
@@ -23,7 +23,7 @@ interface IssueBlockProps {
   isDragDisabled: boolean;
   draggableId: string;
   index: number;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
@@ -34,24 +34,21 @@ interface IssueBlockProps {
 interface IssueDetailsBlockProps {
   issue: TIssue;
   displayProperties: IIssueDisplayProperties | undefined;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue) => React.ReactNode;
   isReadOnly: boolean;
 }
 
 const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((props: IssueDetailsBlockProps) => {
-  const { issue, handleIssues, quickActions, isReadOnly, displayProperties } = props;
+  const { issue, updateIssue, quickActions, isReadOnly, displayProperties } = props;
   // hooks
+  const { isMobile } = usePlatformOS();
   const { getProjectIdentifierById } = useProject();
   const {
     router: { workspaceSlug },
   } = useApplication();
   const { setPeekIssue } = useIssueDetail();
 
-  const updateIssue = async (issueToUpdate: TIssue) => {
-    if (issueToUpdate) await handleIssues(issueToUpdate, EIssueActions.UPDATE);
-  };
-
   const handleIssuePeekOverview = (issue: TIssue) =>
     workspaceSlug &&
     issue &&
@@ -71,12 +68,12 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
       </WithDisplayPropertiesHOC>
 
       {issue?.is_draft ? (
-        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+        <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
           <span>{issue.name}</span>
         </Tooltip>
       ) : (
         <ControlLink
-          href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
+          href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
             issue.id
           }`}
           target="_blank"
@@ -84,7 +81,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
           disabled={!!issue?.tempId}
         >
-          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+          <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
             <span>{issue.name}</span>
           </Tooltip>
         </ControlLink>
@@ -95,7 +92,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         issue={issue}
         displayProperties={displayProperties}
         activeLayout="Kanban"
-        handleIssues={updateIssue}
+        updateIssue={updateIssue}
         isReadOnly={isReadOnly}
       />
     </>
@@ -111,7 +108,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
     isDragDisabled,
     draggableId,
     index,
-    handleIssues,
+    updateIssue,
     quickActions,
     canEditProperties,
     scrollableContainerRef,
@@ -151,7 +148,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
               classNames="space-y-2 px-3 py-2"
               root={scrollableContainerRef}
               defaultHeight="100px"
-              horizonatlOffset={50}
+              horizontalOffset={50}
               alwaysRender={snapshot.isDragging}
               pauseHeightUpdateWhileRendering={isDragStarted}
               changingReference={issueIds}
@@ -159,7 +156,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
               <KanbanIssueDetailsBlock
                 issue={issue}
                 displayProperties={displayProperties}
-                handleIssues={handleIssues}
+                updateIssue={updateIssue}
                 quickActions={quickActions}
                 isReadOnly={!canEditIssueProperties}
               />
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
index 3746111e599..a906a329f14 100644
--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -1,9 +1,8 @@
 import { MutableRefObject, memo } from "react";
 //types
 import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
-import { EIssueActions } from "../types";
+import { KanbanIssueBlock } from "@/components/issues";
 // components
-import { KanbanIssueBlock } from "components/issues";
 
 interface IssueBlocksListProps {
   sub_group_id: string;
@@ -13,7 +12,7 @@ interface IssueBlocksListProps {
   issueIds: string[];
   displayProperties: IIssueDisplayProperties | undefined;
   isDragDisabled: boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
@@ -29,7 +28,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
     issueIds,
     displayProperties,
     isDragDisabled,
-    handleIssues,
+    updateIssue,
     quickActions,
     canEditProperties,
     scrollableContainerRef,
@@ -54,7 +53,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
                 issueId={issueId}
                 issuesMap={issuesMap}
                 displayProperties={displayProperties}
-                handleIssues={handleIssues}
+                updateIssue={updateIssue}
                 quickActions={quickActions}
                 draggableId={draggableId}
                 index={index}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 3cbab589f13..ee1ceef53c8 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -1,4 +1,17 @@
+import { MutableRefObject } from "react";
 import { observer } from "mobx-react-lite";
+import {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TGroupedIssues,
+  TIssue,
+  IIssueDisplayProperties,
+  IIssueMap,
+  TSubGroupedIssues,
+  TUnGroupedIssues,
+  TIssueKanbanFilters,
+} from "@plane/types";
+// constants
 // hooks
 import {
   useCycle,
@@ -9,27 +22,14 @@ import {
   useModule,
   useProject,
   useProjectState,
-} from "hooks/store";
+} from "@/hooks/store";
+// types
+// parent components
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
 // components
+import { KanbanStoreType } from "./base-kanban-root";
 import { HeaderGroupByCard } from "./headers/group-by-card";
 import { KanbanGroup } from "./kanban-group";
-// types
-import {
-  GroupByColumnTypes,
-  IGroupByColumn,
-  TGroupedIssues,
-  TIssue,
-  IIssueDisplayProperties,
-  IIssueMap,
-  TSubGroupedIssues,
-  TUnGroupedIssues,
-  TIssueKanbanFilters,
-} from "@plane/types";
-// constants
-import { EIssueActions } from "../types";
-import { getGroupByColumns } from "../utils";
-import { TCreateModalStoreTypes } from "constants/issue";
-import { MutableRefObject } from "react";
 
 export interface IGroupByKanBan {
   issuesMap: IIssueMap;
@@ -39,7 +39,7 @@ export interface IGroupByKanBan {
   group_by: string | null;
   sub_group_id: string;
   isDragDisabled: boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   kanbanFilters: TIssueKanbanFilters;
   handleKanbanFilters: any;
@@ -52,12 +52,13 @@ export interface IGroupByKanBan {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   disableIssueCreation?: boolean;
-  storeType?: TCreateModalStoreTypes;
+  storeType: KanbanStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   isDragStarted?: boolean;
   showEmptyGroup?: boolean;
+  subGroupIssueHeaderCount?: (listId: string) => number;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -69,7 +70,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     group_by,
     sub_group_id = "null",
     isDragDisabled,
-    handleIssues,
+    updateIssue,
     quickActions,
     kanbanFilters,
     handleKanbanFilters,
@@ -83,31 +84,52 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     scrollableContainerRef,
     isDragStarted,
     showEmptyGroup = true,
+    subGroupIssueHeaderCount,
   } = props;
 
   const member = useMember();
   const project = useProject();
   const label = useLabel();
   const cycle = useCycle();
-  const _module = useModule();
+  const moduleInfo = useModule();
   const projectState = useProjectState();
   const { peekIssue } = useIssueDetail();
 
-  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, cycle, _module, label, projectState, member);
+  const list = getGroupByColumns(
+    group_by as GroupByColumnTypes,
+    project,
+    cycle,
+    moduleInfo,
+    label,
+    projectState,
+    member,
+    true,
+    isWorkspaceLevel(storeType)
+  );
 
   if (!list) return null;
 
-  const groupWithIssues = list.filter((_list) => (issueIds as TGroupedIssues)?.[_list.id]?.length > 0);
-
-  const groupList = showEmptyGroup ? list : groupWithIssues;
-
-  const visibilityGroupBy = (_list: IGroupByColumn) => {
+  const visibilityGroupBy = (_list: IGroupByColumn): { showGroup: boolean; showIssues: boolean } => {
     if (sub_group_by) {
-      if (kanbanFilters?.sub_group_by.includes(_list.id)) return true;
-      return false;
+      const groupVisibility = {
+        showGroup: true,
+        showIssues: true,
+      };
+      if (!showEmptyGroup) {
+        groupVisibility.showGroup = subGroupIssueHeaderCount ? subGroupIssueHeaderCount(_list.id) > 0 : true;
+      }
+      return groupVisibility;
     } else {
-      if (kanbanFilters?.group_by.includes(_list.id)) return true;
-      return false;
+      const groupVisibility = {
+        showGroup: true,
+        showIssues: true,
+      };
+      if (!showEmptyGroup) {
+        if ((issueIds as TGroupedIssues)?.[_list.id]?.length > 0) groupVisibility.showGroup = true;
+        else groupVisibility.showGroup = false;
+      }
+      if (kanbanFilters?.group_by.includes(_list.id)) groupVisibility.showIssues = false;
+      return groupVisibility;
     }
   };
 
@@ -115,23 +137,29 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
 
   return (
     <div className={`relative w-full flex gap-2 ${sub_group_by ? "h-full" : "h-full"}`}>
-      {groupList &&
-        groupList.length > 0 &&
-        groupList.map((_list: IGroupByColumn) => {
-          const groupByVisibilityToggle = visibilityGroupBy(_list);
+      {list &&
+        list.length > 0 &&
+        list.map((subList: IGroupByColumn) => {
+          const groupByVisibilityToggle = visibilityGroupBy(subList);
 
+          if (groupByVisibilityToggle.showGroup === false) return <></>;
           return (
-            <div className={`relative flex flex-shrink-0 flex-col group ${groupByVisibilityToggle ? `` : `w-[350px]`}`}>
+            <div
+              key={subList.id}
+              className={`relative flex flex-shrink-0 flex-col group ${
+                groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
+              } `}
+            >
               {sub_group_by === null && (
-                <div className="flex-shrink-0 sticky top-0 z-[2] w-full bg-custom-background-90 py-1">
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
                   <HeaderGroupByCard
                     sub_group_by={sub_group_by}
                     group_by={group_by}
-                    column_id={_list.id}
-                    icon={_list.icon}
-                    title={_list.name}
-                    count={(issueIds as TGroupedIssues)?.[_list.id]?.length || 0}
-                    issuePayload={_list.payload}
+                    column_id={subList.id}
+                    icon={subList.icon}
+                    title={subList.name}
+                    count={(issueIds as TGroupedIssues)?.[subList.id]?.length || 0}
+                    issuePayload={subList.payload}
                     disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
                     storeType={storeType}
                     addIssuesToView={addIssuesToView}
@@ -141,9 +169,9 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                 </div>
               )}
 
-              {!groupByVisibilityToggle && (
+              {groupByVisibilityToggle.showIssues && (
                 <KanbanGroup
-                  groupId={_list.id}
+                  groupId={subList.id}
                   issuesMap={issuesMap}
                   issueIds={issueIds}
                   peekIssueId={peekIssue?.issueId ?? ""}
@@ -152,14 +180,13 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   group_by={group_by}
                   sub_group_id={sub_group_id}
                   isDragDisabled={isDragDisabled}
-                  handleIssues={handleIssues}
+                  updateIssue={updateIssue}
                   quickActions={quickActions}
                   enableQuickIssueCreate={enableQuickIssueCreate}
                   quickAddCallback={quickAddCallback}
                   viewId={viewId}
                   disableIssueCreation={disableIssueCreation}
                   canEditProperties={canEditProperties}
-                  groupByVisibilityToggle={groupByVisibilityToggle}
                   scrollableContainerRef={scrollableContainerRef}
                   isDragStarted={isDragStarted}
                 />
@@ -178,7 +205,7 @@ export interface IKanBan {
   sub_group_by: string | null;
   group_by: string | null;
   sub_group_id?: string;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   kanbanFilters: TIssueKanbanFilters;
   handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
@@ -192,11 +219,12 @@ export interface IKanBan {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   disableIssueCreation?: boolean;
-  storeType?: TCreateModalStoreTypes;
+  storeType: KanbanStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   isDragStarted?: boolean;
+  subGroupIssueHeaderCount?: (listId: string) => number;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -207,7 +235,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     sub_group_by,
     group_by,
     sub_group_id = "null",
-    handleIssues,
+    updateIssue,
     quickActions,
     kanbanFilters,
     handleKanbanFilters,
@@ -221,6 +249,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     scrollableContainerRef,
     isDragStarted,
     showEmptyGroup,
+    subGroupIssueHeaderCount,
   } = props;
 
   const issueKanBanView = useKanbanView();
@@ -234,7 +263,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       sub_group_by={sub_group_by}
       sub_group_id={sub_group_id}
       isDragDisabled={!issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by)}
-      handleIssues={handleIssues}
+      updateIssue={updateIssue}
       quickActions={quickActions}
       kanbanFilters={kanbanFilters}
       handleKanbanFilters={handleKanbanFilters}
@@ -248,6 +277,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       scrollableContainerRef={scrollableContainerRef}
       isDragStarted={isDragStarted}
       showEmptyGroup={showEmptyGroup}
+      subGroupIssueHeaderCount={subGroupIssueHeaderCount}
     />
   );
 });
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
index f49af292217..44df59d9ac3 100644
--- a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -1,19 +1,19 @@
 import React, { FC } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-// components
-import { CustomMenu } from "@plane/ui";
-import { ExistingIssuesListModal } from "components/core";
-import { CreateUpdateIssueModal } from "components/issues";
 // lucide icons
 import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
+import { TIssue, ISearchIssueResponse, TIssueKanbanFilters } from "@plane/types";
+// ui
+import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ExistingIssuesListModal } from "@/components/core";
+import { CreateUpdateIssueModal } from "@/components/issues";
+// constants
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
-// mobx
-import { observer } from "mobx-react-lite";
+import { useEventTracker } from "@/hooks/store";
 // types
-import { TIssue, ISearchIssueResponse, TIssueKanbanFilters } from "@plane/types";
-import { TCreateModalStoreTypes } from "constants/issue";
+import { KanbanStoreType } from "../base-kanban-root";
 
 interface IHeaderGroupByCard {
   sub_group_by: string | null;
@@ -26,7 +26,7 @@ interface IHeaderGroupByCard {
   handleKanbanFilters: any;
   issuePayload: Partial<TIssue>;
   disableIssueCreation?: boolean;
-  storeType?: TCreateModalStoreTypes;
+  storeType: KanbanStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
 }
 
@@ -56,8 +56,6 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
 
   const isDraftIssue = router.pathname.includes("draft-issue");
 
-  const { setToastAlert } = useToast();
-
   const renderExistingIssueModal = moduleId || cycleId;
   const ExistingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
 
@@ -67,10 +65,16 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
     const issues = data.map((i) => i.id);
 
     try {
-      addIssuesToView && addIssuesToView(issues);
+      await addIssuesToView?.(issues);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Issues added to the cycle successfully.",
+      });
     } catch (error) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Selected issues could not be added to the cycle. Please try again.",
       });
@@ -107,12 +111,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
         </div>
 
         <div
-          className={`relative overflow-hidden flex items-center gap-1 ${
+          className={`relative flex items-center gap-1 overflow-hidden ${
             verticalAlignPosition ? `flex-col` : `w-full flex-row`
           }`}
         >
           <div
-            className={`inline-block truncate line-clamp-1 font-medium text-custom-text-100 overflow-hidden ${
+            className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-custom-text-100 ${
               verticalAlignPosition ? `vertical-lr max-h-[400px]` : ``
             }`}
           >
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
index ea94647802e..475f638776d 100644
--- 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
@@ -1,8 +1,8 @@
 import React from "react";
-import { Circle, ChevronDown, ChevronUp } from "lucide-react";
-// mobx
 import { observer } from "mobx-react-lite";
+import { Circle, ChevronDown, ChevronUp } from "lucide-react";
 import { TIssueKanbanFilters } from "@plane/types";
+// mobx
 
 interface IHeaderSubGroupByCard {
   icon?: React.ReactNode;
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index a05fb179110..b3e24dc2363 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -1,10 +1,6 @@
 import { MutableRefObject } from "react";
 import { Droppable } from "@hello-pangea/dnd";
 // hooks
-import { useProjectState } from "hooks/store";
-//components
-import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
-//types
 import {
   TGroupedIssues,
   TIssue,
@@ -13,7 +9,10 @@ import {
   TSubGroupedIssues,
   TUnGroupedIssues,
 } from "@plane/types";
-import { EIssueActions } from "../types";
+import { useProjectState } from "@/hooks/store";
+//components
+//types
+import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
 
 interface IKanbanGroup {
   groupId: string;
@@ -25,7 +24,7 @@ interface IKanbanGroup {
   group_by: string | null;
   sub_group_id: string;
   isDragDisabled: boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
   quickAddCallback?: (
@@ -37,7 +36,7 @@ interface IKanbanGroup {
   viewId?: string;
   disableIssueCreation?: boolean;
   canEditProperties: (projectId: string | undefined) => boolean;
-  groupByVisibilityToggle: boolean;
+  groupByVisibilityToggle?: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   isDragStarted?: boolean;
 }
@@ -53,7 +52,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     issueIds,
     peekIssueId,
     isDragDisabled,
-    handleIssues,
+    updateIssue,
     quickActions,
     canEditProperties,
     enableQuickIssueCreate,
@@ -135,7 +134,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
               issueIds={(issueIds as TGroupedIssues)?.[groupId] || []}
               displayProperties={displayProperties}
               isDragDisabled={isDragDisabled}
-              handleIssues={handleIssues}
+              updateIssue={updateIssue}
               quickActions={quickActions}
               canEditProperties={canEditProperties}
               scrollableContainerRef={scrollableContainerRef}
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index 51316343182..e5275f96aa6 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -1,19 +1,20 @@
 import { useEffect, useState, useRef } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
+import { TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useKeypress from "hooks/use-keypress";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { setPromiseToast } from "@plane/ui";
+import { ISSUE_CREATED } from "@/constants/event-tracker";
+import { createIssuePayload } from "@/helpers/issue.helper";
+import { useEventTracker, useProject } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // helpers
-import { createIssuePayload } from "helpers/issue.helper";
+// ui
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { ISSUE_CREATED } from "constants/event-tracker";
 
 const Inputs = (props: any) => {
   const { register, setFocus, projectDetail } = props;
@@ -73,7 +74,6 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
 
   useKeypress("Escape", handleClose);
   useOutsideClickDetector(ref, handleClose);
-  const { setToastAlert } = useToast();
 
   const {
     reset,
@@ -97,46 +97,49 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
       ...formData,
     });
 
-    try {
-      quickAddCallback &&
-        (await quickAddCallback(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          {
-            ...payload,
-          },
-          viewId
-        ).then((res) => {
+    if (quickAddCallback) {
+      const quickAddPromise = quickAddCallback(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          ...payload,
+        },
+        viewId
+      );
+      setPromiseToast<any>(quickAddPromise, {
+        loading: "Adding issue...",
+        success: {
+          title: "Success!",
+          message: () => "Issue created successfully.",
+        },
+        error: {
+          title: "Error!",
+          message: (err) => err?.message || "Some error occurred. Please try again.",
+        },
+      });
+
+      await quickAddPromise
+        .then((res) => {
           captureIssueEvent({
             eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Kanban quick add" },
             path: router.asPath,
           });
-        }));
-      setToastAlert({
-        type: "success",
-        title: "Success!",
-        message: "Issue created successfully.",
-      });
-    } catch (err: any) {
-      captureIssueEvent({
-        eventName: ISSUE_CREATED,
-        payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
-        path: router.asPath,
-      });
-      console.error(err);
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: err?.message || "Some error occurred. Please try again.",
-      });
+        })
+        .catch(() => {
+          captureIssueEvent({
+            eventName: ISSUE_CREATED,
+            payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
+            path: router.asPath,
+          });
+        });
     }
   };
 
   return (
     <>
       {isOpen ? (
-        <div className="shadow-custom-shadow-sm m-1.5 rounded overflow-hidden">
+        <div className="m-1.5 overflow-hidden rounded shadow-custom-shadow-sm">
           <form
             ref={ref}
             onSubmit={handleSubmit(onSubmitHandler)}
diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index 001169933b2..be61dbbda7f 100644
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -1,16 +1,14 @@
-import React, { useCallback, useMemo } from "react";
-import { useRouter } from "next/router";
+import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useCycle, useIssues } from "hooks/store";
+import { CycleIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useIssues } from "@/hooks/store";
 // ui
-import { CycleIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { EIssuesStoreType } from "constants/issue";
 
 export interface ICycleKanBanLayout {}
 
@@ -19,35 +17,9 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   const { workspaceSlug, projectId, cycleId } = router.query;
 
   // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { issues } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCompletedCycleIds } = useCycle();
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, cycleId.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.removeIssueFromCycle(workspaceSlug.toString(), issue.project_id, cycleId.toString(), issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.archiveIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      },
-    }),
-    [issues, workspaceSlug, cycleId]
-  );
-
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
 
@@ -63,10 +35,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
 
   return (
     <BaseKanBanRoot
-      issueActions={issueActions}
-      issues={issues}
-      issuesFilter={issuesFilter}
-      showLoader={true}
+      showLoader
       QuickActions={CycleIssueQuickActions}
       viewId={cycleId?.toString() ?? ""}
       storeType={EIssuesStoreType.CYCLE}
diff --git a/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx b/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
index 9152dbfe576..4bd840b5ec8 100644
--- a/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
@@ -1,49 +1,11 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useIssues } from "hooks/store";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
-// types
-import { TIssue } from "@plane/types";
-// constants
-import { EIssueActions } from "../../types";
+import { DraftIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
 
 export interface IKanBanLayout {}
 
-export const DraftKanBanLayout: React.FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
-
-  return (
-    <BaseKanBanRoot
-      issueActions={issueActions}
-      issuesFilter={issuesFilter}
-      issues={issues}
-      showLoader={true}
-      QuickActions={ProjectIssueQuickActions}
-    />
-  );
-});
+export const DraftKanBanLayout: React.FC = observer(() => (
+  <BaseKanBanRoot showLoader QuickActions={DraftIssueQuickActions} storeType={EIssuesStoreType.DRAFT} />
+));
diff --git a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
index 07ad7eb83ca..14eaa0c1907 100644
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -1,16 +1,14 @@
-import React, { useMemo } from "react";
-import { useRouter } from "next/router";
+import React from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hook
-import { useIssues } from "hooks/store";
+import { ModuleIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // components
-import { ModuleIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { EIssueActions } from "../../types";
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { EIssuesStoreType } from "constants/issue";
 
 export interface IModuleKanBanLayout {}
 
@@ -19,40 +17,11 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
   const { workspaceSlug, projectId, moduleId } = router.query;
 
   // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.removeIssueFromModule(workspaceSlug.toString(), issue.project_id, moduleId.toString(), issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.archiveIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
-      },
-    }),
-    [issues, workspaceSlug, moduleId]
-  );
+  const { issues } = useIssues(EIssuesStoreType.MODULE);
 
   return (
     <BaseKanBanRoot
-      issueActions={issueActions}
-      issues={issues}
-      issuesFilter={issuesFilter}
-      showLoader={true}
+      showLoader
       QuickActions={ModuleIssueQuickActions}
       viewId={moduleId?.toString()}
       storeType={EIssuesStoreType.MODULE}
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
index c6c04165447..2d0d17625c4 100644
--- a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -1,49 +1,19 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues, useUser } from "hooks/store";
+import { ProjectIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useUser } from "@/hooks/store";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { EIssueActions } from "../../types";
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
 
 export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query as { workspaceSlug: string; userId: string };
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROFILE);
-
   const {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !userId) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue, userId);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !userId) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id, userId);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !userId) return;
-
-        await issues.archiveIssue(workspaceSlug, issue.project_id, issue.id, userId);
-      },
-    }),
-    [issues, workspaceSlug, userId]
-  );
-
   const canEditPropertiesBasedOnProject = (projectId: string) => {
     const currentProjectRole = currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId];
 
@@ -52,10 +22,7 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
 
   return (
     <BaseKanBanRoot
-      issueActions={issueActions}
-      issuesFilter={issuesFilter}
-      issues={issues}
-      showLoader={true}
+      showLoader
       QuickActions={ProjectIssueQuickActions}
       storeType={EIssuesStoreType.PROFILE}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
index efd86bc8e94..fb385aeffa6 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -1,54 +1,12 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { useMemo } from "react";
 // mobx store
-import { useIssues } from "hooks/store/use-issues";
+import { ProjectIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
-import { BaseKanBanRoot } from "../base-kanban-root";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { EIssueActions } from "../../types";
-import { EIssuesStoreType } from "constants/issue";
-
-export interface IKanBanLayout {}
-
-export const KanBanLayout: React.FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string; projectId: string };
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.archiveIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
+import { BaseKanBanRoot } from "../base-kanban-root";
 
-  return (
-    <BaseKanBanRoot
-      issueActions={issueActions}
-      issues={issues}
-      issuesFilter={issuesFilter}
-      showLoader={true}
-      QuickActions={ProjectIssueQuickActions}
-      storeType={EIssuesStoreType.PROJECT}
-    />
-  );
-});
+export const KanBanLayout: React.FC = observer(() => (
+  <BaseKanBanRoot showLoader QuickActions={ProjectIssueQuickActions} storeType={EIssuesStoreType.PROJECT} />
+));
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
index 8dd33b72844..ff52def5f7d 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -2,39 +2,21 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
-import { useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // constant
-import { EIssuesStoreType } from "constants/issue";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 
-export interface IViewKanBanLayout {
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-  };
-}
-
-export const ProjectViewKanBanLayout: React.FC<IViewKanBanLayout> = observer((props) => {
-  const { issueActions } = props;
+export const ProjectViewKanBanLayout: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { viewId } = router.query;
 
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-
   return (
     <BaseKanBanRoot
-      issueActions={issueActions}
-      issuesFilter={issuesFilter}
-      issues={issues}
-      showLoader={true}
+      showLoader
       QuickActions={ProjectIssueQuickActions}
       storeType={EIssuesStoreType.PROJECT_VIEW}
       viewId={viewId?.toString()}
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index d60e3b61868..197d8d2934a 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -1,10 +1,5 @@
 import { MutableRefObject } from "react";
 import { observer } from "mobx-react-lite";
-// components
-import { KanBan } from "./default";
-import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
-import { HeaderGroupByCard } from "./headers/group-by-card";
-// types
 import {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -16,11 +11,15 @@ import {
   TUnGroupedIssues,
   TIssueKanbanFilters,
 } from "@plane/types";
+// components
+import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
+import { KanbanStoreType } from "./base-kanban-root";
+import { KanBan } from "./default";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
+// types
 // constants
-import { EIssueActions } from "../types";
-import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "hooks/store";
-import { getGroupByColumns } from "../utils";
-import { TCreateModalStoreTypes } from "constants/issue";
 
 interface ISubGroupSwimlaneHeader {
   issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues;
@@ -29,6 +28,8 @@ interface ISubGroupSwimlaneHeader {
   list: IGroupByColumn[];
   kanbanFilters: TIssueKanbanFilters;
   handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  storeType: KanbanStoreType;
+  showEmptyGroup: boolean;
 }
 
 const getSubGroupHeaderIssuesCount = (issueIds: TSubGroupedIssues, groupById: string) => {
@@ -39,32 +40,61 @@ const getSubGroupHeaderIssuesCount = (issueIds: TSubGroupedIssues, groupById: st
   return headerCount;
 };
 
+const visibilitySubGroupByGroupCount = (
+  issueIds: TSubGroupedIssues,
+  _list: IGroupByColumn,
+  showEmptyGroup: boolean
+): boolean => {
+  let subGroupHeaderVisibility = true;
+
+  if (showEmptyGroup) subGroupHeaderVisibility = true;
+  else {
+    if (getSubGroupHeaderIssuesCount(issueIds, _list.id) > 0) subGroupHeaderVisibility = true;
+    else subGroupHeaderVisibility = false;
+  }
+
+  return subGroupHeaderVisibility;
+};
+
 const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   issueIds,
   sub_group_by,
   group_by,
+  storeType,
   list,
   kanbanFilters,
   handleKanbanFilters,
+  showEmptyGroup,
 }) => (
-  <div className="relative flex gap-2 h-max min-h-full w-full items-center">
+  <div className="relative flex h-max min-h-full w-full items-center gap-2">
     {list &&
       list.length > 0 &&
-      list.map((_list: IGroupByColumn) => (
-        <div key={`${sub_group_by}_${_list.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
-          <HeaderGroupByCard
-            sub_group_by={sub_group_by}
-            group_by={group_by}
-            column_id={_list.id}
-            icon={_list.icon}
-            title={_list.name}
-            count={getSubGroupHeaderIssuesCount(issueIds as TSubGroupedIssues, _list?.id)}
-            kanbanFilters={kanbanFilters}
-            handleKanbanFilters={handleKanbanFilters}
-            issuePayload={_list.payload}
-          />
-        </div>
-      ))}
+      list.map((_list: IGroupByColumn) => {
+        const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(
+          issueIds as TSubGroupedIssues,
+          _list,
+          showEmptyGroup
+        );
+
+        if (subGroupByVisibilityToggle === false) return <></>;
+
+        return (
+          <div key={`${sub_group_by}_${_list.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={_list.id}
+              icon={_list.icon}
+              title={_list.name}
+              count={getSubGroupHeaderIssuesCount(issueIds as TSubGroupedIssues, _list?.id)}
+              kanbanFilters={kanbanFilters}
+              handleKanbanFilters={handleKanbanFilters}
+              issuePayload={_list.payload}
+              storeType={storeType}
+            />
+          </div>
+        );
+      })}
   </div>
 );
 
@@ -73,13 +103,13 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues;
   showEmptyGroup: boolean;
   displayProperties: IIssueDisplayProperties | undefined;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   kanbanFilters: TIssueKanbanFilters;
   handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
   isDragStarted?: boolean;
   disableIssueCreation?: boolean;
-  storeType?: TCreateModalStoreTypes;
+  storeType: KanbanStoreType;
   enableQuickIssueCreate: boolean;
   canEditProperties: (projectId: string | undefined) => boolean;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
@@ -99,7 +129,8 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     sub_group_by,
     group_by,
     list,
-    handleIssues,
+    storeType,
+    updateIssue,
     quickActions,
     displayProperties,
     kanbanFilters,
@@ -124,52 +155,74 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     return issueCount;
   };
 
+  const visibilitySubGroupBy = (_list: IGroupByColumn): { showGroup: boolean; showIssues: boolean } => {
+    const subGroupVisibility = {
+      showGroup: true,
+      showIssues: true,
+    };
+    if (showEmptyGroup) subGroupVisibility.showGroup = true;
+    else {
+      if (calculateIssueCount(_list.id) > 0) subGroupVisibility.showGroup = true;
+      else subGroupVisibility.showGroup = false;
+    }
+    if (kanbanFilters?.sub_group_by.includes(_list.id)) subGroupVisibility.showIssues = false;
+    return subGroupVisibility;
+  };
+
   return (
     <div className="relative h-max min-h-full w-full">
       {list &&
         list.length > 0 &&
-        list.map((_list: any) => (
-          <div className="flex flex-shrink-0 flex-col">
-            <div className="sticky top-[50px] z-[1] flex w-full items-center bg-custom-background-90 py-1">
-              <div className="sticky left-0 flex-shrink-0 bg-custom-background-90 pr-2">
-                <HeaderSubGroupByCard
-                  column_id={_list.id}
-                  icon={_list.Icon}
-                  title={_list.name || ""}
-                  count={calculateIssueCount(_list.id)}
-                  kanbanFilters={kanbanFilters}
-                  handleKanbanFilters={handleKanbanFilters}
-                />
+        list.map((_list: any) => {
+          const subGroupByVisibilityToggle = visibilitySubGroupBy(_list);
+          if (subGroupByVisibilityToggle.showGroup === false) return <></>;
+          return (
+            <div key={_list.id} className="flex flex-shrink-0 flex-col">
+              <div className="sticky top-[50px] z-[1] flex w-full items-center bg-custom-background-90 py-1">
+                <div className="sticky left-0 flex-shrink-0 bg-custom-background-90 pr-2">
+                  <HeaderSubGroupByCard
+                    column_id={_list.id}
+                    icon={_list.Icon}
+                    title={_list.name || ""}
+                    count={calculateIssueCount(_list.id)}
+                    kanbanFilters={kanbanFilters}
+                    handleKanbanFilters={handleKanbanFilters}
+                  />
+                </div>
+                <div className="w-full border-b border-dashed border-custom-border-400" />
               </div>
-              <div className="w-full border-b border-dashed border-custom-border-400" />
-            </div>
 
-            {!kanbanFilters?.sub_group_by.includes(_list.id) && (
-              <div className="relative">
-                <KanBan
-                  issuesMap={issuesMap}
-                  issueIds={(issueIds as TSubGroupedIssues)?.[_list.id]}
-                  displayProperties={displayProperties}
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  sub_group_id={_list.id}
-                  handleIssues={handleIssues}
-                  quickActions={quickActions}
-                  kanbanFilters={kanbanFilters}
-                  handleKanbanFilters={handleKanbanFilters}
-                  showEmptyGroup={showEmptyGroup}
-                  enableQuickIssueCreate={enableQuickIssueCreate}
-                  canEditProperties={canEditProperties}
-                  addIssuesToView={addIssuesToView}
-                  quickAddCallback={quickAddCallback}
-                  viewId={viewId}
-                  scrollableContainerRef={scrollableContainerRef}
-                  isDragStarted={isDragStarted}
-                />
-              </div>
-            )}
-          </div>
-        ))}
+              {subGroupByVisibilityToggle.showIssues && (
+                <div className="relative">
+                  <KanBan
+                    issuesMap={issuesMap}
+                    issueIds={(issueIds as TSubGroupedIssues)?.[_list.id]}
+                    displayProperties={displayProperties}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    sub_group_id={_list.id}
+                    storeType={storeType}
+                    updateIssue={updateIssue}
+                    quickActions={quickActions}
+                    kanbanFilters={kanbanFilters}
+                    handleKanbanFilters={handleKanbanFilters}
+                    showEmptyGroup={showEmptyGroup}
+                    enableQuickIssueCreate={enableQuickIssueCreate}
+                    canEditProperties={canEditProperties}
+                    addIssuesToView={addIssuesToView}
+                    quickAddCallback={quickAddCallback}
+                    viewId={viewId}
+                    scrollableContainerRef={scrollableContainerRef}
+                    isDragStarted={isDragStarted}
+                    subGroupIssueHeaderCount={(groupByListId: string) =>
+                      getSubGroupHeaderIssuesCount(issueIds as TSubGroupedIssues, groupByListId)
+                    }
+                  />
+                </div>
+              )}
+            </div>
+          );
+        })}
     </div>
   );
 });
@@ -180,14 +233,14 @@ export interface IKanBanSwimLanes {
   displayProperties: IIssueDisplayProperties | undefined;
   sub_group_by: string | null;
   group_by: string | null;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   kanbanFilters: TIssueKanbanFilters;
   handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
   showEmptyGroup: boolean;
   isDragStarted?: boolean;
   disableIssueCreation?: boolean;
-  storeType?: TCreateModalStoreTypes;
+  storeType: KanbanStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   enableQuickIssueCreate: boolean;
   quickAddCallback?: (
@@ -208,7 +261,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     displayProperties,
     sub_group_by,
     group_by,
-    handleIssues,
+    updateIssue,
+    storeType,
     quickActions,
     kanbanFilters,
     handleKanbanFilters,
@@ -227,26 +281,30 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
   const project = useProject();
   const label = useLabel();
   const cycle = useCycle();
-  const _module = useModule();
+  const projectModule = useModule();
   const projectState = useProjectState();
 
   const groupByList = getGroupByColumns(
     group_by as GroupByColumnTypes,
     project,
     cycle,
-    _module,
+    projectModule,
     label,
     projectState,
-    member
+    member,
+    true,
+    isWorkspaceLevel(storeType)
   );
   const subGroupByList = getGroupByColumns(
     sub_group_by as GroupByColumnTypes,
     project,
     cycle,
-    _module,
+    projectModule,
     label,
     projectState,
-    member
+    member,
+    true,
+    isWorkspaceLevel(storeType)
   );
 
   if (!groupByList || !subGroupByList) return null;
@@ -261,6 +319,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           kanbanFilters={kanbanFilters}
           handleKanbanFilters={handleKanbanFilters}
           list={groupByList}
+          storeType={storeType}
+          showEmptyGroup={showEmptyGroup}
         />
       </div>
 
@@ -272,7 +332,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           displayProperties={displayProperties}
           group_by={group_by}
           sub_group_by={sub_group_by}
-          handleIssues={handleIssues}
+          updateIssue={updateIssue}
           quickActions={quickActions}
           kanbanFilters={kanbanFilters}
           handleKanbanFilters={handleKanbanFilters}
@@ -285,6 +345,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           quickAddCallback={quickAddCallback}
           viewId={viewId}
           scrollableContainerRef={scrollableContainerRef}
+          storeType={storeType}
         />
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/kanban/utils.ts b/web/components/issues/issue-layouts/kanban/utils.ts
index 61759852439..855f096e655 100644
--- a/web/components/issues/issue-layouts/kanban/utils.ts
+++ b/web/components/issues/issue-layouts/kanban/utils.ts
@@ -1,12 +1,5 @@
 import { DraggableLocation } from "@hello-pangea/dnd";
-import { ICycleIssues } from "store/issue/cycle";
-import { IDraftIssues } from "store/issue/draft";
-import { IModuleIssues } from "store/issue/module";
-import { IProfileIssues } from "store/issue/profile";
-import { IProjectIssues } from "store/issue/project";
-import { IProjectViewIssues } from "store/issue/project-views";
-import { IWorkspaceIssues } from "store/issue/workspace";
-import { TGroupedIssues, IIssueMap, TSubGroupedIssues, TUnGroupedIssues } from "@plane/types";
+import { TGroupedIssues, IIssueMap, TSubGroupedIssues, TUnGroupedIssues, TIssue } from "@plane/types";
 
 const handleSortOrder = (destinationIssues: string[], destinationIndex: number, issueMap: IIssueMap) => {
   const sortOrderDefaultValue = 65535;
@@ -48,24 +41,16 @@ export const handleDragDrop = async (
   destination: DraggableLocation | null | undefined,
   workspaceSlug: string | undefined,
   projectId: string | undefined, // projectId for all views or user id in profile issues
-  store:
-    | IProjectIssues
-    | ICycleIssues
-    | IDraftIssues
-    | IModuleIssues
-    | IDraftIssues
-    | IProjectViewIssues
-    | IProfileIssues
-    | IWorkspaceIssues,
   subGroupBy: string | null,
   groupBy: string | null,
   issueMap: IIssueMap,
   issueWithIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined,
-  viewId: string | null = null // it can be moduleId, cycleId
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined,
+  removeIssue: (projectId: string, issueId: string) => Promise<void> | undefined
 ) => {
   if (!issueMap || !issueWithIds || !source || !destination || !workspaceSlug || !projectId) return;
 
-  let updateIssue: any = {};
+  let updatedIssue: any = {};
 
   const sourceDroppableId = source?.droppableId;
   const destinationDroppableId = destination?.droppableId;
@@ -100,8 +85,7 @@ export const handleDragDrop = async (
     const [removed] = sourceIssues.splice(source.index, 1);
 
     if (removed) {
-      if (viewId) return await store?.removeIssue(workspaceSlug, projectId, removed); //, viewId);
-      else return await store?.removeIssue(workspaceSlug, projectId, removed);
+      return await removeIssue(projectId, removed);
     }
   } else {
     //spreading the array to stop changing the original reference
@@ -118,14 +102,14 @@ export const handleDragDrop = async (
     const [removed] = sourceIssues.splice(source.index, 1);
     const removedIssueDetail = issueMap[removed];
 
-    updateIssue = {
+    updatedIssue = {
       id: removedIssueDetail?.id,
       project_id: removedIssueDetail?.project_id,
     };
 
     // for both horizontal and vertical dnd
-    updateIssue = {
-      ...updateIssue,
+    updatedIssue = {
+      ...updatedIssue,
       ...handleSortOrder(
         sourceDroppableId === destinationDroppableId ? sourceIssues : destinationIssues,
         destination.index,
@@ -136,19 +120,19 @@ export const handleDragDrop = async (
     if (subGroupBy && sourceSubGroupByColumnId && destinationSubGroupByColumnId) {
       if (sourceSubGroupByColumnId === destinationSubGroupByColumnId) {
         if (sourceGroupByColumnId != destinationGroupByColumnId) {
-          if (groupBy === "state") updateIssue = { ...updateIssue, state_id: destinationGroupByColumnId };
-          if (groupBy === "priority") updateIssue = { ...updateIssue, priority: destinationGroupByColumnId };
+          if (groupBy === "state") updatedIssue = { ...updatedIssue, state_id: destinationGroupByColumnId };
+          if (groupBy === "priority") updatedIssue = { ...updatedIssue, priority: destinationGroupByColumnId };
         }
       } else {
         if (subGroupBy === "state")
-          updateIssue = {
-            ...updateIssue,
+          updatedIssue = {
+            ...updatedIssue,
             state_id: destinationSubGroupByColumnId,
             priority: destinationGroupByColumnId,
           };
         if (subGroupBy === "priority")
-          updateIssue = {
-            ...updateIssue,
+          updatedIssue = {
+            ...updatedIssue,
             state_id: destinationGroupByColumnId,
             priority: destinationSubGroupByColumnId,
           };
@@ -156,15 +140,13 @@ export const handleDragDrop = async (
     } else {
       // for horizontal dnd
       if (sourceColumnId != destinationColumnId) {
-        if (groupBy === "state") updateIssue = { ...updateIssue, state_id: destinationGroupByColumnId };
-        if (groupBy === "priority") updateIssue = { ...updateIssue, priority: destinationGroupByColumnId };
+        if (groupBy === "state") updatedIssue = { ...updatedIssue, state_id: destinationGroupByColumnId };
+        if (groupBy === "priority") updatedIssue = { ...updatedIssue, priority: destinationGroupByColumnId };
       }
     }
 
-    if (updateIssue && updateIssue?.id) {
-      if (viewId)
-        return await store?.updateIssue(workspaceSlug, updateIssue.project_id, updateIssue.id, updateIssue, viewId);
-      else return await store?.updateIssue(workspaceSlug, updateIssue.project_id, updateIssue.id, updateIssue);
+    if (updatedIssue && updatedIssue?.id) {
+      return updateIssue && (await updateIssue(updatedIssue.project_id, updatedIssue.id, updatedIssue));
     }
   }
 };
diff --git a/web/components/issues/issue-layouts/list/base-list-root.tsx b/web/components/issues/issue-layouts/list/base-list-root.tsx
index ffe9de66142..ac9427101eb 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -1,68 +1,46 @@
-import { List } from "./default";
 import { FC, useCallback } from "react";
 import { observer } from "mobx-react-lite";
-// types
 import { TIssue } from "@plane/types";
-import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
-import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
-import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile";
-import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
-import { IDraftIssuesFilter, IDraftIssues } from "store/issue/draft";
-import { IArchivedIssuesFilter, IArchivedIssues } from "store/issue/archived";
-import { EIssueActions } from "../types";
+// types
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useIssues, useUser } from "@/hooks/store";
+
+import { useIssuesActions } from "@/hooks/use-issues-actions";
 // components
+import { List } from "./default";
 import { IQuickActionProps } from "./list-view-types";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { TCreateModalStoreTypes } from "constants/issue";
 // hooks
-import { useIssues, useUser } from "hooks/store";
 
+type ListStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.ARCHIVED
+  | EIssuesStoreType.DRAFT
+  | EIssuesStoreType.PROFILE;
 interface IBaseListRoot {
-  issuesFilter:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProfileIssuesFilter
-    | IDraftIssuesFilter
-    | IArchivedIssuesFilter;
-  issues:
-    | IProjectIssues
-    | ICycleIssues
-    | IModuleIssues
-    | IProjectViewIssues
-    | IProfileIssues
-    | IDraftIssues
-    | IArchivedIssues;
   QuickActions: FC<IQuickActionProps>;
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.RESTORE]?: (issue: TIssue) => Promise<void>;
-  };
   viewId?: string;
-  storeType: TCreateModalStoreTypes;
+  storeType: ListStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
   isCompletedCycle?: boolean;
 }
-
 export const BaseListRoot = observer((props: IBaseListRoot) => {
   const {
-    issuesFilter,
-    issues,
     QuickActions,
-    issueActions,
     viewId,
     storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
     isCompletedCycle = false,
   } = props;
+
+  const { issuesFilter, issues } = useIssues(storeType);
+  const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue } = useIssuesActions(storeType);
   // mobx store
   const {
     membership: { currentProjectRole },
@@ -80,7 +58,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
       const isEditingAllowedBasedOnProject =
         canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
 
-      return enableInlineEditing && isEditingAllowedBasedOnProject;
+      return !!enableInlineEditing && isEditingAllowedBasedOnProject;
     },
     [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
   );
@@ -91,37 +69,20 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   const group_by = displayFilters?.group_by || null;
   const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
 
-  const handleIssues = useCallback(
-    async (issue: TIssue, action: EIssueActions) => {
-      if (issueActions[action]) {
-        await issueActions[action]!(issue);
-      }
-    },
-    [issueActions]
-  );
-
   const renderQuickActions = useCallback(
     (issue: TIssue) => (
       <QuickActions
         issue={issue}
-        handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
-        handleUpdate={
-          issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
-        }
-        handleRemoveFromView={
-          issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
-        }
-        handleArchive={
-          issueActions[EIssueActions.ARCHIVE] ? async () => handleIssues(issue, EIssueActions.ARCHIVE) : undefined
-        }
-        handleRestore={
-          issueActions[EIssueActions.RESTORE] ? async () => handleIssues(issue, EIssueActions.RESTORE) : undefined
-        }
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
         readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleIssues]
+    [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
   );
 
   return (
@@ -130,7 +91,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         issuesMap={issueMap}
         displayProperties={displayProperties}
         group_by={group_by}
-        handleIssues={handleIssues}
+        updateIssue={updateIssue}
         quickActions={renderQuickActions}
         issueIds={issueIds}
         showEmptyGroup={showEmptyGroup}
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index cc04ed71620..ce3e07fdb65 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -1,27 +1,27 @@
 import { observer } from "mobx-react-lite";
+import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 // components
-import { IssueProperties } from "../properties/all-properties";
 // hooks
-import { useApplication, useIssueDetail, useProject } from "hooks/store";
 // ui
 import { Spinner, Tooltip, ControlLink } from "@plane/ui";
 // helper
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
-import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
-import { EIssueActions } from "../types";
+import { IssueProperties } from "../properties/all-properties";
 
 interface IssueBlockProps {
   issueId: string;
   issuesMap: TIssueMap;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
 }
 
 export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
-  const { issuesMap, issueId, handleIssues, quickActions, displayProperties, canEditProperties } = props;
+  const { issuesMap, issueId, updateIssue, quickActions, displayProperties, canEditProperties } = props;
   // hooks
   const {
     router: { workspaceSlug },
@@ -29,10 +29,6 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const { getProjectIdentifierById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
 
-  const updateIssue = async (issueToUpdate: TIssue) => {
-    await handleIssues(issueToUpdate, EIssueActions.UPDATE);
-  };
-
   const handleIssuePeekOverview = (issue: TIssue) =>
     workspaceSlug &&
     issue &&
@@ -41,7 +37,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
 
   const issue = issuesMap[issueId];
-
+  const { isMobile } = usePlatformOS();
   if (!issue) return null;
 
   const canEditIssueProperties = canEditProperties(issue.project_id);
@@ -49,53 +45,62 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
 
   return (
     <div
-      className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
-        "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
-        "last:border-b-transparent": peekIssue?.issueId !== issue.id,
-      })}
-    >
-      {displayProperties && displayProperties?.key && (
-        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-          {projectIdentifier}-{issue.sequence_id}
-        </div>
-      )}
-
-      {issue?.tempId !== undefined && (
-        <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+      className={cn(
+        "min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
+        {
+          "border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
+          "last:border-b-transparent": peekIssue?.issueId !== issue.id,
+        }
       )}
+    >
+      <div className="flex">
+        <div className="flex flex-grow items-center gap-3">
+          {displayProperties && displayProperties?.key && (
+            <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
+              {projectIdentifier}-{issue.sequence_id}
+            </div>
+          )}
 
-      {issue?.is_draft ? (
-        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-          <span>{issue.name}</span>
-        </Tooltip>
-      ) : (
-        <ControlLink
-          href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
-            issue.id
-          }`}
-          target="_blank"
-          onClick={() => handleIssuePeekOverview(issue)}
-          className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
-          disabled={!!issue?.tempId}
-        >
-          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-            <span>{issue.name}</span>
-          </Tooltip>
-        </ControlLink>
-      )}
+          {issue?.tempId !== undefined && (
+            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+          )}
 
-      <div className="ml-auto flex flex-shrink-0 items-center gap-2">
+          {issue?.is_draft ? (
+            <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+              <span>{issue.name}</span>
+            </Tooltip>
+          ) : (
+            <ControlLink
+              href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
+                issue.id
+              }`}
+              target="_blank"
+              onClick={() => handleIssuePeekOverview(issue)}
+              className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+              disabled={!!issue?.tempId}
+            >
+              <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+                <span>{issue.name}</span>
+              </Tooltip>
+            </ControlLink>
+          )}
+        </div>
+        {!issue?.tempId && (
+          <div className="block md:hidden border border-custom-border-300 rounded ">{quickActions(issue)}</div>
+        )}
+      </div>
+      <div className="ml-0 md:ml-auto flex flex-wrap  md:flex-shrink-0 items-center gap-2">
         {!issue?.tempId ? (
           <>
             <IssueProperties
-              className="relative flex items-center gap-2 whitespace-nowrap"
+              className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
               issue={issue}
               isReadOnly={!canEditIssueProperties}
-              handleIssues={updateIssue}
+              updateIssue={updateIssue}
               displayProperties={displayProperties}
               activeLayout="List"
             />
-            {quickActions(issue)}
+            <div className="hidden md:block">{quickActions(issue)}</div>
           </>
         ) : (
           <div className="h-4 w-4">
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index d3c8d14061e..0a3bf13d4dd 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -1,23 +1,22 @@
 import { FC, MutableRefObject } from "react";
 // components
-import { IssueBlock } from "components/issues";
-// types
 import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
-import { EIssueActions } from "../types";
-import RenderIfVisible from "components/core/render-if-visible-HOC";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { IssueBlock } from "@/components/issues";
+// types
 
 interface Props {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
   canEditProperties: (projectId: string | undefined) => boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
   containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
-  const { issueIds, issuesMap, handleIssues, quickActions, displayProperties, canEditProperties, containerRef } = props;
+  const { issueIds, issuesMap, updateIssue, quickActions, displayProperties, canEditProperties, containerRef } = props;
 
   return (
     <div className="relative h-full w-full">
@@ -35,7 +34,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
               <IssueBlock
                 issueId={issueId}
                 issuesMap={issuesMap}
-                handleIssues={handleIssues}
+                updateIssue={updateIssue}
                 quickActions={quickActions}
                 canEditProperties={canEditProperties}
                 displayProperties={displayProperties}
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index c6f82c2be94..2fcadaa130d 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -1,10 +1,5 @@
 import { useRef } from "react";
 // components
-import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
-import { HeaderGroupByCard } from "./headers/group-by-card";
-// hooks
-import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "hooks/store";
-// types
 import {
   GroupByColumnTypes,
   TGroupedIssues,
@@ -14,16 +9,19 @@ import {
   TUnGroupedIssues,
   IGroupByColumn,
 } from "@plane/types";
-import { EIssueActions } from "../types";
-// constants
-import { TCreateModalStoreTypes } from "constants/issue";
-import { getGroupByColumns } from "../utils";
+import { IssueBlocksList, ListQuickAddIssueForm } from "@/components/issues";
+// hooks
+import { EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
+// utils
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
+import { HeaderGroupByCard } from "./headers/group-by-card";
 
 export interface IGroupByList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
   group_by: string | null;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
   enableIssueQuickAdd: boolean;
@@ -36,7 +34,7 @@ export interface IGroupByList {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   disableIssueCreation?: boolean;
-  storeType: TCreateModalStoreTypes;
+  storeType: EIssuesStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   viewId?: string;
   isCompletedCycle?: boolean;
@@ -47,7 +45,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     issueIds,
     issuesMap,
     group_by,
-    handleIssues,
+    updateIssue,
     quickActions,
     displayProperties,
     enableIssueQuickAdd,
@@ -66,7 +64,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const label = useLabel();
   const projectState = useProjectState();
   const cycle = useCycle();
-  const _module = useModule();
+  const projectModule = useModule();
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -74,11 +72,12 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     group_by as GroupByColumnTypes,
     project,
     cycle,
-    _module,
+    projectModule,
     label,
     projectState,
     member,
-    true
+    true,
+    isWorkspaceLevel(storeType)
   );
 
   if (!groups) return null;
@@ -98,6 +97,10 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
         preloadedData = { ...preloadedData, label_ids: [value] };
       } else if (groupByKey === "assignees" && value != "None") {
         preloadedData = { ...preloadedData, assignee_ids: [value] };
+      } else if (groupByKey === "cycle" && value != "None") {
+        preloadedData = { ...preloadedData, cycle_id: value };
+      } else if (groupByKey === "module" && value != "None") {
+        preloadedData = { ...preloadedData, module_ids: [value] };
       } else if (groupByKey === "created_by") {
         preloadedData = { ...preloadedData };
       } else {
@@ -119,7 +122,10 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div ref={containerRef} className="relative overflow-auto h-full w-full vertical-scrollbar scrollbar-lg">
+    <div
+      ref={containerRef}
+      className="vertical-scrollbar scrollbar-lg relative h-full w-full overflow-auto vertical-scrollbar-margin-top-md"
+    >
       {groups &&
         groups.length > 0 &&
         groups.map(
@@ -142,7 +148,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                   <IssueBlocksList
                     issueIds={is_list ? issueIds || 0 : issueIds?.[_list.id] || 0}
                     issuesMap={issuesMap}
-                    handleIssues={handleIssues}
+                    updateIssue={updateIssue}
                     quickActions={quickActions}
                     displayProperties={displayProperties}
                     canEditProperties={canEditProperties}
@@ -170,7 +176,7 @@ export interface IList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
   group_by: string | null;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
   showEmptyGroup: boolean;
@@ -184,7 +190,7 @@ export interface IList {
   ) => Promise<TIssue | undefined>;
   viewId?: string;
   disableIssueCreation?: boolean;
-  storeType: TCreateModalStoreTypes;
+  storeType: EIssuesStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   isCompletedCycle?: boolean;
 }
@@ -194,7 +200,7 @@ export const List: React.FC<IList> = (props) => {
     issueIds,
     issuesMap,
     group_by,
-    handleIssues,
+    updateIssue,
     quickActions,
     quickAddCallback,
     viewId,
@@ -214,7 +220,7 @@ export const List: React.FC<IList> = (props) => {
         issueIds={issueIds as TUnGroupedIssues}
         issuesMap={issuesMap}
         group_by={group_by}
-        handleIssues={handleIssues}
+        updateIssue={updateIssue}
         quickActions={quickActions}
         displayProperties={displayProperties}
         enableIssueQuickAdd={enableIssueQuickAdd}
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
index 8d9164b3767..3d089e42e0f 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -1,19 +1,19 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // lucide icons
 import { CircleDashed, Plus } from "lucide-react";
+import { TIssue, ISearchIssueResponse } from "@plane/types";
 // components
-import { CreateUpdateIssueModal } from "components/issues";
-import { ExistingIssuesListModal } from "components/core";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { ExistingIssuesListModal } from "@/components/core";
+import { CreateUpdateIssueModal } from "@/components/issues";
+// ui
 // mobx
-import { observer } from "mobx-react-lite";
 // hooks
-import { useEventTracker } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useEventTracker } from "@/hooks/store";
 // types
-import { TIssue, ISearchIssueResponse } from "@plane/types";
-import useToast from "hooks/use-toast";
-import { useState } from "react";
-import { TCreateModalStoreTypes } from "constants/issue";
 
 interface IHeaderGroupByCard {
   icon?: React.ReactNode;
@@ -21,7 +21,7 @@ interface IHeaderGroupByCard {
   count: number;
   issuePayload: Partial<TIssue>;
   disableIssueCreation?: boolean;
-  storeType: TCreateModalStoreTypes;
+  storeType: EIssuesStoreType;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
 }
 
@@ -38,8 +38,6 @@ export const HeaderGroupByCard = observer(
 
     const isDraftIssue = router.pathname.includes("draft-issue");
 
-    const { setToastAlert } = useToast();
-
     const renderExistingIssueModal = moduleId || cycleId;
     const ExistingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
 
@@ -49,10 +47,16 @@ export const HeaderGroupByCard = observer(
       const issues = data.map((i) => i.id);
 
       try {
-        addIssuesToView && addIssuesToView(issues);
+        await addIssuesToView?.(issues);
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Issues added to the cycle successfully.",
+        });
       } catch (error) {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Selected issues could not be added to the cycle. Please try again.",
         });
@@ -66,8 +70,8 @@ export const HeaderGroupByCard = observer(
             {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
           </div>
 
-          <div className="flex w-full flex-row items-center gap-1">
-            <div className="line-clamp-1 font-medium text-custom-text-100">{title}</div>
+          <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+            <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
             <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
           </div>
 
diff --git a/web/components/issues/issue-layouts/list/list-view-types.d.ts b/web/components/issues/issue-layouts/list/list-view-types.d.ts
index f435d0639a3..f38f52b9c3c 100644
--- a/web/components/issues/issue-layouts/list/list-view-types.d.ts
+++ b/web/components/issues/issue-layouts/list/list-view-types.d.ts
@@ -1,3 +1,4 @@
+import { Placement } from "@popperjs/core";
 import { TIssue } from "@plane/types";
 
 export interface IQuickActionProps {
@@ -10,4 +11,5 @@ export interface IQuickActionProps {
   customActionButton?: React.ReactElement;
   portalElement?: HTMLDivElement | null;
   readOnly?: boolean;
+  placements?: Placement;
 }
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index 8d1ce6d9c54..a07154bfc09 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -1,19 +1,20 @@
-import { FC, useEffect, useState, useRef, use } from "react";
+import { FC, useEffect, useState, useRef } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { PlusIcon } from "lucide-react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useEventTracker, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useKeypress from "hooks/use-keypress";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// constants
 import { TIssue, IProject } from "@plane/types";
+// hooks
+import { setPromiseToast } from "@plane/ui";
+import { ISSUE_CREATED } from "@/constants/event-tracker";
+import { createIssuePayload } from "@/helpers/issue.helper";
+import { useEventTracker, useProject } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+// ui
 // types
-import { createIssuePayload } from "helpers/issue.helper";
+// helper
 // constants
-import { ISSUE_CREATED } from "constants/event-tracker";
 
 interface IInputProps {
   formKey: string;
@@ -77,7 +78,6 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
 
   useKeypress("Escape", handleClose);
   useOutsideClickDetector(ref, handleClose);
-  const { setToastAlert } = useToast();
 
   const {
     reset,
@@ -101,31 +101,35 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
       ...formData,
     });
 
-    try {
-      quickAddCallback &&
-        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
+    if (quickAddCallback) {
+      const quickAddPromise = quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId);
+      setPromiseToast<any>(quickAddPromise, {
+        loading: "Adding issue...",
+        success: {
+          title: "Success!",
+          message: () => "Issue created successfully.",
+        },
+        error: {
+          title: "Error!",
+          message: (err) => err?.message || "Some error occurred. Please try again.",
+        },
+      });
+
+      await quickAddPromise
+        .then((res) => {
           captureIssueEvent({
             eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "List quick add" },
             path: router.asPath,
           });
-        }));
-      setToastAlert({
-        type: "success",
-        title: "Success!",
-        message: "Issue created successfully.",
-      });
-    } catch (err: any) {
-      captureIssueEvent({
-        eventName: ISSUE_CREATED,
-        payload: { ...payload, state: "FAILED", element: "List quick add" },
-        path: router.asPath,
-      });
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: err?.message || "Some error occurred. Please try again.",
-      });
+        })
+        .catch(() => {
+          captureIssueEvent({
+            eventName: ISSUE_CREATED,
+            payload: { ...payload, state: "FAILED", element: "List quick add" },
+            path: router.asPath,
+          });
+        });
     }
   };
 
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
index 6e70d00d029..a1ab6becb52 100644
--- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -1,47 +1,20 @@
-import { FC, useMemo } from "react";
-import { useRouter } from "next/router";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues } from "hooks/store";
+import { ArchivedIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { ArchivedIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
 // constants
 import { BaseListRoot } from "../base-list-root";
-import { EIssueActions } from "../../types";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueListLayout: FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug, projectId, issue.id);
-      },
-      [EIssueActions.RESTORE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.restoreIssue(workspaceSlug, projectId, issue.id);
-      },
-    }),
-    [issues, workspaceSlug, projectId]
-  );
-
   const canEditPropertiesBasedOnProject = () => false;
 
   return (
     <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
       QuickActions={ArchivedIssueQuickActions}
-      issueActions={issueActions}
-      storeType={EIssuesStoreType.PROJECT}
+      storeType={EIssuesStoreType.ARCHIVED}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
     />
   );
diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
index 5c15ebe602e..863921e7def 100644
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -1,16 +1,14 @@
-import React, { useCallback, useMemo } from "react";
-import { useRouter } from "next/router";
+import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useCycle, useIssues } from "hooks/store";
+import { CycleIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useIssues } from "@/hooks/store";
 // components
-import { CycleIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
 // constants
 import { BaseListRoot } from "../base-list-root";
-import { EIssueActions } from "../../types";
-import { EIssuesStoreType } from "constants/issue";
 
 export interface ICycleListLayout {}
 
@@ -18,34 +16,9 @@ export const CycleListLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
   // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { issues } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCompletedCycleIds } = useCycle();
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, cycleId.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.removeIssueFromCycle(workspaceSlug.toString(), issue.project_id, cycleId.toString(), issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        await issues.archiveIssue(workspaceSlug.toString(), issue.project_id, issue.id, cycleId.toString());
-      },
-    }),
-    [issues, workspaceSlug, cycleId]
-  );
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
 
@@ -61,10 +34,7 @@ export const CycleListLayout: React.FC = observer(() => {
 
   return (
     <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
       QuickActions={CycleIssueQuickActions}
-      issueActions={issueActions}
       viewId={cycleId?.toString()}
       storeType={EIssuesStoreType.CYCLE}
       addIssuesToView={addIssuesToView}
diff --git a/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
index e11971874a9..9911b8ed4bd 100644
--- a/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
@@ -1,49 +1,19 @@
-import { FC, useMemo } from "react";
-import { useRouter } from "next/router";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useIssues } from "hooks/store";
+import { DraftIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
 // constants
 import { BaseListRoot } from "../base-list-root";
-import { EIssuesStoreType } from "constants/issue";
 
 export const DraftIssueListLayout: FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   if (!workspaceSlug || !projectId) return null;
 
-  // store
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug, projectId, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug, projectId, issue.id);
-      },
-    }),
-    [issues, workspaceSlug, projectId]
-  );
-
-  return (
-    <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
-      QuickActions={ProjectIssueQuickActions}
-      issueActions={issueActions}
-      storeType={EIssuesStoreType.PROJECT}
-    />
-  );
+  return <BaseListRoot QuickActions={DraftIssueQuickActions} storeType={EIssuesStoreType.DRAFT} />;
 });
diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx
index 95c62d34cdb..541c4189224 100644
--- a/web/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -1,16 +1,14 @@
-import React, { useMemo } from "react";
-import { useRouter } from "next/router";
+import React from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // mobx store
-import { useIssues } from "hooks/store";
+import { ModuleIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // components
-import { ModuleIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
 // constants
 import { BaseListRoot } from "../base-list-root";
-import { EIssuesStoreType } from "constants/issue";
 
 export interface IModuleListLayout {}
 
@@ -18,40 +16,11 @@ export const ModuleListLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.removeIssueFromModule(workspaceSlug.toString(), issue.project_id, moduleId.toString(), issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        await issues.archiveIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
-      },
-    }),
-    [issues, workspaceSlug, moduleId]
-  );
+  const { issues } = useIssues(EIssuesStoreType.MODULE);
 
   return (
     <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
       QuickActions={ModuleIssueQuickActions}
-      issueActions={issueActions}
       viewId={moduleId?.toString()}
       storeType={EIssuesStoreType.MODULE}
       addIssuesToView={(issueIds: string[]) => {
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
index fa4a05bbcbb..d353cd6ccae 100644
--- a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -1,50 +1,20 @@
-import { FC, useMemo } from "react";
-import { useRouter } from "next/router";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues, useUser } from "hooks/store";
+import { ProjectIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useUser } from "@/hooks/store";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
 // constants
 import { BaseListRoot } from "../base-list-root";
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ProfileIssuesListLayout: FC = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug, userId } = router.query as { workspaceSlug: string; userId: string };
-  // store hooks
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROFILE);
-
   const {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !userId) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue, userId);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !userId) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id, userId);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !userId) return;
-
-        await issues.archiveIssue(workspaceSlug, issue.project_id, issue.id, userId);
-      },
-    }),
-    [issues, workspaceSlug, userId]
-  );
-
   const canEditPropertiesBasedOnProject = (projectId: string) => {
     const currentProjectRole = currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId];
 
@@ -53,10 +23,7 @@ export const ProfileIssuesListLayout: FC = observer(() => {
 
   return (
     <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
       QuickActions={ProjectIssueQuickActions}
-      issueActions={issueActions}
       storeType={EIssuesStoreType.PROFILE}
       canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
     />
diff --git a/web/components/issues/issue-layouts/list/roots/project-root.tsx b/web/components/issues/issue-layouts/list/roots/project-root.tsx
index 9e1b5830b70..0eb8d06aff5 100644
--- a/web/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -1,55 +1,19 @@
-import { FC, useMemo } from "react";
-import { useRouter } from "next/router";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useIssues } from "hooks/store";
+import { ProjectIssueQuickActions } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { ProjectIssueQuickActions } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../../types";
 // constants
 import { BaseListRoot } from "../base-list-root";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ListLayout: FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = router.query;
 
   if (!workspaceSlug || !projectId) return null;
 
-  // store
-  const { issuesFilter, issues } = useIssues(EIssuesStoreType.PROJECT);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug, projectId, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug, projectId, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.archiveIssue(workspaceSlug, projectId, issue.id);
-      },
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [issues]
-  );
-
-  return (
-    <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
-      QuickActions={ProjectIssueQuickActions}
-      issueActions={issueActions}
-      storeType={EIssuesStoreType.PROJECT}
-    />
-  );
+  return <BaseListRoot QuickActions={ProjectIssueQuickActions} storeType={EIssuesStoreType.PROJECT} />;
 });
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
index 5ecfd6da28e..d11f74b281a 100644
--- a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -2,30 +2,14 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // store
-import { useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 // types
-import { EIssueActions } from "../../types";
-import { TIssue } from "@plane/types";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseListRoot } from "../base-list-root";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
-
-export interface IViewListLayout {
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-  };
-}
-
-export const ProjectViewListLayout: React.FC<IViewListLayout> = observer((props) => {
-  const { issueActions } = props;
-  // store
-  const { issuesFilter, issues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
 
+export const ProjectViewListLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
 
@@ -33,10 +17,7 @@ export const ProjectViewListLayout: React.FC<IViewListLayout> = observer((props)
 
   return (
     <BaseListRoot
-      issuesFilter={issuesFilter}
-      issues={issues}
       QuickActions={ProjectIssueQuickActions}
-      issueActions={issueActions}
       storeType={EIssuesStoreType.PROJECT_VIEW}
       viewId={viewId?.toString()}
     />
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index 776a1cd46f2..72614079a2a 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,14 +1,11 @@
 import { useCallback, useMemo } from "react";
+import xor from "lodash/xor";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
-import xor from "lodash/xor";
+import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
 // hooks
-import { useEventTracker, useEstimate, useLabel, useIssues, useProjectState } from "hooks/store";
-// components
-import { IssuePropertyLabels } from "../properties/labels";
 import { Tooltip } from "@plane/ui";
-import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import {
   DateDropdown,
   EstimateDropdown,
@@ -17,20 +14,28 @@ import {
   ModuleDropdown,
   CycleDropdown,
   StateDropdown,
-} from "components/dropdowns";
+} from "@/components/dropdowns";
+// helpers
+
+// types
+// constants
+import { ISSUE_UPDATED } from "@/constants/event-tracker";
+import { EIssuesStoreType } from "@/constants/issue";
+import { cn } from "@/helpers/common.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { useEventTracker, useEstimate, useLabel, useIssues, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { IssuePropertyLabels } from "../properties/labels";
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { shouldHighlightIssueDueDate } from "helpers/issue.helper";
-import { cn } from "helpers/common.helper";
 // types
-import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
 // constants
-import { ISSUE_UPDATED } from "constants/event-tracker";
-import { EIssuesStoreType } from "constants/issue";
 
 export interface IIssueProperties {
   issue: TIssue;
-  handleIssues: (issue: TIssue) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   displayProperties: IIssueDisplayProperties | undefined;
   isReadOnly: boolean;
   className: string;
@@ -38,7 +43,7 @@ export interface IIssueProperties {
 }
 
 export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
-  const { issue, handleIssues, displayProperties, activeLayout, isReadOnly, className } = props;
+  const { issue, updateIssue, displayProperties, activeLayout, isReadOnly, className } = props;
   // store hooks
   const { labelMap } = useLabel();
   const { captureIssueEvent } = useEventTracker();
@@ -50,9 +55,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   } = useIssues(EIssuesStoreType.CYCLE);
   const { areEstimatesEnabledForCurrentProject } = useEstimate();
   const { getStateById } = useProjectState();
+  const { isMobile } = usePlatformOS();
   // router
   const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId } = router.query;
+  const { workspaceSlug } = router.query;
   const currentLayout = `${activeLayout} layout`;
   // derived values
   const stateDetails = getStateById(issue.state_id);
@@ -80,59 +86,63 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   );
 
   const handleState = (stateId: string) => {
-    handleIssues({ ...issue, state_id: stateId }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "state",
-          change_details: stateId,
-        },
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { state_id: stateId }).then(() => {
+        captureIssueEvent({
+          eventName: ISSUE_UPDATED,
+          payload: { ...issue, state: "SUCCESS", element: currentLayout },
+          path: router.asPath,
+          updates: {
+            changed_property: "state",
+            change_details: stateId,
+          },
+        });
       });
-    });
   };
 
   const handlePriority = (value: TIssuePriorities) => {
-    handleIssues({ ...issue, priority: value }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "priority",
-          change_details: value,
-        },
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { priority: value }).then(() => {
+        captureIssueEvent({
+          eventName: ISSUE_UPDATED,
+          payload: { ...issue, state: "SUCCESS", element: currentLayout },
+          path: router.asPath,
+          updates: {
+            changed_property: "priority",
+            change_details: value,
+          },
+        });
       });
-    });
   };
 
   const handleLabel = (ids: string[]) => {
-    handleIssues({ ...issue, label_ids: ids }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "labels",
-          change_details: ids,
-        },
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { label_ids: ids }).then(() => {
+        captureIssueEvent({
+          eventName: ISSUE_UPDATED,
+          payload: { ...issue, state: "SUCCESS", element: currentLayout },
+          path: router.asPath,
+          updates: {
+            changed_property: "labels",
+            change_details: ids,
+          },
+        });
       });
-    });
   };
 
   const handleAssignee = (ids: string[]) => {
-    handleIssues({ ...issue, assignee_ids: ids }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "assignees",
-          change_details: ids,
-        },
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { assignee_ids: ids }).then(() => {
+        captureIssueEvent({
+          eventName: ISSUE_UPDATED,
+          payload: { ...issue, state: "SUCCESS", element: currentLayout },
+          path: router.asPath,
+          updates: {
+            changed_property: "assignees",
+            change_details: ids,
+          },
+        });
       });
-    });
   };
 
   const handleModule = useCallback(
@@ -175,50 +185,57 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   );
 
   const handleStartDate = (date: Date | null) => {
-    handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "start_date",
-          change_details: date ? renderFormattedPayloadDate(date) : null,
-        },
-      });
-    });
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null }).then(
+        () => {
+          captureIssueEvent({
+            eventName: ISSUE_UPDATED,
+            payload: { ...issue, state: "SUCCESS", element: currentLayout },
+            path: router.asPath,
+            updates: {
+              changed_property: "start_date",
+              change_details: date ? renderFormattedPayloadDate(date) : null,
+            },
+          });
+        }
+      );
   };
 
   const handleTargetDate = (date: Date | null) => {
-    handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "target_date",
-          change_details: date ? renderFormattedPayloadDate(date) : null,
-        },
-      });
-    });
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null }).then(
+        () => {
+          captureIssueEvent({
+            eventName: ISSUE_UPDATED,
+            payload: { ...issue, state: "SUCCESS", element: currentLayout },
+            path: router.asPath,
+            updates: {
+              changed_property: "target_date",
+              change_details: date ? renderFormattedPayloadDate(date) : null,
+            },
+          });
+        }
+      );
   };
 
   const handleEstimate = (value: number | null) => {
-    handleIssues({ ...issue, estimate_point: value }).then(() => {
-      captureIssueEvent({
-        eventName: ISSUE_UPDATED,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: router.asPath,
-        updates: {
-          changed_property: "estimate_point",
-          change_details: value,
-        },
+    updateIssue &&
+      updateIssue(issue.project_id, issue.id, { estimate_point: value }).then(() => {
+        captureIssueEvent({
+          eventName: ISSUE_UPDATED,
+          payload: { ...issue, state: "SUCCESS", element: currentLayout },
+          path: router.asPath,
+          updates: {
+            changed_property: "estimate_point",
+            change_details: value,
+          },
+        });
       });
-    });
   };
 
   const redirectToIssueDetail = () => {
     router.push({
-      pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
+      pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
         issue.id
       }`,
       hash: "sub-issues",
@@ -229,10 +246,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
 
   const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
 
-  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  const minDate = getDate(issue.start_date);
   minDate?.setDate(minDate.getDate());
 
-  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  const maxDate = getDate(issue.target_date);
   maxDate?.setDate(maxDate.getDate());
 
   return (
@@ -242,6 +259,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state">
         <div className="h-5">
           <StateDropdown
+            buttonContainerClassName="truncate max-w-40"
             value={issue.state_id}
             onChange={handleState}
             projectId={issue.project_id}
@@ -284,7 +302,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
           <DateDropdown
             value={issue.start_date ?? null}
             onChange={handleStartDate}
-            maxDate={maxDate ?? undefined}
+            maxDate={maxDate}
             placeholder="Start date"
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
@@ -300,7 +318,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
           <DateDropdown
             value={issue?.target_date ?? null}
             onChange={handleTargetDate}
-            minDate={minDate ?? undefined}
+            minDate={minDate}
             placeholder="Due date"
             icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
@@ -323,43 +341,44 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             multiple
             buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "border-without-text"}
             buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
+            showTooltip={issue?.assignee_ids?.length === 0}
+            placeholder="Assignees"
+            tooltipContent=""
           />
         </div>
       </WithDisplayPropertiesHOC>
 
       {/* modules */}
-      {moduleId === undefined && (
-        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
-          <div className="h-5">
-            <ModuleDropdown
-              projectId={issue?.project_id}
-              value={issue?.module_ids ?? []}
-              onChange={handleModule}
-              disabled={isReadOnly}
-              multiple
-              buttonVariant="border-with-text"
-              showCount={true}
-              showTooltip
-            />
-          </div>
-        </WithDisplayPropertiesHOC>
-      )}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
+        <div className="h-5">
+          <ModuleDropdown
+            buttonContainerClassName="truncate max-w-40"
+            projectId={issue?.project_id}
+            value={issue?.module_ids ?? []}
+            onChange={handleModule}
+            disabled={isReadOnly}
+            multiple
+            buttonVariant="border-with-text"
+            showCount
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
 
       {/* cycles */}
-      {cycleId === undefined && (
-        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
-          <div className="h-5 truncate">
-            <CycleDropdown
-              projectId={issue?.project_id}
-              value={issue?.cycle_id}
-              onChange={handleCycle}
-              disabled={isReadOnly}
-              buttonVariant="border-with-text"
-              showTooltip
-            />
-          </div>
-        </WithDisplayPropertiesHOC>
-      )}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
+        <div className="h-5">
+          <CycleDropdown
+            buttonContainerClassName="truncate max-w-40"
+            projectId={issue?.project_id}
+            value={issue?.cycle_id}
+            onChange={handleCycle}
+            disabled={isReadOnly}
+            buttonVariant="border-with-text"
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
 
       {/* estimates */}
       {areEstimatesEnabledForCurrentProject && (
@@ -384,7 +403,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="sub_issue_count"
         shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!issue.sub_issues_count}
       >
-        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`} isMobile={isMobile}>
           <div
             onClick={issue.sub_issues_count ? redirectToIssueDetail : () => {}}
             className={cn(
@@ -406,7 +425,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="attachment_count"
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
-        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`} isMobile={isMobile}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.attachment_count}</div>
@@ -420,7 +439,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="link"
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
-        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`} isMobile={isMobile}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.link_count}</div>
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 0c1091d39dd..5530e6a0175 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -1,17 +1,18 @@
 import { Fragment, useEffect, useRef, useState } from "react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Tags } from "lucide-react";
-// hooks
-import { useApplication, useLabel } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
 import { Combobox } from "@headlessui/react";
+import { IIssueLabel } from "@plane/types";
+// hooks
 import { Tooltip } from "@plane/ui";
+import { useApplication, useLabel } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
 // types
-import { Placement } from "@popperjs/core";
-import { IIssueLabel } from "@plane/types";
 
 export interface IIssuePropertyLabels {
   projectId: string | null;
@@ -56,13 +57,13 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = useState<Boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   // store hooks
   const {
     router: { workspaceSlug },
   } = useApplication();
   const { fetchProjectLabels, getProjectLabels } = useLabel();
-
+  const { isMobile } = usePlatformOS();
   const storeLabels = getProjectLabels(projectId);
 
   const onOpen = () => {
@@ -149,7 +150,13 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             {projectLabels
               ?.filter((l) => value.includes(l?.id))
               .map((label) => (
-                <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label?.name ?? ""}>
+                <Tooltip
+                  key={label.id}
+                  position="top"
+                  tooltipHeading="Labels"
+                  tooltipContent={label?.name ?? ""}
+                  isMobile={isMobile}
+                >
                   <div
                     key={label?.id}
                     className={`flex overflow-hidden hover:bg-custom-background-80 ${
@@ -176,6 +183,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             }`}
           >
             <Tooltip
+              isMobile={isMobile}
               position="top"
               tooltipHeading="Labels"
               tooltipContent={projectLabels
@@ -191,7 +199,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </div>
         )
       ) : (
-        <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
+        <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None" isMobile={isMobile}>
           <div
             className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
               noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
@@ -224,8 +232,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             disabled
               ? "cursor-not-allowed text-custom-text-200"
               : value.length <= maxRender
-              ? "cursor-pointer"
-              : "cursor-pointer hover:bg-custom-background-80"
+                ? "cursor-pointer"
+                : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
           onClick={handleOnClick}
         >
diff --git a/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx b/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
index d7d32b85d02..937c1498311 100644
--- a/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
+++ b/web/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
@@ -1,5 +1,5 @@
-import { observer } from "mobx-react-lite";
 import { ReactNode } from "react";
+import { observer } from "mobx-react-lite";
 import { IIssueDisplayProperties } from "@plane/types";
 
 interface IWithDisplayPropertiesHOC {
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 20d21dc5f62..86dbe760b03 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -1,22 +1,23 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
-import { ArchiveIcon, CustomMenu } from "@plane/ui";
+import omit from "lodash/omit";
 import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
-import omit from "lodash/omit";
+import { TIssue } from "@plane/types";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker, useProjectState } from "hooks/store";
+import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+// ui
+// components
+import { EIssuesStoreType } from "@/constants/issue";
+import { STATE_GROUPS } from "@/constants/state";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useEventTracker, useProjectState } from "@/hooks/store";
 // components
-import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 // types
-import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
-import { STATE_GROUPS } from "constants/state";
 
 export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
   const {
@@ -39,8 +40,6 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
   // store hooks
   const { setTrackElement } = useEventTracker();
   const { getStateById } = useProjectState();
-  // toast alert
-  const { setToastAlert } = useToast();
   // derived values
   const stateDetails = getStateById(issue.state_id);
   const isEditingAllowed = !readOnly;
@@ -54,8 +53,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
   const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
   const handleCopyIssueLink = () =>
     copyUrlToClipboard(issueLink).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
@@ -91,7 +90,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         }}
         data={issueToEdit ?? duplicateIssuePayload}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
         }}
         storeType={EIssuesStoreType.PROJECT}
       />
@@ -100,6 +99,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         placement="bottom-start"
         customButton={customActionButton}
         portalElement={portalElement}
+        maxHeight="lg"
         closeOnSelect
         ellipsis
       >
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
index 01e9b492131..d996ee5988e 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -1,18 +1,20 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
-import { CustomMenu } from "@plane/ui";
-import { ExternalLink, Link, RotateCcw, Trash2 } from "lucide-react";
+import { ArchiveRestoreIcon, ExternalLink, Link, Trash2 } from "lucide-react";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues, useUser } from "hooks/store";
+import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { DeleteIssueModal } from "@/components/issues";
+// ui
+// components
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useEventTracker, useIssues, useUser } from "@/hooks/store";
 // components
-import { DeleteIssueModal } from "components/issues";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleRestore, customActionButton, portalElement, readOnly = false } = props;
@@ -32,16 +34,14 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   // auth
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
   const isRestoringAllowed = handleRestore && isEditingAllowed;
-  // toast alert
-  const { setToastAlert } = useToast();
 
-  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/archived-issues/${issue.id}`;
+  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/archives/issues/${issue.id}`;
 
   const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
   const handleCopyIssueLink = () =>
     copyUrlToClipboard(issueLink).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
@@ -60,13 +60,14 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         placement="bottom-start"
         customButton={customActionButton}
         portalElement={portalElement}
+        maxHeight="lg"
         closeOnSelect
         ellipsis
       >
         {isRestoringAllowed && (
           <CustomMenu.MenuItem onClick={handleRestore}>
             <div className="flex items-center gap-2">
-              <RotateCcw className="h-3 w-3" />
+              <ArchiveRestoreIcon className="h-3 w-3" />
               Restore
             </div>
           </CustomMenu.MenuItem>
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
index 8cd5dd56f9a..eed0e0dc613 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -1,23 +1,25 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
-import { ArchiveIcon, CustomMenu } from "@plane/ui";
-import { observer } from "mobx-react";
-import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
 import omit from "lodash/omit";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues, useProjectState, useUser } from "hooks/store";
+// ui
+import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
+import { TIssue } from "@plane/types";
+import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// icons
+// components
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { STATE_GROUPS } from "@/constants/state";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useEventTracker, useIssues, useProjectState, useUser } from "@/hooks/store";
 // components
-import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 // types
-import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
-import { STATE_GROUPS } from "constants/state";
 
 export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
   const {
@@ -29,6 +31,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     customActionButton,
     portalElement,
     readOnly = false,
+    placements = "bottom-start",
   } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
@@ -45,8 +48,6 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     membership: { currentProjectRole },
   } = useUser();
   const { getStateById } = useProjectState();
-  // toast alert
-  const { setToastAlert } = useToast();
   // derived values
   const stateDetails = getStateById(issue.state_id);
   // auth
@@ -64,8 +65,8 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
 
   const handleCopyIssueLink = () =>
     copyUrlToClipboard(issueLink).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
@@ -101,15 +102,16 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         }}
         data={issueToEdit ?? duplicateIssuePayload}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
         }}
         storeType={EIssuesStoreType.CYCLE}
       />
       <CustomMenu
         menuItemsClassName="z-[14]"
-        placement="bottom-start"
+        placement={placements}
         customButton={customActionButton}
         portalElement={portalElement}
+        maxHeight="lg"
         closeOnSelect
         ellipsis
       >
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
new file mode 100644
index 00000000000..9502e762325
--- /dev/null
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import omit from "lodash/omit";
+import { observer } from "mobx-react";
+// icons
+import { Pencil, Trash2 } from "lucide-react";
+// types
+import { TIssue } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+// constant
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+// hooks
+import { useEventTracker, useIssues, useUser } from "@/hooks/store";
+// types
+import { IQuickActionProps } from "../list/list-view-types";
+
+export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+  // derived values
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+  // auth
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
+  const isDeletingAllowed = isEditingAllowed;
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      is_draft: true,
+    },
+    ["id"]
+  );
+
+  return (
+    <>
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
+        }}
+        storeType={EIssuesStoreType.PROJECT}
+        isDraft
+      />
+
+      <CustomMenu
+        menuItemsClassName="z-[14]"
+        placement="bottom-start"
+        customButton={customActionButton}
+        portalElement={portalElement}
+        maxHeight="lg"
+        closeOnSelect
+        ellipsis
+      >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
+              setIssueToEdit(issue);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Pencil className="h-3 w-3" />
+              Edit
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isDeletingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
+              setDeleteIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Trash2 className="h-3 w-3" />
+              Delete
+            </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
index e3844001736..212a43f91c3 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@@ -2,4 +2,5 @@ export * from "./cycle-issue";
 export * from "./module-issue";
 export * from "./project-issue";
 export * from "./archived-issue";
+export * from "./draft-issue";
 export * from "./all-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
index 13db0e9f1db..1f155d066a9 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -1,23 +1,24 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
-import { ArchiveIcon, CustomMenu } from "@plane/ui";
-import { observer } from "mobx-react";
-import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
 import omit from "lodash/omit";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 // hooks
-import useToast from "hooks/use-toast";
-import { useIssues, useEventTracker, useUser, useProjectState } from "hooks/store";
+// ui
+import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
+import { TIssue } from "@plane/types";
+import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { STATE_GROUPS } from "@/constants/state";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useIssues, useEventTracker, useUser, useProjectState } from "@/hooks/store";
 // components
-import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 // types
-import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
-import { STATE_GROUPS } from "constants/state";
 
 export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
   const {
@@ -29,6 +30,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
     customActionButton,
     portalElement,
     readOnly = false,
+    placements = "bottom-start",
   } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
@@ -45,8 +47,6 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
     membership: { currentProjectRole },
   } = useUser();
   const { getStateById } = useProjectState();
-  // toast alert
-  const { setToastAlert } = useToast();
   // derived values
   const stateDetails = getStateById(issue.state_id);
   // auth
@@ -64,8 +64,8 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
 
   const handleCopyIssueLink = () =>
     copyUrlToClipboard(issueLink).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
@@ -101,15 +101,16 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
         }}
         data={issueToEdit ?? duplicateIssuePayload}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
         }}
         storeType={EIssuesStoreType.MODULE}
       />
       <CustomMenu
         menuItemsClassName="z-[14]"
-        placement="bottom-start"
+        placement={placements}
         customButton={customActionButton}
         portalElement={portalElement}
+        maxHeight="lg"
         closeOnSelect
         ellipsis
       >
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
index 99a8e60196b..577a3ce9951 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -1,23 +1,23 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
-import { ArchiveIcon, CustomMenu } from "@plane/ui";
-import { observer } from "mobx-react";
-import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
 import omit from "lodash/omit";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 // hooks
-import { useEventTracker, useIssues, useProjectState, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
+import { TIssue } from "@plane/types";
+import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { STATE_GROUPS } from "@/constants/state";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useEventTracker, useIssues, useProjectState, useUser } from "@/hooks/store";
+// ui
 // components
-import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 // types
-import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constant
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
-import { STATE_GROUPS } from "constants/state";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
   const {
@@ -28,6 +28,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
     customActionButton,
     portalElement,
     readOnly = false,
+    placements = "bottom-start",
   } = props;
   // router
   const router = useRouter();
@@ -54,16 +55,14 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
     !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
   const isDeletingAllowed = isEditingAllowed;
 
-  const { setToastAlert } = useToast();
-
   const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
 
   const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
 
   const handleCopyIssueLink = () =>
     copyUrlToClipboard(issueLink).then(() =>
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
@@ -102,16 +101,17 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
         }}
         data={issueToEdit ?? duplicateIssuePayload}
         onSubmit={async (data) => {
-          if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
         }}
         storeType={EIssuesStoreType.PROJECT}
         isDraft={isDraftIssue}
       />
       <CustomMenu
         menuItemsClassName="z-[14]"
-        placement="bottom-start"
+        placement={placements}
         customButton={customActionButton}
         portalElement={portalElement}
+        maxHeight="lg"
         closeOnSelect
         ellipsis
       >
diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index 3b098c8a106..ef7b02b2979 100644
--- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -1,46 +1,42 @@
-import React, { Fragment, useCallback, useMemo } from "react";
-import { useRouter } from "next/router";
+import React, { Fragment, useCallback } from "react";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-import isEmpty from "lodash/isEmpty";
-import { useTheme } from "next-themes";
+import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useGlobalView, useIssues, useProject, useUser } from "hooks/store";
-import { useWorkspaceIssueProperties } from "hooks/use-workspace-issue-properties";
 // components
-import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/issues";
-import { SpreadsheetView } from "components/issues/issue-layouts";
-import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-import { SpreadsheetLayoutLoader } from "components/ui";
+import { EmptyState } from "@/components/empty-state";
+import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "@/components/issues";
+import { SpreadsheetView } from "@/components/issues/issue-layouts";
+import { AllIssueQuickActions } from "@/components/issues/issue-layouts/quick-action-dropdowns";
+import { SpreadsheetLayoutLoader } from "@/components/ui";
 // types
-import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
-import { EIssueActions } from "../types";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { ALL_ISSUES_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { EMPTY_STATE_DETAILS, EmptyStateType } from "@/constants/empty-state";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useApplication, useEventTracker, useGlobalView, useIssues, useProject, useUser } from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
 
 export const AllIssueLayoutRoot: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
+  const { workspaceSlug, globalViewId, ...routeFilters } = router.query;
   //swr hook for fetching issue properties
   useWorkspaceIssueProperties(workspaceSlug);
   // store
   const { commandPalette: commandPaletteStore } = useApplication();
   const {
     issuesFilter: { filters, fetchFilters, updateFilters },
-    issues: { loader, groupedIssueIds, fetchIssues, updateIssue, removeIssue, archiveIssue },
+    issues: { loader, groupedIssueIds, fetchIssues },
   } = useIssues(EIssuesStoreType.GLOBAL);
+  const { updateIssue, removeIssue, archiveIssue } = useIssuesActions(EIssuesStoreType.GLOBAL);
 
   const { dataViewId, issueIds } = groupedIssueIds;
   const {
-    membership: { currentWorkspaceAllProjectsRole, currentWorkspaceRole },
-    currentUser,
+    membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
   const { fetchAllGlobalViews } = useGlobalView();
   const { workspaceProjectIds } = useProject();
@@ -48,10 +44,6 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   const isDefaultView = ["all-issues", "assigned", "created", "subscribed"].includes(groupedIssueIds.dataViewId);
   const currentView = isDefaultView ? groupedIssueIds.dataViewId : "custom-view";
-  const currentViewDetails = ALL_ISSUES_EMPTY_STATE_DETAILS[currentView as keyof typeof ALL_ISSUES_EMPTY_STATE_DETAILS];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("all-issues", currentView, isLightMode);
 
   // filter init from the query params
 
@@ -61,14 +53,10 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
       globalViewId &&
       ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
     ) {
-      const routerQueryParams = { ...router.query };
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { ["workspaceSlug"]: _workspaceSlug, ["globalViewId"]: _globalViewId, ...filters } = routerQueryParams;
-
       let issueFilters: any = {};
-      Object.keys(filters).forEach((key) => {
+      Object.keys(routeFilters).forEach((key) => {
         const filterKey: any = key;
-        const filterValue = filters[key]?.toString() || undefined;
+        const filterValue = routeFilters[key]?.toString() || undefined;
         if (
           ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet.filters.includes(filterKey) &&
           filterKey &&
@@ -77,7 +65,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
           issueFilters = { ...issueFilters, [filterKey]: filterValue.split(",") };
       });
 
-      if (!isEmpty(filters))
+      if (!isEmpty(routeFilters))
         updateFilters(
           workspaceSlug.toString(),
           undefined,
@@ -124,41 +112,6 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   const issueFilters = globalViewId ? filters?.[globalViewId.toString()] : undefined;
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        const projectId = issue.project_id;
-        if (!workspaceSlug || !projectId || !globalViewId) return;
-
-        await updateIssue(workspaceSlug.toString(), projectId, issue.id, issue, globalViewId.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        const projectId = issue.project_id;
-        if (!workspaceSlug || !projectId || !globalViewId) return;
-
-        await removeIssue(workspaceSlug.toString(), projectId, issue.id, globalViewId.toString());
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        const projectId = issue.project_id;
-        if (!workspaceSlug || !projectId || !globalViewId) return;
-
-        await archiveIssue(workspaceSlug.toString(), projectId, issue.id, globalViewId.toString());
-      },
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [updateIssue, removeIssue, workspaceSlug]
-  );
-
-  const handleIssues = useCallback(
-    async (issue: TIssue, action: EIssueActions) => {
-      if (action === EIssueActions.UPDATE) await issueActions[action]!(issue);
-      if (action === EIssueActions.DELETE) await issueActions[action]!(issue);
-      if (action === EIssueActions.ARCHIVE) await issueActions[action]!(issue);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
   const handleDisplayFiltersUpdate = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
       if (!workspaceSlug || !globalViewId) return;
@@ -179,56 +132,44 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
       <AllIssueQuickActions
         customActionButton={customActionButton}
         issue={issue}
-        handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
-        handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
-        handleArchive={async () => handleIssues(issue, EIssueActions.ARCHIVE)}
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
         portalElement={portalElement}
         readOnly={!canEditProperties(issue.project_id)}
       />
     ),
-    [canEditProperties, handleIssues]
+    [canEditProperties, removeIssue, updateIssue, archiveIssue]
   );
 
-  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
-
   if (loader === "init-loader" || !globalViewId || globalViewId !== dataViewId || !issueIds) {
     return <SpreadsheetLayoutLoader />;
   }
 
+  const emptyStateType =
+    (workspaceProjectIds ?? []).length > 0 ? `workspace-${currentView}` : EmptyStateType.WORKSPACE_NO_PROJECTS;
+
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <div className="relative h-full w-full flex flex-col">
         <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
         {issueIds.length === 0 ? (
           <EmptyState
-            image={emptyStateImage}
-            title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
-            description={
-              (workspaceProjectIds ?? []).length > 0
-                ? currentViewDetails.description
-                : "To create issues or manage your work, you need to create a project or be a part of one."
-            }
+            type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS}
             size="sm"
-            primaryButton={
+            primaryButtonOnClick={
               (workspaceProjectIds ?? []).length > 0
                 ? currentView !== "custom-view" && currentView !== "subscribed"
-                  ? {
-                      text: "Create new issue",
-                      onClick: () => {
-                        setTrackElement("All issues empty state");
-                        commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-                      },
+                  ? () => {
+                      setTrackElement("All issues empty state");
+                      commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
                     }
                   : undefined
-                : {
-                    text: "Start your first project",
-                    onClick: () => {
-                      setTrackElement("All issues empty state");
-                      commandPaletteStore.toggleCreateProjectModal(true);
-                    },
+                : () => {
+                    setTrackElement("All issues empty state");
+                    commandPaletteStore.toggleCreateProjectModal(true);
                   }
             }
-            disabled={!isEditingAllowed}
           />
         ) : (
           <Fragment>
@@ -238,7 +179,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
               handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
               issueIds={issueIds}
               quickActions={renderQuickActions}
-              handleIssues={handleIssues}
+              updateIssue={updateIssue}
               canEditProperties={canEditProperties}
               viewId={globalViewId}
             />
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
index 7db9a1e3b77..de25ec02142 100644
--- a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -1,19 +1,19 @@
 import React, { Fragment } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // mobx store
-import { useIssues } from "hooks/store";
 // components
 import {
   ArchivedIssueListLayout,
   ArchivedIssueAppliedFiltersRoot,
   ProjectArchivedEmptyState,
   IssuePeekOverview,
-} from "components/issues";
-import { EIssuesStoreType } from "constants/issue";
+} from "@/components/issues";
+import { ListLayoutLoader } from "@/components/ui";
+import { EIssuesStoreType } from "@/constants/issue";
 // ui
-import { ListLayoutLoader } from "components/ui";
+import { useIssues } from "@/hooks/store";
 
 export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
   // router
@@ -43,9 +43,8 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
 
   if (!workspaceSlug || !projectId) return <></>;
   return (
-    <div className="relative flex h-full w-full flex-col overflow-hidden">
+    <>
       <ArchivedIssueAppliedFiltersRoot />
-
       {issues?.groupedIssueIds?.length === 0 ? (
         <div className="relative h-full w-full overflow-y-auto">
           <ProjectArchivedEmptyState />
@@ -58,6 +57,6 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
           <IssuePeekOverview is_archived />
         </Fragment>
       )}
-    </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
index 759495284be..69e3dfb111b 100644
--- a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -1,12 +1,13 @@
 import React, { Fragment, useState } from "react";
-import { useRouter } from "next/router";
+import isEmpty from "lodash/isEmpty";
+import size from "lodash/size";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-import size from "lodash/size";
-import isEmpty from "lodash/isEmpty";
+import { IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useCycle, useIssues } from "hooks/store";
 // components
+import { TransferIssues, TransferIssuesModal } from "@/components/cycles";
 import {
   CycleAppliedFiltersRoot,
   CycleCalendarLayout,
@@ -16,13 +17,12 @@ import {
   CycleListLayout,
   CycleSpreadsheetLayout,
   IssuePeekOverview,
-} from "components/issues";
-import { TransferIssues, TransferIssuesModal } from "components/cycles";
-import { ActiveLoader } from "components/ui";
+} from "@/components/issues";
+import { ActiveLoader } from "@/components/ui";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useCycle, useIssues } from "@/hooks/store";
 // types
-import { IIssueFilterOptions } from "@plane/types";
 
 export const CycleLayoutRoot: React.FC = observer(() => {
   const router = useRouter();
@@ -68,7 +68,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId || !cycleId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     issuesFilter.updateFilters(
       workspaceSlug.toString(),
diff --git a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
index 02b666ceb86..b8c386b466d 100644
--- a/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
@@ -1,19 +1,19 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // hooks
-import { useIssues } from "hooks/store";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import { ActiveLoader } from "@/components/ui";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // components
+import { ProjectDraftEmptyState } from "../empty-states";
 import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
+import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
 import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
-import { ProjectDraftEmptyState } from "../empty-states";
-import { IssuePeekOverview } from "components/issues/peek-overview";
-import { ActiveLoader } from "components/ui";
 // ui
-import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 export const DraftIssueLayoutRoot: React.FC = observer(() => {
   // router
diff --git a/web/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
index 14505c65aa5..e4dfa6efb47 100644
--- a/web/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment } from "react";
-import { useRouter } from "next/router";
+import size from "lodash/size";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-import size from "lodash/size";
+import { IIssueFilterOptions } from "@plane/types";
 // mobx store
-import { useIssues } from "hooks/store";
 // components
 import {
   IssuePeekOverview,
@@ -15,12 +15,12 @@ import {
   ModuleKanBanLayout,
   ModuleListLayout,
   ModuleSpreadsheetLayout,
-} from "components/issues";
-import { ActiveLoader } from "components/ui";
+} from "@/components/issues";
+import { ActiveLoader } from "@/components/ui";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // types
-import { IIssueFilterOptions } from "@plane/types";
 
 export const ModuleLayoutRoot: React.FC = observer(() => {
   // router
@@ -59,7 +59,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     if (!workspaceSlug || !projectId || !moduleId) return;
     const newFilters: IIssueFilterOptions = {};
     Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = null;
+      newFilters[key as keyof IIssueFilterOptions] = [];
     });
     issuesFilter.updateFilters(
       workspaceSlug.toString(),
diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
index cae73610efa..37f6e46978d 100644
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -1,8 +1,10 @@
 import { FC, Fragment } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
+// ui
+import { Spinner } from "@plane/ui";
 import {
   ListLayout,
   CalendarLayout,
@@ -12,15 +14,13 @@ import {
   ProjectSpreadsheetLayout,
   ProjectEmptyState,
   IssuePeekOverview,
-} from "components/issues";
-// ui
-import { Spinner } from "@plane/ui";
+} from "@/components/issues";
 // hooks
-import { useIssues } from "hooks/store";
 // helpers
-import { ActiveLoader } from "components/ui";
+import { ActiveLoader } from "@/components/ui";
 // constants
-import { EIssuesStoreType } from "constants/issue";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 
 export const ProjectLayoutRoot: FC = observer(() => {
   // router
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
index fa942b7f604..0128073414d 100644
--- a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -1,9 +1,8 @@
-import React, { Fragment, useMemo } from "react";
-import { useRouter } from "next/router";
+import React, { Fragment } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // mobx store
-import { useIssues } from "hooks/store";
 // components
 import {
   IssuePeekOverview,
@@ -14,13 +13,12 @@ import {
   ProjectViewKanBanLayout,
   ProjectViewListLayout,
   ProjectViewSpreadsheetLayout,
-} from "components/issues";
-import { ActiveLoader } from "components/ui";
+} from "@/components/issues";
+import { ActiveLoader } from "@/components/ui";
 // constants
-import { EIssuesStoreType } from "constants/issue";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // types
-import { TIssue } from "@plane/types";
-import { EIssueActions } from "../types";
 
 export const ProjectViewLayoutRoot: React.FC = observer(() => {
   // router
@@ -45,22 +43,6 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue, viewId?.toString());
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !projectId) return;
-
-        await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id, viewId?.toString());
-      },
-    }),
-    [issues, workspaceSlug, projectId, viewId]
-  );
-
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
   if (!workspaceSlug || !projectId || !viewId) return <></>;
@@ -81,15 +63,15 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
         <Fragment>
           <div className="relative h-full w-full overflow-auto">
             {activeLayout === "list" ? (
-              <ProjectViewListLayout issueActions={issueActions} />
+              <ProjectViewListLayout />
             ) : activeLayout === "kanban" ? (
-              <ProjectViewKanBanLayout issueActions={issueActions} />
+              <ProjectViewKanBanLayout />
             ) : activeLayout === "calendar" ? (
-              <ProjectViewCalendarLayout issueActions={issueActions} />
+              <ProjectViewCalendarLayout />
             ) : activeLayout === "gantt_chart" ? (
-              <ProjectViewGanttLayout issueActions={issueActions} />
+              <ProjectViewGanttLayout />
             ) : activeLayout === "spreadsheet" ? (
-              <ProjectViewSpreadsheetLayout issueActions={issueActions} />
+              <ProjectViewSpreadsheetLayout />
             ) : null}
           </div>
 
diff --git a/web/components/issues/issue-layouts/save-filter-view.tsx b/web/components/issues/issue-layouts/save-filter-view.tsx
index 8bf2cb21159..67cf6cbadb6 100644
--- a/web/components/issues/issue-layouts/save-filter-view.tsx
+++ b/web/components/issues/issue-layouts/save-filter-view.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from "react";
 import { Plus } from "lucide-react";
 import { Button } from "@plane/ui";
 // components
-import { CreateUpdateProjectViewModal } from "components/views";
+import { CreateUpdateProjectViewModal } from "@/components/views";
 
 interface ISaveFilterView {
   workspaceSlug: string;
diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index 2f09b55d601..2d7623ebe13 100644
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -1,57 +1,45 @@
 import { FC, useCallback } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TIssue, IIssueDisplayFilterOptions, TUnGroupedIssues } from "@plane/types";
 // hooks
-import { useUser } from "hooks/store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useIssues, useUser } from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
 // views
-import { SpreadsheetView } from "./spreadsheet-view";
 // types
-import { TIssue, IIssueDisplayFilterOptions, TUnGroupedIssues } from "@plane/types";
-import { EIssueActions } from "../types";
-import { IQuickActionProps } from "../list/list-view-types";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { ICycleIssuesFilter, ICycleIssues } from "store/issue/cycle";
-import { IModuleIssuesFilter, IModuleIssues } from "store/issue/module";
-import { IProjectIssuesFilter, IProjectIssues } from "store/issue/project";
-import { IProjectViewIssuesFilter, IProjectViewIssues } from "store/issue/project-views";
-import { EIssueFilterType } from "constants/issue";
+import { IQuickActionProps } from "../list/list-view-types";
+import { SpreadsheetView } from "./spreadsheet-view";
 
+export type SpreadsheetStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW;
 interface IBaseSpreadsheetRoot {
-  issueFiltersStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
-  issueStore: IProjectIssues | ICycleIssues | IModuleIssues | IProjectViewIssues;
   viewId?: string;
   QuickActions: FC<IQuickActionProps>;
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => void;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => void;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => void;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => void;
-    [EIssueActions.RESTORE]?: (issue: TIssue) => Promise<void>;
-  };
+  storeType: SpreadsheetStoreType;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
   isCompletedCycle?: boolean;
 }
 
 export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
-  const {
-    issueFiltersStore,
-    issueStore,
-    viewId,
-    QuickActions,
-    issueActions,
-    canEditPropertiesBasedOnProject,
-    isCompletedCycle = false,
-  } = props;
+  const { viewId, QuickActions, storeType, canEditPropertiesBasedOnProject, isCompletedCycle = false } = props;
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { projectId } = router.query;
   // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { issues, issuesFilter } = useIssues(storeType);
+  const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
+    useIssuesActions(storeType);
   // derived values
-  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
   // user role validation
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
@@ -65,32 +53,17 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
     [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
   );
 
-  const issueIds = (issueStore.groupedIssueIds ?? []) as TUnGroupedIssues;
-
-  const handleIssues = useCallback(
-    async (issue: TIssue, action: EIssueActions) => {
-      if (issueActions[action]) {
-        issueActions[action]!(issue);
-      }
-    },
-    [issueActions]
-  );
+  const issueIds = (issues.groupedIssueIds ?? []) as TUnGroupedIssues;
 
   const handleDisplayFiltersUpdate = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug || !projectId) return;
+      if (!projectId) return;
 
-      issueFiltersStore.updateFilters(
-        workspaceSlug,
-        projectId,
-        EIssueFilterType.DISPLAY_FILTERS,
-        {
-          ...updatedDisplayFilter,
-        },
-        viewId
-      );
+      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
+        ...updatedDisplayFilter,
+      });
     },
-    [issueFiltersStore?.updateFilters, projectId, workspaceSlug, viewId]
+    [projectId, updateFilters]
   );
 
   const renderQuickActions = useCallback(
@@ -98,37 +71,28 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
       <QuickActions
         customActionButton={customActionButton}
         issue={issue}
-        handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
-        handleUpdate={
-          issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
-        }
-        handleRemoveFromView={
-          issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
-        }
-        handleArchive={
-          issueActions[EIssueActions.ARCHIVE] ? async () => handleIssues(issue, EIssueActions.ARCHIVE) : undefined
-        }
-        handleRestore={
-          issueActions[EIssueActions.RESTORE] ? async () => handleIssues(issue, EIssueActions.RESTORE) : undefined
-        }
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
         portalElement={portalElement}
         readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleIssues]
+    [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
   );
 
   return (
     <SpreadsheetView
-      displayProperties={issueFiltersStore.issueFilters?.displayProperties ?? {}}
-      displayFilters={issueFiltersStore.issueFilters?.displayFilters ?? {}}
+      displayProperties={issuesFilter.issueFilters?.displayProperties ?? {}}
+      displayFilters={issuesFilter.issueFilters?.displayFilters ?? {}}
       handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
       issueIds={issueIds}
       quickActions={renderQuickActions}
-      handleIssues={handleIssues}
+      updateIssue={updateIssue}
       canEditProperties={canEditProperties}
-      quickAddCallback={issueStore.quickAddIssue}
+      quickAddCallback={issues.quickAddIssue}
       viewId={viewId}
       enableQuickCreateIssue={enableQuickAdd}
       disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index c4b8ea0ef75..9fefd47594c 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // components
-import { MemberDropdown } from "components/dropdowns";
+import { MemberDropdown } from "@/components/dropdowns";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index c17a433b846..5f487b77229 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-// types
 import { TIssue } from "@plane/types";
+// types
 
 type Props = {
   issue: TIssue;
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
index 8d373efb4b7..ae7e3c33c4d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index 88fbf105461..a2a82c1ffb1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -1,14 +1,14 @@
 import React, { useCallback } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useIssues } from "hooks/store";
+import { CycleDropdown } from "@/components/dropdowns";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useEventTracker, useIssues } from "@/hooks/store";
 // components
-import { CycleDropdown } from "components/dropdowns";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   issue: TIssue;
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
index e261797af83..b80de2015d1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { CalendarCheck2 } from "lucide-react";
+import { TIssue } from "@plane/types";
 // hooks
-import { useProjectState } from "hooks/store";
 // components
-import { DateDropdown } from "components/dropdowns";
+import { DateDropdown } from "@/components/dropdowns";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { shouldHighlightIssueDueDate } from "helpers/issue.helper";
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { useProjectState } from "@/hooks/store";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
@@ -30,7 +30,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <DateDropdown
         value={issue.target_date}
-        minDate={issue.start_date ? new Date(issue.start_date) : undefined}
+        minDate={getDate(issue.start_date)}
         onChange={(data) => {
           const targetDate = data ? renderFormattedPayloadDate(data) : null;
           onChange(
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index f7a472b49f9..298da4ff93b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -1,8 +1,8 @@
 // components
-import { EstimateDropdown } from "components/dropdowns";
 import { observer } from "mobx-react-lite";
-// types
 import { TIssue } from "@plane/types";
+import { EstimateDropdown } from "@/components/dropdowns";
+// types
 
 type Props = {
   issue: TIssue;
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index ac06525dff6..f3910a87c33 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -1,5 +1,4 @@
 //ui
-import { CustomMenu } from "@plane/ui";
 import {
   ArrowDownWideNarrow,
   ArrowUpNarrowWide,
@@ -9,12 +8,13 @@ import {
   ListFilter,
   MoveRight,
 } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
 //hooks
-import useLocalStorage from "hooks/use-local-storage";
+import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
+import useLocalStorage from "@/hooks/use-local-storage";
 //types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
 //constants
-import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
 
 interface Props {
   property: keyof IIssueDisplayProperties;
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 60e429c9fc8..439abf5f39e 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // components
-import { IssuePropertyLabels } from "../../properties";
 // hooks
-import { useLabel } from "hooks/store";
+import { useLabel } from "@/hooks/store";
 // types
-import { TIssue } from "@plane/types";
+import { IssuePropertyLabels } from "../../properties";
 
 type Props = {
   issue: TIssue;
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index 2d3e7b670f6..2c20afd2c7e 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-// types
 import { TIssue } from "@plane/types";
+// types
 
 type Props = {
   issue: TIssue;
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index c688c6e1d20..0dd298c1ec9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import xor from "lodash/xor";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useIssues } from "hooks/store";
+import { ModuleDropdown } from "@/components/dropdowns";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useEventTracker, useIssues } from "@/hooks/store";
 // components
-import { ModuleDropdown } from "components/dropdowns";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   issue: TIssue;
@@ -71,7 +71,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
         buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
         onClose={onClose}
         multiple
-        showCount={true}
+        showCount
         showTooltip
       />
     </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index b8801559c5a..8058b70236a 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // components
-import { PriorityDropdown } from "components/dropdowns";
+import { PriorityDropdown } from "@/components/dropdowns";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
   onClose: () => void;
-  onChange: (issue: TIssue, data: Partial<TIssue>,updates:any) => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
   disabled: boolean;
 };
 
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
index 01f7fe793a8..5746c397acb 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { CalendarClock } from "lucide-react";
+import { TIssue } from "@plane/types";
 // components
-import { DateDropdown } from "components/dropdowns";
+import { DateDropdown } from "@/components/dropdowns";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
@@ -22,7 +22,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
       <DateDropdown
         value={issue.start_date}
-        maxDate={issue.target_date ? new Date(issue.target_date) : undefined}
+        maxDate={getDate(issue.target_date)}
         onChange={(data) => {
           const startDate = data ? renderFormattedPayloadDate(data) : null;
           onChange(
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 1a029db1212..20158572843 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // components
-import { StateDropdown } from "components/dropdowns";
+import { StateDropdown } from "@/components/dropdowns";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
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
index c635ca85e85..76b2fd65bcd 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { TIssue } from "@plane/types";
 // hooks
-import { useApplication } from "hooks/store";
+import { cn } from "@/helpers/common.helper";
+import { useApplication } from "@/hooks/store";
 // types
-import { TIssue } from "@plane/types";
 // helpers
-import { cn } from "helpers/common.helper";
 
 type Props = {
   issue: TIssue;
@@ -23,7 +23,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
 
   const redirectToIssueDetail = () => {
     router.push({
-      pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
+      pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
         issue.id
       }`,
       hash: "sub-issues",
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
index f84989192fc..b299d79669b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 // types
-import { TIssue } from "@plane/types";
 
 type Props = {
   issue: TIssue;
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
index 3ce70868de8..161dd6514f4 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -1,26 +1,25 @@
 import { useRef } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-// types
 import { IIssueDisplayProperties, TIssue } from "@plane/types";
-import { EIssueActions } from "../types";
+// types
+import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
+import { useEventTracker } from "@/hooks/store";
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 // constants
-import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
 // components
-import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
-import { useEventTracker } from "hooks/store";
-import { observer } from "mobx-react";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
   issueDetail: TIssue;
   disableUserActions: boolean;
   property: keyof IIssueDisplayProperties;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   isEstimateEnabled: boolean;
 };
 
 export const IssueColumn = observer((props: Props) => {
-  const { displayProperties, issueDetail, disableUserActions, property, handleIssues, isEstimateEnabled } = props;
+  const { displayProperties, issueDetail, disableUserActions, property, updateIssue, isEstimateEnabled } = props;
   // router
   const router = useRouter();
   const tableCellRef = useRef<HTMLTableCellElement | null>(null);
@@ -44,7 +43,8 @@ export const IssueColumn = observer((props: Props) => {
         <Column
           issue={issueDetail}
           onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
-            handleIssues({ ...issue, ...data }, EIssueActions.UPDATE).then(() => {
+            updateIssue &&
+            updateIssue(issue.project_id, issue.id, data).then(() => {
               captureIssueEvent({
                 eventName: "Issue updated",
                 payload: {
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 9f4810c7805..fc36fdd8670 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -1,24 +1,25 @@
 import { Dispatch, MutableRefObject, SetStateAction, useRef, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // icons
 import { ChevronRight, MoreHorizontal } from "lucide-react";
-// constants
-import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
-// components
-import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
-import RenderIfVisible from "components/core/render-if-visible-HOC";
-import { IssueColumn } from "./issue-column";
+import { IIssueDisplayProperties, TIssue } from "@plane/types";
 // ui
 import { ControlLink, Tooltip } from "@plane/ui";
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { useIssueDetail, useProject } from "hooks/store";
+// components
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+// constants
+import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
 // helper
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useIssueDetail, useProject } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
-import { IIssueDisplayProperties, TIssue } from "@plane/types";
-import { EIssueActions } from "../types";
+// local components
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { IssueColumn } from "./issue-column";
 
 interface Props {
   displayProperties: IIssueDisplayProperties;
@@ -29,7 +30,7 @@ interface Props {
     portalElement?: HTMLDivElement | null
   ) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
   nestingLevel: number;
   issueId: string;
@@ -45,7 +46,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     isEstimateEnabled,
     nestingLevel,
     portalElement,
-    handleIssues,
+    updateIssue,
     quickActions,
     canEditProperties,
     isScrolled,
@@ -75,7 +76,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
           canEditProperties={canEditProperties}
           nestingLevel={nestingLevel}
           isEstimateEnabled={isEstimateEnabled}
-          handleIssues={handleIssues}
+          updateIssue={updateIssue}
           portalElement={portalElement}
           isScrolled={isScrolled}
           isExpanded={isExpanded}
@@ -95,7 +96,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             canEditProperties={canEditProperties}
             nestingLevel={nestingLevel + 1}
             isEstimateEnabled={isEstimateEnabled}
-            handleIssues={handleIssues}
+            updateIssue={updateIssue}
             portalElement={portalElement}
             isScrolled={isScrolled}
             containerRef={containerRef}
@@ -115,7 +116,7 @@ interface IssueRowDetailsProps {
     portalElement?: HTMLDivElement | null
   ) => React.ReactNode;
   canEditProperties: (projectId: string | undefined) => boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
   nestingLevel: number;
   issueId: string;
@@ -131,7 +132,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
     isEstimateEnabled,
     nestingLevel,
     portalElement,
-    handleIssues,
+    updateIssue,
     quickActions,
     canEditProperties,
     isScrolled,
@@ -144,6 +145,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   //hooks
   const { getProjectIdentifierById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   const menuActionRef = useRef<HTMLDivElement | null>(null);
@@ -241,9 +243,9 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           disabled={!!issueDetail?.tempId}
         >
           <div className="w-full overflow-hidden">
-            <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
+            <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
               <div
-                className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
+                className="h-full w-full cursor-pointer truncate px-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
                 tabIndex={-1}
               >
                 {issueDetail.name}
@@ -255,11 +257,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
       {/* Rest of the columns */}
       {SPREADSHEET_PROPERTY_LIST.map((property) => (
         <IssueColumn
+          key={property}
           displayProperties={displayProperties}
           issueDetail={issueDetail}
           disableUserActions={disableUserActions}
           property={property}
-          handleIssues={handleIssues}
+          updateIssue={updateIssue}
           isEstimateEnabled={isEstimateEnabled}
         />
       ))}
diff --git a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
index 3cba3c6cdb8..68fac5b4549 100644
--- a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
@@ -1,19 +1,20 @@
 import { useEffect, useState, useRef } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
+import { TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useProject, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useKeypress from "hooks/use-keypress";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { ISSUE_CREATED } from "@/constants/event-tracker";
+import { createIssuePayload } from "@/helpers/issue.helper";
+import { useEventTracker, useProject, useWorkspace } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // helpers
-import { createIssuePayload } from "helpers/issue.helper";
+// ui
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   formKey: keyof TIssue;
@@ -84,7 +85,6 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
   // hooks
   useKeypress("Escape", handleClose);
   useOutsideClickDetector(ref, handleClose);
-  const { setToastAlert } = useToast();
 
   useEffect(() => {
     setFocus("name");
@@ -100,13 +100,13 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
     Object.keys(errors).forEach((key) => {
       const error = errors[key as keyof TIssue];
 
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: error?.message?.toString() || "Some error occurred. Please try again.",
       });
     });
-  }, [errors, setToastAlert]);
+  }, [errors]);
 
   // const onSubmitHandler = async (formData: TIssue) => {
   //   if (isSubmitting || !workspaceSlug || !projectId) return;
@@ -130,8 +130,8 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
   //       payload
   //     );
 
-  //     setToastAlert({
-  //       type: "success",
+  //     setToast({
+  //       type: TOAST_TYPE.SUCCESS,
   //       title: "Success!",
   //       message: "Issue created successfully.",
   //     });
@@ -140,8 +140,8 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
   //       const error = err?.[key];
   //       const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
 
-  //       setToastAlert({
-  //         type: "error",
+  //       setToast({
+  //         type: TOAST_TYPE.ERROR,
   //         title: "Error!",
   //         message: errorTitle || "Some error occurred. Please try again.",
   //       });
@@ -159,34 +159,41 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
       ...formData,
     });
 
-    try {
-      quickAddCallback &&
-        (await quickAddCallback(currentWorkspace.slug, currentProjectDetails.id, { ...payload } as TIssue, viewId).then(
-          (res) => {
-            captureIssueEvent({
-              eventName: ISSUE_CREATED,
-              payload: { ...res, state: "SUCCESS", element: "Spreadsheet quick add" },
-              path: router.asPath,
-            });
-          }
-        ));
-      setToastAlert({
-        type: "success",
-        title: "Success!",
-        message: "Issue created successfully.",
-      });
-    } catch (err: any) {
-      captureIssueEvent({
-        eventName: ISSUE_CREATED,
-        payload: { ...payload, state: "FAILED", element: "Spreadsheet quick add" },
-        path: router.asPath,
-      });
-      console.error(err);
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: err?.message || "Some error occurred. Please try again.",
+    if (quickAddCallback) {
+      const quickAddPromise = quickAddCallback(
+        currentWorkspace.slug,
+        currentProjectDetails.id,
+        { ...payload } as TIssue,
+        viewId
+      );
+      setPromiseToast<any>(quickAddPromise, {
+        loading: "Adding issue...",
+        success: {
+          title: "Success!",
+          message: () => "Issue created successfully.",
+        },
+        error: {
+          title: "Error!",
+          message: (err) => err?.message || "Some error occurred. Please try again.",
+        },
       });
+
+      await quickAddPromise
+        .then((res) => {
+          captureIssueEvent({
+            eventName: ISSUE_CREATED,
+            payload: { ...res, state: "SUCCESS", element: "Spreadsheet quick add" },
+            path: router.asPath,
+          });
+        })
+        .catch((err) => {
+          captureIssueEvent({
+            eventName: ISSUE_CREATED,
+            payload: { ...payload, state: "FAILED", element: "Spreadsheet quick add" },
+            path: router.asPath,
+          });
+          console.error(err);
+        });
     }
   };
 
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
index 6d3037de00d..c00c0d9196b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -1,59 +1,32 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
-import { useCycle, useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useCycle } from "@/hooks/store";
 // components
-import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
-import { EIssueActions } from "../../types";
-import { TIssue } from "@plane/types";
 import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
-import { EIssuesStoreType } from "constants/issue";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
 export const CycleSpreadsheetLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { cycleId } = router.query;
   const { currentProjectCompletedCycleIds } = useCycle();
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-
-        issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue, cycleId);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-        issues.removeIssue(workspaceSlug, issue.project_id, issue.id, cycleId);
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-        issues.removeIssueFromCycle(workspaceSlug, issue.project_id, cycleId, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !cycleId) return;
-        issues.archiveIssue(workspaceSlug, issue.project_id, issue.id, cycleId);
-      },
-    }),
-    [issues, workspaceSlug, cycleId]
-  );
-
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
 
   const canEditIssueProperties = useCallback(() => !isCompletedCycle, [isCompletedCycle]);
 
+  if (!cycleId) return null;
+
   return (
     <BaseSpreadsheetRoot
-      issueStore={issues}
-      issueFiltersStore={issuesFilter}
-      viewId={cycleId}
-      issueActions={issueActions}
+      viewId={cycleId?.toString()}
       QuickActions={CycleIssueQuickActions}
       canEditPropertiesBasedOnProject={canEditIssueProperties}
       isCompletedCycle={isCompletedCycle}
+      storeType={EIssuesStoreType.CYCLE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
index af8abc80159..b577221b25b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -1,51 +1,23 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
-import { useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
-import { EIssueActions } from "../../types";
-import { TIssue } from "@plane/types";
 import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
-import { EIssuesStoreType } from "constants/issue";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
 export const ModuleSpreadsheetLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+  const { moduleId } = router.query;
 
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-
-        issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        issues.removeIssue(workspaceSlug, issue.project_id, issue.id, moduleId);
-      },
-      [EIssueActions.REMOVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        issues.removeIssueFromModule(workspaceSlug, issue.project_id, moduleId, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug || !moduleId) return;
-        issues.archiveIssue(workspaceSlug, issue.project_id, issue.id, moduleId);
-      },
-    }),
-    [issues, workspaceSlug, moduleId]
-  );
+  if (!moduleId) return null;
 
   return (
     <BaseSpreadsheetRoot
-      issueStore={issues}
-      issueFiltersStore={issuesFilter}
-      viewId={moduleId}
-      issueActions={issueActions}
+      viewId={moduleId.toString()}
       QuickActions={ModuleIssueQuickActions}
+      storeType={EIssuesStoreType.MODULE}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
index 4ce54cff5a1..0ccbca9bd92 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -1,48 +1,10 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
 // mobx store
-import { useIssues } from "hooks/store";
-
-import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
-import { EIssueActions } from "../../types";
-import { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@/constants/issue";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
-import { EIssuesStoreType } from "constants/issue";
-
-export const ProjectSpreadsheetLayout: React.FC = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string };
-
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
-
-  const issueActions = useMemo(
-    () => ({
-      [EIssueActions.UPDATE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
-      },
-      [EIssueActions.DELETE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-      [EIssueActions.ARCHIVE]: async (issue: TIssue) => {
-        if (!workspaceSlug) return;
-
-        await issues.archiveIssue(workspaceSlug, issue.project_id, issue.id);
-      },
-    }),
-    [issues, workspaceSlug]
-  );
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
-  return (
-    <BaseSpreadsheetRoot
-      issueStore={issues}
-      issueFiltersStore={issuesFilter}
-      issueActions={issueActions}
-      QuickActions={ProjectIssueQuickActions}
-    />
-  );
-});
+export const ProjectSpreadsheetLayout: React.FC = observer(() => (
+  <BaseSpreadsheetRoot QuickActions={ProjectIssueQuickActions} storeType={EIssuesStoreType.PROJECT} />
+));
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
index d8b7571e584..3bfba9b0724 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -2,40 +2,23 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
-import { useIssues } from "hooks/store";
+import { EIssuesStoreType } from "@/constants/issue";
 // components
-import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 // types
-import { EIssueActions } from "../../types";
-import { TIssue } from "@plane/types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
-export interface IViewSpreadsheetLayout {
-  issueActions: {
-    [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
-    [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
-    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
-  };
-}
-
-export const ProjectViewSpreadsheetLayout: React.FC<IViewSpreadsheetLayout> = observer((props) => {
-  const { issueActions } = props;
+export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { viewId } = router.query;
 
-  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-
   return (
     <BaseSpreadsheetRoot
-      issueStore={issues}
-      issueFiltersStore={issuesFilter}
-      issueActions={issueActions}
       QuickActions={ProjectIssueQuickActions}
       viewId={viewId?.toString()}
+      storeType={EIssuesStoreType.PROJECT_VIEW}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
index 4401eb839a9..346846defef 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -1,10 +1,10 @@
 import { useRef } from "react";
 //types
+import { observer } from "mobx-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 //components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import { HeaderColumn } from "./columns/header-column";
-import { observer } from "mobx-react";
 
 interface Props {
   displayProperties: IIssueDisplayProperties;
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 98666d79011..dc03647c659 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -1,9 +1,9 @@
 // ui
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { LayersIcon } from "@plane/ui";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet";
 // constants
-import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
 // components
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
 import { SpreadsheetHeaderColumn } from "./spreadsheet-header-column";
@@ -38,6 +38,7 @@ export const SpreadsheetHeader = (props: Props) => {
 
         {SPREADSHEET_PROPERTY_LIST.map((property) => (
           <SpreadsheetHeaderColumn
+            key={property}
             property={property}
             displayProperties={displayProperties}
             displayFilters={displayFilters}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 5d45157cc41..17feae2fd98 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -1,12 +1,11 @@
+import { MutableRefObject, useCallback, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
-import { MutableRefObject, useEffect, useRef } from "react";
-//types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
-import { EIssueActions } from "../types";
+//types
+import { useTableKeyboardNavigation } from "@/hooks/use-table-keyboard-navigation";
 //components
 import { SpreadsheetIssueRow } from "./issue-row";
 import { SpreadsheetHeader } from "./spreadsheet-header";
-import { useTableKeyboardNavigation } from "hooks/use-table-keyboard-navigation";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -19,7 +18,7 @@ type Props = {
     customActionButton?: React.ReactElement,
     portalElement?: HTMLDivElement | null
   ) => React.ReactNode;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
   portalElement: React.MutableRefObject<HTMLDivElement | null>;
   containerRef: MutableRefObject<HTMLTableElement | null>;
@@ -34,7 +33,7 @@ export const SpreadsheetTable = observer((props: Props) => {
     isEstimateEnabled,
     portalElement,
     quickActions,
-    handleIssues,
+    updateIssue,
     canEditProperties,
     containerRef,
   } = props;
@@ -42,7 +41,7 @@ export const SpreadsheetTable = observer((props: Props) => {
   // states
   const isScrolled = useRef(false);
 
-  const handleScroll = () => {
+  const handleScroll = useCallback(() => {
     if (!containerRef.current) return;
     const scrollLeft = containerRef.current.scrollLeft;
 
@@ -51,19 +50,19 @@ export const SpreadsheetTable = observer((props: Props) => {
 
     //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
     if (scrollLeft > 0 !== isScrolled.current) {
-      const firtColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
+      const firstColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
 
-      for (let i = 0; i < firtColumns.length; i++) {
+      for (let i = 0; i < firstColumns.length; i++) {
         const shadow = i === 0 ? headerShadow : columnShadow;
         if (scrollLeft > 0) {
-          (firtColumns[i] as HTMLElement).style.boxShadow = shadow;
+          (firstColumns[i] as HTMLElement).style.boxShadow = shadow;
         } else {
-          (firtColumns[i] as HTMLElement).style.boxShadow = "none";
+          (firstColumns[i] as HTMLElement).style.boxShadow = "none";
         }
       }
       isScrolled.current = scrollLeft > 0;
     }
-  };
+  }, [containerRef]);
 
   useEffect(() => {
     const currentContainerRef = containerRef.current;
@@ -73,7 +72,7 @@ export const SpreadsheetTable = observer((props: Props) => {
     return () => {
       if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
     };
-  }, []);
+  }, [handleScroll, containerRef]);
 
   const handleKeyBoardNavigation = useTableKeyboardNavigation();
 
@@ -95,7 +94,7 @@ export const SpreadsheetTable = observer((props: Props) => {
             canEditProperties={canEditProperties}
             nestingLevel={0}
             isEstimateEnabled={isEstimateEnabled}
-            handleIssues={handleIssues}
+            updateIssue={updateIssue}
             portalElement={portalElement}
             containerRef={containerRef}
             isScrolled={isScrolled}
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index e7b2bcee609..4459d462ca9 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,14 +1,13 @@
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 // components
 import { Spinner } from "@plane/ui";
-import { SpreadsheetQuickAddIssueForm } from "components/issues";
+import { SpreadsheetQuickAddIssueForm } from "@/components/issues";
+import { useProject } from "@/hooks/store";
 import { SpreadsheetTable } from "./spreadsheet-table";
 // types
-import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
-import { EIssueActions } from "../types";
 //hooks
-import { useProject } from "hooks/store";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -20,7 +19,7 @@ type Props = {
     customActionButton?: React.ReactElement,
     portalElement?: HTMLDivElement | null
   ) => React.ReactNode;
-  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   openIssuesListModal?: (() => void) | null;
   quickAddCallback?: (
     workspaceSlug: string,
@@ -41,7 +40,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     handleDisplayFilterUpdate,
     issueIds,
     quickActions,
-    handleIssues,
+    updateIssue,
     quickAddCallback,
     viewId,
     canEditProperties,
@@ -75,7 +74,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           isEstimateEnabled={isEstimateEnabled}
           portalElement={portalRef}
           quickActions={quickActions}
-          handleIssues={handleIssues}
+          updateIssue={updateIssue}
           canEditProperties={canEditProperties}
           containerRef={containerRef}
         />
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index ce49d774db1..12025a68206 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -1,19 +1,23 @@
+import { ContrastIcon } from "lucide-react";
+import { GroupByColumnTypes, IGroupByColumn, TCycleGroups } from "@plane/types";
 import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
+// components
+import { ProjectLogo } from "@/components/project";
 // stores
-import { IMemberRootStore } from "store/member";
-import { IProjectStore } from "store/project/project.store";
-import { IStateStore } from "store/state.store";
-import { ILabelStore } from "store/label.store";
-import { ICycleStore } from "store/cycle.store";
-import { IModuleStore } from "store/module.store";
+import { ISSUE_PRIORITIES, EIssuesStoreType } from "@/constants/issue";
+import { STATE_GROUPS } from "@/constants/state";
+import { ICycleStore } from "@/store/cycle.store";
+import { ILabelStore } from "@/store/label.store";
+import { IMemberRootStore } from "@/store/member";
+import { IModuleStore } from "@/store/module.store";
+import { IProjectStore } from "@/store/project/project.store";
+import { IStateStore } from "@/store/state.store";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 // constants
-import { STATE_GROUPS } from "constants/state";
-import { ISSUE_PRIORITIES } from "constants/issue";
 // types
-import { GroupByColumnTypes, IGroupByColumn, TCycleGroups } from "@plane/types";
-import { ContrastIcon } from "lucide-react";
+
+export const isWorkspaceLevel = (type: EIssuesStoreType) =>
+  [EIssuesStoreType.PROFILE, EIssuesStoreType.GLOBAL].includes(type) ? true : false;
 
 export const getGroupByColumns = (
   groupBy: GroupByColumnTypes | null,
@@ -23,7 +27,8 @@ export const getGroupByColumns = (
   label: ILabelStore,
   projectState: IStateStore,
   member: IMemberRootStore,
-  includeNone?: boolean
+  includeNone?: boolean,
+  isWorkspaceLevel?: boolean
 ): IGroupByColumn[] | undefined => {
   switch (groupBy) {
     case "project":
@@ -39,7 +44,7 @@ export const getGroupByColumns = (
     case "priority":
       return getPriorityColumns();
     case "labels":
-      return getLabelsColumns(label) as any;
+      return getLabelsColumns(label, isWorkspaceLevel) as any;
     case "assignees":
       return getAssigneeColumns(member) as any;
     case "created_by":
@@ -62,7 +67,11 @@ const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined
       return {
         id: project.id,
         name: project.name,
-        icon: <div className="w-6 h-6">{renderEmoji(project.emoji || "")}</div>,
+        icon: (
+          <div className="w-6 h-6 grid place-items-center flex-shrink-0">
+            <ProjectLogo logo={project.logo_props} />
+          </div>
+        ),
         payload: { project_id: project.id },
       };
     }) as any;
@@ -112,19 +121,19 @@ const getModuleColumns = (projectStore: IProjectStore, moduleStore: IModuleStore
   const modules = [];
 
   moduleIds.map((moduleId) => {
-    const _module = getModuleById(moduleId);
-    if (_module)
+    const moduleInfo = getModuleById(moduleId);
+    if (moduleInfo)
       modules.push({
-        id: _module.id,
-        name: _module.name,
-        icon: <DiceIcon className="w-3.5 h-3.5" />,
-        payload: { module_ids: [_module.id] },
+        id: moduleInfo.id,
+        name: moduleInfo.name,
+        icon: <DiceIcon className="h-3.5 w-3.5" />,
+        payload: { module_ids: [moduleInfo.id] },
       });
   }) as any;
   modules.push({
     id: "None",
     name: "None",
-    icon: <DiceIcon className="w-3.5 h-3.5" />,
+    icon: <DiceIcon className="h-3.5 w-3.5" />,
   });
 
   return modules as any;
@@ -138,7 +147,7 @@ const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefine
     id: state.id,
     name: state.name,
     icon: (
-      <div className="w-3.5 h-3.5 rounded-full">
+      <div className="h-3.5 w-3.5 rounded-full">
         <StateGroupIcon stateGroup={state.group} color={state.color} width="14" height="14" />
       </div>
     ),
@@ -153,7 +162,7 @@ const getStateGroupColumns = () => {
     id: stateGroup.key,
     name: stateGroup.label,
     icon: (
-      <div className="w-3.5 h-3.5 rounded-full">
+      <div className="h-3.5 w-3.5 rounded-full">
         <StateGroupIcon stateGroup={stateGroup.key} width="14" height="14" />
       </div>
     ),
@@ -172,18 +181,19 @@ const getPriorityColumns = () => {
   }));
 };
 
-const getLabelsColumns = (label: ILabelStore) => {
-  const { projectLabels } = label;
-
-  if (!projectLabels) return;
+const getLabelsColumns = (label: ILabelStore, isWorkspaceLevel: boolean = false) => {
+  const { workspaceLabels, projectLabels } = label;
 
-  const labels = [...projectLabels, { id: "None", name: "None", color: "#666" }];
+  const labels = [
+    ...(isWorkspaceLevel ? workspaceLabels || [] : projectLabels || []),
+    { id: "None", name: "None", color: "#666" },
+  ];
 
   return labels.map((label) => ({
     id: label.id,
     name: label.name,
     icon: (
-      <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
+      <div className="h-[12px] w-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
     ),
     payload: label?.id === "None" ? {} : { label_ids: [label.id] },
   }));
diff --git a/web/components/issues/issue-modal/draft-issue-layout.tsx b/web/components/issues/issue-modal/draft-issue-layout.tsx
index 1f9935c989e..df89d363e16 100644
--- a/web/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/components/issues/issue-modal/draft-issue-layout.tsx
@@ -1,20 +1,21 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
+import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import type { TIssue } from "@plane/types";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { ConfirmIssueDiscard } from "@/components/issues";
+import { IssueFormRoot } from "@/components/issues/issue-modal/form";
+import { isEmptyHtmlString } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
 // services
-import { IssueDraftService } from "services/issue";
-// components
-import { IssueFormRoot } from "components/issues/issue-modal/form";
-import { ConfirmIssueDiscard } from "components/issues";
-// types
-import type { TIssue } from "@plane/types";
+import { IssueDraftService } from "@/services/issue";
 
 export interface DraftIssueProps {
   changesMade: Partial<TIssue> | null;
   data?: Partial<TIssue>;
+  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
   isCreateMoreToggleEnabled: boolean;
   onCreateMoreToggleChange: (value: boolean) => void;
   onChange: (formData: Partial<TIssue> | null) => void;
@@ -30,6 +31,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const {
     changesMade,
     data,
+    issueTitleRef,
     onChange,
     onClose,
     onSubmit,
@@ -43,26 +45,53 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const { captureIssueEvent } = useEventTracker();
 
   const handleClose = () => {
-    if (changesMade) setIssueDiscardModal(true);
-    else onClose(false);
+    if (data?.id) {
+      onClose(false);
+      setIssueDiscardModal(false);
+    } else {
+      if (changesMade) {
+        Object.entries(changesMade).forEach(([key, value]) => {
+          const issueKey = key as keyof TIssue;
+          if (value === null || value === undefined || value === "") delete changesMade[issueKey];
+          if (typeof value === "object" && isEmpty(value)) delete changesMade[issueKey];
+          if (Array.isArray(value) && value.length === 0) delete changesMade[issueKey];
+          if (issueKey === "project_id") delete changesMade.project_id;
+          if (issueKey === "priority" && value && value === "none") delete changesMade.priority;
+          if (
+            issueKey === "description_html" &&
+            changesMade.description_html &&
+            isEmptyHtmlString(changesMade.description_html)
+          )
+            delete changesMade.description_html;
+        });
+        if (isEmpty(changesMade)) {
+          onClose(false);
+          setIssueDiscardModal(false);
+        } else setIssueDiscardModal(true);
+      } else {
+        onClose(false);
+        setIssueDiscardModal(false);
+      }
+    }
   };
 
   const handleCreateDraftIssue = async () => {
     if (!changesMade || !workspaceSlug || !projectId) return;
 
-    const payload = { ...changesMade };
+    const payload = {
+      ...changesMade,
+      name: changesMade?.name && changesMade?.name?.trim() !== "" ? changesMade.name?.trim() : "Untitled",
+    };
 
     await issueDraftService
       .createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
       .then((res) => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Draft Issue created successfully.",
         });
@@ -76,8 +105,8 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         onClose(false);
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Issue could not be created. Please try again.",
         });
@@ -105,6 +134,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         isCreateMoreToggleEnabled={isCreateMoreToggleEnabled}
         onCreateMoreToggleChange={onCreateMoreToggleChange}
         data={data}
+        issueTitleRef={issueTitleRef}
         onChange={onChange}
         onClose={handleClose}
         onSubmit={onSubmit}
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index e2e4e784e8f..6112a27fea9 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -1,21 +1,14 @@
 import React, { FC, useState, useRef, useEffect, Fragment } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { LayoutPanelTop, Sparkle, X } from "lucide-react";
-// editor
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import type { TIssue, ISearchIssueResponse } from "@plane/types";
+// editor
 // hooks
-import { useApplication, useEstimate, useIssueDetail, useMention, useProject, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-// services
-import { AIService } from "services/ai.service";
-import { FileService } from "services/file.service";
-// components
-import { GptAssistantPopover } from "components/core";
-import { ParentIssuesListModal } from "components/issues";
-import { IssueLabelSelect } from "components/issues/select";
-import { CreateLabelModal } from "components/labels";
+import { Button, CustomMenu, Input, Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+import { GptAssistantPopover } from "@/components/core";
 import {
   CycleDropdown,
   DateDropdown,
@@ -25,13 +18,22 @@ import {
   ProjectDropdown,
   MemberDropdown,
   StateDropdown,
-} from "components/dropdowns";
+} from "@/components/dropdowns";
+import { ParentIssuesListModal } from "@/components/issues";
+import { IssueLabelSelect } from "@/components/issues/select";
+import { CreateLabelModal } from "@/components/labels";
+import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
+import { getChangedIssuefields } from "@/helpers/issue.helper";
+import { shouldRenderProject } from "@/helpers/project.helper";
+import { useApplication, useEstimate, useIssueDetail, useMention, useProject, useWorkspace } from "@/hooks/store";
+import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
+// services
+import { AIService } from "@/services/ai.service";
+import { FileService } from "@/services/file.service";
+// components
 // ui
-import { Button, CustomMenu, Input, Loader, ToggleSwitch } from "@plane/ui";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
-import type { TIssue, ISearchIssueResponse } from "@plane/types";
 
 const defaultValues: Partial<TIssue> = {
   project_id: "",
@@ -51,6 +53,7 @@ const defaultValues: Partial<TIssue> = {
 
 export interface IssueFormProps {
   data?: Partial<TIssue>;
+  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
   isCreateMoreToggleEnabled: boolean;
   onCreateMoreToggleChange: (value: boolean) => void;
   onChange?: (formData: Partial<TIssue> | null) => void;
@@ -92,6 +95,7 @@ const getTabIndex = (key: string) => TAB_INDICES.findIndex((tabIndex) => tabInde
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const {
     data,
+    issueTitleRef,
     onChange,
     onClose,
     onSubmit,
@@ -118,6 +122,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   // store hooks
   const {
     config: { envConfig },
+    router: { projectId: routeProjectId },
   } = useApplication();
   const { getProjectById } = useProject();
   const { areEstimatesEnabledForProject } = useEstimate();
@@ -125,11 +130,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { fetchCycles } = useProjectIssueProperties();
   // form info
   const {
-    formState: { errors, isDirty, isSubmitting },
+    formState: { errors, isDirty, isSubmitting, dirtyFields },
     handleSubmit,
     reset,
     watch,
@@ -159,6 +163,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
         parent_id: formData.parent_id,
       });
     }
+    if (projectId && routeProjectId !== projectId) fetchCycles(workspaceSlug, projectId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
@@ -169,7 +174,19 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const issueName = watch("name");
 
   const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue = false) => {
-    await onSubmit(formData, is_draft_issue);
+    const submitData = !data?.id
+      ? formData
+      : {
+          ...getChangedIssuefields(formData, dirtyFields as { [key: string]: boolean | undefined }),
+          project_id: getValues("project_id"),
+          id: data.id,
+          description_html: formData.description_html ?? "<p></p>",
+        };
+
+    // this condition helps to move the issues from draft to project issues
+    if (formData.hasOwnProperty("is_draft")) submitData.is_draft = formData.is_draft;
+
+    await onSubmit(submitData, is_draft_issue);
 
     setGptAssistantModal(false);
 
@@ -183,8 +200,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const handleAiAssistance = async (response: string) => {
     if (!workspaceSlug || !projectId) return;
 
-    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
-    editorRef.current?.setEditorValue(`${watch("description_html")}`);
+    editorRef.current?.setEditorValueAtCursorPosition(response);
   };
 
   const handleAutoGenerateDescription = async () => {
@@ -199,8 +215,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
       })
       .then((res) => {
         if (res.response === "")
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message:
               "Issue title isn't informative enough to generate the description. Please try with a different title.",
@@ -211,14 +227,14 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
         const error = err?.data?.error;
 
         if (err.status === 429)
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: error || "Some error occurred. Please try again.",
           });
@@ -236,10 +252,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const startDate = watch("start_date");
   const targetDate = watch("target_date");
 
-  const minDate = startDate ? new Date(startDate) : null;
+  const minDate = getDate(startDate);
   minDate?.setDate(minDate.getDate());
 
-  const maxDate = targetDate ? new Date(targetDate) : null;
+  const maxDate = getDate(targetDate);
   maxDate?.setDate(maxDate.getDate());
 
   const projectDetails = getProjectById(projectId);
@@ -299,7 +315,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         handleFormChange();
                       }}
                       buttonVariant="border-with-text"
-                      // TODO: update tabIndex logic
+                      renderCondition={(project) => shouldRenderProject(project)}
                       tabIndex={getTabIndex("project_id")}
                     />
                   </div>
@@ -360,17 +376,18 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       onChange(e.target.value);
                       handleFormChange();
                     }}
-                    ref={ref}
+                    ref={issueTitleRef || ref}
                     hasError={Boolean(errors.name)}
                     placeholder="Issue Title"
-                    className="resize-none text-xl w-full"
+                    className="w-full resize-none text-xl"
                     tabIndex={getTabIndex("name")}
+                    autoFocus
                   />
                 )}
               />
               <div className="relative">
                 {data?.description_html === undefined ? (
-                  <Loader className="min-h-[7rem] space-y-2 py-2 border border-custom-border-200 rounded-md p-2 overflow-hidden">
+                  <Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2">
                     <Loader.Item width="100%" height="26px" />
                     <div className="flex items-center gap-2">
                       <Loader.Item width="26px" height="26px" />
@@ -384,18 +401,18 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     <div className="flex items-center gap-2">
                       <Loader.Item width="50%" height="26px" />
                     </div>
-                    <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex items-center gap-2">
+                    <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
                       <Loader.Item width="100px" height="26px" />
                       <Loader.Item width="50px" height="26px" />
                     </div>
                   </Loader>
                 ) : (
                   <Fragment>
-                    <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex items-center gap-2">
+                    <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
                       {issueName && issueName.trim() !== "" && envConfig?.has_openai_configured && (
                         <button
                           type="button"
-                          className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
+                          className={`flex items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs ${
                             iAmFeelingLucky ? "cursor-wait" : ""
                           }`}
                           onClick={handleAutoGenerateDescription}
@@ -456,13 +473,13 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           }
                           initialValue={data?.description_html}
                           customClassName="min-h-[7rem] border-custom-border-100"
-                          onChange={(description: Object, description_html: string) => {
+                          onChange={(description: any, description_html: string) => {
                             onChange(description_html);
                             handleFormChange();
                           }}
                           mentionHighlights={mentionHighlights}
                           mentionSuggestions={mentionSuggestions}
-                          // tabIndex={2}
+                          tabIndex={getTabIndex("description_html")}
                         />
                       )}
                     />
@@ -588,6 +605,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                             onChange(cycleId);
                             handleFormChange();
                           }}
+                          placeholder="Cycle"
                           value={value}
                           buttonVariant="border-with-text"
                           tabIndex={getTabIndex("cycle_id")}
@@ -609,6 +627,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                             onChange(moduleIds);
                             handleFormChange();
                           }}
+                          placeholder="Modules"
                           buttonVariant="border-with-text"
                           tabIndex={getTabIndex("module_ids")}
                           multiple
@@ -642,7 +661,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   customButton={
                     <button
                       type="button"
-                      className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
                     >
                       {watch("parent_id") ? (
                         <div className="flex items-center gap-1 text-custom-text-200">
@@ -698,6 +717,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         setSelectedParentIssue(issue);
                       }}
                       projectId={projectId}
+                      issueId={data?.id}
                     />
                   )}
                 />
@@ -706,19 +726,24 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
           </div>
         </div>
         <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
-          <div
-            className="flex cursor-default items-center gap-1.5"
-            onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
-            }}
-            tabIndex={getTabIndex("create_more")}
-          >
-            <div className="flex cursor-pointer items-center justify-center">
-              <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-            </div>
-            <span className="text-xs">Create more</span>
+          <div>
+            {!data?.id && (
+              <div
+                className="inline-flex cursor-default items-center gap-1.5"
+                onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
+                }}
+                tabIndex={getTabIndex("create_more")}
+              >
+                <div className="flex cursor-pointer items-center justify-center">
+                  <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
+                </div>
+                <span className="text-xs">Create more</span>
+              </div>
+            )}
           </div>
+
           <div className="flex items-center gap-2">
             <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={getTabIndex("discard_button")}>
               Discard
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 1da02f0acd1..29633918fc2 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
+import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
+import type { TIssue } from "@plane/types";
 // hooks
+import { TOAST_TYPE, setToast } from "@plane/ui";
+
+import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
+import { EIssuesStoreType } from "@/constants/issue";
 import {
   useApplication,
   useEventTracker,
@@ -10,19 +15,16 @@ import {
   useIssues,
   useModule,
   useProject,
-  useWorkspace,
   useIssueDetail,
-} from "hooks/store";
-import useToast from "hooks/use-toast";
-import useLocalStorage from "hooks/use-local-storage";
+} from "@/hooks/store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+import useLocalStorage from "@/hooks/use-local-storage";
 // components
 import { DraftIssueLayout } from "./draft-issue-layout";
 import { IssueFormRoot } from "./form";
+// ui
 // types
-import type { TIssue } from "@plane/types";
 // constants
-import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
-import { ISSUE_CREATED, ISSUE_UPDATED } from "constants/event-tracker";
 
 export interface IssuesModalProps {
   data?: Partial<TIssue>;
@@ -30,7 +32,7 @@ export interface IssuesModalProps {
   onClose: () => void;
   onSubmit?: (res: TIssue) => Promise<void>;
   withDraftIssueWrapper?: boolean;
-  storeType?: TCreateModalStoreTypes;
+  storeType?: EIssuesStoreType;
   isDraft?: boolean;
 }
 
@@ -44,6 +46,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     storeType = EIssuesStoreType.PROJECT,
     isDraft = false,
   } = props;
+  // ref
+  const issueTitleRef = useRef<HTMLInputElement>(null);
   // states
   const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
   const [createMore, setCreateMore] = useState(false);
@@ -52,51 +56,23 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   // store hooks
   const { captureIssueEvent } = useEventTracker();
   const {
-    router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
+    router: { workspaceSlug, projectId, cycleId, moduleId },
   } = useApplication();
   const { workspaceProjectIds } = useProject();
   const { fetchCycleDetails } = useCycle();
   const { fetchModuleDetails } = useModule();
-  const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
   const { issues: moduleIssues } = useIssues(EIssuesStoreType.MODULE);
   const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
-  const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
   const { issues: draftIssues } = useIssues(EIssuesStoreType.DRAFT);
   const { fetchIssue } = useIssueDetail();
-  // store mapping based on current store
-  const issueStores = {
-    [EIssuesStoreType.PROJECT]: {
-      store: projectIssues,
-      viewId: undefined,
-    },
-    [EIssuesStoreType.PROJECT_VIEW]: {
-      store: viewIssues,
-      viewId: projectViewId,
-    },
-    [EIssuesStoreType.PROFILE]: {
-      store: profileIssues,
-      viewId: undefined,
-    },
-    [EIssuesStoreType.CYCLE]: {
-      store: cycleIssues,
-      viewId: cycleId,
-    },
-    [EIssuesStoreType.MODULE]: {
-      store: moduleIssues,
-      viewId: moduleId,
-    },
-  };
   // router
   const router = useRouter();
-  // toast alert
-  const { setToastAlert } = useToast();
   // local storage
   const { storedValue: localStorageDraftIssues, setValue: setLocalStorageDraftIssue } = useLocalStorage<
     Record<string, Partial<TIssue>>
   >("draftedIssue", {});
   // current store details
-  const { store: currentIssueStore, viewId } = issueStores[storeType];
+  const { createIssue, updateIssue } = useIssuesActions(storeType);
 
   const fetchIssueDetail = async (issueId: string | undefined) => {
     if (!workspaceSlug) return;
@@ -177,18 +153,15 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     try {
       const response = is_draft_issue
         ? await draftIssues.createIssue(workspaceSlug, payload.project_id, payload)
-        : await currentIssueStore.createIssue(workspaceSlug, payload.project_id, payload, viewId);
+        : createIssue && (await createIssue(payload.project_id, payload));
       if (!response) throw new Error();
 
-      currentIssueStore.fetchIssues(workspaceSlug, payload.project_id, "mutation", viewId);
-
       if (payload.cycle_id && payload.cycle_id !== "" && storeType !== EIssuesStoreType.CYCLE)
         await addIssueToCycle(response, payload.cycle_id);
       if (payload.module_ids && payload.module_ids.length > 0 && storeType !== EIssuesStoreType.MODULE)
         await addIssueToModule(response, payload.module_ids);
-
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: "Issue created successfully.",
       });
@@ -198,10 +171,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         path: router.asPath,
       });
       !createMore && handleClose();
+      if (createMore) {
+        issueTitleRef && issueTitleRef?.current?.focus();
+        setChangesMade(null);
+      }
       return response;
     } catch (error) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Issue could not be created. Please try again.",
       });
@@ -219,10 +196,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     try {
       isDraft
         ? await draftIssues.updateIssue(workspaceSlug, payload.project_id, data.id, payload)
-        : await currentIssueStore.updateIssue(workspaceSlug, payload.project_id, data.id, payload, viewId);
+        : updateIssue && (await updateIssue(payload.project_id, data.id, payload));
 
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Success!",
         message: "Issue updated successfully.",
       });
@@ -233,10 +210,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
       });
       handleClose();
     } catch (error) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Issue could not be created. Please try again.",
+        message: "Issue could not be updated. Please try again.",
       });
       captureIssueEvent({
         eventName: ISSUE_UPDATED,
@@ -246,13 +223,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     }
   };
 
-  const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue: boolean = false) => {
-    if (!workspaceSlug || !formData.project_id || !storeType) return;
-
-    const payload: Partial<TIssue> = {
-      ...formData,
-      description_html: formData.description_html ?? "<p></p>",
-    };
+  const handleFormSubmit = async (payload: Partial<TIssue>, is_draft_issue: boolean = false) => {
+    if (!workspaceSlug || !payload.project_id || !storeType) return;
 
     let response: TIssue | undefined = undefined;
     if (!data?.id) response = await handleCreateIssue(payload, is_draft_issue);
@@ -292,7 +264,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
               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-custom-shadow-md transition-all sm:w-full mx-4 sm:max-w-4xl">
+              <Dialog.Panel className="relative mx-4 transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
                 {withDraftIssueWrapper ? (
                   <DraftIssueLayout
                     changesMade={changesMade}
@@ -302,6 +274,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                       cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
                       module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
                     }}
+                    issueTitleRef={issueTitleRef}
                     onChange={handleFormChange}
                     onClose={handleClose}
                     onSubmit={handleFormSubmit}
@@ -312,6 +285,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                   />
                 ) : (
                   <IssueFormRoot
+                    issueTitleRef={issueTitleRef}
                     data={{
                       ...data,
                       description_html: description,
diff --git a/web/components/issues/issue-update-status.tsx b/web/components/issues/issue-update-status.tsx
index df2357179c1..a3a8ca83be4 100644
--- a/web/components/issues/issue-update-status.tsx
+++ b/web/components/issues/issue-update-status.tsx
@@ -1,15 +1,16 @@
 import React from "react";
+import { observer } from "mobx-react";
 import { RefreshCw } from "lucide-react";
-// types
 import { TIssue } from "@plane/types";
-import { useProject } from "hooks/store";
+// types
+import { useProject } from "@/hooks/store";
 
 type Props = {
   isSubmitting: "submitting" | "submitted" | "saved";
   issueDetail?: TIssue;
 };
 
-export const IssueUpdateStatus: React.FC<Props> = (props) => {
+export const IssueUpdateStatus: React.FC<Props> = observer((props) => {
   const { isSubmitting, issueDetail } = props;
   // hooks
   const { getProjectById } = useProject();
@@ -33,4 +34,4 @@ export const IssueUpdateStatus: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx
index 56b88f70ce7..4bc90b686c0 100644
--- a/web/components/issues/issues-mobile-header.tsx
+++ b/web/components/issues/issues-mobile-header.tsx
@@ -1,19 +1,20 @@
 import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
 import router from "next/router";
 // components
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // icons
-import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 // constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
+import { ProjectAnalyticsModal } from "@/components/analytics";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue";
 // hooks
-import { useIssues, useLabel, useMember, useProject, useProjectState } from "hooks/store";
+import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
 // layouts
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "./issue-layouts";
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
-import { ProjectAnalyticsModal } from "components/analytics";
 
-export const IssuesMobileHeader = () => {
+export const IssuesMobileHeader = observer(() => {
   const layouts = [
     { key: "list", title: "List", icon: List },
     { key: "kanban", title: "Kanban", icon: Kanban },
@@ -51,8 +52,10 @@ export const IssuesMobileHeader = () => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -87,35 +90,36 @@ export const IssuesMobileHeader = () => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-sm text-custom-text-200"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
           customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
           closeOnSelect
         >
           {layouts.map((layout, index) => (
             <CustomMenu.MenuItem
+              key={index}
               onClick={() => {
                 handleLayoutChange(ISSUE_LAYOUTS[index].key);
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
+              <layout.icon className="h-3 w-3" />
               <div className="text-custom-text-300">{layout.title}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Filters"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
@@ -131,14 +135,14 @@ export const IssuesMobileHeader = () => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-sm text-custom-text-200">
                 Display
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
@@ -156,11 +160,11 @@ export const IssuesMobileHeader = () => {
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
         >
           Analytics
         </button>
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
index 1361ff7d1df..35d291ee1a9 100644
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@@ -1,48 +1,56 @@
 import React from "react";
 // components
 import { Tooltip } from "@plane/ui";
-
+import { usePlatformOS } from "@/hooks/use-platform-os";
 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 flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 }) => {
+  const { isMobile } = usePlatformOS();
+  return (
+    <>
+      {labelDetails?.length > 0 ? (
+        labelDetails.length <= maxRender ? (
+          <>
+            {labelDetails.map((label) => (
+              <div
+                key={label.id}
+                className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
+              >
+                <Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name} isMobile={isMobile}>
+                  <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 flex-shrink-0 cursor-default items-center 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(", ")}
+              isMobile={isMobile}
             >
-              <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 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>
+        )
       ) : (
-        <div className="flex flex-shrink-0 cursor-default items-center 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/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index c8520562e40..5961aaf097f 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 // headless ui
+import { Rocket, Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import { ProjectService } from "services/project";
+import { ISearchIssueResponse } from "@plane/types";
+import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { IssueSearchModalEmptyState } from "@/components/core";
+import useDebounce from "@/hooks/use-debounce";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ProjectService } from "@/services/project";
 // hooks
-import useDebounce from "hooks/use-debounce";
+// components
 // ui
-import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { Rocket, Search } from "lucide-react";
 // types
-import { ISearchIssueResponse } from "@plane/types";
 
 type Props = {
   isOpen: boolean;
@@ -39,7 +40,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
-
+  const { isMobile } = usePlatformOS();
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
   const router = useRouter();
@@ -115,7 +116,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                     />
                   </div>
                   <div className="flex p-2 sm:justify-end">
-                    <Tooltip tooltipContent="Toggle workspace level search">
+                    <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
                       <div
                         className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
                           isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
@@ -136,7 +137,10 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       </div>
                     </Tooltip>
                   </div>
-                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
+                  <Combobox.Options
+                    static
+                    className="max-h-80 scroll-py-2 overflow-y-auto vertical-scrollbar scrollbar-md"
+                  >
                     {searchTerm !== "" && (
                       <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
                         Search results for{" "}
@@ -149,15 +153,12 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       </h5>
                     )}
 
-                    {!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>
-                    )}
+                    <IssueSearchModalEmptyState
+                      debouncedSearchTerm={debouncedSearchTerm}
+                      isSearching={isSearching}
+                      issues={issues}
+                      searchTerm={searchTerm}
+                    />
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
index 8db7fd0ace2..70c57c3f32f 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -1,20 +1,28 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
-import { MoveRight, MoveDiagonal, Link2, Trash2, RotateCcw } from "lucide-react";
+import Link from "next/link";
+import { MoveRight, MoveDiagonal, Link2, Trash2, ArchiveRestoreIcon } from "lucide-react";
 // ui
-import { ArchiveIcon, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Tooltip } from "@plane/ui";
+import {
+  ArchiveIcon,
+  CenterPanelIcon,
+  CustomSelect,
+  FullScreenPanelIcon,
+  SidePanelIcon,
+  Tooltip,
+  TOAST_TYPE,
+  setToast,
+} from "@plane/ui";
+// components
+import { IssueSubscription, IssueUpdateStatus } from "@/components/issues";
+import { STATE_GROUPS } from "@/constants/state";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
-// hooks
-import useToast from "hooks/use-toast";
+import { cn } from "@/helpers/common.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
 // store hooks
-import { useIssueDetail, useProjectState, useUser } from "hooks/store";
-// helpers
-import { cn } from "helpers/common.helper";
-// components
-import { IssueSubscription, IssueUpdateStatus } from "components/issues";
-import { STATE_GROUPS } from "constants/state";
+import { useIssueDetail, useProjectState, useUser } from "@/hooks/store";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export type TPeekModes = "side-peek" | "modal" | "full-screen";
 
@@ -45,7 +53,7 @@ export type PeekOverviewHeaderProps = {
   issueId: string;
   isArchived: boolean;
   disabled: boolean;
-  toggleDeleteIssueModal: (value: boolean) => void;
+  toggleDeleteIssueModal: (issueId: string | null) => void;
   toggleArchiveIssueModal: (value: boolean) => void;
   handleRestoreIssue: () => void;
   isSubmitting: "submitting" | "submitted" | "saved";
@@ -66,38 +74,31 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
     handleRestoreIssue,
     isSubmitting,
   } = props;
-  // router
-  const router = useRouter();
   // store hooks
   const { currentUser } = useUser();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
   const { getStateById } = useProjectState();
-  // hooks
-  const { setToastAlert } = useToast();
+  const { isMobile } = usePlatformOS();
   // derived values
   const issueDetails = getIssueById(issueId);
   const stateDetails = issueDetails ? getStateById(issueDetails?.state_id) : undefined;
   const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
 
-  const issueLink = `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`;
+  const issueLink = `${workspaceSlug}/projects/${projectId}/${isArchived ? "archives/" : ""}issues/${issueId}`;
 
   const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();
     copyUrlToClipboard(issueLink).then(() => {
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
         message: "Issue link copied to clipboard.",
       });
     });
   };
-  const redirectToIssueDetail = () => {
-    router.push({ pathname: `/${issueLink}` });
-    removeRoutePeekId();
-  };
   // auth
   const isArchivingAllowed = !isArchived && !disabled;
   const isInArchivableGroup =
@@ -115,9 +116,9 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
           <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
         </button>
 
-        <button onClick={redirectToIssueDetail}>
+        <Link href={`/${issueLink}`} onClick={() => removeRoutePeekId()}>
           <MoveDiagonal className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
-        </button>
+        </Link>
         {currentMode && (
           <div className="flex flex-shrink-0 items-center gap-2">
             <CustomSelect
@@ -153,13 +154,14 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
           {currentUser && !isArchived && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
-          <Tooltip tooltipContent="Copy link">
+          <Tooltip tooltipContent="Copy link" isMobile={isMobile}>
             <button type="button" onClick={handleCopyText}>
               <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
             </button>
           </Tooltip>
           {isArchivingAllowed && (
             <Tooltip
+              isMobile={isMobile}
               tooltipContent={isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"}
             >
               <button
@@ -178,15 +180,15 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
             </Tooltip>
           )}
           {isRestoringAllowed && (
-            <Tooltip tooltipContent="Restore">
+            <Tooltip tooltipContent="Restore" isMobile={isMobile}>
               <button type="button" onClick={handleRestoreIssue}>
-                <RotateCcw className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+                <ArchiveRestoreIcon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
               </button>
             </Tooltip>
           )}
           {!disabled && (
-            <Tooltip tooltipContent="Delete">
-              <button type="button" onClick={() => toggleDeleteIssueModal(true)}>
+            <Tooltip tooltipContent="Delete" isMobile={isMobile}>
+              <button type="button" onClick={() => toggleDeleteIssueModal(issueId)}>
                 <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
               </button>
             </Tooltip>
diff --git a/web/components/issues/peek-overview/index.ts b/web/components/issues/peek-overview/index.ts
index aa341b939f6..e883228808d 100644
--- a/web/components/issues/peek-overview/index.ts
+++ b/web/components/issues/peek-overview/index.ts
@@ -1,5 +1,6 @@
+export * from "./header";
+export * from "./issue-attachments";
 export * from "./issue-detail";
 export * from "./properties";
 export * from "./root";
 export * from "./view";
-export * from "./header";
diff --git a/web/components/issues/peek-overview/issue-attachments.tsx b/web/components/issues/peek-overview/issue-attachments.tsx
new file mode 100644
index 00000000000..cc3aab90e2e
--- /dev/null
+++ b/web/components/issues/peek-overview/issue-attachments.tsx
@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+// hooks
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { IssueAttachmentUpload, IssueAttachmentsList, TAttachmentOperations } from "@/components/issues";
+import { useEventTracker, useIssueDetail } from "@/hooks/store";
+// components
+// ui
+
+type Props = {
+  disabled: boolean;
+  issueId: string;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const PeekOverviewIssueAttachments: React.FC<Props> = (props) => {
+  const { disabled, issueId, projectId, workspaceSlug } = props;
+  // store hooks
+  const { captureIssueEvent } = useEventTracker();
+  const {
+    attachment: { createAttachment, removeAttachment },
+  } = useIssueDetail();
+
+  const handleAttachmentOperations: TAttachmentOperations = useMemo(
+    () => ({
+      create: async (data: FormData) => {
+        try {
+          const attachmentUploadPromise = createAttachment(workspaceSlug, projectId, issueId, data);
+          setPromiseToast(attachmentUploadPromise, {
+            loading: "Uploading attachment...",
+            success: {
+              title: "Attachment uploaded",
+              message: () => "The attachment has been successfully uploaded",
+            },
+            error: {
+              title: "Attachment not uploaded",
+              message: () => "The attachment could not be uploaded",
+            },
+          });
+
+          const res = await attachmentUploadPromise;
+          captureIssueEvent({
+            eventName: "Issue attachment added",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: res.id,
+            },
+          });
+        } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue attachment added",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+          });
+        }
+      },
+      remove: async (attachmentId: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await removeAttachment(workspaceSlug, projectId, issueId, attachmentId);
+          setToast({
+            message: "The attachment has been successfully removed",
+            type: TOAST_TYPE.SUCCESS,
+            title: "Attachment removed",
+          });
+          captureIssueEvent({
+            eventName: "Issue attachment deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: "",
+            },
+          });
+        } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue attachment deleted",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: "",
+            },
+          });
+          setToast({
+            message: "The Attachment could not be removed",
+            type: TOAST_TYPE.ERROR,
+            title: "Attachment not removed",
+          });
+        }
+      },
+    }),
+    [workspaceSlug, projectId, issueId, captureIssueEvent, createAttachment, removeAttachment]
+  );
+
+  return (
+    <div>
+      <h6 className="text-sm font-medium">Attachments</h6>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2 mt-3">
+        <IssueAttachmentUpload
+          workspaceSlug={workspaceSlug}
+          disabled={disabled}
+          handleAttachmentOperations={handleAttachmentOperations}
+        />
+        <IssueAttachmentsList
+          issueId={issueId}
+          disabled={disabled}
+          handleAttachmentOperations={handleAttachmentOperations}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index 7f540874c76..b3dd7808e5f 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -1,14 +1,14 @@
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
 // store hooks
-import { useIssueDetail, useProject, useUser } from "hooks/store";
+import { TIssueOperations } from "@/components/issues";
+import { useIssueDetail, useProject, useUser } from "@/hooks/store";
 // hooks
-import useReloadConfirmations from "hooks/use-reload-confirmation";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // components
-import { TIssueOperations } from "components/issues";
+import { IssueDescriptionInput } from "../description-input";
 import { IssueReaction } from "../issue-detail/reactions";
 import { IssueTitleInput } from "../title-input";
-import { IssueDescriptionInput } from "../description-input";
 
 interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
@@ -55,7 +55,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
       : undefined;
 
   return (
-    <>
+    <div className="space-y-2">
       <span className="text-base font-medium text-custom-text-400">
         {projectDetails?.identifier}-{issue?.sequence_id}
       </span>
@@ -89,6 +89,6 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
           currentUser={currentUser}
         />
       )}
-    </>
+    </div>
   );
 });
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index 2f5a02c11e7..00ffa9100c0 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -12,9 +12,16 @@ import {
   CalendarCheck2,
 } from "lucide-react";
 // hooks
-import { useIssueDetail, useProject, useProjectState } from "hooks/store";
 // ui icons
 import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
+// components
+import {
+  DateDropdown,
+  EstimateDropdown,
+  PriorityDropdown,
+  MemberDropdown,
+  StateDropdown,
+} from "@/components/dropdowns";
 import {
   IssueLinkRoot,
   IssueCycleSelect,
@@ -23,13 +30,12 @@ import {
   IssueLabel,
   TIssueOperations,
   IssueRelationSelect,
-} from "components/issues";
-import { DateDropdown, EstimateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
-// components
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+} from "@/components/issues";
 // helpers
-import { cn } from "helpers/common.helper";
-import { shouldHighlightIssueDueDate } from "helpers/issue.helper";
+import { cn } from "@/helpers/common.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -54,14 +60,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   const isEstimateEnabled = projectDetails?.estimate;
   const stateDetails = getStateById(issue.state_id);
 
-  const minDate = issue.start_date ? new Date(issue.start_date) : null;
+  const minDate = getDate(issue.start_date);
   minDate?.setDate(minDate.getDate());
 
-  const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+  const maxDate = getDate(issue.target_date);
   maxDate?.setDate(maxDate.getDate());
 
   return (
-    <div className="mt-1">
+    <div>
       <h6 className="text-sm font-medium">Properties</h6>
       {/* TODO: render properties using a common component */}
       <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
diff --git a/web/components/issues/peek-overview/root.tsx b/web/components/issues/peek-overview/root.tsx
index 466bffee7a0..a7f7b23d7a8 100644
--- a/web/components/issues/peek-overview/root.tsx
+++ b/web/components/issues/peek-overview/root.tsx
@@ -1,17 +1,19 @@
 import { FC, useEffect, useState, useMemo } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { TIssue } from "@plane/types";
 // hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { IssueView } from "@/components/issues";
+// ui
+// components
+import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED, ISSUE_RESTORED } from "@/constants/event-tracker";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
+import { useEventTracker, useIssueDetail, useIssues, useUser } from "@/hooks/store";
 // components
-import { IssueView } from "components/issues";
 // types
-import { TIssue } from "@plane/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EIssuesStoreType } from "constants/issue";
-import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED, ISSUE_RESTORED } from "constants/event-tracker";
 
 interface IIssuePeekOverview {
   is_archived?: boolean;
@@ -20,13 +22,7 @@ interface IIssuePeekOverview {
 
 export type TIssuePeekOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
-  update: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: Partial<TIssue>,
-    showToast?: boolean
-  ) => Promise<void>;
+  update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
   remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   archive: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   restore: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -49,8 +45,6 @@ export type TIssuePeekOperations = {
 
 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   const { is_archived = false, is_draft = false } = props;
-  // hooks
-  const { setToastAlert } = useToast();
   // router
   const router = useRouter();
   const {
@@ -86,49 +80,38 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           console.error("Error fetching the parent issue");
         }
       },
-      update: async (
-        workspaceSlug: string,
-        projectId: string,
-        issueId: string,
-        data: Partial<TIssue>,
-        showToast: boolean = true
-      ) => {
-        try {
-          await updateIssue(workspaceSlug, projectId, issueId, data);
-          if (showToast)
-            setToastAlert({
-              title: "Issue updated successfully",
-              type: "success",
-              message: "Issue updated successfully",
+      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+        await updateIssue(workspaceSlug, projectId, issueId, data)
+          .then(() => {
+            captureIssueEvent({
+              eventName: ISSUE_UPDATED,
+              payload: { ...data, issueId, state: "SUCCESS", element: "Issue peek-overview" },
+              updates: {
+                changed_property: Object.keys(data).join(","),
+                change_details: Object.values(data).join(","),
+              },
+              path: router.asPath,
+            });
+          })
+          .catch(() => {
+            captureIssueEvent({
+              eventName: ISSUE_UPDATED,
+              payload: { state: "FAILED", element: "Issue peek-overview" },
+              path: router.asPath,
+            });
+            setToast({
+              title: "Issue update failed",
+              type: TOAST_TYPE.ERROR,
+              message: "Issue update failed",
             });
-          captureIssueEvent({
-            eventName: ISSUE_UPDATED,
-            payload: { ...data, issueId, state: "SUCCESS", element: "Issue peek-overview" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: router.asPath,
-          });
-        } catch (error) {
-          captureIssueEvent({
-            eventName: ISSUE_UPDATED,
-            payload: { state: "FAILED", element: "Issue peek-overview" },
-            path: router.asPath,
-          });
-          setToastAlert({
-            title: "Issue update failed",
-            type: "error",
-            message: "Issue update failed",
           });
-        }
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           removeIssue(workspaceSlug, projectId, issueId);
-          setToastAlert({
+          setToast({
             title: "Issue deleted successfully",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
             message: "Issue deleted successfully",
           });
           captureIssueEvent({
@@ -137,9 +120,9 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
+          setToast({
             title: "Issue delete failed",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: "Issue delete failed",
           });
           captureIssueEvent({
@@ -152,8 +135,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Issue archived successfully.",
           });
@@ -163,8 +146,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Issue could not be archived. Please try again.",
           });
@@ -178,8 +161,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       restore: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await restoreIssue(workspaceSlug, projectId, issueId);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Issue restored successfully.",
           });
@@ -189,8 +172,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Issue could not be restored. Please try again.",
           });
@@ -203,12 +186,19 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-          setToastAlert({
-            title: "Cycle added to issue successfully",
-            type: "success",
-            message: "Issue added to issue successfully",
+          const addToCyclePromise = addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          setPromiseToast(addToCyclePromise, {
+            loading: "Adding cycle to issue...",
+            success: {
+              title: "Success!",
+              message: () => "Cycle added to issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Cycle add to issue failed",
+            },
           });
+          await addToCyclePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { ...issueIds, state: "SUCCESS", element: "Issue peek-overview" },
@@ -228,24 +218,26 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Cycle add to issue failed",
-            type: "error",
-            message: "Cycle add to issue failed",
-          });
         }
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
-          const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
-          setToastAlert({
-            title: "Cycle removed from issue successfully",
-            type: "success",
-            message: "Cycle removed from issue successfully",
+          const removeFromCyclePromise = removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          setPromiseToast(removeFromCyclePromise, {
+            loading: "Removing cycle from issue...",
+            success: {
+              title: "Success!",
+              message: () => "Cycle removed from issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Cycle remove from issue failed",
+            },
           });
+          await removeFromCyclePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
-            payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
+            payload: { issueId, state: "SUCCESS", element: "Issue peek-overview" },
             updates: {
               changed_property: "cycle_id",
               change_details: "",
@@ -253,11 +245,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             path: router.asPath,
           });
         } catch (error) {
-          setToastAlert({
-            title: "Cycle remove from issue failed",
-            type: "error",
-            message: "Cycle remove from issue failed",
-          });
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue peek-overview" },
@@ -271,12 +258,19 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
         try {
-          const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
-          setToastAlert({
-            title: "Module added to issue successfully",
-            type: "success",
-            message: "Module added to issue successfully",
+          const addToModulePromise = addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
+          setPromiseToast(addToModulePromise, {
+            loading: "Adding module to issue...",
+            success: {
+              title: "Success!",
+              message: () => "Module added to issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Module add to issue failed",
+            },
           });
+          const response = await addToModulePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue peek-overview" },
@@ -296,21 +290,23 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Module add to issue failed",
-            type: "error",
-            message: "Module add to issue failed",
-          });
         }
       },
       removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
         try {
-          await removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
-          setToastAlert({
-            title: "Module removed from issue successfully",
-            type: "success",
-            message: "Module removed from issue successfully",
+          const removeFromModulePromise = removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+          setPromiseToast(removeFromModulePromise, {
+            loading: "Removing module from issue...",
+            success: {
+              title: "Success!",
+              message: () => "Module removed from issue successfully",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Module remove from issue failed",
+            },
           });
+          await removeFromModulePromise;
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
@@ -330,11 +326,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            title: "Module remove from issue failed",
-            type: "error",
-            message: "Module remove from issue failed",
-          });
         }
       },
       removeModulesFromIssue: async (
@@ -343,20 +334,19 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         issueId: string,
         moduleIds: string[]
       ) => {
-        try {
-          await removeModulesFromIssue(workspaceSlug, projectId, issueId, moduleIds);
-          setToastAlert({
-            title: "Module removed from issue successfully",
-            type: "success",
-            message: "Module removed from issue successfully",
-          });
-        } catch (error) {
-          setToastAlert({
-            title: "Module remove from issue failed",
-            type: "error",
-            message: "Module remove from issue failed",
-          });
-        }
+        const removeModulesFromIssuePromise = removeModulesFromIssue(workspaceSlug, projectId, issueId, moduleIds);
+        setPromiseToast(removeModulesFromIssuePromise, {
+          loading: "Removing module from issue...",
+          success: {
+            title: "Success!",
+            message: () => "Module removed from issue successfully",
+          },
+          error: {
+            title: "Error!",
+            message: () => "Module remove from issue failed",
+          },
+        });
+        await removeModulesFromIssuePromise;
       },
     }),
     [
@@ -372,7 +362,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       addModulesToIssue,
       removeIssueFromModule,
       removeModulesFromIssue,
-      setToastAlert,
       captureIssueEvent,
       router.asPath,
     ]
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index cb2100ce03d..35925d6cd52 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -1,13 +1,7 @@
 import { FC, useRef, useState } from "react";
-
 import { observer } from "mobx-react-lite";
-
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import useKeypress from "hooks/use-keypress";
-import useToast from "hooks/use-toast";
-// store hooks
-import { useIssueDetail } from "hooks/store";
+// ui
+import { Spinner } from "@plane/ui";
 // components
 import {
   DeleteIssueModal,
@@ -17,10 +11,15 @@ import {
   PeekOverviewProperties,
   TIssueOperations,
   ArchiveIssueModal,
-} from "components/issues";
+  PeekOverviewIssueAttachments,
+} from "@/components/issues";
+// hooks
+import { useIssueDetail, useUser } from "@/hooks/store";
+import useKeypress from "@/hooks/use-keypress";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+// store hooks
 import { IssueActivity } from "../issue-detail/issue-activity";
-// ui
-import { Spinner } from "@plane/ui";
+import { SubIssuesRoot } from "../sub-issues";
 
 interface IIssueView {
   workspaceSlug: string;
@@ -40,6 +39,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
   // store hooks
+  const { currentUser } = useUser();
   const {
     setPeekIssue,
     isAnyModalOpen,
@@ -50,20 +50,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
     issue: { getIssueById },
   } = useIssueDetail();
   const issue = getIssueById(issueId);
-  // hooks
-  const { alerts } = useToast();
   // remove peek id
   const removeRoutePeekId = () => {
     setPeekIssue(undefined);
   };
 
   useOutsideClickDetector(issuePeekOverviewRef, () => {
-    if (!isAnyModalOpen && (!alerts || alerts.length === 0)) {
+    if (!isAnyModalOpen) {
       removeRoutePeekId();
     }
   });
   const handleKeyDown = () => {
-    if (!isAnyModalOpen) {
+    const slashCommandDropdownElement = document.querySelector("#slash-command");
+    const dropdownElement = document.activeElement?.tagName === "INPUT";
+    if (!isAnyModalOpen && !slashCommandDropdownElement && !dropdownElement) {
       removeRoutePeekId();
       const issueElement = document.getElementById(`issue-${issueId}`);
       if (issueElement) issueElement?.focus();
@@ -91,24 +91,14 @@ export const IssueView: FC<IIssueView> = observer((props) => {
         />
       )}
 
-      {issue && !is_archived && (
+      {issue && isDeleteIssueModalOpen === issue.id && (
         <DeleteIssueModal
-          isOpen={isDeleteIssueModalOpen}
+          isOpen={!!isDeleteIssueModalOpen}
           handleClose={() => {
-            toggleDeleteIssueModal(false);
-            removeRoutePeekId();
+            toggleDeleteIssueModal(null);
           }}
           data={issue}
-          onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
-        />
-      )}
-
-      {issue && is_archived && (
-        <DeleteIssueModal
-          data={issue}
-          isOpen={isDeleteIssueModalOpen}
-          handleClose={() => toggleDeleteIssueModal(false)}
-          onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
+          onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId).then(() => removeRoutePeekId())}
         />
       )}
 
@@ -142,7 +132,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
               disabled={disabled}
             />
             {/* content */}
-            <div className="relative h-full w-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md">
+            <div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
               {isLoading && !issue ? (
                 <div className="flex h-full w-full items-center justify-center">
                   <Spinner />
@@ -151,7 +141,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                 issue && (
                   <>
                     {["side-peek", "modal"].includes(peekMode) ? (
-                      <div className="relative flex flex-col gap-3 px-8 py-5">
+                      <div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
                         <PeekOverviewIssueDetails
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
@@ -162,6 +152,23 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           setIsSubmitting={(value) => setIsSubmitting(value)}
                         />
 
+                        {currentUser && (
+                          <SubIssuesRoot
+                            workspaceSlug={workspaceSlug}
+                            projectId={projectId}
+                            parentIssueId={issueId}
+                            currentUser={currentUser}
+                            disabled={disabled || is_archived}
+                          />
+                        )}
+
+                        <PeekOverviewIssueAttachments
+                          disabled={disabled || is_archived}
+                          issueId={issueId}
+                          projectId={projectId}
+                          workspaceSlug={workspaceSlug}
+                        />
+
                         <PeekOverviewProperties
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
@@ -173,9 +180,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
                       </div>
                     ) : (
-                      <div className={`flex h-full w-full overflow-auto vertical-scrollbar`}>
+                      <div className="vertical-scrollbar flex h-full w-full overflow-auto">
                         <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
-                          <div>
+                          <div className="space-y-3">
                             <PeekOverviewIssueDetails
                               workspaceSlug={workspaceSlug}
                               projectId={projectId}
@@ -186,6 +193,23 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               setIsSubmitting={(value) => setIsSubmitting(value)}
                             />
 
+                            {currentUser && (
+                              <SubIssuesRoot
+                                workspaceSlug={workspaceSlug}
+                                projectId={projectId}
+                                parentIssueId={issueId}
+                                currentUser={currentUser}
+                                disabled={disabled || is_archived}
+                              />
+                            )}
+
+                            <PeekOverviewIssueAttachments
+                              disabled={disabled || is_archived}
+                              issueId={issueId}
+                              projectId={projectId}
+                              workspaceSlug={workspaceSlug}
+                            />
+
                             <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
                           </div>
                         </div>
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index d64e6e3f8c7..32bcc41608f 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -1,16 +1,16 @@
 import React, { Fragment, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { Combobox } from "@headlessui/react";
 import { usePopper } from "react-popper";
-import { observer } from "mobx-react-lite";
+import { Check, Component, Plus, Search, Tag } from "lucide-react";
+import { Combobox } from "@headlessui/react";
 // hooks
-import { useLabel } from "hooks/store";
-import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { IssueLabelsList } from "@/components/ui";
+import { useLabel } from "@/hooks/store";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // ui
-import { IssueLabelsList } from "components/ui";
 // icons
-import { Check, Component, Plus, Search, Tag } from "lucide-react";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -178,7 +178,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                         );
                     } else
                       return (
-                        <div className="border-y border-custom-border-200">
+                        <div key={label.id} 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>
diff --git a/web/components/issues/sub-issues/issue-list-item.tsx b/web/components/issues/sub-issues/issue-list-item.tsx
index c6b87411d4b..27d6ca209cf 100644
--- a/web/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/components/issues/sub-issues/issue-list-item.tsx
@@ -1,16 +1,18 @@
 import React from "react";
-import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
+import { TIssue } from "@plane/types";
 // components
+import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
+import { cn } from "@/helpers/common.helper";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 import { IssueList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
-import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
 // types
-import { TIssue } from "@plane/types";
 import { TSubIssueOperations } from "./root";
 // import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
-import { useIssueDetail, useProject, useProjectState } from "hooks/store";
-import { observer } from "mobx-react-lite";
 
 export interface ISubIssues {
   workspaceSlug: string;
@@ -43,10 +45,12 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
     setPeekIssue,
     issue: { getIssueById },
     subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
+    toggleCreateIssueModal,
+    toggleDeleteIssueModal,
   } = useIssueDetail();
   const project = useProject();
   const { getProjectStates } = useProjectState();
-
+  const { isMobile } = usePlatformOS();
   const issue = getIssueById(issueId);
   const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
   const currentIssueStateDetail =
@@ -89,11 +93,12 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                       setSubIssueHelpers(parentIssueId, "issue_visibility", issueId);
                     }}
                   >
-                    {subIssueHelpers.issue_visibility.includes(issue.id) ? (
-                      <ChevronDown width={14} strokeWidth={2} />
-                    ) : (
-                      <ChevronRight width={14} strokeWidth={2} />
-                    )}
+                    <ChevronRight
+                      className={cn("h-3 w-3 transition-all", {
+                        "rotate-90": subIssueHelpers.issue_visibility.includes(issue.id),
+                      })}
+                      strokeWidth={2}
+                    />
                   </div>
                 )}
               </>
@@ -117,7 +122,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
               onClick={() => handleIssuePeekOverview(issue)}
               className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
             >
-              <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+              <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
                 <span>{issue.name}</span>
               </Tooltip>
             </ControlLink>
@@ -136,7 +141,12 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
           <div className="flex-shrink-0 text-sm">
             <CustomMenu placement="bottom-end" ellipsis>
               {disabled && (
-                <CustomMenu.MenuItem onClick={() => handleIssueCrudState("update", parentIssueId, { ...issue })}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    handleIssueCrudState("update", parentIssueId, { ...issue });
+                    toggleCreateIssueModal(true);
+                  }}
+                >
                   <div className="flex items-center gap-2">
                     <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
                     <span>Edit issue</span>
@@ -145,7 +155,12 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
               )}
 
               {disabled && (
-                <CustomMenu.MenuItem onClick={() => handleIssueCrudState("delete", parentIssueId, issue)}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    handleIssueCrudState("delete", parentIssueId, issue);
+                    toggleDeleteIssueModal(issue.id);
+                  }}
+                >
                   <div className="flex items-center gap-2">
                     <Trash className="h-3.5 w-3.5" strokeWidth={2} />
                     <span>Delete issue</span>
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
index ad09938cb23..1c08a2b9efd 100644
--- a/web/components/issues/sub-issues/issues-list.tsx
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
+import { TIssue } from "@plane/types";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueListItem } from "./issue-list-item";
 // types
-import { TIssue } from "@plane/types";
 import { TSubIssueOperations } from "./root";
 
 export interface IIssueList {
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
index 03c9d8902d1..6c611468a74 100644
--- a/web/components/issues/sub-issues/properties.tsx
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns";
+import { useIssueDetail } from "@/hooks/store";
 // components
-import { PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
 // types
 import { TSubIssueOperations } from "./root";
 
@@ -72,8 +72,8 @@ export const IssueProperty: React.FC<IIssueProperty> = (props) => {
           }
           disabled={!disabled}
           multiple
-          buttonVariant={issue.assignee_ids.length > 0 ? "transparent-without-text" : "border-without-text"}
-          buttonClassName={issue.assignee_ids.length > 0 ? "hover:bg-transparent px-0" : ""}
+          buttonVariant={(issue?.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-without-text"}
+          buttonClassName={(issue?.assignee_ids || []).length > 0 ? "hover:bg-transparent px-0" : ""}
         />
       </div>
     </div>
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 5e406116c45..25cbc2b1769 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -1,21 +1,20 @@
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Plus, ChevronRight, ChevronDown, Loader } from "lucide-react";
+import { useRouter } from "next/router";
+import { Plus, ChevronRight, Loader, Pencil } from "lucide-react";
+import { IUser, TIssue } from "@plane/types";
 // hooks
-import { useEventTracker, useIssueDetail } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { CircularProgressIndicator, CustomMenu, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { ExistingIssuesListModal } from "@/components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+import { cn } from "@/helpers/common.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+import { useEventTracker, useIssueDetail } from "@/hooks/store";
 // components
-import { ExistingIssuesListModal } from "components/core";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { IssueList } from "./issues-list";
-import { ProgressBar } from "./progressbar";
 // ui
-import { CustomMenu } from "@plane/ui";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { IUser, TIssue } from "@plane/types";
 
 export interface ISubIssuesRoot {
   workspaceSlug: string;
@@ -46,8 +45,6 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
   const { workspaceSlug, projectId, parentIssueId, disabled = false } = props;
   // router
   const router = useRouter();
-  // store hooks
-  const { setToastAlert } = useToast();
   const {
     issue: { getIssueById },
     subIssues: { subIssuesByIssueId, stateDistributionByIssueId, subIssueHelpersByIssueId, setSubIssueHelpers },
@@ -56,6 +53,11 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
     updateSubIssue,
     removeSubIssue,
     deleteSubIssue,
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isSubIssuesModalOpen,
+    toggleSubIssuesModal,
+    toggleDeleteIssueModal,
   } = useIssueDetail();
   const { setTrackElement, captureIssueEvent } = useEventTracker();
   // state
@@ -128,8 +130,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
       copyText: (text: string) => {
         const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
         copyTextToClipboard(`${originURL}/${text}`).then(() => {
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Link Copied!",
             message: "Issue link copied to clipboard.",
           });
@@ -139,8 +141,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
         try {
           await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error fetching sub-issues",
             message: "Error fetching sub-issues",
           });
@@ -149,14 +151,14 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
       addSubIssue: async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => {
         try {
           await createSubIssues(workspaceSlug, projectId, parentIssueId, issueIds);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Sub-issues added successfully",
             message: "Sub-issues added successfully",
           });
         } catch (error) {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error adding sub-issue",
             message: "Error adding sub-issue",
           });
@@ -183,8 +185,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Sub-issue updated successfully",
             message: "Sub-issue updated successfully",
           });
@@ -199,8 +201,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error updating sub-issue",
             message: "Error updating sub-issue",
           });
@@ -210,8 +212,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Sub-issue removed successfully",
             message: "Sub-issue removed successfully",
           });
@@ -235,8 +237,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             },
             path: router.asPath,
           });
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error removing sub-issue",
             message: "Error removing sub-issue",
           });
@@ -246,8 +248,8 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Issue deleted successfully",
             message: "Issue deleted successfully",
           });
@@ -263,15 +265,15 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             path: router.asPath,
           });
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error deleting issue",
             message: "Error deleting issue",
           });
         }
       },
     }),
-    [fetchSubIssues, createSubIssues, updateSubIssue, removeSubIssue, deleteSubIssue, setToastAlert, setSubIssueHelpers]
+    [fetchSubIssues, createSubIssues, updateSubIssue, removeSubIssue, deleteSubIssue, setSubIssueHelpers]
   );
 
   const issue = getIssueById(parentIssueId);
@@ -313,55 +315,81 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
         <>
           {subIssues && subIssues?.length > 0 ? (
             <>
-              <div className="relative flex items-center gap-4 text-xs">
-                <div
-                  className="flex cursor-pointer select-none items-center gap-1 rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
-                  onClick={handleFetchSubIssues}
-                >
-                  <div className="flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center">
-                    {subIssueHelpers.preview_loader.includes(parentIssueId) ? (
-                      <Loader width={14} strokeWidth={2} className="animate-spin" />
-                    ) : subIssueHelpers.issue_visibility.includes(parentIssueId) ? (
-                      <ChevronDown width={16} strokeWidth={2} />
-                    ) : (
-                      <ChevronRight width={14} strokeWidth={2} />
-                    )}
+              <div className="relative flex items-center justify-between gap-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 rounded py-1 px-2 transition-all hover:bg-custom-background-80 font-medium"
+                    onClick={handleFetchSubIssues}
+                  >
+                    <div className="flex flex-shrink-0 items-center justify-center">
+                      {subIssueHelpers.preview_loader.includes(parentIssueId) ? (
+                        <Loader strokeWidth={2} className="h-3 w-3 animate-spin" />
+                      ) : (
+                        <ChevronRight
+                          className={cn("h-3 w-3 transition-all", {
+                            "rotate-90": subIssueHelpers.issue_visibility.includes(parentIssueId),
+                          })}
+                          strokeWidth={2}
+                        />
+                      )}
+                    </div>
+                    <div>Sub-issues</div>
+                  </button>
+                  <div className="flex items-center gap-2 text-custom-text-300">
+                    <CircularProgressIndicator
+                      size={16}
+                      percentage={
+                        subIssuesDistribution?.completed?.length && subIssues.length
+                          ? (subIssuesDistribution?.completed?.length / subIssues.length) * 100
+                          : 0
+                      }
+                      strokeWidth={3}
+                    />
+                    <span>
+                      {subIssuesDistribution?.completed?.length ?? 0}/{subIssues.length} Done
+                    </span>
                   </div>
-                  <div>Sub-issues</div>
-                  <div>({subIssues?.length || 0})</div>
-                </div>
-
-                <div className="w-full max-w-[250px] select-none">
-                  <ProgressBar
-                    total={subIssues?.length || 0}
-                    done={
-                      ((subIssuesDistribution?.cancelled ?? []).length || 0) +
-                      ((subIssuesDistribution?.completed ?? []).length || 0)
-                    }
-                  />
                 </div>
 
                 {!disabled && (
-                  <div className="ml-auto flex flex-shrink-0 select-none items-center gap-2">
-                    <div
-                      className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                  <CustomMenu
+                    label={
+                      <>
+                        <Plus className="h-3 w-3" />
+                        Add sub-issue
+                      </>
+                    }
+                    buttonClassName="whitespace-nowrap"
+                    placement="bottom-end"
+                    noBorder
+                    noChevron
+                  >
+                    <CustomMenu.MenuItem
                       onClick={() => {
-                        setTrackElement("Issue detail add sub-issue");
+                        setTrackElement("Issue detail nested sub-issue");
                         handleIssueCrudState("create", parentIssueId, null);
+                        toggleCreateIssueModal(true);
                       }}
                     >
-                      Add sub-issue
-                    </div>
-                    <div
-                      className="cursor-pointer rounded border border-custom-border-100 p-1.5 px-2 shadow transition-all hover:bg-custom-background-80"
+                      <div className="flex items-center gap-2">
+                        <Pencil className="h-3 w-3" />
+                        <span>Create new</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
                       onClick={() => {
-                        setTrackElement("Issue detail add sub-issue");
+                        setTrackElement("Issue detail nested sub-issue");
                         handleIssueCrudState("existing", parentIssueId, null);
+                        toggleSubIssuesModal(true);
                       }}
                     >
-                      Add an existing issue
-                    </div>
-                  </div>
+                      <div className="flex items-center gap-2">
+                        <LayersIcon className="h-3 w-3" />
+                        <span>Add existing</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
                 )}
               </div>
 
@@ -382,62 +410,74 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           ) : (
             !disabled && (
               <div className="flex items-center justify-between">
-                <div className="py-2 text-xs italic text-custom-text-300">No Sub-Issues yet</div>
-                <div>
-                  <CustomMenu
-                    label={
-                      <>
-                        <Plus className="h-3 w-3" />
-                        Add sub-issue
-                      </>
-                    }
-                    buttonClassName="whitespace-nowrap"
-                    placement="bottom-end"
-                    noBorder
-                    noChevron
+                <div className="text-xs italic text-custom-text-300">No sub-issues yet</div>
+                <CustomMenu
+                  label={
+                    <>
+                      <Plus className="h-3 w-3" />
+                      Add sub-issue
+                    </>
+                  }
+                  buttonClassName="whitespace-nowrap"
+                  placement="bottom-end"
+                  noBorder
+                  noChevron
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      setTrackElement("Issue detail nested sub-issue");
+                      handleIssueCrudState("create", parentIssueId, null);
+                      toggleCreateIssueModal(true);
+                    }}
                   >
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setTrackElement("Issue detail nested sub-issue");
-                        handleIssueCrudState("create", parentIssueId, null);
-                      }}
-                    >
-                      Create new
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setTrackElement("Issue detail nested sub-issue");
-                        handleIssueCrudState("existing", parentIssueId, null);
-                      }}
-                    >
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </div>
+                    <div className="flex items-center gap-2">
+                      <Pencil className="h-3 w-3" />
+                      <span>Create new</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      setTrackElement("Issue detail nested sub-issue");
+                      handleIssueCrudState("existing", parentIssueId, null);
+                      toggleSubIssuesModal(true);
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <LayersIcon className="h-3 w-3" />
+                      <span>Add existing</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
               </div>
             )
           )}
 
           {/* issue create, add from existing , update and delete modals */}
-          {issueCrudState?.create?.toggle && issueCrudState?.create?.parentIssueId && (
+          {issueCrudState?.create?.toggle && issueCrudState?.create?.parentIssueId && isCreateIssueModalOpen && (
             <CreateUpdateIssueModal
               isOpen={issueCrudState?.create?.toggle}
               data={{
                 parent_id: issueCrudState?.create?.parentIssueId,
               }}
-              onClose={() => handleIssueCrudState("create", null, null)}
+              onClose={() => {
+                handleIssueCrudState("create", null, null);
+                toggleCreateIssueModal(false);
+              }}
               onSubmit={async (_issue: TIssue) => {
                 await subIssueOperations.addSubIssue(workspaceSlug, projectId, parentIssueId, [_issue.id]);
               }}
             />
           )}
 
-          {issueCrudState?.existing?.toggle && issueCrudState?.existing?.parentIssueId && (
+          {issueCrudState?.existing?.toggle && issueCrudState?.existing?.parentIssueId && isSubIssuesModalOpen && (
             <ExistingIssuesListModal
               workspaceSlug={workspaceSlug}
               projectId={projectId}
               isOpen={issueCrudState?.existing?.toggle}
-              handleClose={() => handleIssueCrudState("existing", null, null)}
+              handleClose={() => {
+                handleIssueCrudState("existing", null, null);
+                toggleSubIssuesModal(false);
+              }}
               searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
               handleOnSubmit={(_issue) =>
                 subIssueOperations.addSubIssue(
@@ -457,6 +497,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                 isOpen={issueCrudState?.update?.toggle}
                 onClose={() => {
                   handleIssueCrudState("update", null, null);
+                  toggleCreateIssueModal(false);
                 }}
                 data={issueCrudState?.update?.issue ?? undefined}
                 onSubmit={async (_issue: TIssue) => {
@@ -482,6 +523,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                 isOpen={issueCrudState?.delete?.toggle}
                 handleClose={() => {
                   handleIssueCrudState("delete", null, null);
+                  toggleDeleteIssueModal(null);
                 }}
                 data={issueCrudState?.delete?.issue as TIssue}
                 onSubmit={async () =>
diff --git a/web/components/issues/title-input.tsx b/web/components/issues/title-input.tsx
index 4a4057a6ac6..11a82e623b7 100644
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@@ -3,9 +3,9 @@ import { observer } from "mobx-react";
 // components
 import { TextArea } from "@plane/ui";
 // types
+import useDebounce from "@/hooks/use-debounce";
 import { TIssueOperations } from "./issue-detail";
 // hooks
-import useDebounce from "hooks/use-debounce";
 
 export type IssueTitleInputProps = {
   disabled?: boolean;
@@ -32,7 +32,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   useEffect(() => {
     const textarea = document.querySelector("#title-input");
     if (debouncedValue && debouncedValue !== value) {
-      issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
+      issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
         setIsSubmitting("saved");
         if (textarea && !textarea.matches(":focus")) {
           const trimmedTitle = debouncedValue.trim();
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index e53e9114744..34dda423558 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { TwitterPicker } from "react-color";
-import { Dialog, Popover, Transition } from "@headlessui/react";
+import { Controller, useForm } from "react-hook-form";
 import { ChevronDown } from "lucide-react";
+import { Dialog, Popover, Transition } from "@headlessui/react";
+import type { IIssueLabel, IState } from "@plane/types";
 // hooks
-import { useLabel } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "@/constants/label";
+import { useLabel } from "@/hooks/store";
 // ui
-import { Button, Input } from "@plane/ui";
 // types
-import type { IIssueLabel, IState } from "@plane/types";
 // constants
-import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
 
 // types
 type Props = {
@@ -64,8 +63,6 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
     reset(defaultValues);
   };
 
-  const { setToastAlert } = useToast();
-
   const onSubmit = async (formData: IIssueLabel) => {
     if (!workspaceSlug) return;
 
@@ -75,9 +72,9 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
         if (onSuccess) onSuccess(res);
       })
       .catch((error) => {
-        setToastAlert({
+        setToast({
           title: "Oops!",
-          type: "error",
+          type: TOAST_TYPE.ERROR,
           message: error?.error ?? "Error while adding the label",
         });
         reset(formData);
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 2d2be046dcd..c2ea3930a4f 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -1,18 +1,17 @@
 import React, { forwardRef, useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { TwitterPicker } from "react-color";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
-// hooks
-import { useLabel } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { IIssueLabel } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@/constants/label";
+// hooks
+import { useLabel } from "@/hooks/store";
 // types
-import { IIssueLabel } from "@plane/types";
-// fetch-keys
-import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
 
 type Props = {
   labelForm: boolean;
@@ -35,8 +34,6 @@ export const CreateUpdateLabelInline = observer(
     const { workspaceSlug, projectId } = router.query;
     // store hooks
     const { createLabel, updateLabel } = useLabel();
-    // toast alert
-    const { setToastAlert } = useToast();
     // form info
     const {
       handleSubmit,
@@ -65,9 +62,9 @@ export const CreateUpdateLabelInline = observer(
           reset(defaultValues);
         })
         .catch((error) => {
-          setToastAlert({
+          setToast({
             title: "Oops!",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: error?.error ?? "Error while adding the label",
           });
           reset(formData);
@@ -77,15 +74,16 @@ export const CreateUpdateLabelInline = observer(
     const handleLabelUpdate: SubmitHandler<IIssueLabel> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
       await updateLabel(workspaceSlug.toString(), projectId.toString(), labelToUpdate?.id!, formData)
         .then(() => {
           reset(defaultValues);
           handleClose();
         })
         .catch((error) => {
-          setToastAlert({
+          setToast({
             title: "Oops!",
-            type: "error",
+            type: TOAST_TYPE.ERROR,
             message: error?.error ?? "Error while updating the label",
           });
           reset(formData);
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 64d15eb65cb..773ceac37fd 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -1,17 +1,15 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useLabel } from "hooks/store";
+import type { IIssueLabel } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { useLabel } from "@/hooks/store";
 // icons
-import { AlertTriangle } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Button } from "@plane/ui";
 // types
-import type { IIssueLabel } from "@plane/types";
 
 type Props = {
   isOpen: boolean;
@@ -28,8 +26,6 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
   const { deleteLabel } = useLabel();
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  // hooks
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -49,8 +45,8 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
         setIsDeleteLoading(false);
 
         const error = err?.error || "Label could not be deleted. Please try again.";
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: error,
         });
diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx
index eca3bcaafd8..d1540605931 100644
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@@ -1,12 +1,12 @@
 import { useRef, useState } from "react";
-import { LucideIcon, X } from "lucide-react";
 import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
+import { LucideIcon, X } from "lucide-react";
+import { IIssueLabel } from "@plane/types";
 //ui
 import { CustomMenu } from "@plane/ui";
 //types
-import { IIssueLabel } from "@plane/types";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 //hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 //components
 import { DragHandle } from "./drag-handle";
 import { LabelName } from "./label-name";
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
index 71d11dacb91..0a3efc9df64 100644
--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -1,12 +1,4 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
-import { Disclosure, Transition } from "@headlessui/react";
-
-// store
-import { observer } from "mobx-react-lite";
-// icons
-import { ChevronDown, Pencil, Trash2 } from "lucide-react";
-// types
-import { IIssueLabel } from "@plane/types";
 import {
   Draggable,
   DraggableProvided,
@@ -14,10 +6,18 @@ import {
   DraggableStateSnapshot,
   Droppable,
 } from "@hello-pangea/dnd";
-import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
+import { observer } from "mobx-react-lite";
+import { ChevronDown, Pencil, Trash2 } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+
+// store
+// icons
+import { IIssueLabel } from "@plane/types";
+// types
+import useDraggableInPortal from "@/hooks/use-draggable-portal";
 import { CreateUpdateLabelInline } from "./create-update-label-inline";
+import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
 import { ProjectSettingLabelItem } from "./project-setting-label-item";
-import useDraggableInPortal from "hooks/use-draggable-portal";
 
 type Props = {
   label: IIssueLabel;
@@ -107,7 +107,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                         customMenuItems={customMenuItems}
                         dragHandleProps={dragHandleProps}
                         handleLabelDelete={handleLabelDelete}
-                        isLabelGroup={true}
+                        isLabelGroup
                       />
                     )}
 
diff --git a/web/components/labels/project-setting-label-item.tsx b/web/components/labels/project-setting-label-item.tsx
index ed72e4503d9..d8bbee71911 100644
--- a/web/components/labels/project-setting-label-item.tsx
+++ b/web/components/labels/project-setting-label-item.tsx
@@ -1,14 +1,14 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
-import { useRouter } from "next/router";
 import { DraggableProvidedDragHandleProps, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { useRouter } from "next/router";
 import { X, Pencil } from "lucide-react";
+import { IIssueLabel } from "@plane/types";
 // hooks
-import { useLabel } from "hooks/store";
+import { useLabel } from "@/hooks/store";
 // types
-import { IIssueLabel } from "@plane/types";
 // components
-import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
 import { CreateUpdateLabelInline } from "./create-update-label-inline";
+import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
 
 type Props = {
   label: IIssueLabel;
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
index fcd84d70ab1..bbc4023d102 100644
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -1,6 +1,4 @@
 import React, { useState, useRef } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import {
   DragDropContext,
   Draggable,
@@ -9,24 +7,25 @@ import {
   DropResult,
   Droppable,
 } from "@hello-pangea/dnd";
-import { useTheme } from "next-themes";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+import { IIssueLabel } from "@plane/types";
 // hooks
-import { useLabel, useUser } from "hooks/store";
-import useDraggableInPortal from "hooks/use-draggable-portal";
-// components
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
 import {
   CreateUpdateLabelInline,
   DeleteLabelModal,
   ProjectSettingLabelGroup,
   ProjectSettingLabelItem,
-} from "components/labels";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+} from "@/components/labels";
+import { EmptyStateType } from "@/constants/empty-state";
+import { useLabel } from "@/hooks/store";
+import useDraggableInPortal from "@/hooks/use-draggable-portal";
+// components
 // ui
-import { Button, Loader } from "@plane/ui";
 // types
-import { IIssueLabel } from "@plane/types";
 // constants
-import { PROJECT_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 const LABELS_ROOT = "labels.root";
 
@@ -41,10 +40,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
-  const { currentUser } = useUser();
   const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
   // portal
   const renderDraggable = useDraggableInPortal();
@@ -54,10 +50,6 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
     setLabelForm(true);
   };
 
-  const emptyStateDetail = PROJECT_SETTINGS_EMPTY_STATE_DETAILS["labels"];
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("project-settings", "labels", isLightMode);
-
   const onDragEnd = (result: DropResult) => {
     const { combine, draggableId, destination, source } = result;
 
@@ -76,16 +68,18 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
     if (destination?.droppableId === LABELS_ROOT) parentLabel = null;
 
     if (result.reason == "DROP" && childLabel != parentLabel) {
-      updateLabelPosition(
-        workspaceSlug?.toString()!,
-        projectId?.toString()!,
-        childLabel,
-        parentLabel,
-        index,
-        prevParentLabel == parentLabel,
-        prevIndex
-      );
-      return;
+      if (workspaceSlug && projectId) {
+        updateLabelPosition(
+          workspaceSlug?.toString(),
+          projectId?.toString(),
+          childLabel,
+          parentLabel,
+          index,
+          prevParentLabel == parentLabel,
+          prevIndex
+        );
+        return;
+      }
     }
   };
 
@@ -102,9 +96,9 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
           Add label
         </Button>
       </div>
-      <div className="h-full w-full py-8">
+      <div className="w-full py-8">
         {showLabelForm && (
-          <div className="w-full rounded border border-custom-border-200 px-3.5 py-2 my-2">
+          <div className="my-2 w-full rounded border border-custom-border-200 px-3.5 py-2">
             <CreateUpdateLabelInline
               labelForm={showLabelForm}
               setLabelForm={setLabelForm}
@@ -120,12 +114,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
         {projectLabels ? (
           projectLabels.length === 0 && !showLabelForm ? (
             <div className="flex items-center justify-center h-full w-full">
-              <EmptyState
-                title={emptyStateDetail.title}
-                description={emptyStateDetail.description}
-                image={emptyStateImage}
-                size="lg"
-              />
+              <EmptyState type={EmptyStateType.PROJECT_SETTINGS_LABELS} />
             </div>
           ) : (
             projectLabelsTree && (
diff --git a/web/components/modules/applied-filters/date.tsx b/web/components/modules/applied-filters/date.tsx
new file mode 100644
index 00000000000..ef2006195f2
--- /dev/null
+++ b/web/components/modules/applied-filters/date.tsx
@@ -0,0 +1,56 @@
+import { observer } from "mobx-react-lite";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <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>
+      ))}
+    </>
+  );
+});
diff --git a/web/components/modules/applied-filters/index.ts b/web/components/modules/applied-filters/index.ts
new file mode 100644
index 00000000000..cf34b6e69e4
--- /dev/null
+++ b/web/components/modules/applied-filters/index.ts
@@ -0,0 +1,4 @@
+export * from "./date";
+export * from "./members";
+export * from "./root";
+export * from "./status";
diff --git a/web/components/modules/applied-filters/members.tsx b/web/components/modules/applied-filters/members.tsx
new file mode 100644
index 00000000000..9c8ecb4f85e
--- /dev/null
+++ b/web/components/modules/applied-filters/members.tsx
@@ -0,0 +1,46 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// ui
+import { Avatar } from "@plane/ui";
+// types
+import { useMember } from "@/hooks/store";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <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>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/modules/applied-filters/root.tsx b/web/components/modules/applied-filters/root.tsx
new file mode 100644
index 00000000000..3011df0847a
--- /dev/null
+++ b/web/components/modules/applied-filters/root.tsx
@@ -0,0 +1,88 @@
+import { X } from "lucide-react";
+import { TModuleFilters } from "@plane/types";
+// components
+import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
+// types
+
+type Props = {
+  appliedFilters: TModuleFilters;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TModuleFilters, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+};
+
+const MEMBERS_FILTERS = ["lead", "members"];
+const DATE_FILTERS = ["start_date", "target_date"];
+
+export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+
+  if (!appliedFilters) return null;
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TModuleFilters;
+
+        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              {filterKey === "status" && (
+                <AppliedStatusFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("status", val)}
+                  values={value}
+                />
+              )}
+              {DATE_FILTERS.includes(filterKey) && (
+                <AppliedDateFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {MEMBERS_FILTERS.includes(filterKey) && (
+                <AppliedMembersFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {isEditingAllowed && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  onClick={() => handleRemoveFilter(filterKey, null)}
+                >
+                  <X size={12} strokeWidth={2} />
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      {isEditingAllowed && (
+        <button
+          type="button"
+          onClick={handleClearAllFilters}
+          className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        >
+          Clear all
+          <X size={12} strokeWidth={2} />
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/modules/applied-filters/status.tsx b/web/components/modules/applied-filters/status.tsx
new file mode 100644
index 00000000000..7f3d3b45ba6
--- /dev/null
+++ b/web/components/modules/applied-filters/status.tsx
@@ -0,0 +1,41 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// ui
+import { ModuleStatusIcon } from "@plane/ui";
+// constants
+import { MODULE_STATUS } from "@/constants/module";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((status) => {
+        const statusDetails = MODULE_STATUS?.find((s) => s.value === status);
+        if (!statusDetails) return null;
+
+        return (
+          <div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
+            {statusDetails.label}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(status)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/modules/archived-modules/header.tsx b/web/components/modules/archived-modules/header.tsx
new file mode 100644
index 00000000000..f72d35f4ef2
--- /dev/null
+++ b/web/components/modules/archived-modules/header.tsx
@@ -0,0 +1,147 @@
+import { FC, useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+// icons
+import { ListFilter, Search, X } from "lucide-react";
+// types
+import type { TModuleFilters } from "@plane/types";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { FiltersDropdown } from "@/components/issues";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useMember, useModuleFilter } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+
+export const ArchivedModulesHeader: FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { projectId } = router.query;
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const {
+    currentProjectArchivedFilters,
+    currentProjectDisplayFilters,
+    archivedModulesSearchQuery,
+    updateFilters,
+    updateDisplayFilters,
+    updateArchivedModulesSearchQuery,
+  } = useModuleFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(archivedModulesSearchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && archivedModulesSearchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+
+      const newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      else {
+        if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (archivedModulesSearchQuery && archivedModulesSearchQuery.trim() !== "") updateArchivedModulesSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  return (
+    <div className="group relative flex border-b border-custom-border-200">
+      <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
+        <ArchiveTabsList />
+      </div>
+      {/* filter options */}
+      <div className="h-full flex items-center gap-3 self-end px-8">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-5 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <Search className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+            placeholder="Search"
+            value={archivedModulesSearchQuery}
+            onChange={(e) => updateArchivedModulesSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateArchivedModulesSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <ModuleOrderByDropdown
+          value={currentProjectDisplayFilters?.order_by}
+          onChange={(val) => {
+            if (!projectId || val === currentProjectDisplayFilters?.order_by) return;
+            updateDisplayFilters(projectId.toString(), {
+              order_by: val,
+            });
+          }}
+        />
+        <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+          <ModuleFiltersSelection
+            displayFilters={currentProjectDisplayFilters ?? {}}
+            filters={currentProjectArchivedFilters ?? {}}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            handleFiltersUpdate={handleFilters}
+            memberIds={workspaceMemberIds ?? undefined}
+            isArchived
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/modules/archived-modules/index.ts b/web/components/modules/archived-modules/index.ts
new file mode 100644
index 00000000000..f59f0954ef1
--- /dev/null
+++ b/web/components/modules/archived-modules/index.ts
@@ -0,0 +1,4 @@
+export * from "./root";
+export * from "./view";
+export * from "./header";
+export * from "./modal";
diff --git a/web/components/modules/archived-modules/modal.tsx b/web/components/modules/archived-modules/modal.tsx
new file mode 100644
index 00000000000..f922e0ba9c9
--- /dev/null
+++ b/web/components/modules/archived-modules/modal.tsx
@@ -0,0 +1,104 @@
+import { useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
+import { useModule } from "@/hooks/store";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export const ArchiveModuleModal: React.FC<Props> = (props) => {
+  const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
+  // router
+  const router = useRouter();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getModuleNameById, archiveModule } = useModule();
+
+  const moduleName = getModuleNameById(moduleId);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveModule = async () => {
+    setIsArchiving(true);
+    await archiveModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: "Your archives can be found in project archives.",
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/${projectId}/archives/modules?peekModule=${moduleId}`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsArchiving(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 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 bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="px-5 py-4">
+                  <h3 className="text-xl font-medium 2xl:text-2xl">Archive module {moduleName}</h3>
+                  <p className="mt-3 text-sm text-custom-text-200">
+                    Are you sure you want to archive the module? All your archives can be restored later.
+                  </p>
+                  <div className="mt-3 flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button size="sm" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
+                      {isArchiving ? "Archiving" : "Archive"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/modules/archived-modules/root.tsx b/web/components/modules/archived-modules/root.tsx
new file mode 100644
index 00000000000..d697f15b55b
--- /dev/null
+++ b/web/components/modules/archived-modules/root.tsx
@@ -0,0 +1,81 @@
+import React, { useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// types
+import { TModuleFilters } from "@plane/types";
+// components
+import { EmptyState } from "@/components/empty-state";
+import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
+import { CycleModuleListLayout } from "@/components/ui";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// helpers
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+// hooks
+import { useModule, useModuleFilter } from "@/hooks/store";
+
+export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // hooks
+  const { fetchArchivedModules, projectArchivedModuleIds, loader } = useModule();
+  // module filters hook
+  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
+  // derived values
+  const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchArchivedModules(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  if (loader || !projectArchivedModuleIds) {
+    return <CycleModuleListLayout />;
+  }
+
+  return (
+    <>
+      {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
+        <div className="border-b border-custom-border-200 px-5 py-3">
+          <ModuleAppliedFiltersList
+            appliedFilters={currentProjectArchivedFilters ?? {}}
+            handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+          />
+        </div>
+      )}
+      {totalArchivedModules === 0 ? (
+        <div className="h-full place-items-center">
+          <EmptyState type={EmptyStateType.PROJECT_ARCHIVED_NO_MODULES} />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          <ArchivedModulesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/archived-modules/view.tsx b/web/components/modules/archived-modules/view.tsx
new file mode 100644
index 00000000000..56dbd0135ce
--- /dev/null
+++ b/web/components/modules/archived-modules/view.tsx
@@ -0,0 +1,64 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+// components
+import { ModuleListItem, ModulePeekOverview } from "@/components/modules";
+// ui
+import { CycleModuleListLayout } from "@/components/ui";
+// hooks
+import { useModule, useModuleFilter } from "@/hooks/store";
+// assets
+import AllFiltersImage from "@/public/empty-state/module/all-filters.svg";
+import NameFilterImage from "@/public/empty-state/module/name-filter.svg";
+
+export interface IArchivedModulesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredArchivedModuleIds, loader } = useModule();
+  const { archivedModulesSearchQuery } = useModuleFilter();
+  // derived values
+  const filteredArchivedModuleIds = getFilteredArchivedModuleIds(projectId);
+
+  if (loader || !filteredArchivedModuleIds) return <CycleModuleListLayout />;
+
+  if (filteredArchivedModuleIds.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching modules"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching modules</h5>
+          <p className="text-custom-text-400 text-base">
+            {archivedModulesSearchQuery.trim() === ""
+              ? "Remove the filters to see all modules"
+              : "Remove the search criteria to see all modules"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+          {filteredArchivedModuleIds.map((moduleId) => (
+            <ModuleListItem key={moduleId} moduleId={moduleId} isArchived />
+          ))}
+        </div>
+        <ModulePeekOverview
+          projectId={projectId?.toString() ?? ""}
+          workspaceSlug={workspaceSlug?.toString() ?? ""}
+          isArchived
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index bf2e529b74c..57b9d97a75f 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -1,18 +1,17 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useEventTracker, useModule } from "hooks/store";
-import useToast from "hooks/use-toast";
+import type { IModule } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { MODULE_DELETED } from "@/constants/event-tracker";
+import { useEventTracker, useModule } from "@/hooks/store";
 // ui
-import { Button } from "@plane/ui";
 // icons
-import { AlertTriangle } from "lucide-react";
 // types
-import type { IModule } from "@plane/types";
 // constants
-import { MODULE_DELETED } from "constants/event-tracker";
 
 type Props = {
   data: IModule;
@@ -30,8 +29,6 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { captureModuleEvent } = useEventTracker();
   const { deleteModule } = useModule();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -47,8 +44,8 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
       .then(() => {
         if (moduleId || peekModule) router.push(`/${workspaceSlug}/projects/${data.project_id}/modules`);
         handleClose();
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Module deleted successfully.",
         });
@@ -58,8 +55,8 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Module could not be deleted. Please try again.",
         });
diff --git a/web/components/modules/dropdowns/filters/index.ts b/web/components/modules/dropdowns/filters/index.ts
new file mode 100644
index 00000000000..786fc5cec87
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/index.ts
@@ -0,0 +1,6 @@
+export * from "./lead";
+export * from "./members";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
+export * from "./target-date";
diff --git a/web/components/modules/dropdowns/filters/lead.tsx b/web/components/modules/dropdowns/filters/lead.tsx
new file mode 100644
index 00000000000..b8dc8a9d468
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/lead.tsx
@@ -0,0 +1,96 @@
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react-lite";
+// hooks
+import { Avatar, Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
+// components
+// ui
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLead: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+  }, [appliedFilters, getUserDetails, memberIds, , searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Lead${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`lead-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
+                      title={member.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">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/modules/dropdowns/filters/members.tsx b/web/components/modules/dropdowns/filters/members.tsx
new file mode 100644
index 00000000000..3db1f5d0464
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/members.tsx
@@ -0,0 +1,97 @@
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react-lite";
+// hooks
+import { Avatar, Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
+// components
+// ui
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMembers: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Members${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
+                      title={member.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">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/modules/dropdowns/filters/root.tsx b/web/components/modules/dropdowns/filters/root.tsx
new file mode 100644
index 00000000000..7be60a5548a
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/root.tsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+import { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
+// components
+import { TModuleStatus } from "@plane/ui";
+import { FilterOption } from "@/components/issues";
+import { FilterLead, FilterMembers, FilterStartDate, FilterStatus, FilterTargetDate } from "@/components/modules";
+// types
+
+type Props = {
+  displayFilters: TModuleDisplayFilters;
+  filters: TModuleFilters;
+  handleDisplayFiltersUpdate: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
+  handleFiltersUpdate: (key: keyof TModuleFilters, value: string | string[]) => void;
+  memberIds?: string[] | undefined;
+  isArchived?: boolean;
+};
+
+export const ModuleFiltersSelection: React.FC<Props> = observer((props) => {
+  const {
+    displayFilters,
+    filters,
+    handleDisplayFiltersUpdate,
+    handleFiltersUpdate,
+    memberIds,
+    isArchived = false,
+  } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            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="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+        {!isArchived && (
+          <div className="py-2">
+            <FilterOption
+              isChecked={!!displayFilters.favorites}
+              onClick={() =>
+                handleDisplayFiltersUpdate({
+                  favorites: !displayFilters.favorites,
+                })
+              }
+              title="Favorites"
+            />
+          </div>
+        )}
+
+        {/* status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TModuleStatus[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* lead */}
+        <div className="py-2">
+          <FilterLead
+            appliedFilters={filters.lead ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("lead", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* members */}
+        <div className="py-2">
+          <FilterMembers
+            appliedFilters={filters.members ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("members", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* target date */}
+        <div className="py-2">
+          <FilterTargetDate
+            appliedFilters={filters.target_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/modules/dropdowns/filters/start-date.tsx b/web/components/modules/dropdowns/filters/start-date.tsx
new file mode 100644
index 00000000000..2b55ada35aa
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/start-date.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  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_AFTER_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 italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/dropdowns/filters/status.tsx b/web/components/modules/dropdowns/filters/status.tsx
new file mode 100644
index 00000000000..8da11cc26c4
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/status.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { TModuleStatus } from "@plane/types";
+// components
+import { ModuleStatusIcon } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// ui
+// types
+import { MODULE_STATUS } from "@/constants/module";
+// constants
+
+type Props = {
+  appliedFilters: TModuleStatus[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                icon={<ModuleStatusIcon status={status.value} />}
+                title={status.label}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/dropdowns/filters/target-date.tsx b/web/components/modules/dropdowns/filters/target-date.tsx
new file mode 100644
index 00000000000..cbb45eb7a1d
--- /dev/null
+++ b/web/components/modules/dropdowns/filters/target-date.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  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_AFTER_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={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/modules/dropdowns/index.ts b/web/components/modules/dropdowns/index.ts
new file mode 100644
index 00000000000..f6c42552f65
--- /dev/null
+++ b/web/components/modules/dropdowns/index.ts
@@ -0,0 +1,2 @@
+export * from "./filters";
+export * from "./order-by";
diff --git a/web/components/modules/dropdowns/order-by.tsx b/web/components/modules/dropdowns/order-by.tsx
new file mode 100644
index 00000000000..dc309a97acd
--- /dev/null
+++ b/web/components/modules/dropdowns/order-by.tsx
@@ -0,0 +1,70 @@
+import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { TModuleOrderByOptions } from "@plane/types";
+// ui
+import { CustomMenu, getButtonStyling } from "@plane/ui";
+// helpers
+import { MODULE_ORDER_BY_OPTIONS } from "@/constants/module";
+import { cn } from "@/helpers/common.helper";
+// types
+// constants
+
+type Props = {
+  onChange: (value: TModuleOrderByOptions) => void;
+  value: TModuleOrderByOptions | undefined;
+};
+
+export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
+  const { onChange, value } = props;
+
+  const orderByDetails = MODULE_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
+
+  const isDescending = value?.[0] === "-";
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+          <ArrowDownWideNarrow className="h-3 w-3" />
+          {orderByDetails?.label}
+          <ChevronDown className="h-3 w-3" strokeWidth={2} />
+        </div>
+      }
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {MODULE_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => {
+            if (isDescending) onChange(`-${option.key}` as TModuleOrderByOptions);
+            else onChange(option.key);
+          }}
+        >
+          {option.label}
+          {value?.includes(option.key) && <Check className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      <hr className="my-2" />
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (isDescending) onChange(value.slice(1) as TModuleOrderByOptions);
+        }}
+      >
+        Ascending
+        {!isDescending && <Check className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (!isDescending) onChange(`-${value}` as TModuleOrderByOptions);
+        }}
+      >
+        Descending
+        {isDescending && <Check className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  );
+};
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 1dde2b85d0a..30749218d1a 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -1,14 +1,15 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-// components
-import { ModuleStatusSelect } from "components/modules";
-import { DateRangeDropdown, ProjectDropdown, MemberDropdown } from "components/dropdowns";
+import { IModule } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
+// components
+import { DateRangeDropdown, ProjectDropdown, MemberDropdown } from "@/components/dropdowns";
+import { ModuleStatusSelect } from "@/components/modules";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { shouldRenderProject } from "@/helpers/project.helper";
 // types
-import { IModule } from "@plane/types";
 
 type Props = {
   handleFormSubmit: (values: Partial<IModule>, dirtyFields: any) => Promise<void>;
@@ -78,6 +79,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                       setActiveProject(val);
                     }}
                     buttonVariant="border-with-text"
+                    renderCondition={(project) => shouldRenderProject(project)}
                     tabIndex={10}
                   />
                 </div>
@@ -126,7 +128,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   placeholder="Description..."
-                  className="h-24 w-full resize-none text-sm"
+                  className="w-full text-sm resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   tabIndex={2}
                 />
@@ -147,8 +149,8 @@ export const ModuleForm: React.FC<Props> = (props) => {
                       className="h-7"
                       minDate={new Date()}
                       value={{
-                        from: startDateValue ? new Date(startDateValue) : undefined,
-                        to: endDateValue ? new Date(endDateValue) : undefined,
+                        from: getDate(startDateValue),
+                        to: getDate(endDateValue),
                       }}
                       onSelect={(val) => {
                         onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
index ed6b48892c8..14353e6ed9d 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -1,13 +1,15 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
-import { useApplication, useModule } from "hooks/store";
 // ui
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { MODULE_STATUS } from "@/constants/module";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 // constants
-import { MODULE_STATUS } from "constants/module";
+import { useApplication, useModule } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   moduleId: string;
@@ -24,6 +26,8 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
   const { getModuleById } = useModule();
   // derived values
   const moduleDetails = getModuleById(moduleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   return (
     <div
@@ -35,6 +39,7 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
+        isMobile={isMobile}
         tooltipContent={
           <div className="space-y-1">
             <h5>{moduleDetails?.name}</h5>
@@ -54,8 +59,6 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
 
 export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { moduleId } = props;
-  // router
-  const router = useRouter();
   // store hooks
   const {
     router: { workspaceSlug },
@@ -65,14 +68,12 @@ export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const moduleDetails = getModuleById(moduleId);
 
   return (
-    <div
+    <Link
       className="relative flex h-full w-full items-center gap-2"
-      onClick={() =>
-        router.push(`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`)
-      }
+      href={`/${workspaceSlug}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
     >
       <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
       <h6 className="flex-grow truncate text-sm font-medium">{moduleDetails?.name}</h6>
-    </div>
+    </Link>
   );
 });
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index c6caacc921f..f0db46033d1 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -1,20 +1,23 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IModule } from "@plane/types";
 // mobx store
-import { useModule, useProject } from "hooks/store";
 // components
-import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
-import { ModuleGanttBlock } from "components/modules";
+import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "@/components/gantt-chart";
+import { ModuleGanttBlock } from "@/components/modules";
+import { getDate } from "@/helpers/date-time.helper";
+import { useModule, useProject } from "@/hooks/store";
 // types
-import { IModule } from "@plane/types";
 
 export const ModulesListGanttChartView: React.FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
   // store
   const { currentProjectDetails } = useProject();
-  const { projectModuleIds, moduleMap, updateModuleDetails } = useModule();
+  const { getFilteredModuleIds, moduleMap, updateModuleDetails } = useModule();
+  // derived values
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
 
   const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
     if (!workspaceSlug || !module) return;
@@ -32,8 +35,8 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         data: block,
         id: block.id,
         sort_order: block.sort_order,
-        start_date: block.start_date ? new Date(block.start_date) : null,
-        target_date: block.target_date ? new Date(block.target_date) : null,
+        start_date: getDate(block.start_date),
+        target_date: getDate(block.target_date),
       };
     });
 
@@ -44,7 +47,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
       <GanttChartRoot
         title="Modules"
         loaderTitle="Modules"
-        blocks={projectModuleIds ? blockFormat(projectModuleIds) : null}
+        blocks={filteredModuleIds ? blockFormat(filteredModuleIds) : null}
         sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
         blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
diff --git a/web/components/modules/index.ts b/web/components/modules/index.ts
index c87ea79d26a..957726e7d02 100644
--- a/web/components/modules/index.ts
+++ b/web/components/modules/index.ts
@@ -1,3 +1,5 @@
+export * from "./applied-filters";
+export * from "./dropdowns";
 export * from "./select";
 export * from "./sidebar-select";
 export * from "./delete-module-modal";
@@ -9,3 +11,7 @@ export * from "./sidebar";
 export * from "./module-card-item";
 export * from "./module-list-item";
 export * from "./module-peek-overview";
+export * from "./quick-actions";
+
+// archived modules
+export * from "./archived-modules";
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index 47f3313964b..89ae7f3212f 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -2,15 +2,16 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
+import type { IModule } from "@plane/types";
+// components
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { ModuleForm } from "@/components/modules";
+import { MODULE_CREATED, MODULE_UPDATED } from "@/constants/event-tracker";
 // hooks
-import { useEventTracker, useModule, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useEventTracker, useModule, useProject } from "@/hooks/store";
+// ui
 // components
-import { ModuleForm } from "components/modules";
 // types
-import type { IModule } from "@plane/types";
-// constants
-import { MODULE_CREATED, MODULE_UPDATED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -36,8 +37,6 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
   const { captureModuleEvent } = useEventTracker();
   const { workspaceProjectIds } = useProject();
   const { createModule, updateModuleDetails } = useModule();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     reset(defaultValues);
@@ -55,8 +54,8 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
     await createModule(workspaceSlug.toString(), selectedProjectId, payload)
       .then((res) => {
         handleClose();
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Module created successfully.",
         });
@@ -66,10 +65,10 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
         });
       })
       .catch((err) => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: err.detail ?? "Module could not be created. Please try again.",
+          message: err?.detail ?? "Module could not be created. Please try again.",
         });
         captureModuleEvent({
           eventName: MODULE_CREATED,
@@ -86,21 +85,21 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
       .then((res) => {
         handleClose();
 
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Module updated successfully.",
         });
         captureModuleEvent({
           eventName: MODULE_UPDATED,
-          payload: { ...res, changed_properties: Object.keys(dirtyFields), state: "SUCCESS" },
+          payload: { ...res, changed_properties: Object.keys(dirtyFields || {}), state: "SUCCESS" },
         });
       })
       .catch((err) => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: err.detail ?? "Module could not be updated. Please try again.",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
         });
         captureModuleEvent({
           eventName: MODULE_UPDATED,
@@ -109,7 +108,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
       });
   };
 
-  const handleFormSubmit = async (formData: Partial<IModule>, dirtyFields: any) => {
+  const handleFormSubmit = async (formData: Partial<IModule>, dirtyFields: unknown) => {
     if (!workspaceSlug || !projectId) return;
 
     const payload: Partial<IModule> = {
diff --git a/web/components/modules/moduels-list-mobile-header.tsx b/web/components/modules/moduels-list-mobile-header.tsx
new file mode 100644
index 00000000000..94c089328ae
--- /dev/null
+++ b/web/components/modules/moduels-list-mobile-header.tsx
@@ -0,0 +1,40 @@
+import { observer } from "mobx-react";
+import { CustomMenu } from "@plane/ui";
+import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
+import { useModuleFilter, useProject } from "@/hooks/store";
+
+const ModulesListMobileHeader = observer(() => {
+  const { currentProjectDetails } = useProject();
+  const { updateDisplayFilters } = useModuleFilter();
+
+  return (
+    <div className="flex justify-center md:hidden">
+      <CustomMenu
+        maxHeight={"md"}
+        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        // placement="bottom-start"
+        customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+        closeOnSelect
+      >
+        {MODULE_VIEW_LAYOUTS.map((layout) => {
+          if (layout.key == "gantt") return;
+          return (
+            <CustomMenu.MenuItem
+              key={layout.key}
+              onClick={() => {
+                updateDisplayFilters(currentProjectDetails!.id.toString(), { layout: layout.key });
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </div>
+  );
+});
+
+export default ModulesListMobileHeader;
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 4dec3df6eed..5f040fdd69d 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -1,22 +1,22 @@
-import React, { useState } from "react";
+import React from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
-// hooks
-import { useEventTracker, useMember, useModule, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// icons
+import { Info, Star } from "lucide-react";
 // ui
-import { Avatar, AvatarGroup, CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { Avatar, AvatarGroup, LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
+// components
+import { ModuleQuickActions } from "@/components/modules";
 // constants
-import { MODULE_STATUS } from "constants/module";
-import { EUserProjectRoles } from "constants/project";
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "constants/event-tracker";
+import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
+import { MODULE_STATUS } from "@/constants/module";
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useEventTracker, useMember, useModule, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   moduleId: string;
@@ -24,45 +24,46 @@ type Props = {
 
 export const ModuleCardItem: React.FC<Props> = observer((props) => {
   const { moduleId } = props;
-  // states
-  const [editModal, setEditModal] = useState(false);
-  const [deleteModal, setDeleteModal] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
   const { getUserDetails } = useMember();
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
+  const { isMobile } = usePlatformOS();
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
-      .then(() => {
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
         captureEvent(MODULE_FAVORITED, {
           module_id: moduleId,
           element: "Grid layout",
           state: "SUCCESS",
         });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the module to favorites. Please try again.",
-        });
-      });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
   };
 
   const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -70,47 +71,29 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
-      .then(() => {
-        captureEvent(MODULE_UNFAVORITED, {
-          module_id: moduleId,
-          element: "Grid layout",
-          state: "SUCCESS",
-        });
-      })
-      .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/${moduleId}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Module link copied to clipboard.",
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    ).then(() => {
+      captureEvent(MODULE_UNFAVORITED, {
+        module_id: moduleId,
+        element: "Grid layout",
+        state: "SUCCESS",
       });
     });
-  };
-
-  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Modules page grid layout");
-    setEditModal(true);
-  };
 
-  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Modules page grid layout");
-    setDeleteModal(true);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
   };
 
   const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -118,10 +101,18 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     const { query } = router;
 
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekModule: moduleId },
-    });
+    if (query.peekModule) {
+      delete query.peekModule;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekModule: moduleId },
+      });
+    }
   };
 
   if (!moduleDetails) return null;
@@ -135,8 +126,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const completionPercentage = (moduleDetails.completed_issues / moduleTotalIssues) * 100;
 
-  const endDate = new Date(moduleDetails.target_date ?? "");
-  const startDate = new Date(moduleDetails.start_date ?? "");
+  const endDate = getDate(moduleDetails.target_date);
+  const startDate = getDate(moduleDetails.start_date);
 
   const isDateValid = moduleDetails.target_date || moduleDetails.start_date;
 
@@ -153,136 +144,107 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     : "0 Issue";
 
   return (
-    <>
-      {workspaceSlug && projectId && (
-        <CreateUpdateModuleModal
-          isOpen={editModal}
-          onClose={() => setEditModal(false)}
-          data={moduleDetails}
-          projectId={projectId.toString()}
-          workspaceSlug={workspaceSlug.toString()}
-        />
-      )}
-      <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
-      <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
-        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
-          <div>
-            <div className="flex items-center justify-between gap-2">
-              <Tooltip tooltipContent={moduleDetails.name} position="top">
-                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-              </Tooltip>
-              <div className="flex items-center gap-2">
-                {moduleStatus && (
-                  <span
-                    className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                    style={{
-                      color: moduleStatus.color,
-                      backgroundColor: `${moduleStatus.color}20`,
-                    }}
-                  >
-                    {moduleStatus.label}
-                  </span>
-                )}
-                <button onClick={openModuleOverview}>
-                  <Info className="h-4 w-4 text-custom-text-400" />
-                </button>
-              </div>
+    <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
+      <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <div>
+          <div className="flex items-center justify-between gap-2">
+            <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+              <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+            </Tooltip>
+            <div className="flex items-center gap-2">
+              {moduleStatus && (
+                <span
+                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                  style={{
+                    color: moduleStatus.color,
+                    backgroundColor: `${moduleStatus.color}20`,
+                  }}
+                >
+                  {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>
-              {moduleDetails.member_ids?.length > 0 && (
-                <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`}>
-                  <div className="flex cursor-default items-center gap-1">
-                    <AvatarGroup showTooltip={false}>
-                      {moduleDetails.member_ids.map((member_id) => {
-                        const member = getUserDetails(member_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                      })}
-                    </AvatarGroup>
-                  </div>
-                </Tooltip>
-              )}
+        <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>
+            {moduleDetails.member_ids?.length > 0 && (
+              <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
+                <div className="flex cursor-default items-center gap-1">
+                  <AvatarGroup showTooltip={false}>
+                    {moduleDetails.member_ids.map((member_id) => {
+                      const member = getUserDetails(member_id);
+                      return <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 w-full items-center">
+          <Tooltip
+            isMobile={isMobile}
+            tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+            position="top-left"
+          >
+            <div className="flex w-full items-center">
+              <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="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
                   style={{
-                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                    width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
                   }}
-                >
-                  <div
-                    className="absolute left-0 top-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">
-              {isDateValid ? (
-                <>
-                  <span className="text-xs text-custom-text-300">
-                    {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-                  </span>
-                </>
-              ) : (
-                <span className="text-xs text-custom-text-400">No due date</span>
+            </div>
+          </Tooltip>
+
+          <div className="flex items-center justify-between">
+            {isDateValid ? (
+              <>
+                <span className="text-xs text-custom-text-300">
+                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+                </span>
+              </>
+            ) : (
+              <span className="text-xs text-custom-text-400">No due date</span>
+            )}
+
+            <div className="z-[5] flex items-center gap-1.5">
+              {isEditingAllowed &&
+                (moduleDetails.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                  </button>
+                ))}
+              {workspaceSlug && projectId && (
+                <ModuleQuickActions
+                  moduleId={moduleId}
+                  projectId={projectId.toString()}
+                  workspaceSlug={workspaceSlug.toString()}
+                />
               )}
-
-              <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed &&
-                  (moduleDetails.is_favorite ? (
-                    <button type="button" onClick={handleRemoveFromFavorites}>
-                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                    </button>
-                  ) : (
-                    <button type="button" onClick={handleAddToFavorites}>
-                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                    </button>
-                  ))}
-
-                <CustomMenu ellipsis className="z-10">
-                  {isEditingAllowed && (
-                    <>
-                      <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>
         </div>
-      </Link>
-    </>
+      </div>
+    </Link>
   );
 });
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 3d7468f24a0..0f8903430b2 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -1,68 +1,70 @@
-import React, { useState } from "react";
+import React from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
-// hooks
-import { useModule, useUser, useEventTracker, useMember } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// icons
+import { Check, Info, Star, User2 } from "lucide-react";
 // ui
-import { Avatar, AvatarGroup, CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
+// components
+import { ModuleQuickActions } from "@/components/modules";
 // constants
-import { MODULE_STATUS } from "constants/module";
-import { EUserProjectRoles } from "constants/project";
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "constants/event-tracker";
+import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
+import { MODULE_STATUS } from "@/constants/module";
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { getDate, renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { useModule, useUser, useEventTracker, useMember } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   moduleId: string;
+  isArchived?: boolean;
 };
 
 export const ModuleListItem: React.FC<Props> = observer((props) => {
-  const { moduleId } = props;
-  // states
-  const [editModal, setEditModal] = useState(false);
-  const [deleteModal, setDeleteModal] = useState(false);
+  const { moduleId, isArchived = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule();
   const { getUserDetails } = useMember();
-  const { setTrackElement, captureEvent } = useEventTracker();
+  const { captureEvent } = useEventTracker();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
+  const { isMobile } = usePlatformOS();
   const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
-      .then(() => {
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
         captureEvent(MODULE_FAVORITED, {
           module_id: moduleId,
           element: "Grid layout",
           state: "SUCCESS",
         });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the module to favorites. Please try again.",
-        });
-      });
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
   };
 
   const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -70,58 +72,48 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), moduleId)
-      .then(() => {
-        captureEvent(MODULE_UNFAVORITED, {
-          module_id: moduleId,
-          element: "Grid layout",
-          state: "SUCCESS",
-        });
-      })
-      .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/${moduleId}`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Module link copied to clipboard.",
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    ).then(() => {
+      captureEvent(MODULE_UNFAVORITED, {
+        module_id: moduleId,
+        element: "Grid layout",
+        state: "SUCCESS",
       });
     });
-  };
 
-  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Modules page list layout");
-    setEditModal(true);
-  };
-
-  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setTrackElement("Modules page list layout");
-    setDeleteModal(true);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
   };
 
-  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     e.stopPropagation();
     e.preventDefault();
     const { query } = router;
 
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekModule: moduleId },
-    });
+    if (query.peekModule) {
+      delete query.peekModule;
+      router.push({
+        pathname: router.pathname,
+        query: { ...query },
+      });
+    } else {
+      router.push({
+        pathname: router.pathname,
+        query: { ...query, peekModule: moduleId },
+      });
+    }
   };
 
   if (!moduleDetails) return null;
@@ -129,8 +121,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const completionPercentage =
     ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100;
 
-  const endDate = new Date(moduleDetails.target_date ?? "");
-  const startDate = new Date(moduleDetails.start_date ?? "");
+  const endDate = getDate(moduleDetails.target_date);
+  const startDate = getDate(moduleDetails.start_date);
 
   const renderDate = moduleDetails.start_date || moduleDetails.target_date;
 
@@ -143,126 +135,105 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const completedModuleCheck = moduleDetails.status === "completed";
 
   return (
-    <>
-      {workspaceSlug && projectId && (
-        <CreateUpdateModuleModal
-          isOpen={editModal}
-          onClose={() => setEditModal(false)}
-          data={moduleDetails}
-          projectId={projectId.toString()}
-          workspaceSlug={workspaceSlug.toString()}
-        />
-      )}
-      <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
-      <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
-        <div className="group flex w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 flex-col sm:flex-row px-5 py-6 text-sm hover:bg-custom-background-90">
-          <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
-            <div className="relative w-full flex items-center gap-3 overflow-hidden">
-              <div className="flex items-center gap-4 truncate">
-                <span className="flex-shrink-0">
-                  <CircularProgressIndicator size={38} percentage={progress}>
-                    {completedModuleCheck ? (
-                      progress === 100 ? (
-                        <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                      ) : (
-                        <span className="text-sm text-custom-primary-100">{`!`}</span>
-                      )
-                    ) : progress === 100 ? (
+    <Link
+      href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
+      onClick={(e) => {
+        if (isArchived) {
+          openModuleOverview(e);
+        }
+      }}
+    >
+      <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+        <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+          <div className="relative flex w-full items-center gap-3 overflow-hidden">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {completedModuleCheck ? (
+                    progress === 100 ? (
                       <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
                     ) : (
-                      <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                    )}
-                  </CircularProgressIndicator>
-                </span>
-                <Tooltip tooltipContent={moduleDetails.name} position="top">
-                  <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-                </Tooltip>
-              </div>
-              <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
-                <Info className="h-4 w-4 text-custom-text-400" />
-              </button>
-            </div>
-            <div className="flex items-center justify-center flex-shrink-0">
-              {moduleStatus && (
-                <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs flex-shrink-0"
-                  style={{
-                    color: moduleStatus.color,
-                    backgroundColor: `${moduleStatus.color}20`,
-                  }}
-                >
-                  {moduleStatus.label}
-                </span>
-              )}
-            </div>
-          </div>
-
-          <div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
-            <div className="text-xs text-custom-text-300">
-              {renderDate && (
-                <span className=" text-xs text-custom-text-300">
-                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-                </span>
-              )}
-            </div>
-
-            <div className="flex-shrink-0 relative flex items-center gap-3">
-              <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`}>
-                <div className="flex w-10 cursor-default items-center justify-center gap-1">
-                  {moduleDetails.member_ids.length > 0 ? (
-                    <AvatarGroup showTooltip={false}>
-                      {moduleDetails.member_ids.map((member_id) => {
-                        const member = getUserDetails(member_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                      })}
-                    </AvatarGroup>
+                      <span className="text-sm text-custom-primary-100">{`!`}</span>
+                    )
+                  ) : progress === 100 ? (
+                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
                   ) : (
-                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                      <User2 className="h-4 w-4 text-custom-text-400" />
-                    </span>
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
                   )}
-                </div>
+                </CircularProgressIndicator>
+              </span>
+              <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
               </Tooltip>
+            </div>
+            <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+          <div className="flex flex-shrink-0 items-center justify-center">
+            {moduleStatus && (
+              <span
+                className="flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+                style={{
+                  color: moduleStatus.color,
+                  backgroundColor: `${moduleStatus.color}20`,
+                }}
+              >
+                {moduleStatus.label}
+              </span>
+            )}
+          </div>
+        </div>
 
-              {isEditingAllowed &&
-                (moduleDetails.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
-                    <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites} className="z-[1]">
-                    <Star className="h-3.5 w-3.5 text-custom-text-300" />
-                  </button>
-                ))}
+        <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
+          <div className="text-xs text-custom-text-300">
+            {renderDate && (
+              <span className=" text-xs text-custom-text-300">
+                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+              </span>
+            )}
+          </div>
 
-              <CustomMenu verticalEllipsis buttonClassName="z-[1]" placement="bottom-end">
-                {isEditingAllowed && (
-                  <>
-                    <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>
+          <div className="relative flex flex-shrink-0 items-center gap-3">
+            <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
+              <div className="flex w-10 cursor-default items-center justify-center gap-1">
+                {moduleDetails.member_ids.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {moduleDetails.member_ids.map((member_id) => {
+                      const member = getUserDetails(member_id);
+                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                    })}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
                   </span>
-                </CustomMenu.MenuItem>
-              </CustomMenu>
-            </div>
+                )}
+              </div>
+            </Tooltip>
+
+            {isEditingAllowed &&
+              !isArchived &&
+              (moduleDetails.is_favorite ? (
+                <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
+                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                </button>
+              ) : (
+                <button type="button" onClick={handleAddToFavorites} className="z-[1]">
+                  <Star className="h-3.5 w-3.5 text-custom-text-300" />
+                </button>
+              ))}
+            {workspaceSlug && projectId && (
+              <ModuleQuickActions
+                moduleId={moduleId}
+                projectId={projectId.toString()}
+                workspaceSlug={workspaceSlug.toString()}
+                isArchived={isArchived}
+              />
+            )}
           </div>
         </div>
-      </Link>
-    </>
+      </div>
+    </Link>
   );
 });
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
index e3f50447967..6419b13b08c 100644
--- a/web/components/modules/module-mobile-header.tsx
+++ b/web/components/modules/module-mobile-header.tsx
@@ -1,14 +1,21 @@
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import router from "next/router";
+// icons
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+// ui
 import { CustomMenu } from "@plane/ui";
-import { ProjectAnalyticsModal } from "components/analytics";
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
-import { useIssues, useLabel, useMember, useModule, useProjectState } from "hooks/store";
-import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
-import router from "next/router";
-import { useCallback, useState } from "react";
+// components
+import { ProjectAnalyticsModal } from "@/components/analytics";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
+// hooks
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue";
+import { useIssues, useLabel, useMember, useModule, useProjectState } from "@/hooks/store";
+// types
+// constants
 
-export const ModuleMobileHeader = () => {
+export const ModuleMobileHeader = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
   const { getModuleById } = useModule();
   const layouts = [
@@ -47,8 +54,10 @@ export const ModuleMobileHeader = () => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -83,35 +92,36 @@ export const ModuleMobileHeader = () => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+      <div className="flex justify-evenly border-b border-custom-border-200 bg-custom-background-100 py-2">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-sm text-custom-text-200"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
           customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
           closeOnSelect
         >
           {layouts.map((layout, index) => (
             <CustomMenu.MenuItem
+              key={layout.key}
               onClick={() => {
                 handleLayoutChange(ISSUE_LAYOUTS[index].key);
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
+              <layout.icon className="h-3 w-3" />
               <div className="text-custom-text-300">{layout.title}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Filters"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+                <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
@@ -127,14 +137,14 @@ export const ModuleMobileHeader = () => {
             />
           </FiltersDropdown>
         </div>
-        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title="Display"
             placement="bottom-end"
             menuButton={
-              <span className="flex items-center text-custom-text-200 text-sm">
+              <span className="flex items-center text-sm text-custom-text-200">
                 Display
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
@@ -153,11 +163,11 @@ export const ModuleMobileHeader = () => {
 
         <button
           onClick={() => setAnalyticsModal(true)}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+          className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
         >
           Analytics
         </button>
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/modules/module-peek-overview.tsx b/web/components/modules/module-peek-overview.tsx
index 81614b61ba7..ba470a6499f 100644
--- a/web/components/modules/module-peek-overview.tsx
+++ b/web/components/modules/module-peek-overview.tsx
@@ -1,17 +1,18 @@
 import React, { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useModule } from "hooks/store";
+import { useModule } from "@/hooks/store";
 // components
 import { ModuleDetailsSidebar } from "./sidebar";
 
 type Props = {
   projectId: string;
   workspaceSlug: string;
+  isArchived?: boolean;
 };
 
-export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
   // router
   const router = useRouter();
   const { peekModule } = router.query;
@@ -29,23 +30,27 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
   };
 
   useEffect(() => {
-    if (!peekModule) return;
+    if (!peekModule || isArchived) return;
 
     fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
-  }, [fetchModuleDetails, peekModule, projectId, workspaceSlug]);
+  }, [fetchModuleDetails, isArchived, peekModule, projectId, workspaceSlug]);
 
   return (
     <>
       {peekModule && (
         <div
           ref={ref}
-          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 absolute md:relative right-0 z-[9]"
+          className="flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 absolute md:relative right-0 z-[9]"
           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} />
+          <ModuleDetailsSidebar
+            moduleId={peekModule?.toString() ?? ""}
+            handleClose={handleClose}
+            isArchived={isArchived}
+          />
         </div>
       )}
     </>
diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
index bf12fde8bbd..b0ff6760929 100644
--- a/web/components/modules/modules-list-view.tsx
+++ b/web/components/modules/modules-list-view.tsx
@@ -1,58 +1,71 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
+import Image from "next/image";
+import { useRouter } from "next/router";
 // hooks
-import { useApplication, useEventTracker, useModule, useUser } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
 // components
-import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { EmptyState } from "@/components/empty-state";
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
 // ui
-import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "components/ui";
+import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
+// assets
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { MODULE_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { useApplication, useEventTracker, useModule, useModuleFilter } from "@/hooks/store";
+import AllFiltersImage from "public/empty-state/module/all-filters.svg";
+import NameFilterImage from "public/empty-state/module/name-filter.svg";
 
 export const ModulesListView: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, peekModule } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
-  const { projectModuleIds, loader } = useModule();
-
-  const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "modules", isLightMode);
+  const { getFilteredModuleIds, loader } = useModule();
+  const { currentProjectDisplayFilters: displayFilters, searchQuery, currentProjectFilters } = useModuleFilter();
+  // derived values
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const totalFilters = calculateTotalFilters(currentProjectFilters ?? {});
 
-  if (loader || !projectModuleIds)
+  if (loader || !filteredModuleIds)
     return (
       <>
-        {modulesView === "list" && <CycleModuleListLayout />}
-        {modulesView === "grid" && <CycleModuleBoardLayout />}
-        {modulesView === "gantt_chart" && <GanttLayoutLoader />}
+        {displayFilters?.layout === "list" && <CycleModuleListLayout />}
+        {displayFilters?.layout === "board" && <CycleModuleBoardLayout />}
+        {displayFilters?.layout === "gantt" && <GanttLayoutLoader />}
       </>
     );
 
+  if (totalFilters > 0 && filteredModuleIds.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching modules"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching modules</h5>
+          <p className="text-custom-text-400 text-base">
+            {searchQuery.trim() === ""
+              ? "Remove the filters to see all modules"
+              : "Remove the search criteria to see all modules"}
+          </p>
+        </div>
+      </div>
+    );
+
   return (
     <>
-      {projectModuleIds.length > 0 ? (
+      {filteredModuleIds.length > 0 ? (
         <>
-          {modulesView === "list" && (
+          {displayFilters?.layout === "list" && (
             <div className="h-full overflow-y-auto">
               <div className="flex h-full w-full justify-between">
                 <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
-                  {projectModuleIds.map((moduleId) => (
+                  {filteredModuleIds.map((moduleId) => (
                     <ModuleListItem key={moduleId} moduleId={moduleId} />
                   ))}
                 </div>
@@ -63,7 +76,7 @@ export const ModulesListView: React.FC = observer(() => {
               </div>
             </div>
           )}
-          {modulesView === "grid" && (
+          {displayFilters?.layout === "board" && (
             <div className="h-full w-full">
               <div className="flex h-full w-full justify-between">
                 <div
@@ -73,7 +86,7 @@ export const ModulesListView: React.FC = observer(() => {
                       : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
                   } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
                 >
-                  {projectModuleIds.map((moduleId) => (
+                  {filteredModuleIds.map((moduleId) => (
                     <ModuleCardItem key={moduleId} moduleId={moduleId} />
                   ))}
                 </div>
@@ -84,26 +97,15 @@ export const ModulesListView: React.FC = observer(() => {
               </div>
             </div>
           )}
-          {modulesView === "gantt_chart" && <ModulesListGanttChartView />}
+          {displayFilters?.layout === "gantt" && <ModulesListGanttChartView />}
         </>
       ) : (
         <EmptyState
-          title={MODULE_EMPTY_STATE_DETAILS["modules"].title}
-          description={MODULE_EMPTY_STATE_DETAILS["modules"].description}
-          image={EmptyStateImagePath}
-          comicBox={{
-            title: MODULE_EMPTY_STATE_DETAILS["modules"].comicBox.title,
-            description: MODULE_EMPTY_STATE_DETAILS["modules"].comicBox.description,
-          }}
-          primaryButton={{
-            text: MODULE_EMPTY_STATE_DETAILS["modules"].primaryButton.text,
-            onClick: () => {
-              setTrackElement("Module empty state");
-              commandPaletteStore.toggleCreateModuleModal(true);
-            },
+          type={EmptyStateType.PROJECT_MODULE}
+          primaryButtonOnClick={() => {
+            setTrackElement("Module empty state");
+            commandPaletteStore.toggleCreateModuleModal(true);
           }}
-          size="lg"
-          disabled={!isEditingAllowed}
         />
       )}
     </>
diff --git a/web/components/modules/quick-actions.tsx b/web/components/modules/quick-actions.tsx
new file mode 100644
index 00000000000..b7972d61240
--- /dev/null
+++ b/web/components/modules/quick-actions.tsx
@@ -0,0 +1,179 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// icons
+import { ArchiveRestoreIcon, LinkIcon, Pencil, Trash2 } from "lucide-react";
+// ui
+import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ArchiveModuleModal, CreateUpdateModuleModal, DeleteModuleModal } from "@/components/modules";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useModule, useEventTracker, useUser } from "@/hooks/store";
+
+type Props = {
+  moduleId: string;
+  projectId: string;
+  workspaceSlug: string;
+  isArchived?: boolean;
+};
+
+export const ModuleQuickActions: React.FC<Props> = observer((props) => {
+  const { moduleId, projectId, workspaceSlug, isArchived } = props;
+  // router
+  const router = useRouter();
+  // states
+  const [editModal, setEditModal] = useState(false);
+  const [archiveModuleModal, setArchiveModuleModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const {
+    membership: { currentWorkspaceAllProjectsRole },
+  } = useUser();
+  const { getModuleById, restoreModule } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  // auth
+  const isEditingAllowed =
+    !!currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId] >= EUserProjectRoles.MEMBER;
+
+  const moduleState = moduleDetails?.status.toLocaleLowerCase();
+  const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState);
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${moduleId}`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const handleEditModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTrackElement("Modules page list layout");
+    setEditModal(true);
+  };
+
+  const handleArchiveModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setArchiveModuleModal(true);
+  };
+
+  const handleRestoreModule = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await restoreModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your module can be found in project modules.",
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleId}`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be restored. Please try again.",
+        })
+      );
+  };
+
+  const handleDeleteModule = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setTrackElement("Modules page list layout");
+    setDeleteModal(true);
+  };
+
+  return (
+    <>
+      {moduleDetails && (
+        <div className="fixed">
+          <CreateUpdateModuleModal
+            isOpen={editModal}
+            onClose={() => setEditModal(false)}
+            data={moduleDetails}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+          <ArchiveModuleModal
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            moduleId={moduleId}
+            isOpen={archiveModuleModal}
+            handleClose={() => setArchiveModuleModal(false)}
+          />
+          <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+        </div>
+      )}
+      <CustomMenu ellipsis placement="left-start">
+        {isEditingAllowed && !isArchived && (
+          <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>
+        )}
+        {isEditingAllowed && !isArchived && (
+          <CustomMenu.MenuItem onClick={handleArchiveModule} disabled={!isInArchivableGroup}>
+            {isInArchivableGroup ? (
+              <div className="flex items-center gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                Archive module
+              </div>
+            ) : (
+              <div className="flex items-start gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                <div className="-mt-1">
+                  <p>Archive module</p>
+                  <p className="text-xs text-custom-text-400">
+                    Only completed or cancelled <br /> module can be archived.
+                  </p>
+                </div>
+              </div>
+            )}
+          </CustomMenu.MenuItem>
+        )}
+        {isEditingAllowed && isArchived && (
+          <CustomMenu.MenuItem onClick={handleRestoreModule}>
+            <span className="flex items-center justify-start gap-2">
+              <ArchiveRestoreIcon className="h-3 w-3" />
+              <span>Restore module</span>
+            </span>
+          </CustomMenu.MenuItem>
+        )}
+        {!isArchived && (
+          <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>
+        )}
+        {isEditingAllowed && (
+          <div className="border-t pt-1 mt-1">
+            <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>
+          </div>
+        )}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
index 33a634e9ba1..7db3167f567 100644
--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@@ -2,12 +2,12 @@ import React from "react";
 
 // react hook form
 import { Controller, FieldError, Control } from "react-hook-form";
+import type { IModule } from "@plane/types";
 // ui
 import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
 // types
-import type { IModule } from "@plane/types";
+import { MODULE_STATUS } from "@/constants/module";
 // constants
-import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   control: Control<IModule, any>;
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index b8c337fd489..1c4b099db91 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -2,13 +2,13 @@
 import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
+import { IModule } from "@plane/types";
 // ui
 import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
 // types
-import { IModule } from "@plane/types";
+import { MODULE_STATUS } from "@/constants/module";
 // common
 // constants
-import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   control: Control<Partial<IModule>, any>;
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index c8c55321c8c..38618023dcc 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Disclosure, Transition } from "@headlessui/react";
 import {
   AlertCircle,
+  ArchiveRestoreIcon,
   CalendarClock,
   ChevronDown,
   ChevronRight,
@@ -14,25 +14,41 @@ import {
   Trash2,
   UserCircle2,
 } from "lucide-react";
-// hooks
-import { useModule, useUser, useEventTracker } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
-import { DeleteModuleModal } from "components/modules";
-import ProgressChart from "components/core/sidebar/progress-chart";
-import { DateRangeDropdown, MemberDropdown } from "components/dropdowns";
+import { Disclosure, Transition } from "@headlessui/react";
+import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // ui
-import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
+import {
+  CustomMenu,
+  Loader,
+  LayersIcon,
+  CustomSelect,
+  ModuleStatusIcon,
+  UserGroupIcon,
+  TOAST_TYPE,
+  setToast,
+  ArchiveIcon,
+  TextArea,
+} from "@plane/ui";
+// components
+import { LinkModal, LinksList, SidebarProgressStats } from "@/components/core";
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { DateRangeDropdown, MemberDropdown } from "@/components/dropdowns";
+import { ArchiveModuleModal, DeleteModuleModal } from "@/components/modules";
+// constant
+import {
+  MODULE_LINK_CREATED,
+  MODULE_LINK_DELETED,
+  MODULE_LINK_UPDATED,
+  MODULE_UPDATED,
+} from "@/constants/event-tracker";
+import { MODULE_STATUS } from "@/constants/module";
+import { EUserProjectRoles } from "@/constants/project";
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { copyUrlToClipboard } from "helpers/string.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useModule, useUser, useEventTracker } from "@/hooks/store";
 // types
-import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
-// constant
-import { MODULE_STATUS } from "constants/module";
-import { EUserProjectRoles } from "constants/project";
-import { MODULE_LINK_CREATED, MODULE_LINK_DELETED, MODULE_LINK_UPDATED, MODULE_UPDATED } from "constants/event-tracker";
 
 const defaultValues: Partial<IModule> = {
   lead_id: "",
@@ -45,13 +61,15 @@ const defaultValues: Partial<IModule> = {
 type Props = {
   moduleId: string;
   handleClose: () => void;
+  isArchived?: boolean;
 };
 
 // TODO: refactor this component
 export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { moduleId, handleClose } = props;
+  const { moduleId, handleClose, isArchived } = props;
   // states
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+  const [archiveModuleModal, setArchiveModuleModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
   // router
@@ -61,11 +79,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
+  const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } =
+    useModule();
   const { setTrackElement, captureModuleEvent, captureEvent } = useEventTracker();
   const moduleDetails = getModuleById(moduleId);
 
-  const { setToastAlert } = useToast();
+  const moduleState = moduleDetails?.status.toLocaleLowerCase();
+  const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState);
 
   const { reset, control } = useForm({
     defaultValues,
@@ -99,15 +119,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           module_id: moduleId,
           state: "SUCCESS",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Module link created",
           message: "Module link created successfully.",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Some error occurred",
         });
@@ -125,15 +145,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           module_id: moduleId,
           state: "SUCCESS",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Module link updated",
           message: "Module link updated successfully.",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Some error occurred",
         });
@@ -149,15 +169,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           module_id: moduleId,
           state: "SUCCESS",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Module link deleted",
           message: "Module link deleted successfully.",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Some error occurred",
         });
@@ -167,15 +187,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleCopyText = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${moduleId}`)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Link copied",
           message: "Module link copied to clipboard",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Some error occurred",
         });
@@ -187,13 +207,37 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
       start_date: startDate ? renderFormattedPayloadDate(startDate) : null,
       target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
     });
-    setToastAlert({
-      type: "success",
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
       title: "Success!",
       message: "Module updated successfully.",
     });
   };
 
+  const handleRestoreModule = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    await restoreModule(workspaceSlug.toString(), projectId.toString(), moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your module can be found in project modules.",
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleId}`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be restored. Please try again.",
+        })
+      );
+  };
+
   useEffect(() => {
     if (moduleDetails)
       reset({
@@ -201,8 +245,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
       });
   }, [moduleDetails, reset]);
 
-  const isStartValid = new Date(`${moduleDetails?.start_date}`) <= new Date();
-  const isEndValid = new Date(`${moduleDetails?.target_date}`) >= new Date(`${moduleDetails?.start_date}`);
+  const startDate = getDate(moduleDetails?.start_date);
+  const endDate = getDate(moduleDetails?.target_date);
+  const isStartValid = startDate && startDate <= new Date();
+  const isEndValid = startDate && endDate && endDate >= startDate;
 
   const progressPercentage = moduleDetails
     ? Math.round((moduleDetails.completed_issues / moduleDetails.total_issues) * 100)
@@ -236,7 +282,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   return (
-    <>
+    <div className="relative">
       <LinkModal
         isOpen={moduleLinkModal}
         handleClose={() => {
@@ -248,10 +294,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         createIssueLink={handleCreateLink}
         updateIssueLink={handleUpdateLink}
       />
+      {workspaceSlug && projectId && (
+        <ArchiveModuleModal
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          moduleId={moduleId}
+          isOpen={archiveModuleModal}
+          handleClose={() => setArchiveModuleModal(false)}
+        />
+      )}
       <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
-
       <>
-        <div className="flex w-full items-center justify-between">
+        <div className="sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 py-5">
           <div>
             <button
               className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
@@ -261,11 +315,41 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             </button>
           </div>
           <div className="flex items-center gap-3.5">
-            <button onClick={handleCopyText}>
-              <LinkIcon className="h-3 w-3 text-custom-text-300" />
-            </button>
+            {!isArchived && (
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+            )}
             {isEditingAllowed && (
               <CustomMenu placement="bottom-end" ellipsis>
+                {!isArchived && (
+                  <CustomMenu.MenuItem onClick={() => setArchiveModuleModal(true)} disabled={!isInArchivableGroup}>
+                    {isInArchivableGroup ? (
+                      <div className="flex items-center gap-2">
+                        <ArchiveIcon className="h-3 w-3" />
+                        Archive module
+                      </div>
+                    ) : (
+                      <div className="flex items-start gap-2">
+                        <ArchiveIcon className="h-3 w-3" />
+                        <div className="-mt-1">
+                          <p>Archive module</p>
+                          <p className="text-xs text-custom-text-400">
+                            Only completed or cancelled <br /> module can be archived.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                  </CustomMenu.MenuItem>
+                )}
+                {isArchived && (
+                  <CustomMenu.MenuItem onClick={handleRestoreModule}>
+                    <span className="flex items-center justify-start gap-2">
+                      <ArchiveRestoreIcon className="h-3 w-3" />
+                      <span>Restore module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
                 <CustomMenu.MenuItem
                   onClick={() => {
                     setTrackElement("Module peek-overview");
@@ -292,7 +376,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   customButton={
                     <span
                       className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
-                        isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
+                        isEditingAllowed && !isArchived ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       style={{
                         color: moduleStatus ? moduleStatus.color : "#a3a3a2",
@@ -306,7 +390,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   onChange={(value: any) => {
                     submitChanges({ status: value });
                   }}
-                  disabled={!isEditingAllowed}
+                  disabled={!isEditingAllowed || isArchived}
                 >
                   {MODULE_STATUS.map((status) => (
                     <CustomSelect.Option key={status.value} value={status.value}>
@@ -324,9 +408,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         {moduleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
-            {moduleDetails.description}
-          </span>
+          <TextArea
+            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+            value={moduleDetails.description}
+            disabled
+          />
         )}
 
         <div className="flex items-center justify-start gap-1">
@@ -334,7 +420,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             <CalendarClock className="h-4 w-4" />
             <span className="text-base">Date range</span>
           </div>
-          <div className="w-3/5 h-7">
+          <div className="h-7 w-3/5">
             <Controller
               control={control}
               name="start_date"
@@ -342,26 +428,31 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <Controller
                   control={control}
                   name="target_date"
-                  render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
-                    <DateRangeDropdown
-                      buttonContainerClassName="w-full"
-                      buttonVariant="background-with-text"
-                      minDate={new Date()}
-                      value={{
-                        from: startDateValue ? new Date(startDateValue) : undefined,
-                        to: endDateValue ? new Date(endDateValue) : undefined,
-                      }}
-                      onSelect={(val) => {
-                        onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
-                        onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
-                        handleDateChange(val?.from, val?.to);
-                      }}
-                      placeholder={{
-                        from: "Start date",
-                        to: "Target date",
-                      }}
-                    />
-                  )}
+                  render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => {
+                    const startDate = getDate(startDateValue);
+                    const endDate = getDate(endDateValue);
+                    return (
+                      <DateRangeDropdown
+                        buttonContainerClassName="w-full"
+                        buttonVariant="background-with-text"
+                        minDate={new Date()}
+                        value={{
+                          from: startDate,
+                          to: endDate,
+                        }}
+                        onSelect={(val) => {
+                          onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                          onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                          handleDateChange(val?.from, val?.to);
+                        }}
+                        placeholder={{
+                          from: "Start date",
+                          to: "Target date",
+                        }}
+                        disabled={isArchived}
+                      />
+                    );
+                  }}
                 />
               )}
             />
@@ -378,7 +469,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               control={control}
               name="lead_id"
               render={({ field: { value } }) => (
-                <div className="w-3/5 h-7">
+                <div className="h-7 w-3/5">
                   <MemberDropdown
                     value={value ?? null}
                     onChange={(val) => {
@@ -388,6 +479,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                     multiple={false}
                     buttonVariant="background-with-text"
                     placeholder="Lead"
+                    disabled={isArchived}
                   />
                 </div>
               )}
@@ -402,7 +494,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               control={control}
               name="member_ids"
               render={({ field: { value } }) => (
-                <div className="w-3/5 h-7">
+                <div className="h-7 w-3/5">
                   <MemberDropdown
                     value={value ?? []}
                     onChange={(val: string[]) => {
@@ -412,7 +504,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                     projectId={projectId?.toString() ?? ""}
                     buttonVariant={value && value?.length > 0 ? "transparent-without-text" : "background-with-text"}
                     buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
-                    disabled={!isEditingAllowed}
+                    disabled={!isEditingAllowed || isArchived}
                   />
                 </div>
               )}
@@ -423,7 +515,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <LayersIcon className="h-4 w-4" />
               <span className="text-base">Issues</span>
             </div>
-            <div className="h-7 w-3/5 flex items-center">
+            <div className="flex h-7 w-3/5 items-center">
               <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
             </div>
           </div>
@@ -536,7 +628,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                       <div className="mt-2 flex h-72 w-full flex-col space-y-3 overflow-y-auto">
                         {currentProjectRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
                           <>
-                            {isEditingAllowed && (
+                            {isEditingAllowed && !isArchived && (
                               <div className="flex w-full items-center justify-end">
                                 <button
                                   className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
@@ -558,6 +650,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 isMember: currentProjectRole === EUserProjectRoles.MEMBER,
                                 isOwner: currentProjectRole === EUserProjectRoles.ADMIN,
                               }}
+                              disabled={isArchived}
                             />
                           </>
                         ) : (
@@ -566,13 +659,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                               <Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
                               <span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
                             </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>
+                            {isEditingAllowed && !isArchived && (
+                              <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>
@@ -584,6 +679,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
         </div>
       </>
-    </>
+    </div>
   );
 });
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index 03d849a8219..4089e9108b8 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -1,23 +1,28 @@
 import React, { useEffect, useRef } from "react";
 import Image from "next/image";
-import { useRouter } from "next/router";
 import Link from "next/link";
-import { Menu } from "@headlessui/react";
+import { useRouter } from "next/router";
 import { ArchiveRestore, Clock, MessageSquare, MoreVertical, User2 } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
-// icons
-import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
-// constants
-import { snoozeOptions } from "constants/notification";
-// helper
-import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
-import { calculateTimeAgo, renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper";
+import { Menu } from "@headlessui/react";
 // type
 import type { IUserNotification, NotificationType } from "@plane/types";
+// ui
+import { ArchiveIcon, CustomMenu, Tooltip, TOAST_TYPE, setToast  } from "@plane/ui";
 // constants
-import { ISSUE_OPENED, NOTIFICATIONS_READ, NOTIFICATION_ARCHIVED, NOTIFICATION_SNOOZED } from "constants/event-tracker";
+import {
+  ISSUE_OPENED,
+  NOTIFICATIONS_READ,
+  NOTIFICATION_ARCHIVED,
+  NOTIFICATION_SNOOZED,
+} from "@/constants/event-tracker";
+import { snoozeOptions } from "@/constants/notification";
+// helper
+import { calculateTimeAgo, renderFormattedTime, renderFormattedDate, getDate } from "@/helpers/date-time.helper";
+import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "@/helpers/string.helper";
+// hooks
+import { useEventTracker } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
 
 type NotificationCardProps = {
   selectedTab: NotificationType;
@@ -45,13 +50,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   } = props;
   // store hooks
   const { captureEvent } = useEventTracker();
-
+  const { isMobile } = usePlatformOS();
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // states
   const [showSnoozeOptions, setShowSnoozeOptions] = React.useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
   // refs
   const snoozeRef = useRef<HTMLDivElement | null>(null);
 
@@ -62,9 +65,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
       icon: <MessageSquare className="h-3.5 w-3.5 text-custom-text-300" />,
       onClick: () => {
         markNotificationReadStatusToggle(notification.id).then(() => {
-          setToastAlert({
+          setToast({
             title: notification.read_at ? "Notification marked as read" : "Notification marked as unread",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
           });
         });
       },
@@ -79,9 +82,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
       ),
       onClick: () => {
         markNotificationArchivedStatus(notification.id).then(() => {
-          setToastAlert({
+          setToast({
             title: notification.archived_at ? "Notification un-archived" : "Notification archived",
-            type: "success",
+            type: TOAST_TYPE.SUCCESS,
           });
         });
       },
@@ -94,9 +97,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
       return;
     }
     markSnoozeNotification(notification.id, date).then(() => {
-      setToastAlert({
+      setToast({
         title: `Notification snoozed till ${renderFormattedDate(date)}`,
-        type: "success",
+        type: TOAST_TYPE.SUCCESS,
       });
     });
   };
@@ -119,7 +122,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const notificationField = notification.data.issue_activity.field;
   const notificationTriggeredBy = notification.triggered_by_details;
 
-  if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
+  const snoozedTillDate = getDate(notification?.snoozed_till);
+
+  if (snoozedTillDate && isSnoozedTabOpen && snoozedTillDate < new Date()) return null;
 
   return (
     <Link
@@ -132,8 +137,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         closePopover();
       }}
       href={`/${workspaceSlug}/projects/${notification.project}/${
-        notificationField === "archived_at" ? "archived-issues" : "issues"
-      }/${notification.data.issue.id}`}
+        notificationField === "archived_at" ? "archives/" : ""
+      }issues/${notification.data.issue.id}`}
       className={`group relative flex w-full cursor-pointer items-center gap-4 p-3 pl-6 ${
         notification.read_at === null ? "bg-custom-primary-70/5" : "hover:bg-custom-background-200"
       }`}
@@ -218,7 +223,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               <span className="semi-bold">{notification.message}</span>
             </div>
           )}
-          <div className="flex md:hidden items-start">
+          <div className="flex items-start md:hidden">
             <Menu as="div" className={" w-min text-left"}>
               {({ open }) => (
                 <>
@@ -234,11 +239,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                     <Menu.Items className={"absolute right-0 z-10"} static>
                       <div
                         className={
-                          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap"
+                          "my-1 min-w-[12rem] overflow-y-scroll whitespace-nowrap rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
                         }
                       >
                         {moreOptions.map((item) => (
-                          <Menu.Item as="div">
+                          <Menu.Item as="div" key={item.id}>
                             {({ close }) => (
                               <button
                                 onClick={(e) => {
@@ -247,7 +252,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                                   item.onClick();
                                   close();
                                 }}
-                                className="flex gap-x-2 items-center p-1.5"
+                                className="flex items-center gap-x-2 p-1.5"
                               >
                                 {item.icon}
                                 {item.name}
@@ -262,7 +267,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                               e.preventDefault();
                               setShowSnoozeOptions(true);
                             }}
-                            className="flex gap-x-2 items-center p-1.5"
+                            className="flex items-center gap-x-2 p-1.5"
                           >
                             <Clock className="h-3.5 w-3.5 text-custom-text-300" />
                             Snooze
@@ -277,10 +282,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             {showSnoozeOptions && (
               <div
                 ref={snoozeRef}
-                className="absolute right-36 z-20 my-1 top-24 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap"
+                className="absolute right-36 top-24 z-20 my-1 min-w-[12rem] overflow-y-scroll whitespace-nowrap rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
               >
                 {snoozeOptions.map((item) => (
                   <p
+                    key={item.label}
                     className="p-1.5"
                     onClick={(e) => {
                       e.stopPropagation();
@@ -298,7 +304,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         </div>
 
         <div className="flex justify-between gap-2 text-xs">
-          <p className="text-custom-text-300 line-clamp-1">
+          <p className="line-clamp-1 text-custom-text-300">
             {truncateText(
               `${notification.data.issue.identifier}-${notification.data.issue.sequence_id} ${notification.data.issue.name}`,
               50
@@ -313,7 +319,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               </span>
             </p>
           ) : (
-            <p className="flex-shrink-0 text-custom-text-300 mt-auto">{calculateTimeAgo(notification.created_at)}</p>
+            <p className="mt-auto flex-shrink-0 text-custom-text-300">{calculateTimeAgo(notification.created_at)}</p>
           )}
         </div>
       </div>
@@ -330,9 +336,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                   tab: selectedTab,
                   state: "SUCCESS",
                 });
-                setToastAlert({
+                setToast({
                   title: notification.read_at ? "Notification marked as read" : "Notification marked as unread",
-                  type: "success",
+                  type: TOAST_TYPE.SUCCESS,
                 });
               });
             },
@@ -352,15 +358,15 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                   tab: selectedTab,
                   state: "SUCCESS",
                 });
-                setToastAlert({
+                setToast({
                   title: notification.archived_at ? "Notification un-archived" : "Notification archived",
-                  type: "success",
+                  type: TOAST_TYPE.SUCCESS,
                 });
               });
             },
           },
         ].map((item) => (
-          <Tooltip tooltipContent={item.name}>
+          <Tooltip tooltipContent={item.name} key={item.id} isMobile={isMobile}>
             <button
               type="button"
               onClick={(e) => {
@@ -375,7 +381,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             </button>
           </Tooltip>
         ))}
-        <Tooltip tooltipContent="Snooze">
+        <Tooltip tooltipContent="Snooze" isMobile={isMobile}>
           <CustomMenu
             className="flex items-center"
             customButton={
@@ -403,9 +409,9 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                       tab: selectedTab,
                       state: "SUCCESS",
                     });
-                    setToastAlert({
+                    setToast({
                       title: `Notification snoozed till ${renderFormattedDate(item.value)}`,
-                      type: "success",
+                      type: TOAST_TYPE.SUCCESS,
                     });
                   });
                 }}
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index a9fef37aa7b..e831c6d200e 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,22 +1,23 @@
 import React from "react";
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
+import type { NotificationType, NotificationCount } from "@plane/types";
 // components
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-// ui
 import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+// ui
 // hooks
-import { useEventTracker } from "hooks/store";
-// helpers
-import { getNumberCount } from "helpers/string.helper";
-// type
-import type { NotificationType, NotificationCount } from "@plane/types";
-// constants
 import {
   ARCHIVED_NOTIFICATIONS,
   NOTIFICATIONS_READ,
   SNOOZED_NOTIFICATIONS,
   UNREAD_NOTIFICATIONS,
-} from "constants/event-tracker";
+} from "@/constants/event-tracker";
+import { getNumberCount } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// helpers
+// type
+// constants
 
 type NotificationHeaderProps = {
   notificationCount?: NotificationCount | null;
@@ -52,6 +53,8 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
   } = props;
   // store hooks
   const { captureEvent } = useEventTracker();
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   const notificationTabs: Array<{
     label: string;
@@ -84,7 +87,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
         </div>
 
         <div className="flex items-center justify-center gap-x-4 text-custom-text-200">
-          <Tooltip tooltipContent="Refresh">
+          <Tooltip tooltipContent="Refresh" isMobile={isMobile}>
             <button
               type="button"
               onClick={() => {
@@ -94,7 +97,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               <RefreshCw className={`h-3.5 w-3.5 ${isRefreshing ? "animate-spin" : ""}`} />
             </button>
           </Tooltip>
-          <Tooltip tooltipContent="Unread notifications">
+          <Tooltip tooltipContent="Unread notifications" isMobile={isMobile}>
             <button
               type="button"
               onClick={() => {
@@ -154,7 +157,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
             </CustomMenu.MenuItem>
           </CustomMenu>
           <div className="hidden md:block">
-            <Tooltip tooltipContent="Close">
+            <Tooltip tooltipContent="Close" isMobile={isMobile}>
               <button type="button" onClick={() => closePopover()}>
                 <X className="h-3.5 w-3.5" />
               </button>
@@ -178,8 +181,8 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 {snoozed
                   ? "Snoozed Notifications"
                   : readNotification
-                  ? "Unread Notifications"
-                  : "Archived Notifications"}
+                    ? "Unread Notifications"
+                    : "Archived Notifications"}
               </span>
             </h4>
           </button>
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index a8f25762eb8..550ce316b1e 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -1,20 +1,22 @@
 import React, { Fragment } from "react";
-import { Popover, Transition } from "@headlessui/react";
-import { Bell } from "lucide-react";
 import { observer } from "mobx-react-lite";
+import { Bell } from "lucide-react";
+import { Popover, Transition } from "@headlessui/react";
 // hooks
-import { useApplication } from "hooks/store";
-import useUserNotification from "hooks/use-user-notifications";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// icons
 // components
-import { EmptyState } from "components/common";
-import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
 import { Tooltip } from "@plane/ui";
-import { NotificationsLoader } from "components/ui";
-// images
-import emptyNotification from "public/empty-state/notification.svg";
+import { EmptyState } from "@/components/empty-state";
+import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "@/components/notifications";
+import { NotificationsLoader } from "@/components/ui";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
 // helpers
-import { getNumberCount } from "helpers/string.helper";
+import { getNumberCount } from "@/helpers/string.helper";
+import { useApplication } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import useUserNotification from "@/hooks/use-user-notifications";
 
 export const NotificationPopover = observer(() => {
   // states
@@ -23,6 +25,8 @@ export const NotificationPopover = observer(() => {
   const { theme: themeStore } = useApplication();
   // refs
   const notificationPopoverRef = React.useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   const {
     notifications,
@@ -56,6 +60,16 @@ export const NotificationPopover = observer(() => {
     if (selectedNotificationForSnooze === null) setIsActive(false);
   });
 
+  const currentTabEmptyState = snoozed
+    ? EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE
+    : archived
+      ? EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE
+      : selectedTab === "created"
+        ? EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE
+        : selectedTab === "watching"
+          ? EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE
+          : EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE;
+
   return (
     <>
       <SnoozeNotificationModal
@@ -67,7 +81,13 @@ export const NotificationPopover = observer(() => {
       />
       <Popover ref={notificationPopoverRef} className="md:relative w-full">
         <>
-          <Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed}>
+          <Tooltip
+            tooltipContent="Notifications"
+            position="right"
+            className="ml-2"
+            disabled={!isSidebarCollapsed}
+            isMobile={isMobile}
+          >
             <button
               className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                 isActive
@@ -181,11 +201,7 @@ export const NotificationPopover = observer(() => {
                   </div>
                 ) : (
                   <div className="grid h-full w-full scale-75 place-items-center overflow-hidden">
-                    <EmptyState
-                      title="You're updated with all the notifications"
-                      description="You have read all the notifications."
-                      image={emptyNotification}
-                    />
+                    <EmptyState type={currentTabEmptyState} layout="screen-simple" />
                   </div>
                 )
               ) : (
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index f89b3a96345..d7fa81bff93 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -1,17 +1,17 @@
 import { Fragment, FC } from "react";
 import { useRouter } from "next/router";
 import { useForm, Controller } from "react-hook-form";
-import { DateDropdown } from "components/dropdowns";
-import { Transition, Dialog } from "@headlessui/react";
 import { X } from "lucide-react";
+import { Transition, Dialog } from "@headlessui/react";
+import type { IUserNotification } from "@plane/types";
+import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
+import { DateDropdown } from "@/components/dropdowns";
 // constants
-import { allTimeIn30MinutesInterval12HoursFormat } from "constants/notification";
-// hooks
-import useToast from "hooks/use-toast";
+import { allTimeIn30MinutesInterval12HoursFormat } from "@/constants/notification";
 // ui
-import { Button, CustomSelect } from "@plane/ui";
 // types
-import type { IUserNotification } from "@plane/types";
+// helpers
+import { getDate } from "helpers/date-time.helper";
 
 type SnoozeModalProps = {
   isOpen: boolean;
@@ -41,8 +41,6 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const {
     formState: { isSubmitting },
     reset,
@@ -60,7 +58,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
 
     if (!formDataDate) return timeStamps;
 
-    const isToday = today.toDateString() === new Date(formDataDate).toDateString();
+    const isToday = today.toDateString() === getDate(formDataDate)?.toDateString();
 
     if (!isToday) return timeStamps;
 
@@ -93,17 +91,17 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
     );
     const minutes = parseInt(time[1]);
 
-    const dateTime = new Date(formData.date);
-    dateTime.setHours(hours);
-    dateTime.setMinutes(minutes);
+    const dateTime: Date | undefined = getDate(formData?.date);
+    dateTime?.setHours(hours);
+    dateTime?.setMinutes(minutes);
 
     await handleSubmitSnooze(notification.id, dateTime).then(() => {
       handleClose();
       onSuccess();
-      setToastAlert({
+      setToast({
         title: "Notification snoozed",
         message: "Notification snoozed successfully",
-        type: "success",
+        type: TOAST_TYPE.SUCCESS,
       });
     });
   };
@@ -147,7 +145,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
               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-100 p-5 text-left shadow-custom-shadow-md transition-all w-full sm:w-full sm:!max-w-2xl">
+              <Dialog.Panel className="relative w-full transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:!max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="flex items-center justify-between">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
@@ -161,7 +159,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                     </div>
                   </div>
 
-                  <div className="mt-5 flex flex-col md:!flex-row md:items-center gap-3">
+                  <div className="mt-5 flex flex-col gap-3 md:!flex-row md:items-center">
                     <div className="flex-1 pb-3 md:pb-0">
                       <h6 className="mb-2 block text-sm font-medium text-custom-text-400">Pick a date</h6>
                       <Controller
@@ -214,10 +212,11 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                                 onClick={() => {
                                   setValue("period", "AM");
                                 }}
-                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${watch("period") === "AM"
+                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
+                                  watch("period") === "AM"
                                     ? "bg-custom-primary-100/90 text-custom-primary-0"
                                     : "bg-custom-background-80"
-                                  }`}
+                                }`}
                               >
                                 AM
                               </div>
@@ -225,10 +224,11 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                                 onClick={() => {
                                   setValue("period", "PM");
                                 }}
-                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${watch("period") === "PM"
+                                className={`flex h-full w-1/2 cursor-pointer items-center justify-center text-center ${
+                                  watch("period") === "PM"
                                     ? "bg-custom-primary-100/90 text-custom-primary-0"
                                     : "bg-custom-background-80"
-                                  }`}
+                                }`}
                               >
                                 PM
                               </div>
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index c176ed58025..f0980a3d8d4 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/web/components/onboarding/invitations.tsx
@@ -1,23 +1,23 @@
 import React, { useState } from "react";
 import useSWR, { mutate } from "swr";
 // hooks
-import { useEventTracker, useUser, useWorkspace } from "hooks/store";
-// components
+import { CheckCircle2, Search } from "lucide-react";
+import { IWorkspaceMemberInvitation } from "@plane/types";
 import { Button } from "@plane/ui";
+import { MEMBER_ACCEPTED } from "@/constants/event-tracker";
+import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "@/constants/fetch-keys";
+import { ROLE } from "@/constants/workspace";
+import { truncateText } from "@/helpers/string.helper";
+import { getUserRole } from "@/helpers/user.helper";
+import { useEventTracker, useUser, useWorkspace } from "@/hooks/store";
+// components
 // helpers
-import { truncateText } from "helpers/string.helper";
 // services
-import { WorkspaceService } from "services/workspace.service";
+import { WorkspaceService } from "@/services/workspace.service";
 // constants
-import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
-import { ROLE } from "constants/workspace";
-import { MEMBER_ACCEPTED } from "constants/event-tracker";
 // types
-import { IWorkspaceMemberInvitation } from "@plane/types";
 // icons
-import { CheckCircle2, Search } from "lucide-react";
-import {} from "hooks/store/use-event-tracker";
-import { getUserRole } from "helpers/user.helper";
+import {} from "@/hooks/store/use-event-tracker";
 
 type Props = {
   handleNextStep: () => void;
@@ -57,17 +57,18 @@ export const Invitations: React.FC<Props> = (props) => {
   };
 
   const submitInvitations = async () => {
-    if (invitationsRespond.length <= 0) return;
+    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
+
+    if (invitationsRespond.length <= 0 && !invitation?.role) return;
 
     setIsJoiningWorkspaces(true);
-    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
 
     await workspaceService
       .joinWorkspaces({ invitations: invitationsRespond })
       .then(async () => {
         captureEvent(MEMBER_ACCEPTED, {
           member_id: invitation?.id,
-          role: getUserRole(invitation?.role!),
+          role: getUserRole(invitation?.role as any),
           project_id: undefined,
           accepted_from: "App",
           state: "SUCCESS",
@@ -83,7 +84,7 @@ export const Invitations: React.FC<Props> = (props) => {
         console.error(error);
         captureEvent(MEMBER_ACCEPTED, {
           member_id: invitation?.id,
-          role: getUserRole(invitation?.role!),
+          role: getUserRole(invitation?.role as any),
           project_id: undefined,
           accepted_from: "App",
           state: "FAILED",
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 561a428d626..601039efe77 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { Listbox, Transition } from "@headlessui/react";
 import {
   Control,
   Controller,
@@ -14,29 +13,29 @@ import {
   useForm,
 } from "react-hook-form";
 import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
-// services
-import { WorkspaceService } from "services/workspace.service";
-// hooks
-import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { OnboardingStepIndicator } from "components/onboarding/step-indicator";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
-// types
-import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
+import { OnboardingStepIndicator } from "@/components/onboarding/step-indicator";
 // constants
-import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
-import { MEMBER_INVITED } from "constants/event-tracker";
+import { MEMBER_INVITED } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
 // helpers
-import { getUserRole } from "helpers/user.helper";
+import { getUserRole } from "@/helpers/user.helper";
+// hooks
+import { useEventTracker } from "@/hooks/store";
+import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown";
 // assets
-import user1 from "public/users/user-1.png";
-import user2 from "public/users/user-2.png";
+import { WorkspaceService } from "@/services/workspace.service";
 import userDark from "public/onboarding/user-dark.svg";
 import userLight from "public/onboarding/user-light.svg";
+import user1 from "public/users/user-1.png";
+import user2 from "public/users/user-2.png";
+// services
+// types
 
 type Props = {
   finishOnboarding: () => Promise<void>;
@@ -269,7 +268,6 @@ export const InviteMembers: React.FC<Props> = (props) => {
 
   const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
 
-  const { setToastAlert } = useToast();
   const { resolvedTheme } = useTheme();
   // store hooks
   const { captureEvent } = useEventTracker();
@@ -322,8 +320,8 @@ export const InviteMembers: React.FC<Props> = (props) => {
           state: "SUCCESS",
           element: "Onboarding",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Invitations sent successfully.",
         });
@@ -336,8 +334,8 @@ export const InviteMembers: React.FC<Props> = (props) => {
           state: "FAILED",
           element: "Onboarding",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error,
         });
@@ -370,8 +368,8 @@ export const InviteMembers: React.FC<Props> = (props) => {
       >
         <p className="text-base font-semibold text-onboarding-text-400">Members</p>
 
-        {Array.from({ length: 4 }).map(() => (
-          <div className="mt-6 flex items-center gap-2">
+        {Array.from({ length: 4 }).map((i, index) => (
+          <div key={index} className="mt-6 flex items-center gap-2">
             <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full">
               <Image src={resolvedTheme === "dark" ? userDark : userLight} alt="user" className="object-cover" />
             </div>
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index 08ffab379b0..936da676ade 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { IWorkspace, TOnboardingSteps } from "@plane/types";
 // hooks
-import { useUser } from "hooks/store";
+import { Invitations, OnboardingSidebar, OnboardingStepIndicator, Workspace } from "@/components/onboarding";
+import { useUser } from "@/hooks/store";
 // components
-import { Invitations, OnboardingSidebar, OnboardingStepIndicator, Workspace } from "components/onboarding";
 // types
-import { IWorkspace, TOnboardingSteps } from "@plane/types";
 
 type Props = {
   finishOnboarding: () => Promise<void>;
diff --git a/web/components/onboarding/onboarding-sidebar.tsx b/web/components/onboarding/onboarding-sidebar.tsx
index af0da75ca93..695dbdd5ff9 100644
--- a/web/components/onboarding/onboarding-sidebar.tsx
+++ b/web/components/onboarding/onboarding-sidebar.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
-import { useTheme } from "next-themes";
 import Image from "next/image";
+import { useTheme } from "next-themes";
 import { Control, Controller, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import {
   BarChart2,
@@ -10,24 +10,24 @@ import {
   ContrastIcon,
   FileText,
   LayersIcon,
-  LayoutGrid,
   PenSquare,
   Search,
   Settings,
   Bell,
+  Home,
 } from "lucide-react";
+import { IWorkspace } from "@plane/types";
 import { Avatar, DiceIcon, PhotoFilterIcon } from "@plane/ui";
 // hooks
-import { useUser, useWorkspace } from "hooks/store";
+import { useUser, useWorkspace } from "@/hooks/store";
 // types
-import { IWorkspace } from "@plane/types";
-// assets
 import projectEmoji from "public/emoji/project-emoji.svg";
+// assets
 
 const workspaceLinks = [
   {
-    Icon: LayoutGrid,
-    name: "Dashboard",
+    Icon: Home,
+    name: "Home",
   },
   {
     Icon: BarChart2,
@@ -86,8 +86,9 @@ type Props = {
   watch?: UseFormWatch<IWorkspace>;
   userFullName?: string;
 };
-var timer: number = 0;
-var lastWorkspaceName: string = "";
+
+let timer: number = 0;
+let lastWorkspaceName: string = "";
 
 export const OnboardingSidebar: React.FC<Props> = (props) => {
   const { workspaceName, showProject, control, setValue, watch, userFullName } = props;
diff --git a/web/components/onboarding/switch-delete-account-modal.tsx b/web/components/onboarding/switch-delete-account-modal.tsx
index 66b98fb2355..e0ea254a6c6 100644
--- a/web/components/onboarding/switch-delete-account-modal.tsx
+++ b/web/components/onboarding/switch-delete-account-modal.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
 import { useTheme } from "next-themes";
-import { Dialog, Transition } from "@headlessui/react";
+import { mutate } from "swr";
 import { Trash2 } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { useUser } from "@/hooks/store";
+// ui
 
 type Props = {
   isOpen: boolean;
@@ -25,8 +26,6 @@ export const SwitchOrDeleteAccountModal: React.FC<Props> = (props) => {
 
   const { resolvedTheme, setTheme } = useTheme();
 
-  const { setToastAlert } = useToast();
-
   const handleClose = () => {
     setSwitchingAccount(false);
     setIsDeactivating(false);
@@ -44,8 +43,8 @@ export const SwitchOrDeleteAccountModal: React.FC<Props> = (props) => {
         handleClose();
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Failed to sign out. Please try again.",
         })
@@ -58,8 +57,8 @@ export const SwitchOrDeleteAccountModal: React.FC<Props> = (props) => {
 
     await deactivateAccount()
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Account deleted successfully.",
         });
@@ -69,8 +68,8 @@ export const SwitchOrDeleteAccountModal: React.FC<Props> = (props) => {
         handleClose();
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error,
         })
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index c09a2a94cf5..e1ff355d47c 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -1,22 +1,22 @@
 import { useState } from "react";
-import Image from "next/image";
 import { observer } from "mobx-react-lite";
+import Image from "next/image";
 import { X } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useUser } from "hooks/store";
+import { Button } from "@plane/ui";
+import { TourSidebar } from "@/components/onboarding";
+import { PRODUCT_TOUR_SKIPPED, PRODUCT_TOUR_STARTED } from "@/constants/event-tracker";
+import { useApplication, useEventTracker, useUser } from "@/hooks/store";
 // components
-import { TourSidebar } from "components/onboarding";
 // ui
-import { Button } from "@plane/ui";
 // 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 IssuesTour from "public/onboarding/issues.webp";
 import ModulesTour from "public/onboarding/modules.webp";
-import ViewsTour from "public/onboarding/views.webp";
 import PagesTour from "public/onboarding/pages.webp";
+import ViewsTour from "public/onboarding/views.webp";
+import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
 // constants
-import { PRODUCT_TOUR_SKIPPED, PRODUCT_TOUR_STARTED } from "constants/event-tracker";
 
 type Props = {
   onComplete: () => void;
diff --git a/web/components/onboarding/tour/sidebar.tsx b/web/components/onboarding/tour/sidebar.tsx
index 350bd638a4f..53500249328 100644
--- a/web/components/onboarding/tour/sidebar.tsx
+++ b/web/components/onboarding/tour/sidebar.tsx
@@ -1,6 +1,6 @@
 // icons
-import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
 import { FileText } from "lucide-react";
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
 // types
 import { TTourSteps } from "./root";
 
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index a29df3c9422..33ac6a8eef8 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -1,21 +1,22 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { Controller, useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
 import { Camera, User2 } from "lucide-react";
-// hooks
-import { useEventTracker, useUser, useWorkspace } from "hooks/store";
-// components
-import { Button, Input } from "@plane/ui";
-import { OnboardingSidebar, OnboardingStepIndicator } from "components/onboarding";
-import { UserImageUploadModal } from "components/core";
-// types
 import { IUser } from "@plane/types";
-// services
-import { FileService } from "services/file.service";
+import { Button, Input } from "@plane/ui";
+// components
+import { UserImageUploadModal } from "@/components/core";
+import { OnboardingSidebar, OnboardingStepIndicator } from "@/components/onboarding";
+// constants
+import { USER_DETAILS } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useUser, useWorkspace } from "@/hooks/store";
 // assets
+import { FileService } from "@/services/file.service";
 import IssuesSvg from "public/onboarding/onboarding-issues.webp";
-import { USER_DETAILS } from "constants/event-tracker";
+// services
+// types
 
 const defaultValues: Partial<IUser> = {
   first_name: "",
@@ -183,7 +184,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
                         name="first_name"
                         type="text"
                         value={value}
-                        autoFocus={true}
+                        autoFocus
                         onChange={(event) => {
                           setUserName(event.target.value);
                           onChange(event);
@@ -220,6 +221,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
                   <div className="flex flex-wrap overflow-auto break-all">
                     {USE_CASES.map((useCase) => (
                       <div
+                        key={useCase}
                         className={`mb-3 flex-shrink-0 border hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
                           value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
                         } mr-3 rounded-sm p-3 text-sm font-medium`}
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
index ad9342e3aef..02663df264b 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -1,17 +1,15 @@
 import { useState } from "react";
 import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue } from "react-hook-form";
+import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // types
-import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
-// hooks
-import { useEventTracker, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { WORKSPACE_CREATED } from "@/constants/event-tracker";
+import { RESTRICTED_URLS } from "@/constants/workspace";
+import { useEventTracker, useUser, useWorkspace } from "@/hooks/store";
 // services
-import { WorkspaceService } from "services/workspace.service";
+import { WorkspaceService } from "@/services/workspace.service";
 // constants
-import { RESTRICTED_URLS } from "constants/workspace";
-import { WORKSPACE_CREATED } from "constants/event-tracker";
 
 type Props = {
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
@@ -35,8 +33,6 @@ export const Workspace: React.FC<Props> = (props) => {
   const { updateCurrentUser } = useUser();
   const { createWorkspace, fetchWorkspaces, workspaces } = useWorkspace();
   const { captureWorkspaceEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     if (isSubmitting) return;
@@ -49,8 +45,8 @@ export const Workspace: React.FC<Props> = (props) => {
 
           await createWorkspace(formData)
             .then(async (res) => {
-              setToastAlert({
-                type: "success",
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
                 title: "Success!",
                 message: "Workspace created successfully.",
               });
@@ -75,8 +71,8 @@ export const Workspace: React.FC<Props> = (props) => {
                   element: "Onboarding",
                 },
               });
-              setToastAlert({
-                type: "error",
+              setToast({
+                type: TOAST_TYPE.ERROR,
                 title: "Error!",
                 message: "Workspace could not be created. Please try again.",
               });
@@ -84,8 +80,8 @@ export const Workspace: React.FC<Props> = (props) => {
         } else setSlugError(true);
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Some error occurred while creating workspace. Please try again.",
         })
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
index 2f1d62f8488..28e909bf34d 100644
--- a/web/components/page-views/signin.tsx
+++ b/web/components/page-views/signin.tsx
@@ -2,13 +2,13 @@ import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 // hooks
-import { useApplication, useUser } from "hooks/store";
-import useSignInRedirection from "hooks/use-sign-in-redirection";
+import { Spinner } from "@plane/ui";
+import { SignInRoot } from "@/components/account";
+import { PageHead } from "@/components/core";
+import { useApplication, useUser } from "@/hooks/store";
+import useSignInRedirection from "@/hooks/use-sign-in-redirection";
 // components
-import { SignInRoot } from "components/account";
-import { PageHead } from "components/core";
 // ui
-import { Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
diff --git a/web/components/page-views/workspace-dashboard.tsx b/web/components/page-views/workspace-dashboard.tsx
index 0d5d4115a6a..f1561c42e58 100644
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@@ -1,41 +1,30 @@
 import { useEffect } from "react";
-import { useTheme } from "next-themes";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
 // components
-import { TourRoot } from "components/onboarding";
-import { UserGreetingsView } from "components/user";
-import { IssuePeekOverview } from "components/issues";
-import { DashboardWidgets } from "components/dashboard";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// ui
 import { Spinner } from "@plane/ui";
+import { DashboardWidgets } from "@/components/dashboard";
+import { EmptyState } from "@/components/empty-state";
+import { IssuePeekOverview } from "@/components/issues";
+import { TourRoot } from "@/components/onboarding";
+import { UserGreetingsView } from "@/components/user";
+// ui
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { PRODUCT_TOUR_COMPLETED } from "constants/event-tracker";
-import { WORKSPACE_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
+import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
 
 export const WorkspaceDashboardView = observer(() => {
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { captureEvent, setTrackElement } = useEventTracker();
   const {
     commandPalette: { toggleCreateProjectModal },
     router: { workspaceSlug },
   } = useApplication();
-  const {
-    currentUser,
-    updateTourCompleted,
-    membership: { currentWorkspaceRole },
-  } = useUser();
+  const { currentUser, updateTourCompleted } = useUser();
   const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard();
   const { joinedProjectIds } = useProject();
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("onboarding", "dashboard", isLightMode);
-
   const handleTourCompleted = () => {
     updateTourCompleted()
       .then(() => {
@@ -56,8 +45,6 @@ export const WorkspaceDashboardView = observer(() => {
     fetchHomeDashboardWidgets(workspaceSlug);
   }, [fetchHomeDashboardWidgets, workspaceSlug]);
 
-  const isEditingAllowed = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
-
   return (
     <>
       {currentUser && !currentUser.is_tour_completed && (
@@ -78,22 +65,11 @@ export const WorkspaceDashboardView = observer(() => {
             </>
           ) : (
             <EmptyState
-              image={emptyStateImage}
-              title={WORKSPACE_EMPTY_STATE_DETAILS["dashboard"].title}
-              description={WORKSPACE_EMPTY_STATE_DETAILS["dashboard"].description}
-              primaryButton={{
-                text: WORKSPACE_EMPTY_STATE_DETAILS["dashboard"].primaryButton.text,
-                onClick: () => {
-                  setTrackElement("Dashboard empty state");
-                  toggleCreateProjectModal(true);
-                },
-              }}
-              comicBox={{
-                title: WORKSPACE_EMPTY_STATE_DETAILS["dashboard"].comicBox.title,
-                description: WORKSPACE_EMPTY_STATE_DETAILS["dashboard"].comicBox.description,
+              type={EmptyStateType.WORKSPACE_DASHBOARD}
+              primaryButtonOnClick={() => {
+                setTrackElement("Dashboard empty state");
+                toggleCreateProjectModal(true);
               }}
-              size="lg"
-              disabled={!isEditingAllowed}
             />
           )}
         </>
diff --git a/web/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
index eea7e9d7fdd..3f077d0c6d6 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -1,16 +1,16 @@
 import React, { FC } from "react";
 import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
+import { IPage } from "@plane/types";
 // components
-import { PageForm } from "./page-form";
+import { PAGE_CREATED, PAGE_UPDATED } from "@/constants/event-tracker";
+import { useEventTracker } from "@/hooks/store";
 // hooks
-import { useEventTracker } from "hooks/store";
 // types
-import { IPage } from "@plane/types";
-import { useProjectPages } from "hooks/store/use-project-page";
-import { IPageStore } from "store/page.store";
+import { useProjectPages } from "@/hooks/store/use-project-page";
+import { IPageStore } from "@/store/page.store";
+import { PageForm } from "./page-form";
 // constants
-import { PAGE_CREATED, PAGE_UPDATED } from "constants/event-tracker";
 
 type Props = {
   // data?: IPage | null;
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index bba19b31c95..cedd6382d13 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Dialog, Transition } from "@headlessui/react";
+import { useRouter } from "next/router";
 import { AlertTriangle } from "lucide-react";
-// hooks
-import { useEventTracker, usePage } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/ui";
-// types
-import { useProjectPages } from "hooks/store/use-project-page";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PAGE_DELETED } from "constants/event-tracker";
+import { PAGE_DELETED } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, usePage } from "@/hooks/store";
+import { useProjectPages } from "@/hooks/store/use-project-page";
+// types
 
 type TConfirmPageDeletionProps = {
   pageId: string;
@@ -32,9 +31,6 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   const { capturePageEvent } = useEventTracker();
   const pageStore = usePage(pageId);
 
-  // toast alert
-  const { setToastAlert } = useToast();
-
   if (!pageStore) return null;
 
   const { name } = pageStore;
@@ -60,8 +56,8 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
           },
         });
         handleClose();
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Page deleted successfully.",
         });
@@ -74,8 +70,8 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
             state: "FAILED",
           },
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Page could not be deleted. Please try again.",
         });
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index 4f5874e5f5e..c1e02504eb7 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -1,11 +1,12 @@
 import { Controller, useForm } from "react-hook-form";
+import { IPage } from "@plane/types";
 // ui
 import { Button, Input, Tooltip } from "@plane/ui";
 // types
-import { IPage } from "@plane/types";
 // constants
-import { PAGE_ACCESS_SPECIFIERS } from "constants/page";
-import { IPageStore } from "store/page.store";
+import { PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { IPageStore } from "@/store/page.store";
 
 type Props = {
   handleFormSubmit: (values: IPage) => Promise<void>;
@@ -31,7 +32,7 @@ export const PageForm: React.FC<Props> = (props) => {
       ? { name: pageStore.name, description: pageStore.description, access: pageStore.access }
       : defaultValues,
   });
-
+  const { isMobile } = usePlatformOS();
   const handleCreateUpdatePage = (formData: IPage) => handleFormSubmit(formData);
 
   return (
@@ -75,7 +76,7 @@ export const PageForm: React.FC<Props> = (props) => {
             <div className="flex items-center gap-2">
               <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
                 {PAGE_ACCESS_SPECIFIERS.map((access, index) => (
-                  <Tooltip key={access.key} tooltipContent={access.label}>
+                  <Tooltip key={access.key} tooltipContent={access.label} isMobile={isMobile}>
                     <button
                       type="button"
                       onClick={() => onChange(access.key)}
diff --git a/web/components/pages/pages-list/all-pages-list.tsx b/web/components/pages/pages-list/all-pages-list.tsx
index 4ed759a0f4d..3af99ddf6df 100644
--- a/web/components/pages/pages-list/all-pages-list.tsx
+++ b/web/components/pages/pages-list/all-pages-list.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { PagesListView } from "components/pages/pages-list";
-// ui
 import { Loader } from "@plane/ui";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
+import { PagesListView } from "@/components/pages/pages-list";
+// ui
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
 
 export const AllPagesList: FC = observer(() => {
   const pageStores = useProjectPages();
diff --git a/web/components/pages/pages-list/archived-pages-list.tsx b/web/components/pages/pages-list/archived-pages-list.tsx
index eb57d755803..4db6f29a897 100644
--- a/web/components/pages/pages-list/archived-pages-list.tsx
+++ b/web/components/pages/pages-list/archived-pages-list.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { PagesListView } from "components/pages/pages-list";
+import { Loader, Spinner } from "@plane/ui";
+import { PagesListView } from "@/components/pages/pages-list";
 // hooks
 // ui
-import { Loader, Spinner } from "@plane/ui";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
 
 export const ArchivedPagesList: FC = observer(() => {
   const projectPageStore = useProjectPages();
diff --git a/web/components/pages/pages-list/favorite-pages-list.tsx b/web/components/pages/pages-list/favorite-pages-list.tsx
index 4ce301a68f0..227dd7408e1 100644
--- a/web/components/pages/pages-list/favorite-pages-list.tsx
+++ b/web/components/pages/pages-list/favorite-pages-list.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { PagesListView } from "components/pages/pages-list";
+import { Loader } from "@plane/ui";
+import { PagesListView } from "@/components/pages/pages-list";
 // hooks
 // ui
-import { Loader } from "@plane/ui";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
 
 export const FavoritePagesList: FC = observer(() => {
   const projectPageStore = useProjectPages();
diff --git a/web/components/pages/pages-list/list-item.tsx b/web/components/pages/pages-list/list-item.tsx
index 6b1a4793d2c..57b41738ff6 100644
--- a/web/components/pages/pages-list/list-item.tsx
+++ b/web/components/pages/pages-list/list-item.tsx
@@ -1,6 +1,7 @@
 import { FC, useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import {
   AlertCircle,
   Archive,
@@ -13,18 +14,19 @@ import {
   Star,
   Trash2,
 } from "lucide-react";
-import { copyUrlToClipboard } from "helpers/string.helper";
-import { renderFormattedTime, renderFormattedDate } from "helpers/date-time.helper";
+import { IIssueLabel } from "@plane/types";
 // ui
 import { CustomMenu, Tooltip } from "@plane/ui";
 // components
-import { CreateUpdatePageModal, DeletePageModal } from "components/pages";
+import { CreateUpdatePageModal, DeletePageModal } from "@/components/pages";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { useRouter } from "next/router";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
-import { useMember, usePage, useUser } from "hooks/store";
-import { IIssueLabel } from "@plane/types";
+import { EUserProjectRoles } from "@/constants/project";
+import { renderFormattedTime, renderFormattedDate } from "@/helpers/date-time.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useMember, usePage, useUser } from "@/hooks/store";
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export interface IPagesListItem {
   pageId: string;
@@ -44,7 +46,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
 
   const [deletePageModal, setDeletePageModal] = useState(false);
-
+  const { isMobile } = usePlatformOS();
   const {
     currentUser,
     membership: { currentProjectRole },
@@ -182,6 +184,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
               <div className="flex items-center gap-2.5">
                 {archived_at ? (
                   <Tooltip
+                    isMobile={isMobile}
                     tooltipContent={`Archived at ${renderFormattedTime(archived_at)} on ${renderFormattedDate(
                       archived_at
                     )}`}
@@ -189,16 +192,21 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                     <p className="text-sm text-custom-text-200">{renderFormattedTime(archived_at)}</p>
                   </Tooltip>
                 ) : (
-                  <Tooltip
-                    tooltipContent={`Last updated at ${renderFormattedTime(updated_at)} on ${renderFormattedDate(
-                      updated_at
-                    )}`}
-                  >
-                    <p className="text-sm text-custom-text-200">{renderFormattedTime(updated_at)}</p>
-                  </Tooltip>
+                  updated_at && (
+                    <Tooltip
+                      tooltipContent={`Last updated at ${renderFormattedTime(updated_at)} on ${renderFormattedDate(
+                        updated_at
+                      )}`}
+                    >
+                      <p className="text-sm text-custom-text-200">{renderFormattedTime(updated_at)}</p>
+                    </Tooltip>
+                  )
                 )}
                 {isEditingAllowed && (
-                  <Tooltip tooltipContent={`${is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
+                  <Tooltip
+                    tooltipContent={`${is_favorite ? "Remove from favorites" : "Mark as favorite"}`}
+                    isMobile={isMobile}
+                  >
                     {is_favorite ? (
                       <button type="button" onClick={handleRemoveFromFavorites}>
                         <Star className="h-3.5 w-3.5 fill-orange-400 text-orange-400" />
@@ -212,6 +220,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                 )}
                 {userCanChangeAccess && (
                   <Tooltip
+                    isMobile={isMobile}
                     tooltipContent={`${
                       access ? "This page is only visible to you" : "This page can be viewed by anyone in the project"
                     }`}
@@ -228,6 +237,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
                   </Tooltip>
                 )}
                 <Tooltip
+                  isMobile={isMobile}
                   position="top-right"
                   tooltipContent={`Created by ${ownerDetails?.member?.display_name} on ${renderFormattedDate(
                     created_at
diff --git a/web/components/pages/pages-list/list-view.tsx b/web/components/pages/pages-list/list-view.tsx
index ebd1fa12898..165a9a6198f 100644
--- a/web/components/pages/pages-list/list-view.tsx
+++ b/web/components/pages/pages-list/list-view.tsx
@@ -1,17 +1,15 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useUser } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
+import { Loader } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+import { EMPTY_STATE_DETAILS, EmptyStateType } from "@/constants/empty-state";
+import { useApplication } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
 // components
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 import { PagesListItem } from "./list-item";
 // ui
-import { Loader } from "@plane/ui";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { PAGE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 type IPagesListView = {
   pageIds: string[];
@@ -19,34 +17,20 @@ type IPagesListView = {
 
 export const PagesListView: FC<IPagesListView> = (props) => {
   const { pageIds: projectPageIds } = props;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const {
     commandPalette: { toggleCreatePageModal },
   } = useApplication();
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
   // local storage
   const { storedValue: pageTab } = useLocalStorage("pageTab", "Recent");
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const currentPageTabDetails = pageTab
-    ? PAGE_EMPTY_STATE_DETAILS[pageTab as keyof typeof PAGE_EMPTY_STATE_DETAILS]
-    : PAGE_EMPTY_STATE_DETAILS["All"];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("pages", currentPageTabDetails.key, isLightMode);
-
-  const isButtonVisible = currentPageTabDetails.key !== "archived" && currentPageTabDetails.key !== "favorites";
-
   // here we are only observing the projectPageStore, so that we can re-render the component when the projectPageStore changes
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const emptyStateType = pageTab ? `project-page-${pageTab.toLowerCase()}` : EmptyStateType.PROJECT_PAGE_ALL;
+  const isButtonVisible = pageTab !== "archived" && pageTab !== "favorites";
 
   return (
     <>
@@ -60,18 +44,8 @@ export const PagesListView: FC<IPagesListView> = (props) => {
             </ul>
           ) : (
             <EmptyState
-              title={currentPageTabDetails.title}
-              description={currentPageTabDetails.description}
-              image={emptyStateImage}
-              primaryButton={
-                isButtonVisible
-                  ? {
-                      text: "Create new page",
-                      onClick: () => toggleCreatePageModal(true),
-                    }
-                  : undefined
-              }
-              disabled={!isEditingAllowed}
+              type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS}
+              primaryButtonOnClick={isButtonVisible ? () => toggleCreatePageModal(true) : undefined}
             />
           )}
         </div>
diff --git a/web/components/pages/pages-list/private-page-list.tsx b/web/components/pages/pages-list/private-page-list.tsx
index 15a577d80cd..db99c694215 100644
--- a/web/components/pages/pages-list/private-page-list.tsx
+++ b/web/components/pages/pages-list/private-page-list.tsx
@@ -2,10 +2,10 @@ import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
 // components
-import { PagesListView } from "components/pages/pages-list";
-// ui
 import { Loader } from "@plane/ui";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
+import { PagesListView } from "@/components/pages/pages-list";
+// ui
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
 
 export const PrivatePagesList: FC = observer(() => {
   const projectPageStore = useProjectPages();
diff --git a/web/components/pages/pages-list/recent-pages-list.tsx b/web/components/pages/pages-list/recent-pages-list.tsx
index 71bbf12ace2..7066fff2517 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -1,39 +1,27 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useUser } from "hooks/store";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
+import { Loader } from "@plane/ui";
+import { EmptyState } from "@/components/empty-state";
+import { PagesListView } from "@/components/pages/pages-list";
+import { EmptyStateType } from "@/constants/empty-state";
+import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
+import { useApplication } from "@/hooks/store";
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
 // components
-import { PagesListView } from "components/pages/pages-list";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Loader } from "@plane/ui";
 // helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { PAGE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 export const RecentPagesList: FC = observer(() => {
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
-  const { recentProjectPages } = useProjectPages();
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const EmptyStateImagePath = getEmptyStateImagePath("pages", "recent", isLightMode);
+  const { recentProjectPages } = useProjectPages();
 
   // FIXME: replace any with proper type
   const isEmpty = recentProjectPages && Object.values(recentProjectPages).every((value: any) => value.length === 0);
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
   if (!recentProjectPages) {
     return (
       <Loader className="space-y-4">
@@ -64,15 +52,9 @@ export const RecentPagesList: FC = observer(() => {
       ) : (
         <>
           <EmptyState
-            title={PAGE_EMPTY_STATE_DETAILS["Recent"].title}
-            description={PAGE_EMPTY_STATE_DETAILS["Recent"].description}
-            image={EmptyStateImagePath}
-            primaryButton={{
-              text: PAGE_EMPTY_STATE_DETAILS["Recent"].primaryButton.text,
-              onClick: () => commandPaletteStore.toggleCreatePageModal(true),
-            }}
+            type={EmptyStateType.PROJECT_PAGE_RECENT}
+            primaryButtonOnClick={() => commandPaletteStore.toggleCreatePageModal(true)}
             size="sm"
-            disabled={!isEditingAllowed}
           />
         </>
       )}
diff --git a/web/components/pages/pages-list/shared-pages-list.tsx b/web/components/pages/pages-list/shared-pages-list.tsx
index d20a1350ef7..600727e0623 100644
--- a/web/components/pages/pages-list/shared-pages-list.tsx
+++ b/web/components/pages/pages-list/shared-pages-list.tsx
@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { PagesListView } from "components/pages/pages-list";
+import { Loader } from "@plane/ui";
+import { PagesListView } from "@/components/pages/pages-list";
 // hooks
 // ui
-import { Loader } from "@plane/ui";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
 
 export const SharedPagesList: FC = observer(() => {
   const projectPageStore = useProjectPages();
diff --git a/web/components/profile/activity/activity-list.tsx b/web/components/profile/activity/activity-list.tsx
new file mode 100644
index 00000000000..2926f0637ea
--- /dev/null
+++ b/web/components/profile/activity/activity-list.tsx
@@ -0,0 +1,162 @@
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { History, MessageSquare } from "lucide-react";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+import { IUserActivityResponse } from "@plane/types";
+// editor
+// hooks
+// components
+import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core";
+// ui
+import { ActivitySettingsLoader } from "@/components/ui";
+// helpers
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { useUser } from "@/hooks/store";
+// types
+
+type Props = {
+  activity: IUserActivityResponse | undefined;
+};
+
+export const ActivityList: React.FC<Props> = observer((props) => {
+  const { activity } = props;
+  // store hooks
+  const { currentUser } = useUser();
+
+  // TODO: refactor this component
+  return (
+    <>
+      {activity ? (
+        <ul role="list">
+          {activity.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 capitalize">
+                          {activityItem.actor_detail.display_name?.[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 {calculateTimeAgo(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" &&
+              !["cycles", "modules", "attachment", "link", "estimate"].includes(activityItem.field) &&
+              !activityItem.field ? (
+                <span>
+                  created <IssueLink activity={activityItem} />
+                </span>
+              ) : (
+                <ActivityMessage activity={activityItem} showIssue />
+              );
+
+            if ("field" in activityItem && activityItem.field !== "updated_by")
+              return (
+                <li key={activityItem.id}>
+                  <div className="relative pb-1">
+                    <div className="relative flex items-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="h-full w-full rounded-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 capitalize">
+                                    {activityItem.actor_detail.display_name?.[0]}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
+                          <div className="flex gap-1 break-words text-sm text-custom-text-200">
+                            {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                              <span className="text-gray font-medium">Plane</span>
+                            ) : activityItem.actor_detail.is_bot ? (
+                              <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                            ) : (
+                              <Link
+                                href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
+                              >
+                                <span className="text-gray font-medium">
+                                  {currentUser?.id === activityItem.actor_detail.id
+                                    ? "You"
+                                    : activityItem.actor_detail.display_name}
+                                </span>
+                              </Link>
+                            )}{" "}
+                            <div className="flex gap-1 truncate">
+                              {message}{" "}
+                              <span className="flex-shrink-0 whitespace-nowrap">
+                                {calculateTimeAgo(activityItem.created_at)}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    </div>
+                  </div>
+                </li>
+              );
+          })}
+        </ul>
+      ) : (
+        <ActivitySettingsLoader />
+      )}
+    </>
+  );
+});
diff --git a/web/components/profile/activity/download-button.tsx b/web/components/profile/activity/download-button.tsx
new file mode 100644
index 00000000000..d930a4e308a
--- /dev/null
+++ b/web/components/profile/activity/download-button.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+// services
+// ui
+import { Button } from "@plane/ui";
+// helpers
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { UserService } from "@/services/user.service";
+
+const userService = new UserService();
+
+export const DownloadActivityButton = () => {
+  // states
+  const [isDownloading, setIsDownloading] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const handleDownload = async () => {
+    const today = renderFormattedPayloadDate(new Date());
+
+    if (!workspaceSlug || !userId || !today) return;
+
+    setIsDownloading(true);
+
+    const csv = await userService
+      .downloadProfileActivity(workspaceSlug.toString(), userId.toString(), {
+        date: today,
+      })
+      .finally(() => setIsDownloading(false));
+
+    // create a Blob object
+    const blob = new Blob([csv], { type: "text/csv" });
+
+    // create URL for the Blob object
+    const url = window.URL.createObjectURL(blob);
+
+    // create a link element
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `profile-activity-${Date.now()}.csv`;
+    document.body.appendChild(a);
+
+    // simulate click on the link element to trigger download
+    a.click();
+
+    // cleanup
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  };
+
+  return (
+    <Button onClick={handleDownload} loading={isDownloading}>
+      {isDownloading ? "Downloading" : "Download today's activity"}
+    </Button>
+  );
+};
diff --git a/web/components/profile/activity/index.ts b/web/components/profile/activity/index.ts
new file mode 100644
index 00000000000..3b202d6c52f
--- /dev/null
+++ b/web/components/profile/activity/index.ts
@@ -0,0 +1,4 @@
+export * from "./activity-list";
+export * from "./download-button";
+export * from "./profile-activity-list";
+export * from "./workspace-activity-list";
diff --git a/web/components/profile/activity/profile-activity-list.tsx b/web/components/profile/activity/profile-activity-list.tsx
new file mode 100644
index 00000000000..b792671a08d
--- /dev/null
+++ b/web/components/profile/activity/profile-activity-list.tsx
@@ -0,0 +1,190 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+import { History, MessageSquare } from "lucide-react";
+import { RichReadOnlyEditor } from "@plane/rich-text-editor";
+// hooks
+import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core";
+import { ActivitySettingsLoader } from "@/components/ui";
+import { USER_ACTIVITY } from "@/constants/fetch-keys";
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { useUser } from "@/hooks/store";
+// services
+import { UserService } from "@/services/user.service";
+// editor
+// components
+// ui
+// helpers
+// fetch-keys
+
+// services
+const userService = new UserService();
+
+type Props = {
+  cursor: string;
+  perPage: number;
+  updateResultsCount: (count: number) => void;
+  updateTotalPages: (count: number) => void;
+};
+
+export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
+  const { cursor, perPage, updateResultsCount, updateTotalPages } = props;
+  // store hooks
+  const { currentUser } = useUser();
+
+  const { data: userProfileActivity } = useSWR(
+    USER_ACTIVITY({
+      cursor,
+    }),
+    () =>
+      userService.getUserActivity({
+        cursor,
+        per_page: perPage,
+      })
+  );
+
+  useEffect(() => {
+    if (!userProfileActivity) return;
+
+    updateTotalPages(userProfileActivity.total_pages);
+    updateResultsCount(userProfileActivity.results.length);
+  }, [updateResultsCount, updateTotalPages, userProfileActivity]);
+
+  // TODO: refactor this component
+  return (
+    <>
+      {userProfileActivity ? (
+        <ul role="list">
+          {userProfileActivity.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 capitalize">
+                          {activityItem.actor_detail.display_name?.[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 {calculateTimeAgo(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" &&
+              !["cycles", "modules", "attachment", "link", "estimate"].includes(activityItem.field) &&
+              !activityItem.field ? (
+                <span>
+                  created <IssueLink activity={activityItem} />
+                </span>
+              ) : (
+                <ActivityMessage activity={activityItem} showIssue />
+              );
+
+            if ("field" in activityItem && activityItem.field !== "updated_by")
+              return (
+                <li key={activityItem.id}>
+                  <div className="relative pb-1">
+                    <div className="relative flex items-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="h-full w-full rounded-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 capitalize">
+                                    {activityItem.actor_detail.display_name?.[0]}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="min-w-0 flex-1 border-b border-custom-border-100 py-4">
+                          <div className="flex gap-1 break-words text-sm text-custom-text-200">
+                            {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                              <span className="text-gray font-medium">Plane</span>
+                            ) : activityItem.actor_detail.is_bot ? (
+                              <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                            ) : (
+                              <Link
+                                href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
+                              >
+                                <span className="text-gray font-medium">
+                                  {currentUser?.id === activityItem.actor_detail.id
+                                    ? "You"
+                                    : activityItem.actor_detail.display_name}
+                                </span>
+                              </Link>
+                            )}{" "}
+                            <div className="flex gap-1 truncate">
+                              {message}{" "}
+                              <span className="flex-shrink-0 whitespace-nowrap">
+                                {calculateTimeAgo(activityItem.created_at)}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    </div>
+                  </div>
+                </li>
+              );
+          })}
+        </ul>
+      ) : (
+        <ActivitySettingsLoader />
+      )}
+    </>
+  );
+});
diff --git a/web/components/profile/activity/workspace-activity-list.tsx b/web/components/profile/activity/workspace-activity-list.tsx
new file mode 100644
index 00000000000..25a69fe1c6c
--- /dev/null
+++ b/web/components/profile/activity/workspace-activity-list.tsx
@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { USER_PROFILE_ACTIVITY } from "@/constants/fetch-keys";
+import { UserService } from "@/services/user.service";
+// components
+import { ActivityList } from "./activity-list";
+// fetch-keys
+
+// services
+const userService = new UserService();
+
+type Props = {
+  cursor: string;
+  perPage: number;
+  updateResultsCount: (count: number) => void;
+  updateTotalPages: (count: number) => void;
+};
+
+export const WorkspaceActivityListPage: React.FC<Props> = (props) => {
+  const { cursor, perPage, updateResultsCount, updateTotalPages } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { data: userProfileActivity } = useSWR(
+    workspaceSlug && userId
+      ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString(), {
+          cursor,
+        })
+      : null,
+    workspaceSlug && userId
+      ? () =>
+          userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString(), {
+            cursor,
+            per_page: perPage,
+          })
+      : null
+  );
+
+  useEffect(() => {
+    if (!userProfileActivity) return;
+
+    updateTotalPages(userProfileActivity.total_pages);
+    updateResultsCount(userProfileActivity.results.length);
+  }, [updateResultsCount, updateTotalPages, userProfileActivity]);
+
+  return <ActivityList activity={userProfileActivity} />;
+};
diff --git a/web/components/profile/index.ts b/web/components/profile/index.ts
index f6d2a3775c6..35ac288adb7 100644
--- a/web/components/profile/index.ts
+++ b/web/components/profile/index.ts
@@ -1,3 +1,4 @@
+export * from "./activity";
 export * from "./overview";
 export * from "./navbar";
 export * from "./profile-issues-filter";
diff --git a/web/components/profile/navbar.tsx b/web/components/profile/navbar.tsx
index 4361b7a9d2f..6aace8e3541 100644
--- a/web/components/profile/navbar.tsx
+++ b/web/components/profile/navbar.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 // components
-import { ProfileIssuesFilter } from "components/profile";
+import { ProfileIssuesFilter } from "@/components/profile";
 // constants
-import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "constants/profile";
+import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 
 type Props = {
   isAuthorized: boolean;
@@ -27,10 +27,11 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
             <span
-              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${router.pathname === tab.selected
-                ? "border-custom-primary-100 text-custom-primary-100"
-                : "border-transparent"
-                }`}
+              className={`flex whitespace-nowrap border-b-2 p-4 text-sm font-medium outline-none ${
+                router.pathname === tab.selected
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent"
+              }`}
             >
               {tab.label}
             </span>
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 58bbb689831..9dfe433ef2b 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -1,21 +1,21 @@
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 //hooks
-import { useUser } from "hooks/store";
+import { Loader } from "@plane/ui";
+import { ActivityMessage, IssueLink } from "@/components/core";
+import { ProfileEmptyState } from "@/components/ui";
+import { USER_PROFILE_ACTIVITY } from "@/constants/fetch-keys";
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { useUser } from "@/hooks/store";
 // services
-import { UserService } from "services/user.service";
+import { UserService } from "@/services/user.service";
+import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
 // components
-import { ActivityMessage, IssueLink } from "components/core";
 // ui
-import { ProfileEmptyState } from "components/ui";
-import { Loader } from "@plane/ui";
 // image
-import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
 // helpers
-import { calculateTimeAgo } from "helpers/date-time.helper";
 // fetch-keys
-import { USER_PROFILE_ACTIVITY } from "constants/fetch-keys";
 
 // services
 const userService = new UserService();
@@ -27,15 +27,18 @@ export const ProfileActivity = observer(() => {
   const { currentUser } = useUser();
 
   const { data: userProfileActivity } = useSWR(
-    workspaceSlug && userId ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString()) : null,
+    workspaceSlug && userId ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString(), {}) : null,
     workspaceSlug && userId
-      ? () => userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString())
+      ? () =>
+          userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString(), {
+            per_page: 10,
+          })
       : null
   );
 
   return (
     <div className="space-y-2">
-      <h3 className="text-lg font-medium">Recent Activity</h3>
+      <h3 className="text-lg font-medium">Recent activity</h3>
       <div className="rounded border border-custom-border-100 p-6">
         {userProfileActivity ? (
           userProfileActivity.results.length > 0 ? (
@@ -43,24 +46,24 @@ export const ProfileActivity = observer(() => {
               {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 !== "" ? (
+                    {activity.actor_detail?.avatar && activity.actor_detail?.avatar !== "" ? (
                       <img
-                        src={activity.actor_detail.avatar}
-                        alt={activity.actor_detail.display_name}
+                        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)}
+                        {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">
-                        {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail.display_name}{" "}
+                        {currentUser?.id === activity.actor_detail?.id ? "You" : activity.actor_detail?.display_name}{" "}
                       </span>
                       {activity.field ? (
                         <ActivityMessage activity={activity} showIssue />
diff --git a/web/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
index 8a931183f8c..f43aed81c86 100644
--- a/web/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -1,12 +1,12 @@
 // ui
-import { BarGraph, ProfileEmptyState } from "components/ui";
+import { IUserProfileData } from "@plane/types";
 import { Loader } from "@plane/ui";
+import { BarGraph, ProfileEmptyState } from "@/components/ui";
 // image
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
 import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
 // helpers
-import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
-import { IUserProfileData } from "@plane/types";
 
 type Props = {
   userProfile: IUserProfileData | undefined;
diff --git a/web/components/profile/overview/priority-distribution/index.ts b/web/components/profile/overview/priority-distribution/index.ts
new file mode 100644
index 00000000000..64d81eb1244
--- /dev/null
+++ b/web/components/profile/overview/priority-distribution/index.ts
@@ -0,0 +1 @@
+export * from "./priority-distribution";
diff --git a/web/components/profile/overview/priority-distribution/main-content.tsx b/web/components/profile/overview/priority-distribution/main-content.tsx
new file mode 100644
index 00000000000..c18cf27fae7
--- /dev/null
+++ b/web/components/profile/overview/priority-distribution/main-content.tsx
@@ -0,0 +1,31 @@
+// components
+import { IUserPriorityDistribution } from "@plane/types";
+import { IssuesByPriorityGraph } from "@/components/graphs";
+import { ProfileEmptyState } from "@/components/ui";
+// assets
+import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
+// types
+
+type Props = {
+  priorityDistribution: IUserPriorityDistribution[];
+};
+
+export const PriorityDistributionContent: React.FC<Props> = (props) => {
+  const { priorityDistribution } = props;
+
+  return (
+    <div className="flex-grow rounded border border-custom-border-100">
+      {priorityDistribution.length > 0 ? (
+        <IssuesByPriorityGraph data={priorityDistribution} />
+      ) : (
+        <div className="flex-grow p-7">
+          <ProfileEmptyState
+            title="No Data yet"
+            description="Create issues to view the them by priority in the graph for better analysis."
+            image={emptyBarGraph}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/profile/overview/priority-distribution/priority-distribution.tsx b/web/components/profile/overview/priority-distribution/priority-distribution.tsx
new file mode 100644
index 00000000000..597a885d885
--- /dev/null
+++ b/web/components/profile/overview/priority-distribution/priority-distribution.tsx
@@ -0,0 +1,33 @@
+// components
+// ui
+import { IUserPriorityDistribution } from "@plane/types";
+import { Loader } from "@plane/ui";
+// types
+import { PriorityDistributionContent } from "./main-content";
+
+type Props = {
+  priorityDistribution: IUserPriorityDistribution[] | undefined;
+};
+
+export const ProfilePriorityDistribution: React.FC<Props> = (props) => {
+  const { priorityDistribution } = props;
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <h3 className="text-lg font-medium">Issues by priority</h3>
+      {priorityDistribution ? (
+        <PriorityDistributionContent priorityDistribution={priorityDistribution} />
+      ) : (
+        <div className="grid place-items-center p-7">
+          <Loader className="flex items-end gap-12">
+            <Loader.Item width="30px" height="200px" />
+            <Loader.Item width="30px" height="150px" />
+            <Loader.Item width="30px" height="250px" />
+            <Loader.Item width="30px" height="150px" />
+            <Loader.Item width="30px" height="100px" />
+          </Loader>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/profile/overview/state-distribution.tsx b/web/components/profile/overview/state-distribution.tsx
index 5664637e9d3..9c148942512 100644
--- a/web/components/profile/overview/state-distribution.tsx
+++ b/web/components/profile/overview/state-distribution.tsx
@@ -1,11 +1,11 @@
 // ui
-import { ProfileEmptyState, PieGraph } from "components/ui";
+import { IUserProfileData, IUserStateDistribution } from "@plane/types";
+import { ProfileEmptyState, PieGraph } from "@/components/ui";
 // image
+import { STATE_GROUPS } from "@/constants/state";
 import stateGraph from "public/empty-state/state_graph.svg";
 // types
-import { IUserProfileData, IUserStateDistribution } from "@plane/types";
 // constants
-import { STATE_GROUPS } from "constants/state";
 
 type Props = {
   stateDistribution: IUserStateDistribution[];
@@ -17,7 +17,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
 
   return (
     <div className="flex flex-col space-y-2">
-      <h3 className="text-lg font-medium">Issues by State</h3>
+      <h3 className="text-lg font-medium">Issues by state</h3>
       <div className="flex-grow rounded border border-custom-border-100 p-7">
         {userProfile.state_distribution.length > 0 ? (
           <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
@@ -65,7 +65,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
                           backgroundColor: STATE_GROUPS[group.state_group].color,
                         }}
                       />
-                      <div className="whitespace-nowrap capitalize">{group.state_group}</div>
+                      <div className="whitespace-nowrap">{STATE_GROUPS[group.state_group].label}</div>
                     </div>
                     <div>{group.state_count}</div>
                   </div>
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index 3f96488a0a7..f259b5f9c52 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -1,11 +1,11 @@
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 // ui
-import { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
 import { UserCircle2 } from "lucide-react";
-// types
 import { IUserProfileData } from "@plane/types";
+import { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
+// types
 
 type Props = {
   userProfile: IUserProfileData | undefined;
diff --git a/web/components/profile/overview/workload.tsx b/web/components/profile/overview/workload.tsx
index c091a94f77a..f2fdd3582a2 100644
--- a/web/components/profile/overview/workload.tsx
+++ b/web/components/profile/overview/workload.tsx
@@ -1,7 +1,7 @@
 // types
 import { IUserStateDistribution } from "@plane/types";
+import { STATE_GROUPS } from "@/constants/state";
 // constants
-import { STATE_GROUPS } from "constants/state";
 
 type Props = {
   stateDistribution: IUserStateDistribution[];
@@ -21,12 +21,12 @@ export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => (
               }}
             />
             <div className="-mt-1 space-y-1">
-              <p className="text-sm capitalize text-custom-text-400">
+              <p className="text-sm text-custom-text-400">
                 {group.state_group === "unstarted"
-                  ? "Not Started"
+                  ? "Not started"
                   : group.state_group === "started"
-                  ? "Working on"
-                  : group.state_group}
+                    ? "Working on"
+                    : STATE_GROUPS[group.state_group].label}
               </p>
               <p className="text-xl font-semibold">{group.state_count}</p>
             </div>
diff --git a/web/components/profile/preferences/email-notification-form.tsx b/web/components/profile/preferences/email-notification-form.tsx
index e041b28d8f3..6d352beefeb 100644
--- a/web/components/profile/preferences/email-notification-form.tsx
+++ b/web/components/profile/preferences/email-notification-form.tsx
@@ -1,13 +1,11 @@
 import React, { FC } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { IUserEmailNotificationSettings } from "@plane/types";
 // ui
-import { Button, Checkbox } from "@plane/ui";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, Checkbox, TOAST_TYPE, setToast } from "@plane/ui";
 // services
-import { UserService } from "services/user.service";
+import { UserService } from "@/services/user.service";
 // types
-import { IUserEmailNotificationSettings } from "@plane/types";
 
 interface IEmailNotificationFormProps {
   data: IUserEmailNotificationSettings;
@@ -18,8 +16,6 @@ const userService = new UserService();
 
 export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) => {
   const { data } = props;
-  // toast
-  const { setToastAlert } = useToast();
   // form data
   const {
     handleSubmit,
@@ -45,9 +41,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
     await userService
       .updateCurrentUserEmailNotificationSettings(payload)
       .then(() =>
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Email Notification Settings updated successfully",
         })
       )
diff --git a/web/components/profile/preferences/index.ts b/web/components/profile/preferences/index.ts
index ddda5712c5c..56ef42216a4 100644
--- a/web/components/profile/preferences/index.ts
+++ b/web/components/profile/preferences/index.ts
@@ -1 +1 @@
-export * from "./email-notification-form";
\ No newline at end of file
+export * from "./email-notification-form";
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
index 5b4f9c8ed47..1a7d8cfb06e 100644
--- a/web/components/profile/profile-issues-filter.tsx
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -1,13 +1,13 @@
 import { useCallback } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // components
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "components/issues";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "@/components/issues";
 // hooks
-import { useIssues, useLabel } from "hooks/store";
+import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { useIssues, useLabel } from "@/hooks/store";
 // constants
-import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 
 export const ProfileIssuesFilter = observer(() => {
   // router
@@ -44,8 +44,10 @@ export const ProfileIssuesFilter = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/profile/profile-issues.tsx b/web/components/profile/profile-issues.tsx
index 7e501764a4b..270dff65810 100644
--- a/web/components/profile/profile-issues.tsx
+++ b/web/components/profile/profile-issues.tsx
@@ -1,20 +1,18 @@
 import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
 // components
-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 { IssuePeekOverview, ProfileIssuesAppliedFiltersRoot } from "components/issues";
-import { KanbanLayoutLoader, ListLayoutLoader } from "components/ui";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
+import { EmptyState } from "@/components/empty-state";
+import { IssuePeekOverview, ProfileIssuesAppliedFiltersRoot } from "@/components/issues";
+import { ProfileIssuesKanBanLayout } from "@/components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { ProfileIssuesListLayout } from "@/components/issues/issue-layouts/list/roots/profile-issues-root";
+import { KanbanLayoutLoader, ListLayoutLoader } from "@/components/ui";
 // hooks
-import { useIssues, useUser } from "hooks/store";
+import { EMPTY_STATE_DETAILS } from "@/constants/empty-state";
+import { EIssuesStoreType } from "@/constants/issue";
+import { useIssues } from "@/hooks/store";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { EIssuesStoreType } from "constants/issue";
-import { PROFILE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 interface IProfileIssuesPage {
   type: "assigned" | "subscribed" | "created";
@@ -28,21 +26,15 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
     workspaceSlug: string;
     userId: string;
   };
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    membership: { currentWorkspaceRole },
-    currentUser,
-  } = useUser();
   const {
     issues: { loader, groupedIssueIds, fetchIssues, setViewId },
     issuesFilter: { issueFilters, fetchFilters },
   } = useIssues(EIssuesStoreType.PROFILE);
 
   useEffect(() => {
-    setViewId(type);
-  }, [type]);
+    if (setViewId) setViewId(type);
+  }, [type, setViewId]);
 
   useSWR(
     workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}_${type}` : null,
@@ -55,26 +47,15 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("profile", type, isLightMode);
-
   const activeLayout = issueFilters?.displayFilters?.layout || undefined;
 
-  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+  const emptyStateType = `profile-${type}`;
 
   if (!groupedIssueIds || loader === "init-loader")
     return <>{activeLayout === "list" ? <ListLayoutLoader /> : <KanbanLayoutLoader />}</>;
 
   if (groupedIssueIds.length === 0) {
-    return (
-      <EmptyState
-        image={emptyStateImage}
-        title={PROFILE_EMPTY_STATE_DETAILS[type].title}
-        description={PROFILE_EMPTY_STATE_DETAILS[type].description}
-        size="sm"
-        disabled={!isEditingAllowed}
-      />
-    );
+    return <EmptyState type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS} size="sm" />;
   }
 
   return (
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 107c1f5281c..ce246ac4d79 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -1,38 +1,42 @@
-import { useRouter } from "next/router";
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import useSWR from "swr";
+// ui
+import { ChevronDown, Pencil } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
+// icons
+// plane ui
+import { Loader, Tooltip } from "@plane/ui";
+// fetch-keys
+import { ProjectLogo } from "@/components/project";
+import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useProject, useUser } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
-import { UserService } from "services/user.service";
+import { UserService } from "@/services/user.service";
 // components
 import { ProfileSidebarTime } from "./time";
-// ui
-import { Loader, Tooltip } from "@plane/ui";
-// icons
-import { ChevronDown, Pencil } from "lucide-react";
-// helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// fetch-keys
-import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import { useEffect, useRef } from "react";
 
 // services
 const userService = new UserService();
 
 export const ProfileSidebar = observer(() => {
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
   // store hooks
   const { currentUser } = useUser();
   const { theme: themeStore } = useApplication();
-  const ref = useRef<HTMLDivElement>(null);
-
+  const { getProjectById } = useProject();
+  const { isMobile } = usePlatformOS();
   const { data: userProjectsData } = useSWR(
     workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId
@@ -76,7 +80,7 @@ export const ProfileSidebar = observer(() => {
 
   return (
     <div
-      className={`flex-shrink-0 overflow-hidden overflow-y-auto shadow-custom-shadow-sm border-l border-custom-border-100 bg-custom-sidebar-background-100 h-full z-[5] fixed md:relative transition-all w-full md:w-[300px]`}
+      className={`vertical-scrollbar scrollbar-md fixed z-[5] h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 shadow-custom-shadow-sm transition-all md:relative md:w-[300px]`}
       style={themeStore.profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
     >
       {userProjectsData ? (
@@ -93,21 +97,22 @@ export const ProfileSidebar = observer(() => {
             )}
             <img
               src={
-                userProjectsData.user_data.cover_image ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
+                userProjectsData.user_data?.cover_image ??
+                "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
               }
-              alt={userProjectsData.user_data.display_name}
+              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 !== "" ? (
+              {userProjectsData.user_data?.avatar && userProjectsData.user_data?.avatar !== "" ? (
                 <img
-                  src={userProjectsData.user_data.avatar}
-                  alt={userProjectsData.user_data.display_name}
+                  src={userProjectsData.user_data?.avatar}
+                  alt={userProjectsData.user_data?.display_name}
                   className="h-full w-full rounded object-cover"
                 />
               ) : (
-                <div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-custom-background-90 text-custom-text-100 capitalize">
-                  {userProjectsData.user_data.first_name?.[0]}
+                <div className="flex h-[52px] w-[52px] items-center justify-center rounded bg-custom-background-90 capitalize text-custom-text-100">
+                  {userProjectsData.user_data?.first_name?.[0]}
                 </div>
               )}
             </div>
@@ -115,9 +120,9 @@ export const ProfileSidebar = observer(() => {
           <div className="px-5">
             <div className="mt-[38px]">
               <h4 className="text-lg font-semibold">
-                {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
+                {userProjectsData.user_data?.first_name} {userProjectsData.user_data?.last_name}
               </h4>
-              <h6 className="text-sm text-custom-text-200">({userProjectsData.user_data.display_name})</h6>
+              <h6 className="text-sm text-custom-text-200">({userProjectsData.user_data?.display_name})</h6>
             </div>
             <div className="mt-6 space-y-5">
               {userDetails.map((detail) => (
@@ -129,6 +134,8 @@ export const ProfileSidebar = observer(() => {
             </div>
             <div className="mt-9 divide-y divide-custom-border-100">
               {userProjectsData.project_data.map((project, index) => {
+                const projectDetails = getProjectById(project.id);
+
                 const totalIssues =
                   project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
 
@@ -137,37 +144,30 @@ export const ProfileSidebar = observer(() => {
                     ? 0
                     : Math.round((project.completed_issues / project.assigned_issues) * 100);
 
+                if (!projectDetails) return null;
+
                 return (
                   <Disclosure key={project.id} as="div" className={`${index === 0 ? "pb-3" : "py-3"}`}>
                     {({ open }) => (
                       <div className="w-full">
                         <Disclosure.Button className="flex w-full items-center justify-between gap-2">
                           <div className="flex w-3/4 items-center gap-2">
-                            {project.emoji ? (
-                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                                {renderEmoji(project.emoji)}
-                              </div>
-                            ) : project.icon_prop ? (
-                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                                {renderEmoji(project.icon_prop)}
-                              </div>
-                            ) : (
-                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-custom-background-90 text-xs uppercase text-custom-text-100">
-                                {project?.name.charAt(0)}
-                              </div>
-                            )}
-                            <div className="truncate break-words text-sm font-medium">{project.name}</div>
+                            <span className="grid place-items-center flex-shrink-0 h-7 w-7">
+                              <ProjectLogo logo={projectDetails.logo_props} />
+                            </span>
+                            <div className="truncate break-words text-sm font-medium">{projectDetails.name}</div>
                           </div>
                           <div className="flex flex-shrink-0 items-center gap-2">
                             {project.assigned_issues > 0 && (
-                              <Tooltip tooltipContent="Completion percentage" position="left">
+                              <Tooltip tooltipContent="Completion percentage" position="left" isMobile={isMobile}>
                                 <div
-                                  className={`rounded px-1 py-0.5 text-xs font-medium ${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"
-                                    }`}
+                                  className={`rounded px-1 py-0.5 text-xs font-medium ${
+                                    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>
diff --git a/web/components/profile/time.tsx b/web/components/profile/time.tsx
index a1b7404101b..cf2fe78455b 100644
--- a/web/components/profile/time.tsx
+++ b/web/components/profile/time.tsx
@@ -1,5 +1,5 @@
 // hooks
-import { useCurrentTime } from "hooks/use-current-time";
+import { useCurrentTime } from "@/hooks/use-current-time";
 
 type Props = {
   timeZone: string | undefined;
diff --git a/web/components/project/applied-filters/access.tsx b/web/components/project/applied-filters/access.tsx
new file mode 100644
index 00000000000..8b881c8e4ea
--- /dev/null
+++ b/web/components/project/applied-filters/access.tsx
@@ -0,0 +1,36 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// constants
+import { NETWORK_CHOICES } from "@/constants/project";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((status) => {
+        const accessDetails = NETWORK_CHOICES.find((s) => `${s.key}` === status);
+        return (
+          <div key={status} className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+            {accessDetails?.label}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(status)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/project/applied-filters/date.tsx b/web/components/project/applied-filters/date.tsx
new file mode 100644
index 00000000000..d3930a52c94
--- /dev/null
+++ b/web/components/project/applied-filters/date.tsx
@@ -0,0 +1,55 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// helpers
+import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_BEFORE_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <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>
+      ))}
+    </>
+  );
+});
diff --git a/web/components/project/applied-filters/index.ts b/web/components/project/applied-filters/index.ts
new file mode 100644
index 00000000000..85bcda446c2
--- /dev/null
+++ b/web/components/project/applied-filters/index.ts
@@ -0,0 +1,5 @@
+export * from "./access";
+export * from "./date";
+export * from "./members";
+export * from "./project-display-filters";
+export * from "./root";
diff --git a/web/components/project/applied-filters/members.tsx b/web/components/project/applied-filters/members.tsx
new file mode 100644
index 00000000000..9c8ecb4f85e
--- /dev/null
+++ b/web/components/project/applied-filters/members.tsx
@@ -0,0 +1,46 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// ui
+import { Avatar } from "@plane/ui";
+// types
+import { useMember } from "@/hooks/store";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <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>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/project/applied-filters/project-display-filters.tsx b/web/components/project/applied-filters/project-display-filters.tsx
new file mode 100644
index 00000000000..0c8af70970a
--- /dev/null
+++ b/web/components/project/applied-filters/project-display-filters.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+// icons
+import { X } from "lucide-react";
+// types
+import { TProjectAppliedDisplayFilterKeys } from "@plane/types";
+// constants
+import { PROJECT_DISPLAY_FILTER_OPTIONS } from "@/constants/project";
+
+type Props = {
+  handleRemove: (key: TProjectAppliedDisplayFilterKeys) => void;
+  values: TProjectAppliedDisplayFilterKeys[];
+  editable: boolean | undefined;
+};
+
+export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((key) => {
+        const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.label;
+        return (
+          <div key={key} className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+            {filterLabel}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(key)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/project/applied-filters/root.tsx b/web/components/project/applied-filters/root.tsx
new file mode 100644
index 00000000000..7c4381989a6
--- /dev/null
+++ b/web/components/project/applied-filters/root.tsx
@@ -0,0 +1,139 @@
+import { X } from "lucide-react";
+// types
+import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
+// ui
+import { Tooltip } from "@plane/ui";
+// components
+import {
+  AppliedAccessFilters,
+  AppliedDateFilters,
+  AppliedMembersFilters,
+  AppliedProjectDisplayFilters,
+} from "@/components/project";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
+
+type Props = {
+  appliedFilters: TProjectFilters;
+  appliedDisplayFilters: TProjectAppliedDisplayFilterKeys[];
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TProjectFilters, value: string | null) => void;
+  handleRemoveDisplayFilter: (key: TProjectAppliedDisplayFilterKeys) => void;
+  alwaysAllowEditing?: boolean;
+  filteredProjects: number;
+  totalProjects: number;
+};
+
+const MEMBERS_FILTERS = ["lead", "members"];
+const DATE_FILTERS = ["created_at"];
+
+export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
+  const {
+    appliedFilters,
+    appliedDisplayFilters,
+    handleClearAllFilters,
+    handleRemoveFilter,
+    handleRemoveDisplayFilter,
+    alwaysAllowEditing,
+    filteredProjects,
+    totalProjects,
+  } = props;
+
+  if (!appliedFilters && !appliedDisplayFilters) return null;
+  if (Object.keys(appliedFilters).length === 0 && appliedDisplayFilters.length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <div className="flex items-start justify-between gap-1.5">
+      <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+        {/* Applied filters */}
+        {Object.entries(appliedFilters).map(([key, value]) => {
+          const filterKey = key as keyof TProjectFilters;
+
+          if (!value) return;
+          if (Array.isArray(value) && value.length === 0) return;
+
+          return (
+            <div
+              key={filterKey}
+              className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            >
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+                {filterKey === "access" && (
+                  <AppliedAccessFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter("access", val)}
+                    values={value}
+                  />
+                )}
+                {DATE_FILTERS.includes(filterKey) && (
+                  <AppliedDateFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {MEMBERS_FILTERS.includes(filterKey) && (
+                  <AppliedMembersFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    onClick={() => handleRemoveFilter(filterKey, null)}
+                  >
+                    <X size={12} strokeWidth={2} />
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+        {/* Applied display filters */}
+        {appliedDisplayFilters.length > 0 && (
+          <div
+            key="project_display_filters"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+          >
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">Projects</span>
+              <AppliedProjectDisplayFilters
+                editable={isEditingAllowed}
+                values={appliedDisplayFilters}
+                handleRemove={(key) => handleRemoveDisplayFilter(key)}
+              />
+            </div>
+          </div>
+        )}
+        {isEditingAllowed && (
+          <button
+            type="button"
+            onClick={handleClearAllFilters}
+            className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+          >
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </button>
+        )}
+      </div>
+      <Tooltip
+        tooltipContent={
+          <p>
+            <span className="font-semibold">{filteredProjects}</span> of{" "}
+            <span className="font-semibold">{totalProjects}</span> projects match the applied filters.
+          </p>
+        }
+      >
+        <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5">
+          {filteredProjects}/{totalProjects}
+        </span>
+      </Tooltip>
+    </div>
+  );
+};
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
index 624e30bdef0..4d19eace6ce 100644
--- a/web/components/project/card-list.tsx
+++ b/web/components/project/card-list.tsx
@@ -1,72 +1,65 @@
 import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
+import Image from "next/image";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // components
-import { ProjectCard } from "components/project";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-import { ProjectsLoader } from "components/ui";
+import { EmptyState } from "@/components/empty-state";
+import { ProjectCard } from "@/components/project";
+import { ProjectsLoader } from "@/components/ui";
+// assets
+import { EmptyStateType } from "@/constants/empty-state";
+import { useApplication, useEventTracker, useProject, useProjectFilter } from "@/hooks/store";
+import AllFiltersImage from "public/empty-state/project/all-filters.svg";
+import NameFilterImage from "public/empty-state/project/name-filter.svg";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { WORKSPACE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 export const ProjectCardList = observer(() => {
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentWorkspaceRole },
-    currentUser,
-  } = useUser();
-  const { workspaceProjectIds, searchedProjects, getProjectById } = useProject();
+  const { workspaceProjectIds, filteredProjectIds, getProjectById } = useProject();
+  const { searchQuery, currentWorkspaceDisplayFilters } = useProjectFilter();
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("onboarding", "projects", isLightMode);
+  if (workspaceProjectIds?.length === 0 && !currentWorkspaceDisplayFilters?.archived_projects)
+    return (
+      <EmptyState
+        type={EmptyStateType.WORKSPACE_PROJECTS}
+        primaryButtonOnClick={() => {
+          setTrackElement("Project empty state");
+          commandPaletteStore.toggleCreateProjectModal(true);
+        }}
+      />
+    );
 
-  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+  if (!filteredProjectIds) return <ProjectsLoader />;
 
-  if (!workspaceProjectIds) return <ProjectsLoader />;
+  if (filteredProjectIds.length === 0)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <div className="text-center">
+          <Image
+            src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
+            alt="No matching projects"
+          />
+          <h5 className="text-xl font-medium mt-7 mb-1">No matching projects</h5>
+          <p className="text-custom-text-400 text-base whitespace-pre-line">
+            {searchQuery.trim() === ""
+              ? "Remove the filters to see all projects"
+              : "No projects detected with the matching\ncriteria. Create a new project instead"}
+          </p>
+        </div>
+      </div>
+    );
 
   return (
-    <>
-      {workspaceProjectIds.length > 0 ? (
-        <div className="h-full w-full overflow-y-auto p-8 vertical-scrollbar scrollbar-lg">
-          {searchedProjects.length == 0 ? (
-            <div className="mt-10 w-full text-center text-custom-text-400">No matching projects</div>
-          ) : (
-            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-              {searchedProjects.map((projectId) => {
-                const projectDetails = getProjectById(projectId);
-
-                if (!projectDetails) return;
-
-                return <ProjectCard key={projectDetails.id} project={projectDetails} />;
-              })}
-            </div>
-          )}
-        </div>
-      ) : (
-        <EmptyState
-          image={emptyStateImage}
-          title={WORKSPACE_EMPTY_STATE_DETAILS["projects"].title}
-          description={WORKSPACE_EMPTY_STATE_DETAILS["projects"].description}
-          primaryButton={{
-            text: WORKSPACE_EMPTY_STATE_DETAILS["projects"].primaryButton.text,
-            onClick: () => {
-              setTrackElement("Project empty state");
-              commandPaletteStore.toggleCreateProjectModal(true);
-            },
-          }}
-          comicBox={{
-            title: WORKSPACE_EMPTY_STATE_DETAILS["projects"].comicBox.title,
-            description: WORKSPACE_EMPTY_STATE_DETAILS["projects"].comicBox.description,
-          }}
-          size="lg"
-          disabled={!isEditingAllowed}
-        />
-      )}
-    </>
+    <div className="h-full w-full overflow-y-auto p-8 vertical-scrollbar scrollbar-lg">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {filteredProjectIds.map((projectId) => {
+          const projectDetails = getProjectById(projectId);
+          if (!projectDetails) return;
+          return <ProjectCard key={projectDetails.id} project={projectDetails} />;
+        })}
+      </div>
+    </div>
   );
 });
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 3d6f62b7b8d..81813f3d0f2 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -1,85 +1,97 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
 import Link from "next/link";
-// hooks
-import { useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { DeleteProjectModal, JoinProjectModal } from "components/project";
+import { useRouter } from "next/router";
+import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Star, Trash2 } from "lucide-react";
+import { cn } from "@plane/editor-core";
+import type { IProject } from "@plane/types";
 // ui
-import { Avatar, AvatarGroup, Button, Tooltip } from "@plane/ui";
+import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
+// components
+import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
+import { EUserProjectRoles } from "@/constants/project";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useProject } from "@/hooks/store";
 // types
-import type { IProject } from "@plane/types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
 // constants
-import { EUserProjectRoles } from "constants/project";
 
-export type ProjectCardProps = {
+type Props = {
   project: IProject;
 };
 
-export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
+export const ProjectCard: React.FC<Props> = observer((props) => {
   const { project } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // states
   const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
   const [joinProjectModalOpen, setJoinProjectModal] = useState(false);
+  const [restoreProject, setRestoreProject] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
   // store hooks
   const { addProjectToFavorites, removeProjectFromFavorites } = useProject();
-
+  // hooks
+  const { isMobile } = usePlatformOS();
   project.member_role;
+  // derived values
+  const projectMembersIds = project.members?.map((member) => member.member_id);
+  // auth
   const isOwner = project.member_role === EUserProjectRoles.ADMIN;
   const isMember = project.member_role === EUserProjectRoles.MEMBER;
+  // archive
+  const isArchived = !!project.archived_at;
 
   const handleAddToFavorites = () => {
     if (!workspaceSlug) return;
 
-    addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => {
-      setToastAlert({
-        type: "error",
+    const addToFavoritePromise = addProjectToFavorites(workspaceSlug.toString(), project.id);
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding project to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Project added to favorites.",
+      },
+      error: {
         title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
-      });
+        message: () => "Couldn't add the project to favorites. Please try again.",
+      },
     });
   };
 
   const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !project) return;
+    if (!workspaceSlug) return;
 
-    removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => {
-      setToastAlert({
-        type: "error",
+    const removeFromFavoritePromise = removeProjectFromFavorites(workspaceSlug.toString(), project.id);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing project from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Project removed from favorites.",
+      },
+      error: {
         title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
-      });
+        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",
+  const handleCopyText = () =>
+    copyUrlToClipboard(`${workspaceSlug}/projects/${project.id}/issues`).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
         message: "Project link copied to clipboard.",
-      });
-    });
-  };
-
-  const projectMembersIds = project.members?.map((member) => member.member_id);
+      })
+    );
 
   return (
     <>
-      {/* Delete Project Modal  */}
+      {/* Delete Project Modal */}
       <DeleteProjectModal
         project={project}
         isOpen={deleteProjectModalOpen}
@@ -88,20 +100,32 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
       {/* Join Project Modal */}
       {workspaceSlug && (
         <JoinProjectModal
-          workspaceSlug={workspaceSlug?.toString()}
+          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);
+      {/* Restore project modal */}
+      {workspaceSlug && project && (
+        <ArchiveRestoreProjectModal
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={project.id}
+          isOpen={restoreProject}
+          onClose={() => setRestoreProject(false)}
+          archive={false}
+        />
+      )}
+      <Link
+        href={`/${workspaceSlug}/projects/${project.id}/issues`}
+        onClick={(e) => {
+          if (!project.is_member || isArchived) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isArchived) setJoinProjectModal(true);
+          }
         }}
-        className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
+        className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100"
       >
         <div className="relative h-[118px] w-full rounded-t ">
           <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/60 to-transparent" />
@@ -115,16 +139,10 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
             className="absolute left-0 top-0 h-full w-full rounded-t object-cover"
           />
 
-          <div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
+          <div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
             <div className="flex flex-grow items-center gap-2.5 truncate">
-              <div className="item-center flex h-9 w-9 flex-shrink-0 justify-center rounded bg-white/90">
-                <span className="flex items-center justify-center">
-                  {project.emoji
-                    ? renderEmoji(project.emoji)
-                    : project.icon_prop
-                    ? renderEmoji(project.icon_prop)
-                    : null}
-                </span>
+              <div className="h-9 w-9 flex-shrink-0 grid place-items-center rounded bg-white/90">
+                <ProjectLogo logo={project.logo_props} />
               </div>
 
               <div className="flex w-full flex-col justify-between gap-0.5 truncate">
@@ -136,95 +154,141 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
               </div>
             </div>
 
-            <div className="flex h-full flex-shrink-0 items-center gap-2">
-              <button
-                className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  handleCopyText();
-                }}
-              >
-                <LinkIcon className="h-3 w-3 text-white" />
-              </button>
-              <button
-                className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
-                onClick={(e) => {
-                  if (project.is_favorite) {
-                    e.preventDefault();
+            {!isArchived && (
+              <div className="flex h-full flex-shrink-0 items-center gap-2">
+                <button
+                  className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
+                  onClick={(e) => {
                     e.stopPropagation();
-                    handleRemoveFromFavorites();
-                  } else {
+                    e.preventDefault();
+                    handleCopyText();
+                  }}
+                >
+                  <LinkIcon className="h-3 w-3 text-white" />
+                </button>
+                <button
+                  className="flex h-6 w-6 items-center justify-center rounded bg-white/10"
+                  onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    handleAddToFavorites();
-                  }
-                }}
-              >
-                <Star
-                  className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
-                />
-              </button>
-            </div>
+                    if (project.is_favorite) handleRemoveFromFavorites();
+                    else handleAddToFavorites();
+                  }}
+                >
+                  <Star
+                    className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
+                  />
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
-        <div className="flex h-[104px] w-full flex-col justify-between rounded-b p-4">
-          <p className="line-clamp-2 break-words text-sm text-custom-text-300">{project.description}</p>
+        <div
+          className={cn("flex h-[104px] w-full flex-col justify-between rounded-b p-4", {
+            "opacity-90": isArchived,
+          })}
+        >
+          <p className="line-clamp-2 break-words text-sm text-custom-text-300">
+            {project.description && project.description.trim() !== ""
+              ? project.description
+              : `Created on ${renderFormattedDate(project.created_at)}`}
+          </p>
           <div className="item-center flex justify-between">
-            <Tooltip
-              tooltipHeading="Members"
-              tooltipContent={
-                project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member"
-              }
-              position="top"
-            >
-              {projectMembersIds && projectMembersIds.length > 0 ? (
-                <div className="flex cursor-pointer items-center gap-2 text-custom-text-200">
-                  <AvatarGroup showTooltip={false}>
-                    {projectMembersIds.map((memberId) => {
-                      const member = project.members?.find((m) => m.member_id === memberId);
-
-                      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) && (
-              <Link
-                className="flex items-center justify-center rounded p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200"
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                href={`/${workspaceSlug}/projects/${project.id}/settings`}
+            <div className="flex items-center justify-center gap-2">
+              <Tooltip
+                isMobile={isMobile}
+                tooltipHeading="Members"
+                tooltipContent={
+                  project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member"
+                }
+                position="top"
               >
-                <Pencil className="h-3.5 w-3.5" />
-              </Link>
+                {projectMembersIds && projectMembersIds.length > 0 ? (
+                  <div className="flex cursor-pointer items-center gap-2 text-custom-text-200">
+                    <AvatarGroup showTooltip={false}>
+                      {projectMembersIds.map((memberId) => {
+                        const member = project.members?.find((m) => m.member_id === memberId);
+                        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>
+              {isArchived && <div className="text-xs text-custom-text-400 font-medium">Archived</div>}
+            </div>
+            {isArchived ? (
+              isOwner && (
+                <div className="flex items-center justify-center gap-2">
+                  <div
+                    className="flex items-center justify-center text-xs text-custom-text-400 font-medium hover:text-custom-text-200"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setRestoreProject(true);
+                    }}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <ArchiveRestoreIcon className="h-3.5 w-3.5" />
+                      Restore
+                    </div>
+                  </div>
+                  <div
+                    className="flex items-center justify-center text-xs text-custom-text-400 font-medium hover:text-custom-text-200"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setDeleteProjectModal(true);
+                    }}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </div>
+                </div>
+              )
+            ) : (
+              <>
+                {project.is_member &&
+                  (isOwner || isMember ? (
+                    <Link
+                      className="flex items-center justify-center rounded p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      href={`/${workspaceSlug}/projects/${project.id}/settings`}
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Link>
+                  ) : (
+                    <span className="flex items-center gap-1 text-custom-text-400 text-sm">
+                      <Check className="h-3.5 w-3.5" />
+                      Joined
+                    </span>
+                  ))}
+                {!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>
+                )}
+              </>
             )}
-
-            {!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>
+      </Link>
     </>
   );
 });
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index 7ab4afa0ae0..10cd16f44c5 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import { IUserLite } from "@plane/types";
 // hooks
-import { useUser } from "hooks/store";
-// ui
 import { Button } from "@plane/ui";
+import { useUser } from "@/hooks/store";
+// ui
 // types
-import { IUserLite } from "@plane/types";
 
 type Props = {
   data: IUserLite;
@@ -94,8 +94,8 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
                         ? "Leaving..."
                         : "Leave"
                       : isDeleteLoading
-                      ? "Removing..."
-                      : "Remove"}
+                        ? "Removing..."
+                        : "Remove"}
                   </Button>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/project/create-project-form.tsx b/web/components/project/create-project-form.tsx
new file mode 100644
index 00000000000..27a19d7f838
--- /dev/null
+++ b/web/components/project/create-project-form.tsx
@@ -0,0 +1,396 @@
+import { useState, FC, ChangeEvent } from "react";
+import { observer } from "mobx-react-lite";
+import { useForm, Controller } from "react-hook-form";
+import { Info, X } from "lucide-react";
+import { IProject } from "@plane/types";
+// ui
+import {
+  Button,
+  CustomEmojiIconPicker,
+  CustomSelect,
+  EmojiIconPickerTypes,
+  Input,
+  setToast,
+  TextArea,
+  TOAST_TYPE,
+  Tooltip,
+} from "@plane/ui";
+// components
+import { ImagePickerPopover } from "@/components/core";
+import { MemberDropdown } from "@/components/dropdowns";
+// constants
+import { PROJECT_CREATED } from "@/constants/event-tracker";
+import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "@/constants/project";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { convertHexEmojiToDecimal, getRandomEmoji } from "@/helpers/emoji.helper";
+import { projectIdentifierSanitizer } from "@/helpers/project.helper";
+// hooks
+import { useEventTracker, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import { ProjectLogo } from "./project-logo";
+
+type Props = {
+  setToFavorite?: boolean;
+  workspaceSlug: string;
+  onClose: () => void;
+  handleNextStep: (projectId: string) => void;
+};
+
+const defaultValues: Partial<IProject> = {
+  cover_image: PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)],
+  description: "",
+  logo_props: {
+    in_use: "emoji",
+    emoji: {
+      value: getRandomEmoji(),
+    },
+  },
+  identifier: "",
+  name: "",
+  network: 2,
+  project_lead: null,
+};
+
+export const CreateProjectForm: FC<Props> = observer((props) => {
+  const { setToFavorite, workspaceSlug, onClose, handleNextStep } = props;
+  // store
+  const { captureProjectEvent } = useEventTracker();
+  const { addProjectToFavorites, createProject } = useProject();
+  // states
+  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
+  // form info
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    control,
+    watch,
+    setValue,
+  } = useForm<IProject>({
+    defaultValues,
+    reValidateMode: "onChange",
+  });
+  const { isMobile } = usePlatformOS();
+  const handleAddToFavorites = (projectId: string) => {
+    if (!workspaceSlug) return;
+
+    addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const onSubmit = async (formData: Partial<IProject>) => {
+    // Upper case identifier
+    formData.identifier = formData.identifier?.toUpperCase();
+
+    return createProject(workspaceSlug.toString(), formData)
+      .then((res) => {
+        const newPayload = {
+          ...res,
+          state: "SUCCESS",
+        };
+        captureProjectEvent({
+          eventName: PROJECT_CREATED,
+          payload: newPayload,
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Project created successfully.",
+        });
+        if (setToFavorite) {
+          handleAddToFavorites(res.id);
+        }
+        handleNextStep(res.id);
+      })
+      .catch((err) => {
+        Object.keys(err.data).map((key) => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: err.data[key],
+          });
+          captureProjectEvent({
+            eventName: PROJECT_CREATED,
+            payload: {
+              ...formData,
+              state: "FAILED",
+            },
+          });
+        });
+      });
+  };
+
+  const handleNameChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isChangeInIdentifierRequired) {
+      onChange(e);
+      return;
+    }
+    if (e.target.value === "") setValue("identifier", "");
+    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 5));
+    onChange(e);
+  };
+
+  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const alphanumericValue = projectIdentifierSanitizer(value);
+    setIsChangeInIdentifierRequired(false);
+    onChange(alphanumericValue);
+  };
+
+  const handleClose = () => {
+    onClose();
+    setIsChangeInIdentifierRequired(true);
+    setTimeout(() => {
+      reset();
+    }, 300);
+  };
+
+  return (
+    <>
+      <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
+        {watch("cover_image") && (
+          <img
+            src={watch("cover_image")!}
+            className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+            alt="Cover image"
+          />
+        )}
+
+        <div className="absolute right-2 top-2 p-2">
+          <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={8}>
+            <X className="h-5 w-5 text-white" />
+          </button>
+        </div>
+        <div className="absolute bottom-2 right-2">
+          <Controller
+            name="cover_image"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <ImagePickerPopover
+                label="Change Cover"
+                onChange={onChange}
+                control={control}
+                value={value}
+                tabIndex={9}
+              />
+            )}
+          />
+        </div>
+        <div className="absolute -bottom-[22px] left-3">
+          <Controller
+            name="logo_props"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <CustomEmojiIconPicker
+                label={
+                  <span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
+                    <ProjectLogo logo={value} className="text-xl" />
+                  </span>
+                }
+                onChange={(val: any) => {
+                  let logoValue = {};
+
+                  if (val.type === "emoji")
+                    logoValue = {
+                      value: convertHexEmojiToDecimal(val.value.unified),
+                      url: val.value.imageUrl,
+                    };
+                  else if (val.type === "icon") logoValue = val.value;
+
+                  onChange({
+                    in_use: val.type,
+                    [val.type]: logoValue,
+                  });
+                }}
+                defaultIconColor={value.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
+                defaultOpen={
+                  value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+                }
+              />
+            )}
+          />
+        </div>
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className="px-3">
+        <div className="mt-9 space-y-6 pb-5">
+          <div className="grid grid-cols-1 gap-x-2 gap-y-3 md:grid-cols-4">
+            <div className="md:col-span-3">
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: "Name 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}
+                    onChange={handleNameChange(onChange)}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Project name"
+                    className="w-full focus:border-blue-400"
+                    tabIndex={1}
+                  />
+                )}
+              />
+              <span className="text-xs text-red-500">
+                <>{errors?.name?.message}</>
+              </span>
+            </div>
+            <div className="relative">
+              <Controller
+                control={control}
+                name="identifier"
+                rules={{
+                  required: "Project ID is required",
+                  // allow only alphanumeric & non-latin characters
+                  validate: (value) =>
+                    /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
+                    "Only Alphanumeric & Non-latin characters are allowed.",
+                  minLength: {
+                    value: 1,
+                    message: "Project ID must at least be of 1 character",
+                  },
+                  maxLength: {
+                    value: 5,
+                    message: "Project ID must at most be of 5 characters",
+                  },
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="identifier"
+                    name="identifier"
+                    type="text"
+                    value={value}
+                    onChange={handleIdentifierChange(onChange)}
+                    hasError={Boolean(errors.identifier)}
+                    placeholder="Project ID"
+                    className={cn("w-full text-xs focus:border-blue-400 pr-7", {
+                      uppercase: value,
+                    })}
+                    tabIndex={2}
+                  />
+                )}
+              />
+              <Tooltip
+                isMobile={isMobile}
+                tooltipContent="Helps you identify issues in the project uniquely, (e.g. APP-123). Max 5 characters."
+                className="text-sm"
+                position="right-top"
+              >
+                <Info className="absolute right-2 top-2.5 h-3 w-3 text-custom-text-400" />
+              </Tooltip>
+              <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}
+                    placeholder="Description..."
+                    onChange={onChange}
+                    className="!h-24 text-sm focus:border-blue-400"
+                    hasError={Boolean(errors?.description)}
+                    tabIndex={3}
+                  />
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              name="network"
+              control={control}
+              render={({ field: { onChange, value } }) => {
+                const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+
+                return (
+                  <div className="flex-shrink-0" tabIndex={4}>
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={
+                        <div className="flex items-center gap-1">
+                          {currentNetwork ? (
+                            <>
+                              <currentNetwork.icon className="h-3 w-3" />
+                              {currentNetwork.label}
+                            </>
+                          ) : (
+                            <span className="text-custom-text-400">Select network</span>
+                          )}
+                        </div>
+                      }
+                      placement="bottom-start"
+                      noChevron
+                      tabIndex={4}
+                    >
+                      {NETWORK_CHOICES.map((network) => (
+                        <CustomSelect.Option key={network.key} value={network.key}>
+                          <div className="flex items-start gap-2">
+                            <network.icon className="h-3.5 w-3.5" />
+                            <div className="-mt-1">
+                              <p>{network.label}</p>
+                              <p className="text-xs text-custom-text-400">{network.description}</p>
+                            </div>
+                          </div>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  </div>
+                );
+              }}
+            />
+            <Controller
+              name="project_lead"
+              control={control}
+              render={({ field: { value, onChange } }) => {
+                if (value === undefined || value === null || typeof value === "string")
+                  return (
+                    <div className="h-7 flex-shrink-0" tabIndex={5}>
+                      <MemberDropdown
+                        value={value}
+                        onChange={(lead) => onChange(lead === value ? null : lead)}
+                        placeholder="Lead"
+                        multiple={false}
+                        buttonVariant="border-with-text"
+                        tabIndex={5}
+                      />
+                    </div>
+                  );
+                else return <></>;
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4 border-t border-custom-border-100">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
+            {isSubmitting ? "Creating" : "Create project"}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+});
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 49a42a0a3a3..5e8cf1895e7 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -1,24 +1,8 @@
-import { useState, useEffect, Fragment, FC, ChangeEvent } from "react";
-import { useForm, Controller } from "react-hook-form";
+import { useEffect, Fragment, FC, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
-import { X } from "lucide-react";
-// hooks
-import { useEventTracker, useProject, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// ui
-import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // components
-import { ImagePickerPopover } from "components/core";
-import EmojiIconPicker from "components/emoji-icon-picker";
-import { MemberDropdown } from "components/dropdowns";
-// helpers
-import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
-// constants
-import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
-// constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { PROJECT_CREATED } from "constants/event-tracker";
+import { CreateProjectForm } from "./create-project-form";
+import { ProjectFeatureUpdate } from "./project-feature-update";
 
 type Props = {
   isOpen: boolean;
@@ -27,164 +11,33 @@ type Props = {
   workspaceSlug: string;
 };
 
-interface IIsGuestCondition {
-  onClose: () => void;
+enum EProjectCreationSteps {
+  CREATE_PROJECT = "CREATE_PROJECT",
+  FEATURE_SELECTION = "FEATURE_SELECTION",
 }
 
-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: string;
-  project_lead: string;
-  cover_image: string;
-  icon_prop: any;
-  emoji: string;
-}
-
-export const CreateProjectModal: FC<Props> = observer((props) => {
+export const CreateProjectModal: FC<Props> = (props) => {
   const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
-  // store
-  const { captureProjectEvent } = useEventTracker();
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  const { addProjectToFavorites, createProject } = useProject();
   // 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 currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
-
-  if (currentWorkspaceRole && isOpen)
-    if (currentWorkspaceRole < EUserWorkspaceRoles.MEMBER) return <IsGuestCondition onClose={onClose} />;
-
-  const handleClose = () => {
-    onClose();
-    setIsChangeInIdentifierRequired(true);
-    reset();
-  };
-
-  const handleAddToFavorites = (projectId: string) => {
-    if (!workspaceSlug) return;
+  const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(EProjectCreationSteps.CREATE_PROJECT);
+  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
 
-    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;
-    // Upper case identifier
-    payload.identifier = payload.identifier.toUpperCase();
-
-    return createProject(workspaceSlug.toString(), payload)
-      .then((res) => {
-        const newPayload = {
-          ...res,
-          state: "SUCCESS",
-        };
-        captureProjectEvent({
-          eventName: PROJECT_CREATED,
-          payload: newPayload,
-        });
-        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],
-          });
-          captureProjectEvent({
-            eventName: PROJECT_CREATED,
-            payload: {
-              ...payload,
-              state: "FAILED",
-            },
-          });
-        });
-      });
-  };
-
-  const handleNameChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
-    if (!isChangeInIdentifierRequired) {
-      onChange(e);
-      return;
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentStep(EProjectCreationSteps.CREATE_PROJECT);
+      setCreatedProjectId(null);
     }
-    if (e.target.value === "") setValue("identifier", "");
-    else setValue("identifier", e.target.value.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "").substring(0, 5));
-    onChange(e);
-  };
+  }, [isOpen]);
 
-  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
-    const alphanumericValue = value.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "");
-    setIsChangeInIdentifierRequired(false);
-    onChange(alphanumericValue);
+  const handleNextStep = (projectId: string) => {
+    if (!projectId) return;
+    setCreatedProjectId(projectId);
+    setCurrentStep(EProjectCreationSteps.FEATURE_SELECTION);
   };
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -209,203 +62,17 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="w-full transform rounded-lg bg-custom-background-100 p-3 text-left shadow-custom-shadow-md transition-all 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 left-0 top-0 h-full w-full rounded-lg object-cover"
-                      alt="Cover Image"
-                    />
-                  )}
-
-                  <div className="absolute right-2 top-2 p-2">
-                    <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={8}>
-                      <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")}
-                      tabIndex={9}
-                    />
-                  </div>
-                  <div className="absolute -bottom-[22px] left-3">
-                    <Controller
-                      name="emoji_and_icon"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <EmojiIconPicker
-                          label={
-                            <div className="grid h-[44px] w-[44px] place-items-center rounded-md bg-custom-background-80 text-lg outline-none">
-                              {value ? renderEmoji(value) : "Icon"}
-                            </div>
-                          }
-                          onChange={onChange}
-                          value={value}
-                          tabIndex={10}
-                        />
-                      )}
-                    />
-                  </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 gap-x-2 gap-y-3 md:grid-cols-4">
-                      <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}
-                              onChange={handleNameChange(onChange)}
-                              hasError={Boolean(errors.name)}
-                              placeholder="Project Title"
-                              className="w-full focus:border-blue-400"
-                              tabIndex={1}
-                            />
-                          )}
-                        />
-                        <span className="text-xs text-red-500">{errors?.name?.message}</span>
-                      </div>
-                      <div>
-                        <Controller
-                          control={control}
-                          name="identifier"
-                          rules={{
-                            required: "Identifier is required",
-                            // allow only alphanumeric & non-latin characters
-                            validate: (value) =>
-                              /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
-                              "Only Alphanumeric & Non-latin characters are allowed.",
-                            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}
-                              onChange={handleIdentifierChange(onChange)}
-                              hasError={Boolean(errors.identifier)}
-                              placeholder="Identifier"
-                              className="w-full text-xs focus:border-blue-400 uppercase"
-                              tabIndex={2}
-                            />
-                          )}
-                        />
-                        <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}
-                              placeholder="Description..."
-                              onChange={onChange}
-                              className="!h-24 text-sm focus:border-blue-400"
-                              hasError={Boolean(errors?.description)}
-                              tabIndex={3}
-                            />
-                          )}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Controller
-                        name="network"
-                        control={control}
-                        render={({ field: { onChange, value } }) => (
-                          <div className="flex-shrink-0" tabIndex={4}>
-                            <CustomSelect
-                              value={value}
-                              onChange={onChange}
-                              label={
-                                <div className="flex items-center gap-1">
-                                  {currentNetwork ? (
-                                    <>
-                                      <currentNetwork.icon className="h-3 w-3" />
-                                      {currentNetwork.label}
-                                    </>
-                                  ) : (
-                                    <span className="text-custom-text-400">Select Network</span>
-                                  )}
-                                </div>
-                              }
-                              placement="bottom-start"
-                              noChevron
-                              tabIndex={4}
-                            >
-                              {NETWORK_CHOICES.map((network) => (
-                                <CustomSelect.Option key={network.key} value={network.key}>
-                                  <div className="flex items-start gap-2">
-                                    <network.icon className="h-3.5 w-3.5" />
-                                    <div className="-mt-1">
-                                      <p>{network.label}</p>
-                                      <p className="text-xs text-custom-text-400">{network.description}</p>
-                                    </div>
-                                  </div>
-                                </CustomSelect.Option>
-                              ))}
-                            </CustomSelect>
-                          </div>
-                        )}
-                      />
-                      <Controller
-                        name="project_lead_member"
-                        control={control}
-                        render={({ field: { value, onChange } }) => (
-                          <div className="h-7 flex-shrink-0" tabIndex={5}>
-                            <MemberDropdown
-                              value={value}
-                              onChange={onChange}
-                              placeholder="Lead"
-                              multiple={false}
-                              buttonVariant="border-with-text"
-                              tabIndex={5}
-                            />
-                          </div>
-                        )}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex justify-end gap-2 pt-5">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
-                      Cancel
-                    </Button>
-                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
-                      {isSubmitting ? "Creating..." : "Create Project"}
-                    </Button>
-                  </div>
-                </form>
+                {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
+                  <CreateProjectForm
+                    setToFavorite={setToFavorite}
+                    workspaceSlug={workspaceSlug}
+                    onClose={onClose}
+                    handleNextStep={handleNextStep}
+                  />
+                )}
+                {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
+                  <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
+                )}
               </Dialog.Panel>
             </Transition.Child>
           </div>
@@ -413,4 +80,4 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
       </Dialog>
     </Transition.Root>
   );
-});
+};
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index 791ac3672ca..de2eb041d25 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -1,17 +1,16 @@
 import React from "react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+import type { IProject } from "@plane/types";
 // hooks
-import { useEventTracker, useProject, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { PROJECT_DELETED } from "@/constants/event-tracker";
+import { useEventTracker, useProject } from "@/hooks/store";
 // ui
-import { Button, Input } from "@plane/ui";
 // types
-import type { IProject } from "@plane/types";
 // constants
-import { PROJECT_DELETED } from "constants/event-tracker";
 
 type DeleteProjectModal = {
   isOpen: boolean;
@@ -28,13 +27,10 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
   const { isOpen, project, onClose } = props;
   // store hooks
   const { captureProjectEvent } = useEventTracker();
-  const { currentWorkspace } = useWorkspace();
   const { deleteProject } = useProject();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     control,
@@ -67,8 +63,8 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
           eventName: PROJECT_DELETED,
           payload: { ...project, state: "SUCCESS", element: "Project general settings" },
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Project deleted successfully.",
         });
@@ -78,8 +74,8 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
           eventName: PROJECT_DELETED,
           payload: { ...project, state: "FAILED", element: "Project general settings" },
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again later.",
         });
diff --git a/web/components/project/dropdowns/filters/access.tsx b/web/components/project/dropdowns/filters/access.tsx
new file mode 100644
index 00000000000..2936c85a5ed
--- /dev/null
+++ b/web/components/project/dropdowns/filters/access.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues";
+// constants
+import { NETWORK_CHOICES } from "@/constants/project";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterAccess: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = NETWORK_CHOICES.filter((a) => a.label.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Access${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((access) => (
+              <FilterOption
+                key={access.key}
+                isChecked={appliedFilters?.includes(`${access.key}`) ? true : false}
+                onClick={() => handleUpdate(`${access.key}`)}
+                icon={<access.icon className="h-3 w-3" />}
+                title={access.label}
+              />
+            ))
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/dropdowns/filters/created-at.tsx b/web/components/project/dropdowns/filters/created-at.tsx
new file mode 100644
index 00000000000..5a1b75c00bf
--- /dev/null
+++ b/web/components/project/dropdowns/filters/created-at.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { DateFilterModal } from "@/components/core";
+import { FilterHeader, FilterOption } from "@/components/issues";
+// constants
+import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterCreatedDate: 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_BEFORE_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Created date"
+        />
+      )}
+      <FilterHeader
+        title={`Created date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs italic text-custom-text-400">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/dropdowns/filters/index.ts b/web/components/project/dropdowns/filters/index.ts
new file mode 100644
index 00000000000..c04162e579d
--- /dev/null
+++ b/web/components/project/dropdowns/filters/index.ts
@@ -0,0 +1,5 @@
+export * from "./access";
+export * from "./created-at";
+export * from "./lead";
+export * from "./members";
+export * from "./root";
diff --git a/web/components/project/dropdowns/filters/lead.tsx b/web/components/project/dropdowns/filters/lead.tsx
new file mode 100644
index 00000000000..2bfea97dfe3
--- /dev/null
+++ b/web/components/project/dropdowns/filters/lead.tsx
@@ -0,0 +1,97 @@
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react-lite";
+// hooks
+import { Avatar, Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
+// components
+// ui
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLead: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Lead${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`lead-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
+                      title={member.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">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/project/dropdowns/filters/members.tsx b/web/components/project/dropdowns/filters/members.tsx
new file mode 100644
index 00000000000..3db1f5d0464
--- /dev/null
+++ b/web/components/project/dropdowns/filters/members.tsx
@@ -0,0 +1,97 @@
+import { useMemo, useState } from "react";
+import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react-lite";
+// hooks
+import { Avatar, Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues";
+import { useMember } from "@/hooks/store";
+// components
+// ui
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMembers: React.FC<Props> = observer((props: Props) => {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter(
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Members${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
+                      title={member.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-xs font-medium text-custom-primary-100"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs italic text-custom-text-400">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/project/dropdowns/filters/root.tsx b/web/components/project/dropdowns/filters/root.tsx
new file mode 100644
index 00000000000..12008eecd2d
--- /dev/null
+++ b/web/components/project/dropdowns/filters/root.tsx
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+import { TProjectDisplayFilters, TProjectFilters } from "@plane/types";
+// components
+import { FilterOption } from "@/components/issues";
+import { FilterAccess, FilterCreatedDate, FilterLead, FilterMembers } from "@/components/project";
+// types
+
+type Props = {
+  displayFilters: TProjectDisplayFilters;
+  filters: TProjectFilters;
+  handleFiltersUpdate: (key: keyof TProjectFilters, value: string | string[]) => void;
+  handleDisplayFiltersUpdate: (updatedDisplayProperties: Partial<TProjectDisplayFilters>) => void;
+  memberIds?: string[] | undefined;
+};
+
+export const ProjectFiltersSelection: React.FC<Props> = observer((props) => {
+  const { displayFilters, filters, handleFiltersUpdate, handleDisplayFiltersUpdate, memberIds } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-custom-background-100 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
+            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="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
+        <div className="py-2">
+          <FilterOption
+            isChecked={!!displayFilters.my_projects}
+            onClick={() =>
+              handleDisplayFiltersUpdate({
+                my_projects: !displayFilters.my_projects,
+              })
+            }
+            title="My projects"
+          />
+          <FilterOption
+            isChecked={!!displayFilters.archived_projects}
+            onClick={() =>
+              handleDisplayFiltersUpdate({
+                archived_projects: !displayFilters.archived_projects,
+              })
+            }
+            title="Archived"
+          />
+        </div>
+
+        {/* access */}
+        <div className="py-2">
+          <FilterAccess
+            appliedFilters={filters.access ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("access", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* lead */}
+        <div className="py-2">
+          <FilterLead
+            appliedFilters={filters.lead ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("lead", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* members */}
+        <div className="py-2">
+          <FilterMembers
+            appliedFilters={filters.members ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("members", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* created date */}
+        <div className="py-2">
+          <FilterCreatedDate
+            appliedFilters={filters.created_at ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("created_at", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/project/dropdowns/index.ts b/web/components/project/dropdowns/index.ts
new file mode 100644
index 00000000000..f6c42552f65
--- /dev/null
+++ b/web/components/project/dropdowns/index.ts
@@ -0,0 +1,2 @@
+export * from "./filters";
+export * from "./order-by";
diff --git a/web/components/project/dropdowns/order-by.tsx b/web/components/project/dropdowns/order-by.tsx
new file mode 100644
index 00000000000..048513d08aa
--- /dev/null
+++ b/web/components/project/dropdowns/order-by.tsx
@@ -0,0 +1,75 @@
+import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { TProjectOrderByOptions } from "@plane/types";
+// ui
+import { CustomMenu, getButtonStyling } from "@plane/ui";
+// helpers
+import { PROJECT_ORDER_BY_OPTIONS } from "@/constants/project";
+import { cn } from "@/helpers/common.helper";
+// types
+// constants
+
+type Props = {
+  onChange: (value: TProjectOrderByOptions) => void;
+  value: TProjectOrderByOptions | undefined;
+};
+
+const DISABLED_ORDERING_OPTIONS = ["sort_order"];
+
+export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
+  const { onChange, value } = props;
+
+  const orderByDetails = PROJECT_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
+
+  const isDescending = value?.[0] === "-";
+  const isOrderingDisabled = !!value && DISABLED_ORDERING_OPTIONS.includes(value);
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+          <ArrowDownWideNarrow className="h-3 w-3" />
+          {orderByDetails?.label}
+          <ChevronDown className="h-3 w-3" strokeWidth={2} />
+        </div>
+      }
+      placement="bottom-end"
+      closeOnSelect
+    >
+      {PROJECT_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => {
+            if (isDescending)
+              onChange(option.key == "sort_order" ? option.key : (`-${option.key}` as TProjectOrderByOptions));
+            else onChange(option.key);
+          }}
+        >
+          {option.label}
+          {value?.includes(option.key) && <Check className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      <hr className="my-2" />
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (isDescending) onChange(value.slice(1) as TProjectOrderByOptions);
+        }}
+        disabled={isOrderingDisabled}
+      >
+        Ascending
+        {!isOrderingDisabled && !isDescending && <Check className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (!isDescending) onChange(`-${value}` as TProjectOrderByOptions);
+        }}
+        disabled={isOrderingDisabled}
+      >
+        Descending
+        {!isOrderingDisabled && isDescending && <Check className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  );
+};
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 267103dc8ba..98a3e8d02a1 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -1,24 +1,35 @@
 import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-// hooks
-import { useEventTracker, useProject } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import EmojiIconPicker from "components/emoji-icon-picker";
-import { ImagePickerPopover } from "components/core";
-import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // icons
-import { Lock } from "lucide-react";
-// types
+import { Info, Lock } from "lucide-react";
 import { IProject, IWorkspace } from "@plane/types";
-// helpers
-import { renderEmoji } from "helpers/emoji.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
+// ui
+import {
+  Button,
+  CustomSelect,
+  Input,
+  TextArea,
+  TOAST_TYPE,
+  setToast,
+  CustomEmojiIconPicker,
+  EmojiIconPickerTypes,
+  Tooltip,
+} from "@plane/ui";
+// components
+import { ImagePickerPopover } from "@/components/core";
 // constants
-import { NETWORK_CHOICES } from "constants/project";
+import { PROJECT_UPDATED } from "@/constants/event-tracker";
+import { NETWORK_CHOICES } from "@/constants/project";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+// hooks
+import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
+import { useEventTracker, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
-import { ProjectService } from "services/project";
-import { PROJECT_UPDATED } from "constants/event-tracker";
+import { ProjectService } from "@/services/project";
+// types
+import { ProjectLogo } from "./project-logo";
 export interface IProjectDetailsForm {
   project: IProject;
   workspaceSlug: string;
@@ -33,8 +44,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   // store hooks
   const { captureProjectEvent } = useEventTracker();
   const { updateProject } = useProject();
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { isMobile } = usePlatformOS();
   // form info
   const {
     handleSubmit,
@@ -48,7 +58,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   } = useForm<IProject>({
     defaultValues: {
       ...project,
-      emoji_and_icon: project.emoji ?? project.icon_prop,
       workspace: (project.workspace as IWorkspace).id,
     },
   });
@@ -57,7 +66,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     if (project && projectId !== getValues("id")) {
       reset({
         ...project,
-        emoji_and_icon: project.emoji ?? project.icon_prop,
         workspace: (project.workspace as IWorkspace).id,
       });
     }
@@ -84,8 +92,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             element: "Project general settings",
           },
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Project updated successfully",
         });
@@ -95,8 +103,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
           eventName: PROJECT_UPDATED,
           payload: { ...payload, state: "FAILED", element: "Project general settings" },
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: error?.error ?? "Project could not be updated. Please try again.",
         });
@@ -111,14 +119,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       identifier: formData.identifier,
       description: formData.description,
       cover_image: formData.cover_image,
+      logo_props: formData.logo_props,
     };
-    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 ?? "")
@@ -141,20 +144,39 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
             <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90">
-              <div className="grid h-7 w-7 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>
+              <Controller
+                control={control}
+                name="logo_props"
+                render={({ field: { value, onChange } }) => (
+                  <CustomEmojiIconPicker
+                    label={
+                      <span className="grid h-7 w-7 place-items-center">
+                        <ProjectLogo logo={value} className="text-lg" />
+                      </span>
+                    }
+                    onChange={(val) => {
+                      let logoValue = {};
+
+                      if (val.type === "emoji")
+                        logoValue = {
+                          value: convertHexEmojiToDecimal(val.value.unified),
+                          url: val.value.imageUrl,
+                        };
+                      else if (val.type === "icon") logoValue = val.value;
+
+                      onChange({
+                        in_use: val.type,
+                        [val.type]: logoValue,
+                      });
+                    }}
+                    defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
+                    defaultOpen={
+                      value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+                    }
+                    disabled={!isAdmin}
+                  />
+                )}
+              />
             </div>
             <div className="flex flex-col gap-1 truncate text-white">
               <span className="truncate text-lg font-semibold">{watch("name")}</span>
@@ -210,6 +232,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               />
             )}
           />
+          <span className="text-xs text-red-500">
+            <>{errors?.name?.message}</>
+          </span>
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Description</h4>
@@ -230,39 +255,54 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             )}
           />
         </div>
-        <div className="flex w-full items-center justify-between gap-10">
+        <div className="flex w-full justify-between gap-10">
           <div className="flex w-1/2 flex-col gap-1">
-            <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 font-medium"
-                  disabled={!isAdmin}
-                />
-              )}
-            />
+            <h4 className="text-sm">Project ID</h4>
+            <div className="relative">
+              <Controller
+                control={control}
+                name="identifier"
+                rules={{
+                  required: "Project ID is required",
+                  validate: (value) =>
+                    /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
+                    "Only Alphanumeric & Non-latin characters are allowed.",
+                  minLength: {
+                    value: 1,
+                    message: "Project ID must at least be of 1 character",
+                  },
+                  maxLength: {
+                    value: 5,
+                    message: "Project ID 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 Project ID"
+                    className="w-full font-medium"
+                    disabled={!isAdmin}
+                  />
+                )}
+              />
+              <Tooltip
+                isMobile={isMobile}
+                tooltipContent="Helps you identify issues in the project uniquely, (e.g. APP-123). Max 5 characters."
+                className="text-sm"
+                position="right-top"
+              >
+                <Info className="absolute right-2 top-2.5 h-4 w-4 text-custom-text-400" />
+              </Tooltip>
+            </div>
+            <span className="text-xs text-red-500">
+              <>{errors?.identifier?.message}</>
+            </span>
           </div>
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-sm">Network</h4>
diff --git a/web/components/project/index.ts b/web/components/project/index.ts
index 42e310edb05..db51bc28401 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -1,8 +1,12 @@
+export * from "./applied-filters";
+export * from "./dropdowns";
 export * from "./publish-project";
 export * from "./settings";
 export * from "./card-list";
 export * from "./card";
 export * from "./create-project-modal";
+export * from "./create-project-form";
+export * from "./project-feature-update";
 export * from "./delete-project-modal";
 export * from "./form-loader";
 export * from "./form";
@@ -14,6 +18,7 @@ export * from "./sidebar-list";
 export * from "./integration-card";
 export * from "./member-list";
 export * from "./member-list-item";
+export * from "./project-logo";
 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
index d2910b34a3d..5fa606f254d 100644
--- a/web/components/project/integration-card.tsx
+++ b/web/components/project/integration-card.tsx
@@ -1,23 +1,19 @@
 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";
+import useSWR, { mutate } from "swr";
+import { IWorkspaceIntegration } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { SelectRepository, SelectChannel } from "components/integration";
+import { SelectRepository, SelectChannel } from "@/components/integration";
+// constants
+import { PROJECT_GITHUB_REPOSITORY } from "@/constants/fetch-keys";
 // icons
+import { ProjectService } from "@/services/project";
 import GithubLogo from "public/logos/github-square.png";
 import SlackLogo from "public/services/slack.png";
 // types
-import { IWorkspaceIntegration } from "@plane/types";
-// fetch-keys
-import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
 
 type Props = {
   integration: IWorkspaceIntegration;
@@ -41,8 +37,6 @@ 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,
     () =>
@@ -71,16 +65,16 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
       .then(() => {
         mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
 
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: `${login}/${name} repository synced with the project successfully.`,
         });
       })
       .catch((err) => {
         console.error(err);
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Repository could not be synced with the project. Please try again.",
         });
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 58b549b6c4b..a5717b80a80 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -1,12 +1,12 @@
 import { useState, Fragment } from "react";
 import { useRouter } from "next/router";
 import { Transition, Dialog } from "@headlessui/react";
+import type { IProject } from "@plane/types";
 // hooks
-import { useProject, useUser } from "hooks/store";
-// ui
 import { Button } from "@plane/ui";
+import { useProject, useUser } from "@/hooks/store";
+// ui
 // types
-import type { IProject } from "@plane/types";
 
 // type
 type TJoinProjectModalProps = {
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 0827568ce50..2045492c94e 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -1,18 +1,19 @@
 import { FC, Fragment } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
+// headless ui
 import { AlertTriangleIcon } from "lucide-react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useEventTracker, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// ui
-import { Button, Input } from "@plane/ui";
-// types
+import { Dialog, Transition } from "@headlessui/react";
+// icons
 import { IProject } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROJECT_MEMBER_LEAVE } from "constants/event-tracker";
+import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useUser } from "@/hooks/store";
+// types
 
 type FormData = {
   projectName: string;
@@ -40,8 +41,6 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
   const {
     membership: { leaveProject },
   } = useUser();
-  // toast
-  const { setToastAlert } = useToast();
 
   const {
     control,
@@ -71,8 +70,8 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
               });
             })
             .catch(() => {
-              setToastAlert({
-                type: "error",
+              setToast({
+                type: TOAST_TYPE.ERROR,
                 title: "Error!",
                 message: "Something went wrong please try again later.",
               });
@@ -82,22 +81,22 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
               });
             });
         } else {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Please confirm leaving the project by typing the 'Leave Project'.",
           });
         }
       } else {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Please enter the project name as shown in the description.",
         });
       }
     } else {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please fill all fields.",
       });
diff --git a/web/components/project/member-list-item.tsx b/web/components/project/member-list-item.tsx
index 6a27eccd512..c97d1da2f08 100644
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@@ -1,20 +1,20 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useEventTracker, useMember, useProject, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { ConfirmProjectMemberRemove } from "components/project";
-// ui
-import { CustomSelect, Tooltip } from "@plane/ui";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // icons
 import { ChevronDown, Dot, XCircle } from "lucide-react";
+// ui
+import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ConfirmProjectMemberRemove } from "@/components/project";
 // constants
-import { ROLE } from "constants/workspace";
-import { EUserProjectRoles } from "constants/project";
-import { PROJECT_MEMBER_LEAVE } from "constants/event-tracker";
+import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
+import { EUserProjectRoles } from "@/constants/project";
+import { ROLE } from "@/constants/workspace";
+// hooks
+import { useEventTracker, useMember, useProject, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   userId: string;
@@ -37,9 +37,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
     project: { removeMemberFromProject, getProjectMemberDetails, updateMember },
   } = useMember();
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
-
+  const { isMobile } = usePlatformOS();
   // derived values
   const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
   const userDetails = getProjectMemberDetails(userId);
@@ -47,7 +45,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
   const handleRemove = async () => {
     if (!workspaceSlug || !projectId || !userDetails) return;
 
-    if (userDetails.member.id === currentUser?.id) {
+    if (userDetails.member?.id === currentUser?.id) {
       await leaveProject(workspaceSlug.toString(), projectId.toString())
         .then(async () => {
           captureEvent(PROJECT_MEMBER_LEAVE, {
@@ -58,17 +56,17 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
           router.push(`/${workspaceSlug}/projects`);
         })
         .catch((err) =>
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error",
             message: err?.error || "Something went wrong. Please try again.",
           })
         );
     } else
-      await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), userDetails.member.id).catch(
+      await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), userDetails.member?.id).catch(
         (err) =>
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error",
             message: err?.error || "Something went wrong. Please try again.",
           })
@@ -87,12 +85,12 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
       />
       <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">
-          {userDetails.member.avatar && userDetails.member.avatar !== "" ? (
-            <Link href={`/${workspaceSlug}/profile/${userDetails.member.id}`}>
+          {userDetails.member?.avatar && userDetails.member?.avatar !== "" ? (
+            <Link href={`/${workspaceSlug}/profile/${userDetails.member?.id}`}>
               <span className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
                 <img
-                  src={userDetails.member.avatar}
-                  alt={userDetails.member.display_name || userDetails.member.email}
+                  src={userDetails.member?.avatar}
+                  alt={userDetails.member?.display_name || userDetails.member?.email}
                   className="absolute left-0 top-0 h-full w-full rounded object-cover"
                 />
               </span>
@@ -100,23 +98,23 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
           ) : (
             <Link href={`/${workspaceSlug}/profile/${userDetails.id}`}>
               <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
-                {(userDetails.member.display_name ?? userDetails.member.email ?? "?")[0]}
+                {(userDetails.member?.display_name ?? userDetails.member?.email ?? "?")[0]}
               </span>
             </Link>
           )}
 
           <div>
-            <Link href={`/${workspaceSlug}/profile/${userDetails.member.id}`}>
+            <Link href={`/${workspaceSlug}/profile/${userDetails.member?.id}`}>
               <span className="text-sm font-medium">
-                {userDetails.member.first_name} {userDetails.member.last_name}
+                {userDetails.member?.first_name} {userDetails.member?.last_name}
               </span>
             </Link>
             <div className="flex items-center">
-              <p className="text-xs text-custom-text-300">{userDetails.member.display_name}</p>
+              <p className="text-xs text-custom-text-300">{userDetails.member?.display_name}</p>
               {isAdmin && (
                 <>
                   <Dot height={16} width={16} className="text-custom-text-300" />
-                  <p className="text-xs text-custom-text-300">{userDetails.member.email}</p>
+                  <p className="text-xs text-custom-text-300">{userDetails.member?.email}</p>
                 </>
               )}
             </div>
@@ -129,12 +127,12 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
               <div className="item-center flex gap-1 rounded px-2 py-0.5">
                 <span
                   className={`flex items-center rounded text-xs font-medium ${
-                    userDetails.member.id !== currentUser?.id ? "" : "text-custom-text-400"
+                    userDetails.member?.id !== currentUser?.id ? "" : "text-custom-text-400"
                   }`}
                 >
                   {ROLE[userDetails.role]}
                 </span>
-                {userDetails.member.id !== currentUser?.id && (
+                {userDetails.member?.id !== currentUser?.id && (
                   <span className="grid place-items-center">
                     <ChevronDown className="h-3 w-3" />
                   </span>
@@ -145,21 +143,21 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
             onChange={(value: EUserProjectRoles) => {
               if (!workspaceSlug || !projectId) return;
 
-              updateMember(workspaceSlug.toString(), projectId.toString(), userDetails.member.id, {
+              updateMember(workspaceSlug.toString(), projectId.toString(), userDetails.member?.id, {
                 role: value,
               }).catch((err) => {
                 const error = err.error;
                 const errorString = Array.isArray(error) ? error[0] : error;
 
-                setToastAlert({
-                  type: "error",
+                setToast({
+                  type: TOAST_TYPE.ERROR,
                   title: "Error!",
                   message: errorString ?? "An error occurred while updating member role. Please try again.",
                 });
               });
             }}
             disabled={
-              userDetails.member.id === currentUser?.id || !currentProjectRole || currentProjectRole < userDetails.role
+              userDetails.member?.id === currentUser?.id || !currentProjectRole || currentProjectRole < userDetails.role
             }
             placement="bottom-end"
           >
@@ -173,8 +171,11 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
               );
             })}
           </CustomSelect>
-          {(isAdmin || userDetails.member.id === currentUser?.id) && (
-            <Tooltip tooltipContent={userDetails.member.id === currentUser?.id ? "Leave project" : "Remove member"}>
+          {(isAdmin || userDetails.member?.id === currentUser?.id) && (
+            <Tooltip
+              tooltipContent={userDetails.member?.id === currentUser?.id ? "Leave project" : "Remove member"}
+              isMobile={isMobile}
+            >
               <button
                 type="button"
                 onClick={() => setRemoveMemberModal(true)}
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
index d7b43244530..dbc86383632 100644
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@@ -2,12 +2,12 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search } from "lucide-react";
 // hooks
-import { useEventTracker, useMember } from "hooks/store";
 // components
-import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project";
-// ui
 import { Button } from "@plane/ui";
-import { MembersSettingsLoader } from "components/ui";
+import { ProjectMemberListItem, SendProjectInvitationModal } from "@/components/project";
+// ui
+import { MembersSettingsLoader } from "@/components/ui";
+import { useEventTracker, useMember } from "@/hooks/store";
 
 export const ProjectMemberList: React.FC = observer(() => {
   // states
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 7dc9b323325..64609e2dd7b 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 import { Ban } from "lucide-react";
 // hooks
-import { useMember } from "hooks/store";
-// ui
 import { Avatar, CustomSearchSelect } from "@plane/ui";
+import { useMember } from "@/hooks/store";
+// ui
 
 type Props = {
   value: any;
@@ -49,14 +49,14 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
     <CustomSearchSelect
       value={value}
       label={
-        <div className="flex items-center gap-2">
-          {selectedOption && <Avatar name={selectedOption.member.display_name} src={selectedOption.member.avatar} />}
+        <div className="flex items-center gap-2 h-5">
+          {selectedOption && <Avatar name={selectedOption.member?.display_name} src={selectedOption.member?.avatar} />}
           {selectedOption ? (
-            selectedOption.member.display_name
+            selectedOption.member?.display_name
           ) : (
             <div className="flex items-center gap-2">
               <Ban className="h-3.5 w-3.5 rotate-90 text-custom-sidebar-text-400" />
-              <span className="py-0.5 text-sm text-custom-sidebar-text-400">None</span>
+              <span className="text-sm text-custom-sidebar-text-400">None</span>
             </div>
           )}
         </div>
diff --git a/web/components/project/project-feature-update.tsx b/web/components/project/project-feature-update.tsx
new file mode 100644
index 00000000000..7bf6a89995f
--- /dev/null
+++ b/web/components/project/project-feature-update.tsx
@@ -0,0 +1,57 @@
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// hooks
+import { Button, getButtonStyling } from "@plane/ui";
+import { useProject } from "@/hooks/store";
+// ui
+// components
+import { ProjectLogo } from "./project-logo";
+import { ProjectFeaturesList } from "./settings";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string | null;
+  onClose: () => void;
+};
+
+export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, onClose } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+
+  if (!workspaceSlug || !projectId) return null;
+  const currentProjectDetails = getProjectById(projectId);
+  if (!currentProjectDetails) return null;
+
+  return (
+    <>
+      <div className="px-4 py-2">
+        <h3 className="text-base font-medium leading-6">Toggle project features</h3>
+        <div className="text-sm tracking-tight text-custom-text-200 leading-5">
+          Turn on features which help you manage and run your project.
+        </div>
+      </div>
+      <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
+      <div className="flex items-center justify-between gap-2 mt-4 px-4 pt-4 pb-2 border-t border-custom-border-100">
+        <div className="text-sm text-custom-text-300 font-medium">
+          Congrats! Project <ProjectLogo logo={currentProjectDetails.logo_props} /> {currentProjectDetails.name}{" "}
+          created.
+        </div>
+        <div className="flex gap-2">
+          <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={1}>
+            Close
+          </Button>
+          <Link
+            href={`/${workspaceSlug}/projects/${projectId}/issues`}
+            onClick={onClose}
+            className={getButtonStyling("primary", "sm")}
+            tabIndex={2}
+          >
+            Open project
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/project/project-logo.tsx b/web/components/project/project-logo.tsx
new file mode 100644
index 00000000000..fc90fdba3d1
--- /dev/null
+++ b/web/components/project/project-logo.tsx
@@ -0,0 +1,34 @@
+// helpers
+import { TProjectLogoProps } from "@plane/types";
+import { cn } from "@/helpers/common.helper";
+// types
+
+type Props = {
+  className?: string;
+  logo: TProjectLogoProps;
+};
+
+export const ProjectLogo: React.FC<Props> = (props) => {
+  const { className, logo } = props;
+
+  if (logo?.in_use === "icon" && logo?.icon)
+    return (
+      <span
+        style={{
+          color: logo.icon.color,
+        }}
+        className={cn("material-symbols-rounded text-base", className)}
+      >
+        {logo.icon.name}
+      </span>
+    );
+
+  if (logo?.in_use === "emoji" && logo?.emoji)
+    return (
+      <span className={cn("text-base", className)}>
+        {logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
+      </span>
+    );
+
+  return <></>;
+};
diff --git a/web/components/project/project-settings-member-defaults.tsx b/web/components/project/project-settings-member-defaults.tsx
index b4713f7395b..caaccadfd57 100644
--- a/web/components/project/project-settings-member-defaults.tsx
+++ b/web/components/project/project-settings-member-defaults.tsx
@@ -1,21 +1,19 @@
 import { useEffect } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useProject, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-
-import { MemberSelect } from "components/project";
-// ui
-import { Loader } from "@plane/ui";
-// types
+import useSWR from "swr";
 import { IProject, IUserLite, IWorkspace } from "@plane/types";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// ui
+import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { MemberSelect } from "@/components/project";
 // constants
-import { EUserProjectRoles } from "constants/project";
+import { PROJECT_MEMBERS } from "@/constants/fetch-keys";
+import { EUserProjectRoles } from "@/constants/project";
+// hooks
+import { useProject, useUser } from "@/hooks/store";
+// types
 
 const defaultValues: Partial<IProject> = {
   project_lead: null,
@@ -33,8 +31,6 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
   const { currentProjectDetails, fetchProjectDetails, updateProject } = useProject();
   // derived values
   const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
-  // hooks
-  const { setToastAlert } = useToast();
   // form info
   const { reset, control } = useForm<IProject>({ defaultValues });
   // fetching user members
@@ -67,14 +63,17 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
     });
 
     await 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,
+      default_assignee:
+        formData.default_assignee === "none"
+          ? null
+          : formData.default_assignee ?? currentProjectDetails?.default_assignee,
+      project_lead:
+        formData.project_lead === "none" ? null : formData.project_lead ?? currentProjectDetails?.project_lead,
     })
       .then(() => {
-        fetchProjectDetails(workspaceSlug.toString(), projectId.toString());
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Project updated successfully",
         });
       })
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 77be4c84b27..18811ccbdda 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -1,18 +1,21 @@
 import { Fragment, useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
+// ui
 import { Check, CircleDot, Globe2 } from "lucide-react";
-// hooks
-import { useProjectPublish } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { IProject } from "@plane/types";
 // ui
-import { Button, Loader, ToggleSwitch } from "@plane/ui";
-import { CustomPopover } from "./popover";
+import { Button, Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
+import { useProjectPublish } from "@/hooks/store";
+// store
+import { IProjectPublishSettings, TProjectPublishViews } from "@/store/project/project-publish.store";
 // types
-import { IProject } from "@plane/types";
-import { IProjectPublishSettings, TProjectPublishViews } from "store/project/project-publish.store";
+// local components
+import { CustomPopover } from "./popover";
 
 type Props = {
   isOpen: boolean;
@@ -71,8 +74,6 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
     unPublishProject,
     fetchSettingsLoader,
   } = useProjectPublish();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     control,
@@ -150,8 +151,8 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
     await updateProjectSettingsAsync(workspaceSlug.toString(), project.id, payload.id ?? "", payload)
       .then((res) => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Publish settings updated successfully!",
         });
@@ -176,8 +177,8 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
         return res;
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong while un-publishing the project.",
         })
@@ -208,8 +209,8 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
   const handleFormSubmit = async (formData: FormData) => {
     if (!formData.views || formData.views.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one view layout to publish the project.",
       });
@@ -362,16 +363,16 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                                           : "hover:bg-custom-background-80 hover:text-custom-text-100"
                                       }`}
                                       onClick={() => {
-                                        const _views =
+                                        const optionViews =
                                           value.length > 0
                                             ? value.includes(option.key)
                                               ? value.filter((_o: string) => _o !== option.key)
                                               : [...value, option.key]
                                             : [option.key];
 
-                                        if (_views.length === 0) return;
+                                        if (optionViews.length === 0) return;
 
-                                        onChange(_views);
+                                        onChange(optionViews);
                                         checkIfUpdateIsRequired();
                                       }}
                                     >
diff --git a/web/components/project/publish-project/popover.tsx b/web/components/project/publish-project/popover.tsx
index dab5ae48ee8..3de915788df 100644
--- a/web/components/project/publish-project/popover.tsx
+++ b/web/components/project/publish-project/popover.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment } from "react";
 
 // headless ui
+import { ChevronDown, ChevronUp } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 // icons
-import { ChevronDown, ChevronUp } from "lucide-react";
 
 export const CustomPopover = ({
   children,
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index ef7913fb08c..09643dc8bae 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -1,20 +1,18 @@
 import React, { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { useForm, Controller, useFieldArray } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
 import { ChevronDown, Plus, X } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useEventTracker, useMember, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
 // ui
-import { Avatar, Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
+import { Avatar, Button, CustomSelect, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { getUserRole } from "helpers/user.helper";
+import { PROJECT_MEMBER_ADDED } from "@/constants/event-tracker";
+import { EUserProjectRoles } from "@/constants/project";
+import { ROLE } from "@/constants/workspace";
+import { useEventTracker, useMember, useUser } from "@/hooks/store";
 // constants
-import { ROLE } from "constants/workspace";
-import { EUserProjectRoles } from "constants/project";
-import { PROJECT_MEMBER_ADDED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -45,8 +43,6 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const { captureEvent } = useEventTracker();
   const {
@@ -84,9 +80,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
       .then(() => {
         if (onSuccess) onSuccess();
         onClose();
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Members added successfully.",
         });
         captureEvent(PROJECT_MEMBER_ADDED, {
@@ -139,27 +135,35 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
     }
   }, [fields, append]);
 
-  const options = uninvitedPeople?.map((userId) => {
-    const memberDetails = getWorkspaceMemberDetails(userId);
+  const options = uninvitedPeople
+    ?.map((userId) => {
+      const memberDetails = getWorkspaceMemberDetails(userId);
 
-    return {
-      value: `${memberDetails?.member.id}`,
-      query: `${memberDetails?.member.first_name} ${
-        memberDetails?.member.last_name
-      } ${memberDetails?.member.display_name.toLowerCase()}`,
-      content: (
-        <div className="flex w-full items-center gap-2">
-          <div className="flex-shrink-0 pt-0.5">
-            <Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
+      if (!memberDetails?.member) return;
+      return {
+        value: `${memberDetails?.member.id}`,
+        query: `${memberDetails?.member.first_name} ${memberDetails?.member
+          .last_name} ${memberDetails?.member.display_name.toLowerCase()}`,
+        content: (
+          <div className="flex w-full items-center gap-2">
+            <div className="flex-shrink-0 pt-0.5">
+              <Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
+            </div>
+            <div className="truncate">
+              {memberDetails?.member.display_name} (
+              {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
+            </div>
           </div>
-          <div className="truncate">
-            {memberDetails?.member.display_name} (
-            {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
-          </div>
-        </div>
-      ),
-    };
-  });
+        ),
+      };
+    })
+    .filter((option) => !!option) as
+    | {
+        value: string;
+        query: string;
+        content: React.JSX.Element;
+      }[]
+    | undefined;
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
@@ -207,7 +211,6 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                               rules={{ required: "Please select a member" }}
                               render={({ field: { value, onChange } }) => {
                                 const selectedMember = getWorkspaceMemberDetails(value);
-
                                 return (
                                   <CustomSearchSelect
                                     value={value}
diff --git a/web/components/project/settings/archive-project/archive-restore-modal.tsx b/web/components/project/settings/archive-project/archive-restore-modal.tsx
new file mode 100644
index 00000000000..88361895c9a
--- /dev/null
+++ b/web/components/project/settings/archive-project/archive-restore-modal.tsx
@@ -0,0 +1,135 @@
+import { useState, Fragment } from "react";
+import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  archive: boolean;
+};
+
+export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
+  const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
+  // router
+  const router = useRouter();
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  // store hooks
+  const { getProjectById, archiveProject, restoreProject } = useProject();
+
+  const projectDetails = getProjectById(projectId);
+  if (!projectDetails) return null;
+
+  const handleClose = () => {
+    setIsLoading(false);
+    onClose();
+  };
+
+  const handleArchiveProject = async () => {
+    setIsLoading(true);
+    await archiveProject(workspaceSlug, projectId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: `${projectDetails.name} has been archived successfully`,
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Project could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  const handleRestoreProject = async () => {
+    setIsLoading(true);
+    await restoreProject(workspaceSlug, projectId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: `You can find ${projectDetails.name} in your projects.`,
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/`);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Project could not be restored. Please try again.",
+        })
+      )
+      .finally(() => setIsLoading(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-custom-backdrop 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 bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="px-5 py-4">
+                  <h3 className="text-xl font-medium 2xl:text-2xl">
+                    {archive ? "Archive" : "Restore"} {projectDetails.name}
+                  </h3>
+                  <p className="mt-3 text-sm text-custom-text-200">
+                    {archive
+                      ? "This project and its issues, cycles, modules, and pages will be archived. Its issues won’t appear in search. Only project admins can restore the project."
+                      : "Restoring a project will activate it and make it visible to all members of the project. Are you sure you want to continue?"}
+                  </p>
+                  <div className="mt-3 flex justify-end gap-2">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      size="sm"
+                      tabIndex={1}
+                      onClick={archive ? handleArchiveProject : handleRestoreProject}
+                      loading={isLoading}
+                    >
+                      {archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/project/settings/archive-project/index.tsx b/web/components/project/settings/archive-project/index.tsx
new file mode 100644
index 00000000000..23da8dcb2f4
--- /dev/null
+++ b/web/components/project/settings/archive-project/index.tsx
@@ -0,0 +1,2 @@
+export * from "./selection";
+export * from "./archive-restore-modal";
diff --git a/web/components/project/settings/archive-project/selection.tsx b/web/components/project/settings/archive-project/selection.tsx
new file mode 100644
index 00000000000..14fb4305300
--- /dev/null
+++ b/web/components/project/settings/archive-project/selection.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { ChevronRight, ChevronUp } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+// types
+import { IProject } from "@plane/types";
+// ui
+import { Button, Loader } from "@plane/ui";
+
+export interface IArchiveProject {
+  projectDetails: IProject;
+  handleArchive: () => void;
+}
+
+export const ArchiveProjectSelection: React.FC<IArchiveProject> = (props) => {
+  const { projectDetails, handleArchive } = props;
+
+  return (
+    <Disclosure as="div" className="border-t border-custom-border-100 py-4">
+      {({ open }) => (
+        <div className="w-full">
+          <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
+            <span className="text-xl tracking-tight">Archive project</span>
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight 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 pt-4">
+                <span className="text-sm tracking-tight">
+                  Archiving a project will unlist your project from your side navigation although you will still be able
+                  to access it from your projects page. You can restore the project or delete it whenever you want.
+                </span>
+                <div>
+                  {projectDetails ? (
+                    <div>
+                      <Button variant="outline-danger" onClick={handleArchive}>
+                        Archive 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/delete-project-section.tsx b/web/components/project/settings/delete-project-section.tsx
index fa1d70d5c35..690f6743269 100644
--- a/web/components/project/settings/delete-project-section.tsx
+++ b/web/components/project/settings/delete-project-section.tsx
@@ -1,12 +1,10 @@
 import React from "react";
-
-// ui
+import { ChevronRight, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import { Button, Loader } from "@plane/ui";
-// icons
-import { ChevronDown, ChevronUp } from "lucide-react";
 // types
 import { IProject } from "@plane/types";
+// ui
+import { Button, Loader } from "@plane/ui";
 
 export interface IDeleteProjectSection {
   projectDetails: IProject;
@@ -17,12 +15,12 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
   const { projectDetails, handleDelete } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-100">
+    <Disclosure as="div" className="border-t border-custom-border-100 py-4">
       {({ open }) => (
         <div className="w-full">
-          <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
+          <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
             <span className="text-xl tracking-tight">Delete Project</span>
-            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
           </Disclosure.Button>
 
           <Transition
@@ -35,7 +33,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
             leaveTo="transform opacity-0"
           >
             <Disclosure.Panel>
-              <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-8 pt-4">
                 <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
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
index 22e69827efa..c93b8bb0ae8 100644
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@@ -1,90 +1,91 @@
 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";
+import { FileText, Inbox } from "lucide-react";
+import { IProject } from "@plane/types";
+// ui
+import { ContrastIcon, DiceIcon, PhotoFilterIcon, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // hooks
-import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useEventTracker, useProject, useUser } from "@/hooks/store";
 // types
-import { IProject } from "@plane/types";
-// constants
-import { EUserProjectRoles } from "constants/project";
 
-type Props = {};
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  isAdmin: boolean;
+};
 
 const PROJECT_FEATURES_LIST = [
   {
     title: "Cycles",
-    description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    description: "Time-box issues and boost momentum, similar to sprints in scrum.",
     icon: <ContrastIcon className="h-4 w-4 flex-shrink-0 rotate-180 text-purple-500" />,
     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" />,
+    description: "Group multiple issues together and track the progress.",
+    icon: <DiceIcon width={16} height={16} className="flex-shrink-0 text-red-500" />,
     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 flex-shrink-0 text-cyan-500" />,
+    description: "Apply filters to issues and save them to analyse and investigate work.",
+    icon: <PhotoFilterIcon className="h-4 w-4 flex-shrink-0 text-cyan-500" />,
     property: "issue_views_view",
   },
   {
     title: "Pages",
-    description: "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
+    description: "Document ideas, feature requirements, discussions within your project.",
     icon: <FileText className="h-4 w-4 flex-shrink-0 text-red-400" />,
     property: "page_view",
   },
   {
     title: "Inbox",
-    description: "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
+    description: "Capture external inputs, move valid issues to workflow.",
     icon: <Inbox className="h-4 w-4 flex-shrink-0 text-fuchsia-500" />,
     property: "inbox_view",
   },
 ];
 
-export const ProjectFeaturesList: FC<Props> = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+export const ProjectFeaturesList: FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, isAdmin } = props;
   // store hooks
   const { captureEvent } = useEventTracker();
-  const {
-    currentUser,
-    membership: { currentProjectRole },
-  } = useUser();
-  const { currentProjectDetails, updateProject } = useProject();
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { currentUser } = useUser();
+  const { getProjectById, updateProject } = useProject();
+  // derived values
+  const currentProjectDetails = getProjectById(projectId);
 
   const handleSubmit = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !currentProjectDetails) return;
-    setToastAlert({
-      type: "success",
-      title: "Success!",
-      message: "Project feature updated successfully.",
+    const updateProjectPromise = updateProject(workspaceSlug, projectId, formData);
+    setPromiseToast(updateProjectPromise, {
+      loading: "Updating project feature...",
+      success: {
+        title: "Success!",
+        message: () => "Project feature updated successfully.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Something went wrong while updating project feature. Please try again.",
+      },
     });
-    updateProject(workspaceSlug.toString(), projectId.toString(), formData);
   };
 
   if (!currentUser) return <></>;
 
   return (
-    <div>
+    <div className="mx-4">
       {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-100 bg-custom-background-100 p-4"
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 pt-4 pb-2 last:border-b-0"
         >
           <div className="flex items-start gap-3">
-            <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">{feature.icon}</div>
+            <div className="flex items-center justify-center rounded bg-custom-primary-50/10 p-3">{feature.icon}</div>
             <div className="">
-              <h4 className="text-sm font-medium">{feature.title}</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">{feature.description}</p>
+              <h4 className="text-sm font-medium leading-5">{feature.title}</h4>
+              <p className="text-sm tracking-tight text-custom-text-300 leading-5">{feature.description}</p>
             </div>
           </div>
           <ToggleSwitch
diff --git a/web/components/project/settings/index.ts b/web/components/project/settings/index.ts
index 0bf79ec17cc..0f8e9aa6d22 100644
--- a/web/components/project/settings/index.ts
+++ b/web/components/project/settings/index.ts
@@ -1,2 +1,3 @@
 export * from "./delete-project-section";
 export * from "./features-list";
+export * from "./archive-project";
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 695e0bce4f9..bb1d6ad17a2 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -1,10 +1,8 @@
 import { useRef, 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 Link from "next/link";
+import { useRouter } from "next/router";
 import {
   MoreVertical,
   PenSquare,
@@ -18,18 +16,30 @@ import {
   MoreHorizontal,
   Inbox,
 } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+// icons
+// ui
+import {
+  CustomMenu,
+  Tooltip,
+  ArchiveIcon,
+  PhotoFilterIcon,
+  DiceIcon,
+  ContrastIcon,
+  LayersIcon,
+  setPromiseToast,
+} from "@plane/ui";
+import { LeaveProjectModal, ProjectLogo, PublishProjectModal } from "@/components/project";
+import { EUserProjectRoles } from "@/constants/project";
+import { cn } from "@/helpers/common.helper";
+import { getNumberCount } from "@/helpers/string.helper";
 // hooks
-import { useApplication, useEventTracker, useInbox, useProject } from "hooks/store";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import useToast from "hooks/use-toast";
+import { useApplication, useEventTracker, useInbox, useProject } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // helpers
-import { cn } from "helpers/common.helper";
-import { getNumberCount } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
+
 // components
-import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
-import { LeaveProjectModal, PublishProjectModal } from "components/project";
-import { EUserProjectRoles } from "constants/project";
 
 type Props = {
   projectId: string;
@@ -86,50 +96,57 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { setTrackElement } = useEventTracker();
   const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
   const { getInboxesByProjectId, getInboxById } = useInbox();
+  const { isMobile } = usePlatformOS();
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
   const [publishModalOpen, setPublishModal] = useState(false);
   const [isMenuActive, setIsMenuActive] = useState(false);
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // derived values
   const project = getProjectById(projectId);
-
-  const isAdmin = project?.member_role === EUserProjectRoles.ADMIN;
-  const isViewerOrGuest =
-    project?.member_role && [EUserProjectRoles.VIEWER, EUserProjectRoles.GUEST].includes(project.member_role);
-
   const isCollapsed = themeStore.sidebarCollapsed;
-
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
-
   const inboxesMap = project?.inbox_view ? getInboxesByProjectId(projectId) : undefined;
   const inboxDetails = inboxesMap && inboxesMap.length > 0 ? getInboxById(inboxesMap[0]) : undefined;
+  // auth
+  const isAdmin = project?.member_role === EUserProjectRoles.ADMIN;
+  const isViewerOrGuest =
+    project?.member_role && [EUserProjectRoles.VIEWER, EUserProjectRoles.GUEST].includes(project.member_role);
 
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !project) return;
 
-    addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => {
-      setToastAlert({
-        type: "error",
+    const addToFavoritePromise = addProjectToFavorites(workspaceSlug.toString(), project.id);
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding project to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Project added to favorites.",
+      },
+      error: {
         title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
-      });
+        message: () => "Couldn't add the project to favorites. Please try again.",
+      },
     });
   };
 
   const handleRemoveFromFavorites = () => {
     if (!workspaceSlug || !project) return;
 
-    removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => {
-      setToastAlert({
-        type: "error",
+    const removeFromFavoritePromise = removeProjectFromFavorites(workspaceSlug.toString(), project.id);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing project from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Project removed from favorites.",
+      },
+      error: {
         title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
-      });
+        message: () => "Couldn't remove the project from favorites. Please try again.",
+      },
     });
   };
 
@@ -160,22 +177,30 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
         {({ open }) => (
           <>
             <div
-              className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${
-                snapshot?.isDragging ? "opacity-60" : ""
-              } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
+              className={cn(
+                "group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80",
+                {
+                  "opacity-60": snapshot?.isDragging,
+                  "bg-custom-sidebar-background-80": isMenuActive,
+                }
+              )}
             >
               {provided && !disableDrag && (
                 <Tooltip
+                  isMobile={isMobile}
                   tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
                   position="top-right"
                 >
                   <button
                     type="button"
-                    className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
-                      isCollapsed ? "" : "group-hover:!flex"
-                    } ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
-                      isMenuActive ? "!flex" : ""
-                    }`}
+                    className={cn(
+                      "absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400",
+                      {
+                        "group-hover:flex": !isCollapsed,
+                        "cursor-not-allowed opacity-60": project.sort_order === null,
+                        flex: isMenuActive,
+                      }
+                    )}
                     {...provided?.dragHandleProps}
                   >
                     <MoreVertical className="h-3.5" />
@@ -183,39 +208,41 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   </button>
                 </Tooltip>
               )}
-              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
+              <Tooltip
+                tooltipContent={`${project.name}`}
+                position="right"
+                className="ml-2"
+                disabled={!isCollapsed}
+                isMobile={isMobile}
+              >
                 <Disclosure.Button
                   as="div"
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
-                    isCollapsed ? "justify-center" : `justify-between`
-                  }`}
+                  className={cn(
+                    "flex items-center justify-between flex-grow cursor-pointer select-none truncate text-left text-sm font-medium",
+                    {
+                      "justify-center": isCollapsed,
+                    }
+                  )}
                 >
                   <div
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate ${
-                      isCollapsed ? "justify-center" : ""
-                    }`}
+                    className={cn("w-full flex-grow flex items-center gap-1 truncate", {
+                      "justify-center": isCollapsed,
+                    })}
                   >
-                    {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="grid h-7 w-7 flex-shrink-0 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>
-                    )}
-
+                    <div className="h-7 w-7 grid place-items-center">
+                      <ProjectLogo logo={project.logo_props} />
+                    </div>
                     {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
                   </div>
                   {!isCollapsed && (
                     <ChevronDown
-                      className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
-                        isMenuActive ? "!block" : ""
-                      }  mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
+                      className={cn(
+                        "hidden h-4 w-4 flex-shrink-0 mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:block",
+                        {
+                          "rotate-180": open,
+                          block: isMenuActive,
+                        }
+                      )}
                     />
                   )}
                 </Disclosure.Button>
@@ -232,7 +259,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       <MoreHorizontal className="h-3.5 w-3.5" />
                     </div>
                   }
-                  className={`hidden flex-shrink-0 group-hover:block ${isMenuActive ? "!block" : ""}`}
+                  className={cn("hidden flex-shrink-0 group-hover:block", {
+                    "!block": isMenuActive,
+                  })}
                   buttonClassName="!text-custom-sidebar-text-400"
                   ellipsis
                   placement="bottom-start"
@@ -253,13 +282,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </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)}>
@@ -271,16 +293,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </div>
                     </CustomMenu.MenuItem>
                   )}
-                  {!isViewerOrGuest && (
-                    <CustomMenu.MenuItem>
-                      <Link href={`/${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>
-                      </Link>
-                    </CustomMenu.MenuItem>
-                  )}
                   <CustomMenu.MenuItem>
                     <Link href={`/${workspaceSlug}/projects/${project?.id}/draft-issues/`}>
                       <div className="flex items-center justify-start gap-2">
@@ -289,6 +301,23 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </div>
                     </Link>
                   </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>Copy link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+
+                  {!isViewerOrGuest && (
+                    <CustomMenu.MenuItem>
+                      <Link href={`/${workspaceSlug}/projects/${project?.id}/archives/issues`}>
+                        <div className="flex items-center justify-start gap-2">
+                          <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                          <span>Archives</span>
+                        </div>
+                      </Link>
+                    </CustomMenu.MenuItem>
+                  )}
                   <CustomMenu.MenuItem>
                     <Link href={`/${workspaceSlug}/projects/${project?.id}/settings`}>
                       <div className="flex items-center justify-start gap-2">
@@ -333,6 +362,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     <Link key={item.name} href={item.href} onClick={handleProjectClick}>
                       <span className="block w-full">
                         <Tooltip
+                          isMobile={isMobile}
                           tooltipContent={`${project?.name}: ${item.name}`}
                           position="right"
                           className="ml-2"
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 983e23932c7..5f5151c0dc1 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -1,21 +1,22 @@
-import { useState, FC, useRef, useEffect, useCallback } from "react";
-import { useRouter } from "next/router";
+import { useState, FC, useRef, useEffect } from "react";
 import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
-import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+import { IProject } from "@plane/types";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { CreateProjectModal, ProjectSidebarListItem } from "@/components/project";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { cn } from "@/helpers/common.helper";
+import { orderJoinedProjects } from "@/helpers/project.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useApplication, useEventTracker, useProject, useUser } from "@/hooks/store";
+// ui
 // components
-import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
-import { orderJoinedProjects } from "helpers/project.helper";
-import { cn } from "helpers/common.helper";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { IProject } from "@plane/types";
 
 export const ProjectSidebarList: FC = observer(() => {
   // states
@@ -42,15 +43,13 @@ export const ProjectSidebarList: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast
-  const { setToastAlert } = useToast();
 
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   const handleCopyText = (projectId: string) => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
         message: "Project link copied to clipboard.",
       });
@@ -64,16 +63,16 @@ export const ProjectSidebarList: FC = observer(() => {
 
     const joinedProjectsList: IProject[] = [];
     joinedProjects.map((projectId) => {
-      const _project = getProjectById(projectId);
-      if (_project) joinedProjectsList.push(_project);
+      const projectDetails = getProjectById(projectId);
+      if (projectDetails) joinedProjectsList.push(projectDetails);
     });
     if (joinedProjectsList.length <= 0) return;
 
     const updatedSortOrder = orderJoinedProjects(source.index, destination.index, draggableId, joinedProjectsList);
     if (updatedSortOrder != undefined)
       updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder }).catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         });
@@ -117,9 +116,14 @@ export const ProjectSidebarList: FC = observer(() => {
       )}
       <div
         ref={containerRef}
-        className={cn("h-full space-y-2 overflow-y-auto px-4 vertical-scrollbar scrollbar-md", {
-          "border-t border-custom-sidebar-border-300": isScrolled,
-        })}
+        className={cn(
+          "h-full space-y-2 !overflow-y-scroll pl-4 vertical-scrollbar",
+          isCollapsed ? "scrollbar-sm" : "scrollbar-md",
+          {
+            "border-t border-custom-sidebar-border-300": isScrolled,
+            "pr-1": !isCollapsed,
+          }
+        )}
       >
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="favorite-projects">
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index db91bb6b058..3d9263e3ef9 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -1,20 +1,19 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
+import { Controller, useForm } from "react-hook-form";
+import { ChevronDown } from "lucide-react";
 import { Dialog, Popover, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useProjectState } from "hooks/store";
-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 "@plane/types";
+// ui
+import { Button, CustomSelect, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { GROUP_CHOICES } from "constants/project";
+import { GROUP_CHOICES } from "@/constants/project";
+// hooks
+import { useProjectState } from "@/hooks/store";
+// types
 
 // types
 type Props = {
@@ -37,8 +36,6 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { createState } = useProjectState();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     formState: { errors, isSubmitting },
@@ -71,15 +68,15 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
 
         if (typeof error === "object") {
           Object.keys(error).forEach((key) => {
-            setToastAlert({
-              type: "error",
+            setToast({
+              type: TOAST_TYPE.ERROR,
               title: "Error!",
               message: Array.isArray(error[key]) ? error[key].join(", ") : error[key],
             });
           });
         } else {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message:
               error ?? err.status === 400
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 037cd483d90..0da569123b4 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -1,19 +1,19 @@
 import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { useForm, Controller } from "react-hook-form";
 import { TwitterPicker } from "react-color";
+import { useForm, Controller } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useEventTracker, useProjectState } from "hooks/store";
-import useToast from "hooks/use-toast";
-// ui
-import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
-// types
 import type { IState } from "@plane/types";
+// ui
+import { Button, CustomSelect, Input, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { GROUP_CHOICES } from "constants/project";
-import { STATE_CREATED, STATE_UPDATED } from "constants/event-tracker";
+import { STATE_CREATED, STATE_UPDATED } from "@/constants/event-tracker";
+import { GROUP_CHOICES } from "@/constants/project";
+// hooks
+import { useEventTracker, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
 
 type Props = {
   data: IState | null;
@@ -39,8 +39,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
   // store hooks
   const { captureProjectStateEvent, setTrackElement } = useEventTracker();
   const { createState, updateState } = useProjectState();
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { isMobile } = usePlatformOS();
   // form info
   const {
     handleSubmit,
@@ -82,8 +81,8 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
     await createState(workspaceSlug.toString(), projectId.toString(), formData)
       .then((res) => {
         handleClose();
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "State created successfully.",
         });
@@ -98,14 +97,14 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
       })
       .catch((error) => {
         if (error.status === 400)
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "State with that name already exists. Please try again with another name.",
           });
         else
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "State could not be created. Please try again.",
           });
@@ -135,22 +134,22 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
             element: "Project settings states page",
           },
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "State updated successfully.",
         });
       })
       .catch((error) => {
         if (error.status === 400)
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "Another state exists with the same name. Please try again with another name.",
           });
         else
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "State could not be updated. Please try again.",
           });
@@ -242,7 +241,10 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
           name="group"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}>
+            <Tooltip
+              tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
+              isMobile={isMobile}
+            >
               <div>
                 <CustomSelect
                   disabled={groupLength === 1}
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 12de3860872..f73699af5ad 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -1,17 +1,16 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { AlertTriangle } from "lucide-react";
-// hooks
-import { useEventTracker, useProjectState } from "hooks/store";
-import useToast from "hooks/use-toast";
-// ui
-import { Button } from "@plane/ui";
-// types
+import { Dialog, Transition } from "@headlessui/react";
 import type { IState } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { STATE_DELETED } from "constants/event-tracker";
+import { STATE_DELETED } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useProjectState } from "@/hooks/store";
+// types
 
 type Props = {
   isOpen: boolean;
@@ -29,8 +28,6 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { captureProjectStateEvent } = useEventTracker();
   const { deleteState } = useProjectState();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -55,15 +52,15 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
       })
       .catch((err) => {
         if (err.status === 400)
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message:
               "This state contains some issues within it, please move them to some other state to delete this state.",
           });
         else
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
index 401c482f3ab..b04c0d648bf 100644
--- a/web/components/states/project-setting-state-list-item.tsx
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -1,16 +1,17 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
-import { useEventTracker, useProjectState } from "hooks/store";
 // ui
+import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
+import { IState } from "@plane/types";
 import { Tooltip, StateGroupIcon } from "@plane/ui";
 // icons
-import { Pencil, X, ArrowDown, ArrowUp } from "lucide-react";
 // helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
+import { addSpaceIfCamelCase } from "@/helpers/string.helper";
+import { useEventTracker, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
-import { IState } from "@plane/types";
 
 type Props = {
   index: number;
@@ -30,6 +31,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
   // store hooks
   const { setTrackElement } = useEventTracker();
   const { markStateAsDefault, moveStatePosition } = useProjectState();
+  const { isMobile } = usePlatformOS();
   // derived values
   const groupStates = statesList.filter((s) => s.group === state.group);
   const groupLength = groupStates.length;
@@ -109,11 +111,11 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
             disabled={state.default || groupLength === 1}
           >
             {state.default ? (
-              <Tooltip tooltipContent="Cannot delete the default state.">
+              <Tooltip tooltipContent="Cannot delete the default state." isMobile={isMobile}>
                 <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.">
+              <Tooltip tooltipContent="Cannot have an empty group." isMobile={isMobile}>
                 <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
               </Tooltip>
             ) : (
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
index 99ac40d84f0..a5c08a16424 100644
--- a/web/components/states/project-setting-state-list.tsx
+++ b/web/components/states/project-setting-state-list.tsx
@@ -1,20 +1,20 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useEventTracker, useProjectState } from "hooks/store";
+import { Plus } from "lucide-react";
+import { Loader } from "@plane/ui";
+import { CreateUpdateStateInline, DeleteStateModal, StateGroup, StatesListItem } from "@/components/states";
+import { STATES_LIST } from "@/constants/fetch-keys";
+import { sortByField } from "@/helpers/array.helper";
+import { orderStateGroups } from "@/helpers/state.helper";
+import { useEventTracker, useProjectState } from "@/hooks/store";
 // components
-import { CreateUpdateStateInline, DeleteStateModal, StateGroup, StatesListItem } from "components/states";
 // ui
-import { Loader } from "@plane/ui";
 // icons
-import { Plus } from "lucide-react";
 // helpers
-import { orderStateGroups } from "helpers/state.helper";
-import { sortByField } from "helpers/array.helper";
 // fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
 
 export const ProjectSettingStateList: React.FC = observer(() => {
   // router
diff --git a/web/components/toast-alert/index.tsx b/web/components/toast-alert/index.tsx
deleted file mode 100644
index b4df6ea052b..00000000000
--- a/web/components/toast-alert/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-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 right-5 top-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 right-1 top-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/web/components/ui/empty-space.tsx b/web/components/ui/empty-space.tsx
index 4b70bbb158d..73fc6ba01a6 100644
--- a/web/components/ui/empty-space.tsx
+++ b/web/components/ui/empty-space.tsx
@@ -1,7 +1,7 @@
 // next
+import React from "react";
 import Link from "next/link";
 // react
-import React from "react";
 // icons
 import { ChevronRight } from "lucide-react";
 
diff --git a/web/components/ui/graphs/bar-graph.tsx b/web/components/ui/graphs/bar-graph.tsx
index 3756b0455e0..5aac757a065 100644
--- a/web/components/ui/graphs/bar-graph.tsx
+++ b/web/components/ui/graphs/bar-graph.tsx
@@ -1,11 +1,11 @@
 // nivo
 import { ResponsiveBar, BarSvgProps } from "@nivo/bar";
 // helpers
-import { generateYAxisTickValues } from "helpers/graph.helper";
+import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
+import { generateYAxisTickValues } from "@/helpers/graph.helper";
 // types
 import { TGraph } from "./types";
 // constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
 type Props = {
   indexBy: string;
diff --git a/web/components/ui/graphs/calendar-graph.tsx b/web/components/ui/graphs/calendar-graph.tsx
index 0725c425afb..d6726a24940 100644
--- a/web/components/ui/graphs/calendar-graph.tsx
+++ b/web/components/ui/graphs/calendar-graph.tsx
@@ -1,9 +1,9 @@
 // nivo
 import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
 // types
+import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
 import { TGraph } from "./types";
 // constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
 export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" | "width">> = ({
   height = "400px",
diff --git a/web/components/ui/graphs/index.ts b/web/components/ui/graphs/index.ts
index 1f40adbffa5..984bb642cf2 100644
--- a/web/components/ui/graphs/index.ts
+++ b/web/components/ui/graphs/index.ts
@@ -1,6 +1,5 @@
 export * from "./bar-graph";
 export * from "./calendar-graph";
 export * from "./line-graph";
-export * from "./marimekko-graph";
 export * from "./pie-graph";
 export * from "./scatter-plot-graph";
diff --git a/web/components/ui/graphs/line-graph.tsx b/web/components/ui/graphs/line-graph.tsx
index 91a19acc318..ee469babfc9 100644
--- a/web/components/ui/graphs/line-graph.tsx
+++ b/web/components/ui/graphs/line-graph.tsx
@@ -1,11 +1,11 @@
 // nivo
 import { ResponsiveLine, LineSvgProps } from "@nivo/line";
 // helpers
-import { generateYAxisTickValues } from "helpers/graph.helper";
+import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
+import { generateYAxisTickValues } from "@/helpers/graph.helper";
 // types
 import { TGraph } from "./types";
 // constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
 type Props = {
   customYAxisTickValues?: number[];
diff --git a/web/components/ui/graphs/marimekko-graph.tsx b/web/components/ui/graphs/marimekko-graph.tsx
deleted file mode 100644
index fd460d11b3b..00000000000
--- a/web/components/ui/graphs/marimekko-graph.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// nivo
-import { ResponsiveMarimekko, SvgProps } from "@nivo/marimekko";
-// helpers
-import { generateYAxisTickValues } from "helpers/graph.helper";
-// types
-import { TGraph } from "./types";
-// constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
-
-type Props = {
-  id: string;
-  value: string;
-  customYAxisTickValues?: number[];
-};
-
-export const MarimekkoGraph: React.FC<Props & TGraph & Omit<SvgProps<any>, "height" | "width">> = ({
-  id,
-  value,
-  customYAxisTickValues,
-  height = "400px",
-  width = "100%",
-  margin,
-  theme,
-  ...rest
-}) => (
-  <div style={{ height, width }}>
-    <ResponsiveMarimekko
-      id={id}
-      value={value}
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
-      innerPadding={rest.innerPadding ?? 4}
-      axisLeft={{
-        tickSize: 0,
-        tickPadding: 10,
-        tickValues: customYAxisTickValues ? generateYAxisTickValues(customYAxisTickValues) : undefined,
-      }}
-      axisBottom={{
-        tickSize: 0,
-        tickPadding: 10,
-        tickRotation: rest.data.length > 7 ? -45 : 0,
-      }}
-      labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
-      theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
-      animate
-      {...rest}
-    />
-  </div>
-);
diff --git a/web/components/ui/graphs/pie-graph.tsx b/web/components/ui/graphs/pie-graph.tsx
index 52b56e4926a..df7d80f0601 100644
--- a/web/components/ui/graphs/pie-graph.tsx
+++ b/web/components/ui/graphs/pie-graph.tsx
@@ -1,9 +1,9 @@
 // nivo
 import { PieSvgProps, ResponsivePie } from "@nivo/pie";
 // types
+import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
 import { TGraph } from "./types";
 // constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
 export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "width">> = ({
   height = "400px",
diff --git a/web/components/ui/graphs/scatter-plot-graph.tsx b/web/components/ui/graphs/scatter-plot-graph.tsx
index c6ff5a77228..d403c76778e 100644
--- a/web/components/ui/graphs/scatter-plot-graph.tsx
+++ b/web/components/ui/graphs/scatter-plot-graph.tsx
@@ -1,9 +1,9 @@
 // nivo
 import { ResponsiveScatterPlot, ScatterPlotSvgProps } from "@nivo/scatterplot";
 // types
+import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
 import { TGraph } from "./types";
 // constants
-import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
 
 export const ScatterPlotGraph: React.FC<TGraph & Omit<ScatterPlotSvgProps<any>, "height" | "width">> = ({
   height = "400px",
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
index fddea8478fb..7a191200ac3 100644
--- a/web/components/ui/labels-list.tsx
+++ b/web/components/ui/labels-list.tsx
@@ -1,8 +1,10 @@
 import { FC } from "react";
 // ui
+import { IIssueLabel } from "@plane/types";
 import { Tooltip } from "@plane/ui";
 // types
-import { IIssueLabel } from "@plane/types";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
 
 type IssueLabelsListProps = {
   labels?: (IIssueLabel | undefined)[];
@@ -12,11 +14,17 @@ type IssueLabelsListProps = {
 
 export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
   const { labels } = props;
+  const { isMobile } = usePlatformOS();
   return (
     <>
       {labels && (
         <>
-          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labels.map((l) => l?.name).join(", ")}>
+          <Tooltip
+            position="top"
+            tooltipHeading="Labels"
+            tooltipContent={labels.map((l) => l?.name).join(", ")}
+            isMobile={isMobile}
+          >
             <div className="flex items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
               {`${labels.length} Labels`}
diff --git a/web/components/ui/loader/cycle-module-board-loader.tsx b/web/components/ui/loader/cycle-module-board-loader.tsx
index 09c885fb928..f88719c381a 100644
--- a/web/components/ui/loader/cycle-module-board-loader.tsx
+++ b/web/components/ui/loader/cycle-module-board-loader.tsx
@@ -2,8 +2,11 @@ export const CycleModuleBoardLayout = () => (
   <div className="h-full w-full animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
-        {[...Array(5)].map(() => (
-          <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm">
+        {[...Array(5)].map((i) => (
+          <div
+            key={i}
+            className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
+          >
             <div className="flex items-center justify-between">
               <span className="h-6 w-24 bg-custom-background-80 rounded" />
               <div className="flex items-center gap-2">
diff --git a/web/components/ui/loader/cycle-module-list-loader.tsx b/web/components/ui/loader/cycle-module-list-loader.tsx
index 8787a142541..522b96f0da7 100644
--- a/web/components/ui/loader/cycle-module-list-loader.tsx
+++ b/web/components/ui/loader/cycle-module-list-loader.tsx
@@ -2,8 +2,11 @@ export const CycleModuleListLayout = () => (
   <div className="h-full overflow-y-auto animate-pulse">
     <div className="flex h-full w-full justify-between">
       <div className="flex h-full w-full flex-col overflow-y-auto">
-        {[...Array(5)].map(() => (
-          <div className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6">
+        {[...Array(5)].map((i) => (
+          <div
+            key={i}
+            className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
+          >
             <div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
               <div className="relative w-full flex items-center gap-3 overflow-hidden">
                 <div className="flex items-center gap-4 truncate">
diff --git a/web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx b/web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
index 944ec02b874..3456e43ab54 100644
--- a/web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
+++ b/web/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 // ui
-import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 import { Loader } from "@plane/ui";
+import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
 export const InboxLayoutLoader = () => (
   <div className="relative flex h-full overflow-hidden">
diff --git a/web/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/web/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
index ce464e83d92..204c2fff600 100644
--- a/web/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
+++ b/web/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -7,8 +7,8 @@ export const InboxSidebarLoader = () => (
       <span className="h-6 w-16 bg-custom-background-80 rounded" />
     </div>
     <div className="flex flex-col">
-      {[...Array(6)].map(() => (
-        <div className="flex flex-col gap-3 h-[5rem]space-y-3 border-b border-custom-border-200 px-4 py-2">
+      {[...Array(6)].map((i) => (
+        <div key={i} className="flex flex-col gap-3 h-[5rem]space-y-3 border-b border-custom-border-200 px-4 py-2">
           <div className="flex items-center justify-between gap-3">
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
             <span className="h-5 w-16 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/loader/notification-loader.tsx b/web/components/ui/loader/notification-loader.tsx
index 143f1a9b64a..7485c2c4c39 100644
--- a/web/components/ui/loader/notification-loader.tsx
+++ b/web/components/ui/loader/notification-loader.tsx
@@ -1,7 +1,7 @@
 export const NotificationsLoader = () => (
   <div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
-    {[...Array(3)].map(() => (
-      <div className="flex w-full items-center gap-4 p-3">
+    {[...Array(3)].map((i) => (
+      <div key={i} className="flex w-full items-center gap-4 p-3">
         <span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
         <div className="flex flex-col gap-2.5 w-full">
           <span className="h-5 w-36 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/loader/pages-loader.tsx b/web/components/ui/loader/pages-loader.tsx
index e31e8294216..612c17d888a 100644
--- a/web/components/ui/loader/pages-loader.tsx
+++ b/web/components/ui/loader/pages-loader.tsx
@@ -4,13 +4,13 @@ export const PagesLoader = () => (
       <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
     </div>
     <div className="flex items-center gap-3">
-      {[...Array(5)].map(() => (
-        <span className="h-8 w-20 bg-custom-background-80 rounded-full" />
+      {[...Array(5)].map((i) => (
+        <span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
       ))}
     </div>
     <div className="divide-y divide-custom-border-200">
-      {[...Array(5)].map(() => (
-        <div className="h-12 w-full flex items-center justify-between px-3">
+      {[...Array(5)].map((i) => (
+        <div key={i} className="h-12 w-full flex items-center justify-between px-3">
           <div className="flex items-center gap-1.5">
             <span className="h-5 w-5 bg-custom-background-80 rounded" />
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/loader/projects-loader.tsx b/web/components/ui/loader/projects-loader.tsx
index 9548a1f483b..d1a781d6b71 100644
--- a/web/components/ui/loader/projects-loader.tsx
+++ b/web/components/ui/loader/projects-loader.tsx
@@ -1,8 +1,11 @@
 export const ProjectsLoader = () => (
   <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
     <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-      {[...Array(3)].map(() => (
-        <div className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100">
+      {[...Array(3)].map((i) => (
+        <div
+          key={i}
+          className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
+        >
           <div className="relative min-h-[118px] w-full rounded-t border-b border-custom-border-200 ">
             <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
               <div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
diff --git a/web/components/ui/loader/settings/activity.tsx b/web/components/ui/loader/settings/activity.tsx
index 7bc5c392f4d..70297f64486 100644
--- a/web/components/ui/loader/settings/activity.tsx
+++ b/web/components/ui/loader/settings/activity.tsx
@@ -2,8 +2,8 @@ import { getRandomLength } from "../utils";
 
 export const ActivitySettingsLoader = () => (
   <div className="flex flex-col gap-3 animate-pulse">
-    {[...Array(10)].map(() => (
-      <div className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
+    {[...Array(10)].map((i) => (
+      <div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
         <span className="h-6 w-6 bg-custom-background-80 rounded" />
         <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
       </div>
diff --git a/web/components/ui/loader/settings/api-token.tsx b/web/components/ui/loader/settings/api-token.tsx
index fc5b4c41d60..e31090bffd9 100644
--- a/web/components/ui/loader/settings/api-token.tsx
+++ b/web/components/ui/loader/settings/api-token.tsx
@@ -5,8 +5,8 @@ export const APITokenSettingsLoader = () => (
       <span className="h-8 w-28 bg-custom-background-80 rounded" />
     </div>
     <div className="divide-y-[0.5px] divide-custom-border-200">
-      {[...Array(2)].map(() => (
-        <div className="flex flex-col gap-2 px-4 py-3">
+      {[...Array(2)].map((i) => (
+        <div key={i} className="flex flex-col gap-2 px-4 py-3">
           <div className="flex items-center gap-2">
             <span className="h-5 w-28 bg-custom-background-80 rounded" />
             <span className="h-5 w-16 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/loader/settings/email.tsx b/web/components/ui/loader/settings/email.tsx
index fa68b972f5a..87634bf090a 100644
--- a/web/components/ui/loader/settings/email.tsx
+++ b/web/components/ui/loader/settings/email.tsx
@@ -8,8 +8,8 @@ export const EmailSettingsLoader = () => (
       <div className="flex items-center py-3">
         <span className="h-7 w-32 bg-custom-background-80 rounded" />
       </div>
-      {[...Array(4)].map(() => (
-        <div className="flex items-center justify-between">
+      {[...Array(4)].map((i) => (
+        <div key={i} className="flex items-center justify-between">
           <div className="flex flex-col gap-2 py-3">
             <span className="h-6 w-28 bg-custom-background-80 rounded" />
             <span className="h-5 w-96 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/loader/settings/import-and-export.tsx b/web/components/ui/loader/settings/import-and-export.tsx
index 70496d1c19a..a3561207d11 100644
--- a/web/components/ui/loader/settings/import-and-export.tsx
+++ b/web/components/ui/loader/settings/import-and-export.tsx
@@ -1,7 +1,7 @@
 export const ImportExportSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
-    {[...Array(2)].map(() => (
-      <div className="flex items-center justify-between gap-2 px-4 py-3">
+    {[...Array(2)].map((i) => (
+      <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
         <div className="flex flex-col gap-1.5">
           <div className="flex items-center gap-2">
             <span className="h-5 w-16 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/loader/settings/integration.tsx b/web/components/ui/loader/settings/integration.tsx
index 871b570b19b..2260517ee39 100644
--- a/web/components/ui/loader/settings/integration.tsx
+++ b/web/components/ui/loader/settings/integration.tsx
@@ -1,7 +1,10 @@
 export const IntegrationsSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(2)].map(() => (
-      <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
+    {[...Array(2)].map((i) => (
+      <div
+        key={i}
+        className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
+      >
         <div className="flex items-start gap-4">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
           <div className="flex flex-col gap-1">
diff --git a/web/components/ui/loader/settings/members.tsx b/web/components/ui/loader/settings/members.tsx
index 3ed2c41efc3..e286320a90a 100644
--- a/web/components/ui/loader/settings/members.tsx
+++ b/web/components/ui/loader/settings/members.tsx
@@ -1,7 +1,7 @@
 export const MembersSettingsLoader = () => (
   <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {[...Array(4)].map(() => (
-      <div className="group flex items-center justify-between px-3 py-4">
+    {[...Array(4)].map((i) => (
+      <div key={i} className="group flex items-center justify-between px-3 py-4">
         <div className="flex items-center gap-x-4 gap-y-2">
           <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
           <div className="flex flex-col gap-1">
diff --git a/web/components/ui/loader/view-list-loader.tsx b/web/components/ui/loader/view-list-loader.tsx
index 97899a65764..8b59b57a264 100644
--- a/web/components/ui/loader/view-list-loader.tsx
+++ b/web/components/ui/loader/view-list-loader.tsx
@@ -1,7 +1,7 @@
 export const ViewListLoader = () => (
   <div className="flex h-full w-full flex-col animate-pulse">
-    {[...Array(8)].map(() => (
-      <div className="group border-b border-custom-border-200">
+    {[...Array(8)].map((i) => (
+      <div key={i} className="group border-b border-custom-border-200">
         <div className="relative flex w-full items-center justify-between rounded p-4">
           <div className="flex items-center gap-4">
             <span className="min-h-10 min-w-10 bg-custom-background-80 rounded" />
diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
index 7bf4aa8a126..f32b19ac0b9 100644
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -1,11 +1,11 @@
 import { Fragment, useState } from "react";
 
 // headless ui
+import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 // ui
 import { Loader } from "@plane/ui";
 // icons
-import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 
 type MultiLevelDropdownProps = {
   label: string;
@@ -73,8 +73,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       as="button"
                       onClick={(e: any) => {
                         if (option.hasChildren) {
-                          e.stopPropagation();
-                          e.preventDefault();
+                          e?.stopPropagation();
+                          e?.preventDefault();
 
                           if (option.onClick) option.onClick();
 
diff --git a/web/components/user/user-greetings.tsx b/web/components/user/user-greetings.tsx
index 3341ac77f7f..216da7a5292 100644
--- a/web/components/user/user-greetings.tsx
+++ b/web/components/user/user-greetings.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react";
 // hooks
-import { useCurrentTime } from "hooks/use-current-time";
-// types
 import { IUser } from "@plane/types";
+import { useCurrentTime } from "@/hooks/use-current-time";
+// types
 
 export interface IUserGreetingsView {
   user: IUser;
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 5bd477352b0..1c8998e0086 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -1,15 +1,14 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Dialog, Transition } from "@headlessui/react";
+import { useRouter } from "next/router";
 import { AlertTriangle } from "lucide-react";
-// hooks
-import { useProjectView } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Dialog, Transition } from "@headlessui/react";
+import { IProjectView } from "@plane/types";
 // ui
-import { Button } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
+import { useProjectView } from "@/hooks/store";
 // types
-import { IProjectView } from "@plane/types";
 
 type Props = {
   data: IProjectView;
@@ -26,8 +25,6 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { deleteView } = useProjectView();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -43,15 +40,15 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
       .then(() => {
         handleClose();
 
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "View deleted successfully.",
         });
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "View could not be deleted. Please try again.",
         })
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 0da7e394684..e758b7938ae 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -1,16 +1,16 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
+import { IProjectView, IIssueFilterOptions } from "@plane/types";
 // hooks
-import { useLabel, useMember, useProjectState } from "hooks/store";
+import { Button, Input, TextArea } from "@plane/ui";
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { useLabel, useMember, useProjectState } from "@/hooks/store";
 // components
-import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
 // ui
-import { Button, Input, TextArea } from "@plane/ui";
 // types
-import { IProjectView, IIssueFilterOptions } from "@plane/types";
 // constants
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 type Props = {
   data?: IProjectView | null;
@@ -212,8 +212,8 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
               ? "Updating View..."
               : "Update View"
             : isSubmitting
-            ? "Creating View..."
-            : "Create View"}
+              ? "Creating View..."
+              : "Create View"}
         </Button>
       </div>
     </form>
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
index 43cea7d5c94..6e30a76ec12 100644
--- a/web/components/views/modal.tsx
+++ b/web/components/views/modal.tsx
@@ -1,13 +1,14 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import { useProjectView } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { IProjectView } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ProjectViewForm } from "components/views";
+import { ProjectViewForm } from "@/components/views";
+// hooks
+import { useProjectView } from "@/hooks/store";
 // types
-import { IProjectView } from "@plane/types";
 
 type Props = {
   data?: IProjectView | null;
@@ -22,8 +23,6 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
   const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
   // store hooks
   const { createView, updateView } = useProjectView();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -33,15 +32,15 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     await createView(workspaceSlug, projectId, payload)
       .then(() => {
         handleClose();
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "View created successfully.",
         });
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         })
@@ -52,10 +51,10 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
     await updateView(workspaceSlug, projectId, data?.id as string, payload)
       .then(() => handleClose())
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: err.detail ?? "Something went wrong. Please try again.",
+          message: err?.detail ?? "Something went wrong. Please try again.",
         })
       );
   };
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index 48cc12ada36..034a40ecbc2 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -1,22 +1,21 @@
 import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "lucide-react";
-// hooks
-import { useProjectView, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "components/views";
+import { IProjectView } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
 // helpers
-import { calculateTotalFilters } from "helpers/filter.helper";
-import { copyUrlToClipboard } from "helpers/string.helper";
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useProjectView, useUser } from "@/hooks/store";
 // types
-import { IProjectView } from "@plane/types";
-// constants
-import { EUserProjectRoles } from "constants/project";
 
 type Props = {
   view: IProjectView;
@@ -30,8 +29,6 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     membership: { currentProjectRole },
@@ -54,14 +51,15 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
     e.stopPropagation();
     e.preventDefault();
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/views/${view.id}`).then(() => {
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Link Copied!",
         message: "View link copied to clipboard.",
       });
     });
   };
 
+  // @ts-expect-error key types are not compatible
   const totalFilters = calculateTotalFilters(view.filters ?? {});
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx
index 4977ed3e7c3..abaaacc0873 100644
--- a/web/components/views/views-list.tsx
+++ b/web/components/views/views-list.tsx
@@ -1,45 +1,32 @@
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search } from "lucide-react";
-import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useProjectView, useUser } from "hooks/store";
 // components
-import { ProjectViewListItem } from "components/views";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// ui
 import { Input } from "@plane/ui";
-import { ViewListLoader } from "components/ui";
+import { EmptyState } from "@/components/empty-state";
+import { ViewListLoader } from "@/components/ui";
+import { ProjectViewListItem } from "@/components/views";
+// ui
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { VIEW_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { EmptyStateType } from "@/constants/empty-state";
+import { useApplication, useProjectView } from "@/hooks/store";
 
 export const ProjectViewsList = observer(() => {
   // states
   const [query, setQuery] = useState("");
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const {
     commandPalette: { toggleCreateViewModal },
   } = useApplication();
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
   const { projectViewIds, getViewById, loader } = useProjectView();
 
   if (loader || !projectViewIds) return <ViewListLoader />;
 
   const viewsList = projectViewIds.map((viewId) => getViewById(viewId));
 
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "views", isLightMode);
-
   const filteredViewsList = viewsList.filter((v) => v?.name.toLowerCase().includes(query.toLowerCase()));
 
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
   return (
     <>
       {viewsList.length > 0 ? (
@@ -65,21 +52,7 @@ export const ProjectViewsList = observer(() => {
           </div>
         </div>
       ) : (
-        <EmptyState
-          title={VIEW_EMPTY_STATE_DETAILS["project-views"].title}
-          description={VIEW_EMPTY_STATE_DETAILS["project-views"].description}
-          image={EmptyStateImagePath}
-          comicBox={{
-            title: VIEW_EMPTY_STATE_DETAILS["project-views"].comicBox.title,
-            description: VIEW_EMPTY_STATE_DETAILS["project-views"].comicBox.description,
-          }}
-          primaryButton={{
-            text: VIEW_EMPTY_STATE_DETAILS["project-views"].primaryButton.text,
-            onClick: () => toggleCreateViewModal(true),
-          }}
-          size="lg"
-          disabled={!isEditingAllowed}
-        />
+        <EmptyState type={EmptyStateType.PROJECT_VIEW} primaryButtonOnClick={() => toggleCreateViewModal(true)} />
       )}
     </>
   );
diff --git a/web/components/web-hooks/create-webhook-modal.tsx b/web/components/web-hooks/create-webhook-modal.tsx
index f8301bf53da..48c72a70d79 100644
--- a/web/components/web-hooks/create-webhook-modal.tsx
+++ b/web/components/web-hooks/create-webhook-modal.tsx
@@ -1,17 +1,18 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
+// ui
 import { Dialog, Transition } from "@headlessui/react";
+import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
+// helpers
+import { csvDownload } from "@/helpers/download.helper";
+// types
 import { WebhookForm } from "./form";
 import { GeneratedHookDetails } from "./generated-hook-details";
-// hooks
-import useToast from "hooks/use-toast";
-// helpers
-import { csvDownload } from "helpers/download.helper";
 // utils
 import { getCurrentHookAsCSV } from "./utils";
-// types
-import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
+// ui
 
 interface ICreateWebhookModal {
   currentWorkspace: IWorkspace | null;
@@ -34,8 +35,6 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // toast
-  const { setToastAlert } = useToast();
 
   const handleCreateWebhook = async (formData: IWebhook, webhookEventType: TWebhookEventTypes) => {
     if (!workspaceSlug) return;
@@ -65,8 +64,8 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
 
     await createWebhook(workspaceSlug.toString(), payload)
       .then(({ webHook, secretKey }) => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Webhook created successfully.",
         });
@@ -77,8 +76,8 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
         csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
       })
       .catch((error) => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: error?.error ?? "Something went wrong. Please try again.",
         });
diff --git a/web/components/web-hooks/delete-webhook-modal.tsx b/web/components/web-hooks/delete-webhook-modal.tsx
index 6cc30bb5796..4b1cbad340f 100644
--- a/web/components/web-hooks/delete-webhook-modal.tsx
+++ b/web/components/web-hooks/delete-webhook-modal.tsx
@@ -1,12 +1,11 @@
 import React, { FC, useState } from "react";
 import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
-// hooks
-import { useWebhook } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/ui";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// hooks
+import { useWebhook } from "@/hooks/store";
 
 interface IDeleteWebhook {
   isOpen: boolean;
@@ -19,8 +18,6 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
   const [isDeleting, setIsDeleting] = useState(false);
   // router
   const router = useRouter();
-  // toast
-  const { setToastAlert } = useToast();
   // store hooks
   const { removeWebhook } = useWebhook();
 
@@ -37,16 +34,16 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
 
     removeWebhook(workspaceSlug.toString(), webhookId.toString())
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Webhook deleted successfully.",
         });
         router.replace(`/${workspaceSlug}/settings/webhooks/`);
       })
       .catch((error) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: error?.error ?? "Something went wrong. Please try again.",
         })
diff --git a/web/components/web-hooks/form/delete-section.tsx b/web/components/web-hooks/form/delete-section.tsx
index efa9cfca1af..f7c2d7d7dae 100644
--- a/web/components/web-hooks/form/delete-section.tsx
+++ b/web/components/web-hooks/form/delete-section.tsx
@@ -1,5 +1,5 @@
-import { Disclosure, Transition } from "@headlessui/react";
 import { ChevronDown, ChevronUp } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
 import { Button } from "@plane/ui";
 
 type Props = {
diff --git a/web/components/web-hooks/form/form.tsx b/web/components/web-hooks/form/form.tsx
index c2dd940dc2e..68684eaee79 100644
--- a/web/components/web-hooks/form/form.tsx
+++ b/web/components/web-hooks/form/form.tsx
@@ -1,20 +1,20 @@
 import React, { FC, useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
+import { IWebhook, TWebhookEventTypes } from "@plane/types";
 // hooks
-import { useWebhook } from "hooks/store";
-// components
+import { Button } from "@plane/ui";
 import {
   WebhookIndividualEventOptions,
   WebhookInput,
   WebhookOptions,
   WebhookSecretKey,
   WebhookToggle,
-} from "components/web-hooks";
+} from "@/components/web-hooks";
+import { useWebhook } from "@/hooks/store";
+// components
 // ui
-import { Button } from "@plane/ui";
 // types
-import { IWebhook, TWebhookEventTypes } from "@plane/types";
 
 type Props = {
   data?: Partial<IWebhook>;
@@ -36,7 +36,7 @@ export const WebhookForm: FC<Props> = observer((props) => {
   // states
   const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
   // store hooks
-  const {webhookSecretKey } = useWebhook();
+  const { webhookSecretKey } = useWebhook();
   // use form
   const {
     handleSubmit,
diff --git a/web/components/web-hooks/form/secret-key.tsx b/web/components/web-hooks/form/secret-key.tsx
index 2d6a69fd6f5..a55d296ef4d 100644
--- a/web/components/web-hooks/form/secret-key.tsx
+++ b/web/components/web-hooks/form/secret-key.tsx
@@ -1,18 +1,21 @@
 import { useState, FC } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { Button, Tooltip } from "@plane/ui";
+// icons
 import { Copy, Eye, EyeOff, RefreshCw } from "lucide-react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useWebhook, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { IWebhook } from "@plane/types";
+// ui
+import { Button, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { csvDownload } from "helpers/download.helper";
+import { csvDownload } from "@/helpers/download.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useWebhook, useWorkspace } from "@/hooks/store";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // utils
 import { getCurrentHookAsCSV } from "../utils";
-// types
-import { IWebhook } from "@plane/types";
+// hooks
 
 type Props = {
   data: Partial<IWebhook>;
@@ -29,23 +32,21 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
   // store hooks
   const { currentWorkspace } = useWorkspace();
   const { currentWebhook, regenerateSecretKey, webhookSecretKey } = useWebhook();
-  // hooks
-  const { setToastAlert } = useToast();
-
+  const { isMobile } = usePlatformOS();
   const handleCopySecretKey = () => {
     if (!webhookSecretKey) return;
 
     copyTextToClipboard(webhookSecretKey)
       .then(() =>
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Secret key copied to clipboard.",
         })
       )
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Error occurred while copying secret key.",
         })
@@ -59,8 +60,8 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
 
     regenerateSecretKey(workspaceSlug.toString(), data.id)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "New key regenerated successfully.",
         });
@@ -71,8 +72,8 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
         }
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
@@ -109,7 +110,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
               {webhookSecretKey && (
                 <div className="flex items-center gap-2">
                   {SECRET_KEY_OPTIONS.map((option) => (
-                    <Tooltip key={option.key} tooltipContent={option.label}>
+                    <Tooltip key={option.key} tooltipContent={option.label} isMobile={isMobile}>
                       <button type="button" className="grid flex-shrink-0 place-items-center" onClick={option.onClick}>
                         <option.Icon className="h-3 w-3 text-custom-text-400" />
                       </button>
diff --git a/web/components/web-hooks/form/toggle.tsx b/web/components/web-hooks/form/toggle.tsx
index 4d483b5bc56..05d59340f32 100644
--- a/web/components/web-hooks/form/toggle.tsx
+++ b/web/components/web-hooks/form/toggle.tsx
@@ -1,8 +1,8 @@
 import { Control, Controller } from "react-hook-form";
+import { IWebhook } from "@plane/types";
 // ui
 import { ToggleSwitch } from "@plane/ui";
 // types
-import { IWebhook } from "@plane/types";
 
 interface IWebHookToggle {
   control: Control<IWebhook, any>;
diff --git a/web/components/web-hooks/generated-hook-details.tsx b/web/components/web-hooks/generated-hook-details.tsx
index ce78fa5d5da..cfb98e431ba 100644
--- a/web/components/web-hooks/generated-hook-details.tsx
+++ b/web/components/web-hooks/generated-hook-details.tsx
@@ -1,9 +1,9 @@
 // components
-import { WebhookSecretKey } from "./form";
 // ui
+import { IWebhook } from "@plane/types";
 import { Button } from "@plane/ui";
 // types
-import { IWebhook } from "@plane/types";
+import { WebhookSecretKey } from "./form";
 
 type Props = {
   handleClose: () => void;
diff --git a/web/components/web-hooks/utils.ts b/web/components/web-hooks/utils.ts
index 4e2f4fb3c48..caebe6fc144 100644
--- a/web/components/web-hooks/utils.ts
+++ b/web/components/web-hooks/utils.ts
@@ -1,7 +1,7 @@
 // helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-// types
 import { IWebhook, IWorkspace } from "@plane/types";
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+// types
 
 export const getCurrentHookAsCSV = (
   currentWorkspace: IWorkspace | null,
diff --git a/web/components/web-hooks/webhooks-list-item.tsx b/web/components/web-hooks/webhooks-list-item.tsx
index fa676fccdcd..7388e9c7f2f 100644
--- a/web/components/web-hooks/webhooks-list-item.tsx
+++ b/web/components/web-hooks/webhooks-list-item.tsx
@@ -1,12 +1,12 @@
 import { FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { IWebhook } from "@plane/types";
 // hooks
-import { useWebhook } from "hooks/store";
-// ui
 import { ToggleSwitch } from "@plane/ui";
+import { useWebhook } from "@/hooks/store";
+// ui
 // types
-import { IWebhook } from "@plane/types";
 
 interface IWebhookListItem {
   webhook: IWebhook;
diff --git a/web/components/web-hooks/webhooks-list.tsx b/web/components/web-hooks/webhooks-list.tsx
index bf2f1b49cb6..f1d9dff4634 100644
--- a/web/components/web-hooks/webhooks-list.tsx
+++ b/web/components/web-hooks/webhooks-list.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useWebhook } from "hooks/store";
+import { useWebhook } from "@/hooks/store";
 // components
 import { WebhooksListItem } from "./webhooks-list-item";
 
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index 6c5ec4593ca..0e01440cd4f 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useUser } from "hooks/store";
-// ui
 import { Button } from "@plane/ui";
+import { useUser } from "@/hooks/store";
+// ui
 
 type Props = {
   isOpen: boolean;
@@ -73,7 +73,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         {currentUser?.id === userDetails.id
                           ? "Leave workspace?"
-                          : `Remove ${userDetails.display_name}?`}
+                          : `Remove ${userDetails?.display_name}?`}
                       </Dialog.Title>
                       <div className="mt-2">
                         {currentUser?.id === userDetails.id ? (
@@ -84,7 +84,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                         ) : (
                           <p className="text-sm text-custom-text-200">
                             Are you sure you want to remove member-{" "}
-                            <span className="font-bold">{userDetails.display_name}</span>? They will no longer have
+                            <span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
                             access to this workspace. This action cannot be undone.
                           </p>
                         )}
@@ -102,8 +102,8 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                         ? "Leaving"
                         : "Leave"
                       : isRemoving
-                      ? "Removing"
-                      : "Remove"}
+                        ? "Removing"
+                        : "Remove"}
                   </Button>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index b4f1644698e..d8a443d4db8 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -1,19 +1,18 @@
 import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-// services
-import { WorkspaceService } from "services/workspace.service";
+import { IWorkspace } from "@plane/types";
+// ui
+import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+import { WORKSPACE_CREATED } from "@/constants/event-tracker";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace";
 // hooks
-import { useEventTracker, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useEventTracker, useWorkspace } from "@/hooks/store";
 // ui
-import { Button, CustomSelect, Input } from "@plane/ui";
 // types
-import { IWorkspace } from "@plane/types";
-// constants
-import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "constants/workspace";
-import { WORKSPACE_CREATED } from "constants/event-tracker";
+import { WorkspaceService } from "@/services/workspace.service";
 
 type Props = {
   onSubmit?: (res: IWorkspace) => Promise<void>;
@@ -22,7 +21,7 @@ type Props = {
     slug: string;
     organization_size: string;
   };
-  setDefaultValues: Dispatch<SetStateAction<any>>;
+  setDefaultValues: Dispatch<SetStateAction<IWorkspace>>;
   secondaryButton?: React.ReactNode;
   primaryButtonText?: {
     loading: string;
@@ -51,8 +50,6 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
   // store hooks
   const { captureWorkspaceEvent } = useEventTracker();
   const { createWorkspace } = useWorkspace();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     handleSubmit,
@@ -79,8 +76,8 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   element: "Create workspace page",
                 },
               });
-              setToastAlert({
-                type: "success",
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
                 title: "Success!",
                 message: "Workspace created successfully.",
               });
@@ -95,8 +92,8 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   element: "Create workspace page",
                 },
               });
-              setToastAlert({
-                type: "error",
+              setToast({
+                type: TOAST_TYPE.ERROR,
                 title: "Error!",
                 message: "Workspace could not be created. Please try again.",
               });
@@ -104,8 +101,8 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         } else setSlugError(true);
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Some error occurred while creating workspace. Please try again.",
         });
@@ -124,7 +121,10 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
     <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>
+          <label htmlFor="workspaceName">
+            Workspace Name
+            <span className="ml-0.5 text-red-500">*</span>
+          </label>
           <Controller
             control={control}
             name="name"
@@ -156,7 +156,10 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
           />
         </div>
         <div className="space-y-1 text-sm">
-          <label htmlFor="workspaceUrl">Workspace URL</label>
+          <label htmlFor="workspaceUrl">
+            Workspace URL
+            <span className="ml-0.5 text-red-500">*</span>
+          </label>
           <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
             <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
             <Controller
@@ -188,7 +191,9 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
           )}
         </div>
         <div className="space-y-1 text-sm">
-          <span>What size is your organization?</span>
+          <span>
+            What size is your organization?<span className="ml-0.5 text-red-500">*</span>
+          </span>
           <div className="w-full">
             <Controller
               name="organization_size"
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index a90ac9cdf81..08a24dcbba1 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -1,18 +1,17 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
-// hooks
-import { useEventTracker, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-// ui
-import { Button, Input } from "@plane/ui";
-// types
+import { Dialog, Transition } from "@headlessui/react";
 import type { IWorkspace } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { WORKSPACE_DELETED } from "constants/event-tracker";
+import { WORKSPACE_DELETED } from "@/constants/event-tracker";
+// hooks
+import { useEventTracker, useWorkspace } from "@/hooks/store";
+// types
 
 type Props = {
   isOpen: boolean;
@@ -32,8 +31,6 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { captureWorkspaceEvent } = useEventTracker();
   const { deleteWorkspace } = useWorkspace();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     control,
@@ -58,7 +55,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
     if (!data || !canDelete) return;
 
     await deleteWorkspace(data.slug)
-      .then((res) => {
+      .then(() => {
         handleClose();
         router.push("/");
         captureWorkspaceEvent({
@@ -69,15 +66,15 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
             element: "Workspace general settings page",
           },
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Workspace deleted successfully.",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again later.",
         });
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 0bb77f9c74c..03e295cbc72 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -1,17 +1,20 @@
 import React, { useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
+// headless ui
+import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
 import { Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useApplication } from "hooks/store";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
-import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
+// ui
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+// hooks
+import { useApplication } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // assets
 import packageJson from "package.json";
 
-const helpOptions = [
+const HELP_OPTIONS = [
   {
     name: "Documentation",
     href: "https://docs.plane.so/",
@@ -27,12 +30,6 @@ const helpOptions = [
     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 {
@@ -45,12 +42,18 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
     theme: { sidebarCollapsed, toggleSidebar },
     commandPalette: { toggleShortcutModal },
   } = useApplication();
-
+  const { isMobile } = usePlatformOS();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
+  const handleCrispWindowShow = () => {
+    if (window) {
+      window.$crisp.push(["do", "chat:show"]);
+    }
+  };
+
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
 
   const isCollapsed = sidebarCollapsed || false;
@@ -68,7 +71,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           </div>
         )}
         <div className={`flex items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "w-1/2 justify-evenly"}`}>
-          <Tooltip tooltipContent="Shortcuts">
+          <Tooltip tooltipContent="Shortcuts" isMobile={isMobile}>
             <button
               type="button"
               className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
@@ -79,7 +82,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
               <Zap className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
-          <Tooltip tooltipContent="Help">
+          <Tooltip tooltipContent="Help" isMobile={isMobile}>
             <button
               type="button"
               className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
@@ -99,7 +102,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
             <MoveLeft className="h-3.5 w-3.5" />
           </button>
 
-          <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
+          <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`} isMobile={isMobile}>
             <button
               type="button"
               className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
@@ -129,33 +132,26 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
               ref={helpOptionsRef}
             >
               <div className="space-y-1 pb-2">
-                {helpOptions.map(({ name, Icon, href, onClick }) => {
-                  if (href)
-                    return (
-                      <Link href={href} key={name} target="_blank">
-                        <span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
-                          <div className="grid flex-shrink-0 place-items-center">
-                            <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-                          </div>
-                          <span className="text-xs">{name}</span>
-                        </span>
-                      </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 flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" />
-                        </div>
-                        <span className="text-xs">{name}</span>
-                      </button>
-                    );
-                })}
+                {HELP_OPTIONS.map(({ name, Icon, href }) => (
+                  <Link href={href} key={name} target="_blank">
+                    <span className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
+                      <div className="grid flex-shrink-0 place-items-center">
+                        <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                      </div>
+                      <span className="text-xs">{name}</span>
+                    </span>
+                  </Link>
+                ))}
+                <button
+                  type="button"
+                  onClick={handleCrispWindowShow}
+                  className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                >
+                  <div className="grid flex-shrink-0 place-items-center">
+                    <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
+                  </div>
+                  <span className="text-xs">Chat with us</span>
+                </button>
               </div>
               <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
             </div>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 35b5963d097..fdcdbc66e53 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -1,16 +1,16 @@
 import React, { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
 import { Plus, X } from "lucide-react";
-// hooks
-import { useUser } from "hooks/store";
+import { Dialog, Transition } from "@headlessui/react";
+import { IWorkspaceBulkInviteFormData } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input } from "@plane/ui";
-// types
-import { IWorkspaceBulkInviteFormData } from "@plane/types";
 // constants
-import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
+import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
+// hooks
+import { useUser } from "@/hooks/store";
+// types
 
 type Props = {
   isOpen: boolean;
@@ -121,7 +121,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group relative grid grid-cols-11 gap-4">
+                        <div key={field.id} className="group relative grid grid-cols-11 items-start gap-4">
                           <div className="col-span-7">
                             <Controller
                               control={control}
@@ -155,7 +155,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                               )}
                             />
                           </div>
-                          <div className="col-span-3">
+                          <div className="col-span-3 flex items-center gap-2">
                             <Controller
                               control={control}
                               name={`emails.${index}.role`}
@@ -166,6 +166,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                                   label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
                                   onChange={onChange}
                                   optionsClassName="w-full"
+                                  className="flex-grow"
                                   input
                                 >
                                   {Object.entries(ROLE).map(([key, value]) => {
@@ -179,16 +180,16 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                                 </CustomSelect>
                               )}
                             />
+                            {fields.length > 1 && (
+                              <button
+                                type="button"
+                                className="grid place-items-center self-center rounded flex-shrink-0"
+                                onClick={() => remove(index)}
+                              >
+                                <X className="h-3.5 w-3.5 text-custom-text-200" />
+                              </button>
+                            )}
                           </div>
-                          {fields.length > 1 && (
-                            <button
-                              type="button"
-                              className="-ml-3 place-items-center self-center rounded"
-                              onClick={() => remove(index)}
-                            >
-                              <X className="h-3.5 w-3.5 text-custom-text-200" />
-                            </button>
-                          )}
                         </div>
                       ))}
                     </div>
diff --git a/web/components/workspace/settings/invitations-list-item.tsx b/web/components/workspace/settings/invitations-list-item.tsx
index 9e37a2fb51a..74a736d103d 100644
--- a/web/components/workspace/settings/invitations-list-item.tsx
+++ b/web/components/workspace/settings/invitations-list-item.tsx
@@ -1,16 +1,16 @@
 import { useState, FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { ChevronDown, XCircle } from "lucide-react";
-// hooks
-import { useMember, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { ConfirmWorkspaceMemberRemove } from "components/workspace";
 // ui
-import { CustomSelect, Tooltip } from "@plane/ui";
+import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
 // constants
-import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
+import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
+// hooks
+import { useMember, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   invitationId: string;
@@ -30,8 +30,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
   const {
     workspace: { updateMemberInvitation, deleteMemberInvitation, getWorkspaceInvitationDetails },
   } = useMember();
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { isMobile } = usePlatformOS();
   // derived values
   const invitationDetails = getWorkspaceInvitationDetails(invitationId);
 
@@ -40,15 +39,15 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
 
     await deleteMemberInvitation(workspaceSlug.toString(), invitationDetails.id)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message: "Invitation removed successfully.",
         });
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
           message: err?.error || "Something went wrong. Please try again.",
         })
@@ -116,8 +115,8 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
               updateMemberInvitation(workspaceSlug.toString(), invitationDetails.id, {
                 role: value,
               }).catch(() => {
-                setToastAlert({
-                  type: "error",
+                setToast({
+                  type: TOAST_TYPE.ERROR,
                   title: "Error!",
                   message: "An error occurred while updating member role. Please try again.",
                 });
@@ -137,7 +136,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
               );
             })}
           </CustomSelect>
-          <Tooltip tooltipContent="Remove member" disabled={!isAdmin}>
+          <Tooltip tooltipContent="Remove member" disabled={!isAdmin} isMobile={isMobile}>
             <button
               type="button"
               onClick={() => setRemoveMemberModal(true)}
diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx
index 76c9bbedf8b..d406e5277c8 100644
--- a/web/components/workspace/settings/members-list-item.tsx
+++ b/web/components/workspace/settings/members-list-item.tsx
@@ -1,18 +1,19 @@
 import { useState, FC } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
+// lucide icons
 import { ChevronDown, Dot, XCircle } from "lucide-react";
-// hooks
-import { useEventTracker, useMember, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { ConfirmWorkspaceMemberRemove } from "components/workspace";
 // ui
-import { CustomSelect, Tooltip } from "@plane/ui";
+import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
 // constants
-import { EUserWorkspaceRoles, ROLE } from "constants/workspace";
-import { WORKSPACE_MEMBER_lEAVE } from "constants/event-tracker";
+import { WORKSPACE_MEMBER_lEAVE } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles, ROLE } from "@/constants/workspace";
+// hooks
+import { useEventTracker, useMember, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   memberId: string;
@@ -35,8 +36,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
     workspace: { updateMember, removeMemberFromWorkspace, getWorkspaceMemberDetails },
   } = useMember();
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
+  const { isMobile } = usePlatformOS();
   // derived values
   const memberDetails = getWorkspaceMemberDetails(memberId);
 
@@ -52,8 +52,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
         router.push("/profile");
       })
       .catch((err) =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error",
           message: err?.error || "Something went wrong. Please try again.",
         })
@@ -64,8 +64,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
     if (!workspaceSlug || !memberDetails) return;
 
     await removeMemberFromWorkspace(workspaceSlug.toString(), memberDetails.member.id).catch((err) =>
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error",
         message: err?.error || "Something went wrong. Please try again.",
       })
@@ -165,8 +165,8 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
               updateMember(workspaceSlug.toString(), memberDetails.member.id, {
                 role: value,
               }).catch(() => {
-                setToastAlert({
-                  type: "error",
+                setToast({
+                  type: TOAST_TYPE.ERROR,
                   title: "Error!",
                   message: "An error occurred while updating member role. Please try again.",
                 });
@@ -187,6 +187,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
             })}
           </CustomSelect>
           <Tooltip
+            isMobile={isMobile}
             tooltipContent={isCurrentUser ? "Leave workspace" : "Remove member"}
             disabled={!isAdmin && !isCurrentUser}
           >
diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx
index 1dc02d508e3..d19d5c6ec9f 100644
--- a/web/components/workspace/settings/members-list.tsx
+++ b/web/components/workspace/settings/members-list.tsx
@@ -1,13 +1,12 @@
 import { FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-// hooks
-import { useMember } from "hooks/store";
 // components
-import { WorkspaceInvitationsListItem, WorkspaceMembersListItem } from "components/workspace";
-// ui
-import { MembersSettingsLoader } from "components/ui";
+import { MembersSettingsLoader } from "@/components/ui";
+import { WorkspaceInvitationsListItem, WorkspaceMembersListItem } from "@/components/workspace";
+// hooks
+import { useMember } from "@/hooks/store";
 
 export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer((props) => {
   const { searchQuery } = props;
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
index 44da4291f66..64b4a300305 100644
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -1,25 +1,24 @@
 import { useEffect, useState, FC } 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";
-// services
-import { FileService } from "services/file.service";
-// hooks
-import { useEventTracker, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { DeleteWorkspaceModal } from "components/workspace";
-import { WorkspaceImageUploadModal } from "components/core";
+import { Disclosure, Transition } from "@headlessui/react";
+import { IWorkspace } from "@plane/types";
 // ui
-import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
+import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { WorkspaceImageUploadModal } from "@/components/core";
+import { DeleteWorkspaceModal } from "@/components/workspace";
+// constants
+import { WORKSPACE_UPDATED } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles, ORGANIZATION_SIZE } from "@/constants/workspace";
 // helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useEventTracker, useUser, useWorkspace } from "@/hooks/store";
+// services
+import { FileService } from "@/services/file.service";
 // types
-import { IWorkspace } from "@plane/types";
-// constants
-import { EUserWorkspaceRoles, ORGANIZATION_SIZE } from "constants/workspace";
-import { WORKSPACE_UPDATED } from "constants/event-tracker";
 
 const defaultValues: Partial<IWorkspace> = {
   name: "",
@@ -43,8 +42,6 @@ export const WorkspaceDetails: FC = observer(() => {
     membership: { currentWorkspaceRole },
   } = useUser();
   const { currentWorkspace, updateWorkspace } = useWorkspace();
-  // toast alert
-  const { setToastAlert } = useToast();
   // form info
   const {
     handleSubmit,
@@ -77,9 +74,9 @@ export const WorkspaceDetails: FC = observer(() => {
             element: "Workspace general settings page",
           },
         });
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "Workspace updated successfully",
         });
       })
@@ -110,16 +107,16 @@ export const WorkspaceDetails: FC = observer(() => {
     fileService.deleteFile(currentWorkspace.id, url).then(() => {
       updateWorkspace(currentWorkspace.slug, { logo: "" })
         .then(() => {
-          setToastAlert({
-            type: "success",
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Workspace picture removed successfully.",
           });
           setIsImageUploadModalOpen(false);
         })
         .catch(() => {
-          setToastAlert({
-            type: "error",
+          setToast({
+            type: TOAST_TYPE.ERROR,
             title: "Error!",
             message: "There was some error in deleting your profile picture. Please try again.",
           });
@@ -132,8 +129,8 @@ export const WorkspaceDetails: FC = observer(() => {
     if (!currentWorkspace) return;
 
     copyUrlToClipboard(`${currentWorkspace.slug}`).then(() => {
-      setToastAlert({
-        type: "success",
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
         title: "Workspace URL copied to the clipboard.",
       });
     });
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 984bc1caf35..3cb127f9835 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -1,20 +1,20 @@
 import { Fragment, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useTheme } from "next-themes";
-import { Menu, Transition } from "@headlessui/react";
+import { usePopper } from "react-popper";
 import { mutate } from "swr";
+// ui
 import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
-import { usePopper } from "react-popper";
-// hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
+import { Menu, Transition } from "@headlessui/react";
+// icons
+import { IWorkspace } from "@plane/types";
+// plane ui
+import { Avatar, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Avatar, Loader } from "@plane/ui";
+import { useApplication, useUser, useWorkspace } from "@/hooks/store";
 // types
-import { IWorkspace } from "@plane/types";
 // Static Data
 const userLinks = (workspaceSlug: string, userId: string) => [
   {
@@ -24,8 +24,8 @@ const userLinks = (workspaceSlug: string, userId: string) => [
     icon: Mails,
   },
   {
-    key: "view_profile",
-    name: "View profile",
+    key: "my_activity",
+    name: "My activity",
     href: `/${workspaceSlug}/profile/${userId}`,
     icon: CircleUserRound,
   },
@@ -38,7 +38,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [
 ];
 const profileLinks = (workspaceSlug: string, userId: string) => [
   {
-    name: "View profile",
+    name: "My activity",
     icon: UserCircle2,
     link: `/${workspaceSlug}/profile/${userId}`,
   },
@@ -58,8 +58,6 @@ export const WorkspaceSidebarDropdown = observer(() => {
   } = useApplication();
   const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
-  // hooks
-  const { setToastAlert } = useToast();
   const { setTheme } = useTheme();
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
@@ -88,8 +86,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
         router.push("/");
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Failed to sign out. Please try again.",
         })
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index 774a231db75..7da6e61ebf5 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -1,25 +1,27 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useApplication, useEventTracker, useUser } from "hooks/store";
-// components
-import { NotificationPopover } from "components/notifications";
+import { Crown } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
-import { Crown } from "lucide-react";
+// components
+import { NotificationPopover } from "@/components/notifications";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { SIDEBAR_MENU_ITEMS } from "constants/dashboard";
-import { SIDEBAR_CLICKED } from "constants/event-tracker";
+import { SIDEBAR_MENU_ITEMS } from "@/constants/dashboard";
+import { SIDEBAR_CLICKED } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helper
-import { cn } from "helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useApplication, useEventTracker, useUser } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const WorkspaceSidebarMenu = observer(() => {
   // store hooks
   const { theme: themeStore } = useApplication();
   const { captureEvent } = useEventTracker();
+  const { isMobile } = usePlatformOS();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -50,6 +52,7 @@ export const WorkspaceSidebarMenu = observer(() => {
                   position="right"
                   className="ml-2"
                   disabled={!themeStore?.sidebarCollapsed}
+                  isMobile={isMobile}
                 >
                   <div
                     className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
@@ -65,7 +68,7 @@ export const WorkspaceSidebarMenu = observer(() => {
                         })}
                       />
                     }
-                    {!themeStore?.sidebarCollapsed && link.label}
+                    {!themeStore?.sidebarCollapsed && <p className="leading-5">{link.label}</p>}
                     {!themeStore?.sidebarCollapsed && link.key === "active-cycles" && (
                       <Crown className="h-3.5 w-3.5 text-amber-400" />
                     )}
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index dd2dd5c6878..4b403037194 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -1,16 +1,16 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ChevronUp, PenSquare, Search } from "lucide-react";
-// hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
+import { TIssue } from "@plane/types";
 // components
-import { CreateUpdateIssueModal } from "components/issues";
+import { CreateUpdateIssueModal } from "@/components/issues";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { EIssuesStoreType } from "constants/issue";
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useApplication, useEventTracker, useProject, useUser } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
 // types
-import { TIssue } from "@plane/types";
 
 export const WorkspaceSidebarQuickAction = observer(() => {
   // states
@@ -32,6 +32,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
   //useState control for displaying draft issue button instead of group hover
   const [isDraftButtonOpen, setIsDraftButtonOpen] = useState(false);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const timeoutRef = useRef<any>();
 
   const isSidebarCollapsed = themeStore.sidebarCollapsed;
@@ -41,7 +42,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
   const disabled = joinedProjectIds.length === 0;
 
   const onMouseEnter = () => {
-    //if renet before timout clear the timeout
+    // if enter before time out clear the timeout
     timeoutRef?.current && clearTimeout(timeoutRef.current);
     setIsDraftButtonOpen(true);
   };
@@ -68,7 +69,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
         onClose={() => setIsDraftIssueModalOpen(false)}
         data={workspaceDraftIssue ?? {}}
         onSubmit={() => removeWorkspaceDraftIssue()}
-        isDraft={true}
+        isDraft
       />
 
       <div
diff --git a/web/components/workspace/views/default-view-list-item.tsx b/web/components/workspace/views/default-view-list-item.tsx
index ad2f487f713..d559e4b545a 100644
--- a/web/components/workspace/views/default-view-list-item.tsx
+++ b/web/components/workspace/views/default-view-list-item.tsx
@@ -1,8 +1,8 @@
-import { useRouter } from "next/router";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // helpers
-import { truncateText } from "helpers/string.helper";
+import { truncateText } from "@/helpers/string.helper";
 
 type Props = { view: { key: string; label: string } };
 
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index b6028d5417f..cd222dd266d 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -1,17 +1,19 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+// ui
 import { AlertTriangle } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { IWorkspaceView } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+import { GLOBAL_VIEW_DELETED } from "@/constants/event-tracker";
 // store hooks
-import { useGlobalView, useEventTracker } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useGlobalView, useEventTracker } from "@/hooks/store";
 // ui
-import { Button } from "@plane/ui";
 // types
-import { IWorkspaceView } from "@plane/types";
-// constants
-import { GLOBAL_VIEW_DELETED } from "constants/event-tracker";
 
 type Props = {
   data: IWorkspaceView;
@@ -29,8 +31,6 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { deleteGlobalView } = useGlobalView();
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -53,8 +53,8 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
           view_id: data.id,
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong while deleting the view. Please try again.",
         });
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index 71627c08a85..8d387d6c305 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -1,16 +1,16 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-// hooks
-import { useLabel, useMember } from "hooks/store";
-// components
-import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
+import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
-// types
-import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
+// components
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+// hooks
+import { useLabel, useMember } from "@/hooks/store";
+// types
 
 type Props = {
   handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
@@ -200,8 +200,8 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
               ? "Updating View..."
               : "Update View"
             : isSubmitting
-            ? "Creating View..."
-            : "Create View"}
+              ? "Creating View..."
+              : "Create View"}
         </Button>
       </div>
     </form>
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index 223fda13c11..35c01481b2b 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -1,15 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useRouter } from "next/router";
+// icons
 import { Plus } from "lucide-react";
-// store hooks
-import { useEventTracker, useGlobalView, useUser } from "hooks/store";
 // components
-import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
 // constants
-import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
-import { GLOBAL_VIEW_OPENED } from "constants/event-tracker";
+import { GLOBAL_VIEW_OPENED } from "@/constants/event-tracker";
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "@/constants/workspace";
+// store hooks
+import { useEventTracker, useGlobalView, useUser } from "@/hooks/store";
 
 const ViewTab = observer((props: { viewId: string }) => {
   const { viewId } = props;
@@ -69,7 +70,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
         activeTabElement.scrollIntoView({ behavior: "smooth", inline: diff > 500 ? "center" : "nearest" });
       }
     }
-  }, [globalViewId, currentWorkspaceViews, containerRef]);
+  }, [globalViewId, currentWorkspaceViews, containerRef, captureEvent]);
 
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index b66d555fa64..b9eee700403 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -1,16 +1,17 @@
 import React from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
-// store hooks
-import { useEventTracker, useGlobalView } from "hooks/store";
-import useToast from "hooks/use-toast";
-// components
-import { WorkspaceViewForm } from "components/workspace";
-// types
 import { IWorkspaceView } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { WorkspaceViewForm } from "@/components/workspace";
 // constants
-import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "constants/event-tracker";
+import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
+// store hooks
+import { useEventTracker, useGlobalView } from "@/hooks/store";
+// types
 
 type Props = {
   data?: IWorkspaceView;
@@ -27,8 +28,6 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
   // store hooks
   const { createGlobalView, updateGlobalView } = useGlobalView();
   const { captureEvent } = useEventTracker();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleClose = () => {
     onClose();
@@ -51,8 +50,8 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
           applied_filters: res.filters,
           state: "SUCCESS",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "View created successfully.",
         });
@@ -65,8 +64,8 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
           applied_filters: payload?.filters,
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "View could not be created. Please try again.",
         });
@@ -90,8 +89,8 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
           applied_filters: res.filters,
           state: "SUCCESS",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "View updated successfully.",
         });
@@ -103,8 +102,8 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
           applied_filters: data.filters,
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "View could not be updated. Please try again.",
         });
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
index 28f25551cd6..7f7fd9dcada 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -1,17 +1,18 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useRouter } from "next/router";
+// icons
 import { Pencil, Trash2 } from "lucide-react";
-// store hooks
-import { useEventTracker, useGlobalView } from "hooks/store";
-// components
-import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
 // ui
 import { CustomMenu } from "@plane/ui";
+// components
+import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "@/components/workspace";
 // helpers
-import { truncateText } from "helpers/string.helper";
-import { calculateTotalFilters } from "helpers/filter.helper";
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { truncateText } from "@/helpers/string.helper";
+// store hooks
+import { useEventTracker, useGlobalView } from "@/hooks/store";
 
 type Props = { viewId: string };
 
diff --git a/web/components/workspace/views/views-list.tsx b/web/components/workspace/views/views-list.tsx
index 9a8758d2dc9..8b1af847d5d 100644
--- a/web/components/workspace/views/views-list.tsx
+++ b/web/components/workspace/views/views-list.tsx
@@ -1,12 +1,11 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-// store hooks
-import { useGlobalView } from "hooks/store";
 // components
-import { GlobalViewListItem } from "components/workspace";
-// ui
-import { ViewListLoader } from "components/ui";
+import { ViewListLoader } from "@/components/ui";
+import { GlobalViewListItem } from "@/components/workspace";
+// store hooks
+import { useGlobalView } from "@/hooks/store";
 
 type Props = {
   searchQuery: string;
@@ -29,11 +28,5 @@ export const GlobalViewsList: React.FC<Props> = observer((props) => {
 
   const filteredViewsList = getSearchedViews(searchQuery);
 
-  return (
-    <>
-      {filteredViewsList?.map((viewId) => (
-        <GlobalViewListItem key={viewId} viewId={viewId} />
-      ))}
-    </>
-  );
+  return <>{filteredViewsList?.map((viewId) => <GlobalViewListItem key={viewId} viewId={viewId} />)}</>;
 });
diff --git a/web/components/workspace/workspace-active-cycles-upgrade.tsx b/web/components/workspace/workspace-active-cycles-upgrade.tsx
index b5a61610b4d..c2f8e47bbdc 100644
--- a/web/components/workspace/workspace-active-cycles-upgrade.tsx
+++ b/web/components/workspace/workspace-active-cycles-upgrade.tsx
@@ -1,16 +1,16 @@
 import React from "react";
-import Image from "next/image";
 import { observer } from "mobx-react";
-// hooks
-import { useUser } from "hooks/store";
-// ui
-import { getButtonStyling } from "@plane/ui";
+import Image from "next/image";
 // icons
 import { Crown } from "lucide-react";
-// helper
-import { cn } from "helpers/common.helper";
+// ui
+import { getButtonStyling } from "@plane/ui";
 // constants
-import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "constants/cycle";
+import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "@/constants/cycle";
+// helper
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useUser } from "@/hooks/store";
 
 export const WorkspaceActiveCyclesUpgrade = observer(() => {
   // store hooks
@@ -75,7 +75,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 pb-8 h-full">
         {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
-          <div className="flex flex-col gap-2 p-4 min-h-32 w-full bg-custom-background-80 rounded-md">
+          <div key={item.title} className="flex flex-col gap-2 p-4 min-h-32 w-full bg-custom-background-80 rounded-md">
             <div className="flex items-center gap-2">
               <h3 className="font-medium">{item.title}</h3>
               <item.icon className="text-blue-500 h-4 w-4" />
diff --git a/web/constants/archives.ts b/web/constants/archives.ts
new file mode 100644
index 00000000000..9130a981a17
--- /dev/null
+++ b/web/constants/archives.ts
@@ -0,0 +1,50 @@
+// types
+import { IProject } from "@plane/types";
+// icons
+import { ContrastIcon, DiceIcon, LayersIcon } from "@plane/ui";
+
+export const ARCHIVES_TAB_LIST: {
+  key: string;
+  label: string;
+  shouldRender: (projectDetails: IProject) => boolean;
+}[] = [
+  {
+    key: "issues",
+    label: "Issues",
+    shouldRender: () => true,
+  },
+  {
+    key: "cycles",
+    label: "Cycles",
+    shouldRender: (projectDetails) => projectDetails.cycle_view,
+  },
+  {
+    key: "modules",
+    label: "Modules",
+    shouldRender: (projectDetails) => projectDetails.module_view,
+  },
+];
+
+export const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
+  [key: string]: {
+    label: string;
+    href: string;
+    icon: React.FC<React.SVGAttributes<SVGElement> & { className?: string }>;
+  };
+} = {
+  issues: {
+    label: "Issues",
+    href: "/issues",
+    icon: LayersIcon,
+  },
+  cycles: {
+    label: "Cycles",
+    href: "/cycles",
+    icon: ContrastIcon,
+  },
+  modules: {
+    label: "Modules",
+    href: "/modules",
+    icon: DiceIcon,
+  },
+};
diff --git a/web/constants/cycle.ts b/web/constants/cycle.ts
index 63900b6b76e..15c5fef696f 100644
--- a/web/constants/cycle.ts
+++ b/web/constants/cycle.ts
@@ -11,36 +11,24 @@ import {
 } from "lucide-react";
 
 // types
-import { TCycleLayout, TCycleView } from "@plane/types";
+import { TCycleLayoutOptions, TCycleTabOptions } from "@plane/types";
 
-export const CYCLE_TAB_LIST: {
-  key: TCycleView;
+export const CYCLE_TABS_LIST: {
+  key: TCycleTabOptions;
   name: string;
 }[] = [
-  {
-    key: "all",
-    name: "All",
-  },
   {
     key: "active",
     name: "Active",
   },
   {
-    key: "upcoming",
-    name: "Upcoming",
-  },
-  {
-    key: "completed",
-    name: "Completed",
-  },
-  {
-    key: "draft",
-    name: "Drafts",
+    key: "all",
+    name: "All",
   },
 ];
 
 export const CYCLE_VIEW_LAYOUTS: {
-  key: TCycleLayout;
+  key: TCycleLayoutOptions;
   icon: any;
   title: string;
 }[] = [
@@ -64,6 +52,7 @@ export const CYCLE_VIEW_LAYOUTS: {
 export const CYCLE_STATUS: {
   label: string;
   value: "current" | "upcoming" | "completed" | "draft";
+  title: string;
   color: string;
   textColor: string;
   bgColor: string;
@@ -71,6 +60,7 @@ export const CYCLE_STATUS: {
   {
     label: "day left",
     value: "current",
+    title: "Active",
     color: "#F59E0B",
     textColor: "text-amber-500",
     bgColor: "bg-amber-50",
@@ -78,6 +68,7 @@ export const CYCLE_STATUS: {
   {
     label: "Yet to start",
     value: "upcoming",
+    title: "Yet to start",
     color: "#3F76FF",
     textColor: "text-blue-500",
     bgColor: "bg-indigo-50",
@@ -85,6 +76,7 @@ export const CYCLE_STATUS: {
   {
     label: "Completed",
     value: "completed",
+    title: "Completed",
     color: "#16A34A",
     textColor: "text-green-600",
     bgColor: "bg-green-50",
@@ -92,6 +84,7 @@ export const CYCLE_STATUS: {
   {
     label: "Draft",
     value: "draft",
+    title: "Draft",
     color: "#525252",
     textColor: "text-custom-text-300",
     bgColor: "bg-custom-background-90",
@@ -162,5 +155,3 @@ export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
     icon: Microscope,
   },
 ];
-
-
diff --git a/web/constants/dashboard.ts b/web/constants/dashboard.ts
index b1cfa51d73c..79ba0c1ed38 100644
--- a/web/constants/dashboard.ts
+++ b/web/constants/dashboard.ts
@@ -1,19 +1,19 @@
 import { linearGradientDef } from "@nivo/core";
 // assets
-import UpcomingIssuesDark from "public/empty-state/dashboard/dark/upcoming-issues.svg";
-import UpcomingIssuesLight from "public/empty-state/dashboard/light/upcoming-issues.svg";
-import OverdueIssuesDark from "public/empty-state/dashboard/dark/overdue-issues.svg";
-import OverdueIssuesLight from "public/empty-state/dashboard/light/overdue-issues.svg";
+import { BarChart2, Briefcase, CheckCircle, Home } from "lucide-react";
+import { ContrastIcon } from "@plane/ui";
+import { Props } from "@/components/icons/types";
 import CompletedIssuesDark from "public/empty-state/dashboard/dark/completed-issues.svg";
+import OverdueIssuesDark from "public/empty-state/dashboard/dark/overdue-issues.svg";
+import UpcomingIssuesDark from "public/empty-state/dashboard/dark/upcoming-issues.svg";
 import CompletedIssuesLight from "public/empty-state/dashboard/light/completed-issues.svg";
+import OverdueIssuesLight from "public/empty-state/dashboard/light/overdue-issues.svg";
+import UpcomingIssuesLight from "public/empty-state/dashboard/light/upcoming-issues.svg";
 // types
-import { TDurationFilterOptions, TIssuesListTypes, TStateGroups } from "@plane/types";
-import { Props } from "components/icons/types";
+import { TIssuesListTypes, TStateGroups } from "@plane/types";
 // constants
 import { EUserWorkspaceRoles } from "./workspace";
 // icons
-import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
-import { ContrastIcon } from "@plane/ui";
 
 // gradients for issues by priority widget graph bars
 export const PRIORITY_GRAPH_GRADIENTS = [
@@ -116,31 +116,44 @@ export const STATE_GROUP_GRAPH_COLORS: Record<TStateGroups, string> = {
   cancelled: "#E5484D",
 };
 
+export enum EDurationFilters {
+  NONE = "none",
+  TODAY = "today",
+  THIS_WEEK = "this_week",
+  THIS_MONTH = "this_month",
+  THIS_YEAR = "this_year",
+  CUSTOM = "custom",
+}
+
 // filter duration options
 export const DURATION_FILTER_OPTIONS: {
-  key: TDurationFilterOptions;
+  key: EDurationFilters;
   label: string;
 }[] = [
   {
-    key: "none",
+    key: EDurationFilters.NONE,
     label: "None",
   },
   {
-    key: "today",
+    key: EDurationFilters.TODAY,
     label: "Due today",
   },
   {
-    key: "this_week",
-    label: " Due this week",
+    key: EDurationFilters.THIS_WEEK,
+    label: "Due this week",
   },
   {
-    key: "this_month",
+    key: EDurationFilters.THIS_MONTH,
     label: "Due this month",
   },
   {
-    key: "this_year",
+    key: EDurationFilters.THIS_YEAR,
     label: "Due this year",
   },
+  {
+    key: EDurationFilters.CUSTOM,
+    label: "Custom",
+  },
 ];
 
 // random background colors for project cards
@@ -244,12 +257,12 @@ export const SIDEBAR_MENU_ITEMS: {
   Icon: React.FC<Props>;
 }[] = [
   {
-    key: "dashboard",
-    label: "Dashboard",
+    key: "home",
+    label: "Home",
     href: ``,
     access: EUserWorkspaceRoles.GUEST,
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}`,
-    Icon: LayoutGrid,
+    Icon: Home,
   },
   {
     key: "analytics",
diff --git a/web/constants/empty-state.ts b/web/constants/empty-state.ts
index a1b2b06f333..363147775d1 100644
--- a/web/constants/empty-state.ts
+++ b/web/constants/empty-state.ts
@@ -1,366 +1,620 @@
-// workspace empty state
-export const WORKSPACE_EMPTY_STATE_DETAILS = {
-  dashboard: {
+import { EUserProjectRoles } from "./project";
+import { EUserWorkspaceRoles } from "./workspace";
+
+export interface EmptyStateDetails {
+  key: EmptyStateType;
+  title?: string;
+  description?: string;
+  path?: string;
+  primaryButton?: {
+    icon?: React.ReactNode;
+    text: string;
+    comicBox?: {
+      title?: string;
+      description?: string;
+    };
+  };
+  secondaryButton?: {
+    icon?: React.ReactNode;
+    text: string;
+    comicBox?: {
+      title?: string;
+      description?: string;
+    };
+  };
+  accessType?: "workspace" | "project";
+  access?: EUserWorkspaceRoles | EUserProjectRoles;
+}
+
+export enum EmptyStateType {
+  WORKSPACE_DASHBOARD = "workspace-dashboard",
+  WORKSPACE_ANALYTICS = "workspace-analytics",
+  WORKSPACE_PROJECTS = "workspace-projects",
+  WORKSPACE_ALL_ISSUES = "workspace-all-issues",
+  WORKSPACE_ASSIGNED = "workspace-assigned",
+  WORKSPACE_CREATED = "workspace-created",
+  WORKSPACE_SUBSCRIBED = "workspace-subscribed",
+  WORKSPACE_CUSTOM_VIEW = "workspace-custom-view",
+  WORKSPACE_NO_PROJECTS = "workspace-no-projects",
+  WORKSPACE_SETTINGS_API_TOKENS = "workspace-settings-api-tokens",
+  WORKSPACE_SETTINGS_WEBHOOKS = "workspace-settings-webhooks",
+  WORKSPACE_SETTINGS_EXPORT = "workspace-settings-export",
+  WORKSPACE_SETTINGS_IMPORT = "workspace-settings-import",
+  PROFILE_ASSIGNED = "profile-assigned",
+  PROFILE_CREATED = "profile-created",
+  PROFILE_SUBSCRIBED = "profile-subscribed",
+  PROJECT_SETTINGS_LABELS = "project-settings-labels",
+  PROJECT_SETTINGS_INTEGRATIONS = "project-settings-integrations",
+  PROJECT_SETTINGS_ESTIMATE = "project-settings-estimate",
+  PROJECT_CYCLES = "project-cycles",
+  PROJECT_CYCLE_NO_ISSUES = "project-cycle-no-issues",
+  PROJECT_CYCLE_ACTIVE = "project-cycle-active",
+  PROJECT_CYCLE_ALL = "project-cycle-all",
+  PROJECT_CYCLE_COMPLETED_NO_ISSUES = "project-cycle-completed-no-issues",
+  PROJECT_ARCHIVED_NO_CYCLES = "project-archived-no-cycles",
+  PROJECT_EMPTY_FILTER = "project-empty-filter",
+  PROJECT_ARCHIVED_EMPTY_FILTER = "project-archived-empty-filter",
+  PROJECT_DRAFT_EMPTY_FILTER = "project-draft-empty-filter",
+  PROJECT_NO_ISSUES = "project-no-issues",
+  PROJECT_ARCHIVED_NO_ISSUES = "project-archived-no-issues",
+  PROJECT_DRAFT_NO_ISSUES = "project-draft-no-issues",
+  VIEWS_EMPTY_SEARCH = "views-empty-search",
+  PROJECTS_EMPTY_SEARCH = "projects-empty-search",
+  MEMBERS_EMPTY_SEARCH = "members-empty-search",
+  PROJECT_MODULE_ISSUES = "project-module-issues",
+  PROJECT_MODULE = "project-module",
+  PROJECT_ARCHIVED_NO_MODULES = "project-archived-no-modules",
+  PROJECT_VIEW = "project-view",
+  PROJECT_PAGE = "project-page",
+  PROJECT_PAGE_ALL = "project-page-all",
+  PROJECT_PAGE_FAVORITES = "project-page-favorites",
+  PROJECT_PAGE_PRIVATE = "project-page-private",
+  PROJECT_PAGE_SHARED = "project-page-shared",
+  PROJECT_PAGE_ARCHIVED = "project-page-archived",
+  PROJECT_PAGE_RECENT = "project-page-recent",
+
+  COMMAND_K_SEARCH_EMPTY_STATE = "command-k-search-empty-state",
+  ISSUE_RELATION_SEARCH_EMPTY_STATE = "issue-relation-search-empty-state",
+  ISSUE_RELATION_EMPTY_STATE = "issue-relation-empty-state",
+  ISSUE_COMMENT_EMPTY_STATE = "issue-comment-empty-state",
+
+  NOTIFICATION_MY_ISSUE_EMPTY_STATE = "notification-my-issues-empty-state",
+  NOTIFICATION_CREATED_EMPTY_STATE = "notification-created-empty-state",
+  NOTIFICATION_SUBSCRIBED_EMPTY_STATE = "notification-subscribed-empty-state",
+  NOTIFICATION_ARCHIVED_EMPTY_STATE = "notification-archived-empty-state",
+  NOTIFICATION_SNOOZED_EMPTY_STATE = "notification-snoozed-empty-state",
+  NOTIFICATION_UNREAD_EMPTY_STATE = "notification-unread-empty-state",
+
+  ACTIVE_CYCLE_PROGRESS_EMPTY_STATE = "active-cycle-progress-empty-state",
+  ACTIVE_CYCLE_CHART_EMPTY_STATE = "active-cycle-chart-empty-state",
+  ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE = "active-cycle-priority-issue-empty-state",
+  ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE = "active-cycle-assignee-empty-state",
+  ACTIVE_CYCLE_LABEL_EMPTY_STATE = "active-cycle-label-empty-state",
+}
+
+const emptyStateDetails = {
+  // workspace
+  [EmptyStateType.WORKSPACE_DASHBOARD]: {
+    key: EmptyStateType.WORKSPACE_DASHBOARD,
     title: "Overview of your projects, activity, and metrics",
     description:
       " Welcome to Plane, we are excited to have you here. Create your first project and track your issues, and this page will transform into a space that helps you progress. Admins will also see items which help their team progress.",
+    path: "/empty-state/onboarding/dashboard",
+    // path: "/empty-state/onboarding/",
     primaryButton: {
       text: "Build your first project",
+      comicBox: {
+        title: "Everything starts with a project in Plane",
+        description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
+      },
     },
-    comicBox: {
-      title: "Everything starts with a project in Plane",
-      description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
-    },
+
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  analytics: {
+  [EmptyStateType.WORKSPACE_ANALYTICS]: {
+    key: EmptyStateType.WORKSPACE_ANALYTICS,
     title: "Track progress, workloads, and allocations. Spot trends, remove blockers, and move work faster",
     description:
       "See scope versus demand, estimates, and scope creep. Get performance by team members and teams, and make sure your project runs on time.",
+    path: "/empty-state/onboarding/analytics",
     primaryButton: {
       text: "Create Cycles and Modules first",
+      comicBox: {
+        title: "Analytics works best with Cycles + Modules",
+        description:
+          "First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.",
+      },
     },
-    comicBox: {
-      title: "Analytics works best with Cycles + Modules",
-      description:
-        "First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.",
-    },
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  projects: {
-    title: "Start a Project",
+  [EmptyStateType.WORKSPACE_PROJECTS]: {
+    key: EmptyStateType.WORKSPACE_PROJECTS,
+    title: "No active projects",
     description:
-      "Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live and, along with your colleagues, help you achieve that goal.",
+      "Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live and, along with your colleagues, help you achieve that goal. Create a new project or filter for archived projects.",
+    path: "/empty-state/onboarding/projects",
     primaryButton: {
       text: "Start your first project",
+      comicBox: {
+        title: "Everything starts with a project in Plane",
+        description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
+      },
     },
-    comicBox: {
-      title: "Everything starts with a project in Plane",
-      description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
-    },
-  },
-  "assigned-notification": {
-    key: "assigned-notification",
-    title: "No issues assigned",
-    description: "Updates for issues assigned to you can be seen here",
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  "created-notification": {
-    key: "created-notification",
-    title: "No updates to issues",
-    description: "Updates to issues created by you can be seen here",
-  },
-  "subscribed-notification": {
-    key: "subscribed-notification",
-    title: "No updates to issues",
-    description: "Updates to any issue you are subscribed to can be seen here",
-  },
-};
-
-export const ALL_ISSUES_EMPTY_STATE_DETAILS = {
-  "all-issues": {
-    key: "all-issues",
+  // all-issues
+  [EmptyStateType.WORKSPACE_ALL_ISSUES]: {
+    key: EmptyStateType.WORKSPACE_ALL_ISSUES,
     title: "No issues in the project",
     description: "First project done! Now, slice your work into trackable pieces with issues. Let's go!",
+    path: "/empty-state/all-issues/all-issues",
+    primaryButton: {
+      text: "Create new issue",
+    },
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  assigned: {
-    key: "assigned",
+  [EmptyStateType.WORKSPACE_ASSIGNED]: {
+    key: EmptyStateType.WORKSPACE_ASSIGNED,
     title: "No issues yet",
     description: "Issues assigned to you can be tracked from here.",
+    path: "/empty-state/all-issues/assigned",
+    primaryButton: {
+      text: "Create new issue",
+    },
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  created: {
-    key: "created",
+  [EmptyStateType.WORKSPACE_CREATED]: {
+    key: EmptyStateType.WORKSPACE_CREATED,
     title: "No issues yet",
     description: "All issues created by you come here, track them here directly.",
+    path: "/empty-state/all-issues/created",
+    primaryButton: {
+      text: "Create new issue",
+    },
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  subscribed: {
-    key: "subscribed",
+  [EmptyStateType.WORKSPACE_SUBSCRIBED]: {
+    key: EmptyStateType.WORKSPACE_SUBSCRIBED,
     title: "No issues yet",
     description: "Subscribe to issues you are interested in, track all of them here.",
+    path: "/empty-state/all-issues/subscribed",
   },
-  "custom-view": {
-    key: "custom-view",
+  [EmptyStateType.WORKSPACE_CUSTOM_VIEW]: {
+    key: EmptyStateType.WORKSPACE_CUSTOM_VIEW,
     title: "No issues yet",
     description: "Issues that applies to the filters, track all of them here.",
+    path: "/empty-state/all-issues/custom-view",
   },
-};
-
-export const SEARCH_EMPTY_STATE_DETAILS = {
-  views: {
-    key: "views",
-    title: "No matching views",
-    description: "No views match the search criteria. Create a new view instead.",
-  },
-  projects: {
-    key: "projects",
-    title: "No matching projects",
-    description: "No projects detected with the matching criteria. Create a new project instead.",
-  },
-  commandK: {
-    key: "commandK",
-    title: "No results found. ",
-  },
-  members: {
-    key: "members",
-    title: "No matching members",
-    description: "Add them to the project if they are already a part of the workspace",
+  [EmptyStateType.WORKSPACE_NO_PROJECTS]: {
+    key: EmptyStateType.WORKSPACE_NO_PROJECTS,
+    title: "No project",
+    description: "To create issues or manage your work, you need to create a project or be a part of one.",
+    path: "/empty-state/onboarding/projects",
+    primaryButton: {
+      text: "Start your first project",
+      comicBox: {
+        title: "Everything starts with a project in Plane",
+        description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
+      },
+    },
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-};
-
-export const WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS = {
-  "api-tokens": {
-    key: "api-tokens",
+  // workspace settings
+  [EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS]: {
+    key: EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS,
     title: "No API tokens created",
     description:
       "Plane APIs can be used to integrate your data in Plane with any external system. Create a token to get started.",
+    path: "/empty-state/workspace-settings/api-tokens",
   },
-  webhooks: {
-    key: "webhooks",
+  [EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS]: {
+    key: EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS,
     title: "No webhooks added",
     description: "Create webhooks to receive real-time updates and automate actions.",
+    path: "/empty-state/workspace-settings/webhooks",
   },
-  export: {
-    key: "export",
+  [EmptyStateType.WORKSPACE_SETTINGS_EXPORT]: {
+    key: EmptyStateType.WORKSPACE_SETTINGS_EXPORT,
     title: "No previous exports yet",
     description: "Anytime you export, you will also have a copy here for reference.",
+    path: "/empty-state/workspace-settings/exports",
   },
-  import: {
-    key: "export",
+  [EmptyStateType.WORKSPACE_SETTINGS_IMPORT]: {
+    key: EmptyStateType.WORKSPACE_SETTINGS_IMPORT,
     title: "No previous imports yet",
     description: "Find all your previous imports here and download them.",
+    path: "/empty-state/workspace-settings/imports",
   },
-};
-
-//  profile empty state
-export const PROFILE_EMPTY_STATE_DETAILS = {
-  assigned: {
-    key: "assigned",
+  // profile
+  [EmptyStateType.PROFILE_ASSIGNED]: {
+    key: EmptyStateType.PROFILE_ASSIGNED,
     title: "No issues are assigned to you",
     description: "Issues assigned to you can be tracked from here.",
+    path: "/empty-state/profile/assigned",
   },
-  subscribed: {
-    key: "created",
+  [EmptyStateType.PROFILE_CREATED]: {
+    key: EmptyStateType.PROFILE_CREATED,
     title: "No issues yet",
     description: "All issues created by you come here, track them here directly.",
+    path: "/empty-state/profile/created",
   },
-  created: {
-    key: "subscribed",
+  [EmptyStateType.PROFILE_SUBSCRIBED]: {
+    key: EmptyStateType.PROFILE_SUBSCRIBED,
     title: "No issues yet",
     description: "Subscribe to issues you are interested in, track all of them here.",
+    path: "/empty-state/profile/subscribed",
   },
-};
-
-// project empty state
-
-export const PROJECT_SETTINGS_EMPTY_STATE_DETAILS = {
-  labels: {
-    key: "labels",
+  // project settings
+  [EmptyStateType.PROJECT_SETTINGS_LABELS]: {
+    key: EmptyStateType.PROJECT_SETTINGS_LABELS,
     title: "No labels yet",
     description: "Create labels to help organize and filter issues in you project.",
+    path: "/empty-state/project-settings/labels",
   },
-  integrations: {
-    key: "integrations",
+  [EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS]: {
+    key: EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS,
     title: "No integrations configured",
     description: "Configure GitHub and other integrations to sync your project issues.",
+    path: "/empty-state/project-settings/integrations",
   },
-  estimate: {
-    key: "estimate",
+  [EmptyStateType.PROJECT_SETTINGS_ESTIMATE]: {
+    key: EmptyStateType.PROJECT_SETTINGS_ESTIMATE,
     title: "No estimates added",
     description: "Create a set of estimates to communicate the amount of work per issue.",
+    path: "/empty-state/project-settings/estimates",
   },
-};
-
-export const CYCLE_EMPTY_STATE_DETAILS = {
-  cycles: {
+  // project cycles
+  [EmptyStateType.PROJECT_CYCLES]: {
+    key: EmptyStateType.PROJECT_CYCLES,
     title: "Group and timebox your work in Cycles.",
     description:
       "Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team.",
-    comicBox: {
-      title: "Cycles are repetitive time-boxes.",
-      description:
-        "A sprint, an iteration, and or any other term you use for weekly or fortnightly tracking of work is a cycle.",
-    },
+    path: "/empty-state/onboarding/cycles",
     primaryButton: {
       text: "Set your first cycle",
+      comicBox: {
+        title: "Cycles are repetitive time-boxes.",
+        description:
+          "A sprint, an iteration, and or any other term you use for weekly or fortnightly tracking of work is a cycle.",
+      },
     },
+    accessType: "workspace",
+    access: EUserWorkspaceRoles.MEMBER,
   },
-  "no-issues": {
-    key: "no-issues",
+  [EmptyStateType.PROJECT_CYCLE_NO_ISSUES]: {
+    key: EmptyStateType.PROJECT_CYCLE_NO_ISSUES,
     title: "No issues added to the cycle",
     description: "Add or create issues you wish to timebox and deliver within this cycle",
+    path: "/empty-state/cycle-issues/",
     primaryButton: {
       text: "Create new issue ",
     },
     secondaryButton: {
       text: "Add an existing issue",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-  active: {
-    key: "active",
-    title: "No active cycles",
+  [EmptyStateType.PROJECT_CYCLE_ACTIVE]: {
+    key: EmptyStateType.PROJECT_CYCLE_ACTIVE,
+    title: "No active cycle",
     description:
       "An active cycle includes any period that encompasses today's date within its range. Find the progress and details of the active cycle here.",
+    path: "/empty-state/cycle/active",
   },
-  upcoming: {
-    key: "upcoming",
-    title: "No upcoming cycles",
-    description: "Upcoming cycles on deck! Just add dates to cycles in draft, and they'll show up right here.",
-  },
-  completed: {
-    key: "completed",
-    title: "No completed cycles",
-    description: "Any cycle with a past due date is considered completed. Explore all completed cycles here.",
-  },
-  draft: {
-    key: "draft",
-    title: "No draft cycles",
-    description: "No dates added in cycles? Find them here as drafts.",
+  [EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES]: {
+    key: EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES,
+    title: "No issues in the cycle",
+    description:
+      "No issues in the cycle. Issues are either transferred or hidden. To see hidden issues if any, update your display properties accordingly.",
+    path: "/empty-state/cycle/completed-no-issues",
+  },
+  [EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES]: {
+    key: EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES,
+    title: "No archived cycles yet",
+    description: "To tidy up your project, archive completed cycles. Find them here once archived.",
+    path: "/empty-state/archived/empty-cycles",
+  },
+  [EmptyStateType.PROJECT_CYCLE_ALL]: {
+    key: EmptyStateType.PROJECT_CYCLE_ALL,
+    title: "No cycles",
+    description:
+      "An active cycle includes any period that encompasses today's date within its range. Find the progress and details of the active cycle here.",
+    path: "/empty-state/cycle/active",
   },
-};
-
-export const EMPTY_FILTER_STATE_DETAILS = {
-  archived: {
-    key: "archived",
+  // empty filters
+  [EmptyStateType.PROJECT_EMPTY_FILTER]: {
+    key: EmptyStateType.PROJECT_EMPTY_FILTER,
     title: "No issues found matching the filters applied",
+    path: "/empty-state/empty-filters/",
     secondaryButton: {
       text: "Clear all filters",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-  draft: {
-    key: "draft",
+  [EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER]: {
+    key: EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER,
     title: "No issues found matching the filters applied",
+    path: "/empty-state/empty-filters/",
     secondaryButton: {
       text: "Clear all filters",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-  project: {
-    key: "project",
+  [EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER]: {
+    key: EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER,
     title: "No issues found matching the filters applied",
+    path: "/empty-state/empty-filters/",
     secondaryButton: {
       text: "Clear all filters",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-};
-
-export const EMPTY_ISSUE_STATE_DETAILS = {
-  archived: {
-    key: "archived",
+  //  project issues
+  [EmptyStateType.PROJECT_NO_ISSUES]: {
+    key: EmptyStateType.PROJECT_NO_ISSUES,
+    title: "Create an issue and assign it to someone, even yourself",
+    description:
+      "Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal.",
+    path: "/empty-state/onboarding/issues",
+    primaryButton: {
+      text: "Create your first issue",
+      comicBox: {
+        title: "Issues are building blocks in Plane.",
+        description:
+          "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
+      },
+    },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
+  },
+  [EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES]: {
+    key: EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES,
     title: "No archived issues yet",
     description:
-      "Archived issues help you remove issues you completed or canceled from focus. You can set automation to auto archive issues and find them here.",
+      "Manually or through automation, you can archive issues that are completed or cancelled. Find them here once archived.",
+    path: "/empty-state/archived/empty-issues",
     primaryButton: {
       text: "Set automation",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-  draft: {
-    key: "draft",
+  [EmptyStateType.PROJECT_DRAFT_NO_ISSUES]: {
+    key: EmptyStateType.PROJECT_DRAFT_NO_ISSUES,
     title: "No draft issues yet",
     description:
       "Quickly stepping away but want to keep your place? No worries – save a draft now. Your issues will be right here waiting for you.",
+    path: "/empty-state/draft/draft-issues-empty",
   },
-  project: {
-    key: "project",
-    title: "Create an issue and assign it to someone, even yourself",
-    description:
-      "Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal.",
-    comicBox: {
-      title: "Issues are building blocks in Plane.",
-      description:
-        "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
-    },
-    primaryButton: {
-      text: "Create your first issue",
-    },
+  [EmptyStateType.VIEWS_EMPTY_SEARCH]: {
+    key: EmptyStateType.VIEWS_EMPTY_SEARCH,
+    title: "No matching views",
+    description: "No views match the search criteria. Create a new view instead.",
+    path: "/empty-state/search/search",
   },
-};
-
-export const MODULE_EMPTY_STATE_DETAILS = {
-  "no-issues": {
-    key: "no-issues",
+  [EmptyStateType.PROJECTS_EMPTY_SEARCH]: {
+    key: EmptyStateType.PROJECTS_EMPTY_SEARCH,
+    title: "No matching projects",
+    description: "No projects detected with the matching criteria. Create a new project instead.",
+    path: "/empty-state/search/project",
+  },
+  [EmptyStateType.MEMBERS_EMPTY_SEARCH]: {
+    key: EmptyStateType.MEMBERS_EMPTY_SEARCH,
+    title: "No matching members",
+    description: "Add them to the project if they are already a part of the workspace",
+    path: "/empty-state/search/member",
+  },
+  // project module
+  [EmptyStateType.PROJECT_MODULE_ISSUES]: {
+    key: EmptyStateType.PROJECT_MODULE_ISSUES,
     title: "No issues in the module",
     description: "Create or add issues which you want to accomplish as part of this module",
+    path: "/empty-state/module-issues/",
     primaryButton: {
       text: "Create new issue ",
     },
     secondaryButton: {
       text: "Add an existing issue",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-  modules: {
+  [EmptyStateType.PROJECT_MODULE]: {
+    key: EmptyStateType.PROJECT_MODULE,
     title: "Map your project milestones to Modules and track aggregated work easily.",
     description:
       "A group of issues that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. They have their own periods and deadlines as well as analytics to help you see how close or far you are from a milestone.",
-
-    comicBox: {
-      title: "Modules help group work by hierarchy.",
-      description: "A cart module, a chassis module, and a warehouse module are all good example of this grouping.",
-    },
+    path: "/empty-state/onboarding/modules",
     primaryButton: {
       text: "Build your first module",
+      comicBox: {
+        title: "Modules help group work by hierarchy.",
+        description: "A cart module, a chassis module, and a warehouse module are all good example of this grouping.",
+      },
     },
-  },
-};
-
-export const VIEW_EMPTY_STATE_DETAILS = {
-  "project-views": {
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
+  },
+  [EmptyStateType.PROJECT_ARCHIVED_NO_MODULES]: {
+    key: EmptyStateType.PROJECT_ARCHIVED_NO_MODULES,
+    title: "No archived Modules yet",
+    description: "To tidy up your project, archive completed or cancelled modules. Find them here once archived.",
+    path: "/empty-state/archived/empty-modules",
+  },
+  // project views
+  [EmptyStateType.PROJECT_VIEW]: {
+    key: EmptyStateType.PROJECT_VIEW,
     title: "Save filtered views for your project. Create as many as you need",
     description:
       "Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best.",
-    comicBox: {
-      title: "Views work atop Issue properties.",
-      description: "You can create a view from here with as many properties as filters as you see fit.",
-    },
+    path: "/empty-state/onboarding/views",
     primaryButton: {
       text: "Create your first view",
+      comicBox: {
+        title: "Views work atop Issue properties.",
+        description: "You can create a view from here with as many properties as filters as you see fit.",
+      },
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-};
-
-export const PAGE_EMPTY_STATE_DETAILS = {
-  pages: {
-    key: "pages",
+  // project pages
+  [EmptyStateType.PROJECT_PAGE]: {
+    key: EmptyStateType.PROJECT_PAGE,
     title: "Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started",
     description:
       "Pages are thoughts potting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button.",
+    path: "/empty-state/onboarding/pages",
     primaryButton: {
       text: "Create your first page",
+      comicBox: {
+        title: "A page can be a doc or a doc of docs.",
+        description:
+          "We wrote Nikhil and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
+      },
     },
-    comicBox: {
-      title: "A page can be a doc or a doc of docs.",
-      description:
-        "We wrote Nikhil and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
-    },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
   },
-  All: {
-    key: "all",
+  [EmptyStateType.PROJECT_PAGE_ALL]: {
+    key: EmptyStateType.PROJECT_PAGE_ALL,
     title: "Write a note, a doc, or a full knowledge base",
     description:
       "Pages help you organise your thoughts to create wikis, discussions or even document heated takes for your project. Use it wisely!",
+    path: "/empty-state/pages/all",
   },
-  Favorites: {
-    key: "favorites",
+  [EmptyStateType.PROJECT_PAGE_FAVORITES]: {
+    key: EmptyStateType.PROJECT_PAGE_FAVORITES,
     title: "No favorite pages yet",
     description: "Favorites for quick access? mark them and find them right here.",
+    path: "/empty-state/pages/favorites",
   },
-  Private: {
-    key: "private",
+  [EmptyStateType.PROJECT_PAGE_PRIVATE]: {
+    key: EmptyStateType.PROJECT_PAGE_PRIVATE,
     title: "No private pages yet",
     description: "Keep your private thoughts here. When you're ready to share, the team's just a click away.",
+    path: "/empty-state/pages/private",
   },
-  Shared: {
-    key: "shared",
+  [EmptyStateType.PROJECT_PAGE_SHARED]: {
+    key: EmptyStateType.PROJECT_PAGE_SHARED,
     title: "No shared pages yet",
     description: "See pages shared with everyone in your project right here.",
+    path: "/empty-state/pages/shared",
   },
-  Archived: {
-    key: "archived",
+  [EmptyStateType.PROJECT_PAGE_ARCHIVED]: {
+    key: EmptyStateType.PROJECT_PAGE_ARCHIVED,
     title: "No archived pages yet",
     description: "Archive pages not on your radar. Access them here when needed.",
+    path: "/empty-state/pages/archived",
   },
-  Recent: {
-    key: "recent",
+  [EmptyStateType.PROJECT_PAGE_RECENT]: {
+    key: EmptyStateType.PROJECT_PAGE_RECENT,
     title: "Write a note, a doc, or a full knowledge base",
     description:
       "Pages help you organise your thoughts to create wikis, discussions or even document heated takes for your project. Use it wisely! Pages will be sorted and grouped by last updated",
+    path: "/empty-state/pages/recent",
     primaryButton: {
       text: "Create new page",
     },
+    accessType: "project",
+    access: EUserProjectRoles.MEMBER,
+  },
+
+  [EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE]: {
+    key: EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE,
+    title: "No results found",
+    path: "/empty-state/search/search",
+  },
+  [EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE]: {
+    key: EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE,
+    title: "No maching issues found",
+    path: "/empty-state/search/search",
+  },
+  [EmptyStateType.ISSUE_RELATION_EMPTY_STATE]: {
+    key: EmptyStateType.ISSUE_RELATION_EMPTY_STATE,
+    title: "No issues found",
+    path: "/empty-state/search/issues",
+  },
+  [EmptyStateType.ISSUE_COMMENT_EMPTY_STATE]: {
+    key: EmptyStateType.ISSUE_COMMENT_EMPTY_STATE,
+    title: "No comments yet",
+    description: "Comments can be used as a discussion and follow-up space for the issues",
+    path: "/empty-state/search/comments",
+  },
+
+  [EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE]: {
+    key: EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE,
+    title: "No issues assigned",
+    description: "Updates for issues assigned to you can be \n seen here",
+    path: "/empty-state/search/notification",
   },
-};
+
+  [EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE]: {
+    key: EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE,
+    title: "No updates to issues",
+    description: "Updates to issues created by you can be \n seen here",
+    path: "/empty-state/search/notification",
+  },
+  [EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE]: {
+    key: EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE,
+    title: "No updates to issues",
+    description: "Updates to any issue you are \n subscribed to can be seen here",
+    path: "/empty-state/search/notification",
+  },
+  [EmptyStateType.NOTIFICATION_UNREAD_EMPTY_STATE]: {
+    key: EmptyStateType.NOTIFICATION_UNREAD_EMPTY_STATE,
+    title: "No unread notifications",
+    description: "Congratulations, you are up-to-date \n with everything happening in the issues \n you care about",
+    path: "/empty-state/search/notification",
+  },
+  [EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE]: {
+    key: EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE,
+    title: "No snoozed notifications yet",
+    description: "Any notification you snooze for later will \n be available here to act upon",
+    path: "/empty-state/search/snooze",
+  },
+  [EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE]: {
+    key: EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE,
+    title: "No archived notifications yet",
+    description: "Any notification you archive will be \n available here to help you focus",
+    path: "/empty-state/search/archive",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE,
+    title: "Add issues to the cycle to view it's \n progress",
+    path: "/empty-state/active-cycle/progress",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE,
+    title: "Add issues to the cycle to view the \n burndown chart.",
+    path: "/empty-state/active-cycle/chart",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE,
+    title: "Observe high priority issues tackled in \n the cycle at a glance.",
+    path: "/empty-state/active-cycle/priority",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE,
+    title: "Add assignees to issues to see a \n breakdown of work by assignees.",
+    path: "/empty-state/active-cycle/assignee",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE,
+    title: "Add labels to issues to see the \n breakdown of work by labels.",
+    path: "/empty-state/active-cycle/label",
+  },
+} as const;
+
+export const EMPTY_STATE_DETAILS: Record<EmptyStateType, EmptyStateDetails> = emptyStateDetails;
diff --git a/web/constants/event-tracker.ts b/web/constants/event-tracker.ts
index 37a18a37db6..7edfccba5f4 100644
--- a/web/constants/event-tracker.ts
+++ b/web/constants/event-tracker.ts
@@ -112,16 +112,16 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
       updated_from: props.path?.includes("workspace-views")
         ? "All views"
         : props.path?.includes("cycles")
-        ? "Cycle"
-        : props.path?.includes("modules")
-        ? "Module"
-        : props.path?.includes("views")
-        ? "Project view"
-        : props.path?.includes("inbox")
-        ? "Inbox"
-        : props.path?.includes("draft")
-        ? "Draft"
-        : "Project",
+          ? "Cycle"
+          : props.path?.includes("modules")
+            ? "Module"
+            : props.path?.includes("views")
+              ? "Project view"
+              : props.path?.includes("inbox")
+                ? "Inbox"
+                : props.path?.includes("draft")
+                  ? "Draft"
+                  : "Project",
     };
   }
   return eventPayload;
diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts
index 86386e9683c..2a4e1827d85 100644
--- a/web/constants/fetch-keys.ts
+++ b/web/constants/fetch-keys.ts
@@ -1,4 +1,4 @@
-import { objToQueryParams } from "helpers/string.helper";
+import { objToQueryParams } from "@/helpers/string.helper";
 import { IAnalyticsParams, IJiraMetadata, INotificationParams } from "@plane/types";
 
 const paramsToKey = (params: any) => {
@@ -164,7 +164,7 @@ export const USER_ISSUES = (workspaceSlug: string, params: any) => {
 
   return `USER_ISSUES_${workspaceSlug.toUpperCase()}_${paramsKey}`;
 };
-export const USER_ACTIVITY = "USER_ACTIVITY";
+export const USER_ACTIVITY = (params: { cursor?: string }) => `USER_ACTIVITY_${params?.cursor}`;
 export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
   `USER_WORKSPACE_DASHBOARD_${workspaceSlug.toUpperCase()}`;
 export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId.toUpperCase()}`;
@@ -284,8 +284,13 @@ export const getPaginatedNotificationKey = (index: number, prevData: any, worksp
 // 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_ACTIVITY = (
+  workspaceSlug: string,
+  userId: string,
+  params: {
+    cursor?: string;
+  }
+) => `USER_WORKSPACE_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${params?.cursor}`;
 export const USER_PROFILE_PROJECT_SEGREGATION = (workspaceSlug: string, userId: string) =>
   `USER_PROFILE_PROJECT_SEGREGATION_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
 export const USER_PROFILE_ISSUES = (workspaceSlug: string, userId: string, params: any) => {
diff --git a/web/constants/filters.ts b/web/constants/filters.ts
index e4131e451a4..6ac961bb947 100644
--- a/web/constants/filters.ts
+++ b/web/constants/filters.ts
@@ -1,4 +1,4 @@
-export const DATE_FILTER_OPTIONS = [
+export const DATE_AFTER_FILTER_OPTIONS = [
   {
     name: "1 week from now",
     value: "1_weeks;after;fromnow",
@@ -16,3 +16,18 @@ export const DATE_FILTER_OPTIONS = [
     value: "2_months;after;fromnow",
   },
 ];
+
+export const DATE_BEFORE_FILTER_OPTIONS = [
+  {
+    name: "1 week ago",
+    value: "1_weeks;before;fromnow",
+  },
+  {
+    name: "2 weeks ago",
+    value: "2_weeks;before;fromnow",
+  },
+  {
+    name: "1 month ago",
+    value: "1_months;before;fromnow",
+  },
+];
diff --git a/web/constants/inbox.tsx b/web/constants/inbox.tsx
index 61c417eafa7..b511b529e4c 100644
--- a/web/constants/inbox.tsx
+++ b/web/constants/inbox.tsx
@@ -1,14 +1,19 @@
 // icons
 import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, LucideIcon, XCircle } from "lucide-react";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderFormattedDate } from "@/helpers/date-time.helper";
 
 export const INBOX_STATUS: {
   key: string;
   status: number;
   icon: LucideIcon;
   title: string;
-  description: (workspaceSlug: string, projectId: string, issueId: string, snoozedTillDate: Date) => JSX.Element;
+  description: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    snoozedTillDate: Date | undefined
+  ) => JSX.Element;
   textColor: (snoozeDatePassed: boolean) => string;
   bgColor: (snoozeDatePassed: boolean) => string;
   borderColor: (snoozeDatePassed: boolean) => string;
diff --git a/web/constants/module.ts b/web/constants/module.ts
index ef4a719dae5..544e810ac64 100644
--- a/web/constants/module.ts
+++ b/web/constants/module.ts
@@ -1,6 +1,6 @@
 import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
 // types
-import { TModuleStatus } from "@plane/types";
+import { TModuleLayoutOptions, TModuleOrderByOptions, TModuleStatus } from "@plane/types";
 
 export const MODULE_STATUS: {
   label: string;
@@ -53,20 +53,43 @@ export const MODULE_STATUS: {
   },
 ];
 
-export const MODULE_VIEW_LAYOUTS: { key: "list" | "grid" | "gantt_chart"; icon: any; title: string }[] = [
+export const MODULE_VIEW_LAYOUTS: { key: TModuleLayoutOptions; icon: any; title: string }[] = [
   {
     key: "list",
     icon: List,
     title: "List layout",
   },
   {
-    key: "grid",
+    key: "board",
     icon: LayoutGrid,
     title: "Grid layout",
   },
   {
-    key: "gantt_chart",
+    key: "gantt",
     icon: GanttChartSquare,
     title: "Gantt layout",
   },
 ];
+
+export const MODULE_ORDER_BY_OPTIONS: { key: TModuleOrderByOptions; label: string }[] = [
+  {
+    key: "name",
+    label: "Name",
+  },
+  {
+    key: "progress",
+    label: "Progress",
+  },
+  {
+    key: "issues_length",
+    label: "Number of issues",
+  },
+  {
+    key: "target_date",
+    label: "Due date",
+  },
+  {
+    key: "created_at",
+    label: "Created date",
+  },
+];
diff --git a/web/constants/profile.ts b/web/constants/profile.ts
index 463fd27eed9..4d8e37640a2 100644
--- a/web/constants/profile.ts
+++ b/web/constants/profile.ts
@@ -63,4 +63,9 @@ export const PROFILE_ADMINS_TAB = [
     label: "Subscribed",
     selected: "/[workspaceSlug]/profile/[userId]/subscribed",
   },
+  {
+    route: "activity",
+    label: "Activity",
+    selected: "/[workspaceSlug]/profile/[userId]/activity",
+  },
 ];
diff --git a/web/constants/project.ts b/web/constants/project.ts
index 6073e96be15..1715c0e82cf 100644
--- a/web/constants/project.ts
+++ b/web/constants/project.ts
@@ -1,8 +1,9 @@
 // icons
 import { Globe2, Lock, LucideIcon } from "lucide-react";
-import { SettingIcon } from "components/icons";
+import { TProjectAppliedDisplayFilterKeys, TProjectOrderByOptions } from "@plane/types";
+import { SettingIcon } from "@/components/icons";
 // types
-import { Props } from "components/icons/types";
+import { Props } from "@/components/icons/types";
 
 export enum EUserProjectRoles {
   GUEST = 5,
@@ -39,23 +40,6 @@ export const GROUP_CHOICES = {
   cancelled: "Cancelled",
 };
 
-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 },
@@ -131,14 +115,6 @@ export const PROJECT_SETTINGS_LINKS: {
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels`,
     Icon: SettingIcon,
   },
-  {
-    key: "integrations",
-    label: "Integrations",
-    href: `/settings/integrations`,
-    access: EUserProjectRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
-    Icon: SettingIcon,
-  },
   {
     key: "estimates",
     label: "Estimates",
@@ -156,3 +132,39 @@ export const PROJECT_SETTINGS_LINKS: {
     Icon: SettingIcon,
   },
 ];
+
+export const PROJECT_ORDER_BY_OPTIONS: {
+  key: TProjectOrderByOptions;
+  label: string;
+}[] = [
+  {
+    key: "sort_order",
+    label: "Manual",
+  },
+  {
+    key: "name",
+    label: "Name",
+  },
+  {
+    key: "created_at",
+    label: "Created date",
+  },
+  {
+    key: "members_length",
+    label: "Number of members",
+  },
+];
+
+export const PROJECT_DISPLAY_FILTER_OPTIONS: {
+  key: TProjectAppliedDisplayFilterKeys;
+  label: string;
+}[] = [
+  {
+    key: "my_projects",
+    label: "My projects",
+  },
+  {
+    key: "archived_projects",
+    label: "Archived",
+  },
+];
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index aa588d9e1a2..bad135994bf 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -1,8 +1,7 @@
-import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
-import { LayersIcon, DoubleCircleIcon, UserGroupIcon, DiceIcon, ContrastIcon } from "@plane/ui";
-import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock } from "lucide-react";
 import { FC } from "react";
 import { ISvgIcons } from "@plane/ui/src/icons/type";
+import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock } from "lucide-react";
+import { LayersIcon, DoubleCircleIcon, UserGroupIcon, DiceIcon, ContrastIcon } from "@plane/ui";
 import {
   SpreadsheetAssigneeColumn,
   SpreadsheetAttachmentColumn,
@@ -18,7 +17,8 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetSubIssueColumn,
   SpreadsheetUpdatedOnColumn,
-} from "components/issues/issue-layouts/spreadsheet";
+} from "@/components/issues/issue-layouts/spreadsheet";
+import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
 
 export const SPREADSHEET_PROPERTY_DETAILS: {
   [key: string]: {
diff --git a/web/constants/workspace.ts b/web/constants/workspace.ts
index 1471de3958c..cbb8d232418 100644
--- a/web/constants/workspace.ts
+++ b/web/constants/workspace.ts
@@ -1,14 +1,14 @@
 // services images
-import GithubLogo from "public/services/github.png";
-import JiraLogo from "public/services/jira.svg";
+import { SettingIcon } from "@/components/icons";
+import { Props } from "@/components/icons/types";
 import CSVLogo from "public/services/csv.svg";
 import ExcelLogo from "public/services/excel.svg";
+import GithubLogo from "public/services/github.png";
+import JiraLogo from "public/services/jira.svg";
 import JSONLogo from "public/services/json.svg";
 // types
 import { TStaticViewTypes } from "@plane/types";
-import { Props } from "components/icons/types";
 // icons
-import { SettingIcon } from "components/icons";
 
 export enum EUserWorkspaceRoles {
   GUEST = 5,
@@ -149,22 +149,6 @@ export const WORKSPACE_SETTINGS_LINKS: {
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing`,
     Icon: SettingIcon,
   },
-  {
-    key: "integrations",
-    label: "Integrations",
-    href: `/settings/integrations`,
-    access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/integrations`,
-    Icon: SettingIcon,
-  },
-  {
-    key: "import",
-    label: "Imports",
-    href: `/settings/imports`,
-    access: EUserWorkspaceRoles.ADMIN,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/imports`,
-    Icon: SettingIcon,
-  },
   {
     key: "export",
     label: "Exports",
diff --git a/web/contexts/store-context.tsx b/web/contexts/store-context.tsx
index b408ec98d6e..7bf6d83fa16 100644
--- a/web/contexts/store-context.tsx
+++ b/web/contexts/store-context.tsx
@@ -1,6 +1,6 @@
 import { createContext } from "react";
 // mobx store
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 
 let rootStore = new RootStore();
 
diff --git a/web/contexts/toast.context.tsx b/web/contexts/toast.context.tsx
deleted file mode 100644
index 30e100b209b..00000000000
--- a/web/contexts/toast.context.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { createContext, useCallback, useReducer } from "react";
-// uuid
-import { v4 as uuid } from "uuid";
-// components
-import ToastAlert from "components/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/web/contexts/user-notification-context.tsx b/web/contexts/user-notification-context.tsx
index b55a05771e7..057e0703e99 100644
--- a/web/contexts/user-notification-context.tsx
+++ b/web/contexts/user-notification-context.tsx
@@ -3,9 +3,9 @@ import { createContext, useCallback, useEffect, useReducer } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
-import { NotificationService } from "services/notification.service";
+import { UNREAD_NOTIFICATIONS_COUNT, USER_WORKSPACE_NOTIFICATIONS } from "@/constants/fetch-keys";
+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 "@plane/types";
 
@@ -91,7 +91,7 @@ const UserNotificationContextProvider: React.FC<{
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const { selectedTab, snoozed, archived, readNotification, selectedNotificationForSnooze } = state;
+  const { selectedTab, snoozed, archived, readNotification } = state;
 
   const params = {
     type: snoozed || archived || readNotification ? undefined : selectedTab,
@@ -207,7 +207,7 @@ const UserNotificationContextProvider: React.FC<{
       (previousNotifications: any) =>
         previousNotifications?.map((notification: any) =>
           notification.id === notificationId
-            ? { ...notification, snoozed_till: isSnoozed ? null : new Date(dateTime!) }
+            ? { ...notification, snoozed_till: isSnoozed ? null : dateTime }
             : notification
         ) || [],
       false
diff --git a/web/helpers/analytics.helper.ts b/web/helpers/analytics.helper.ts
index 58a456ed730..781d16f2911 100644
--- a/web/helpers/analytics.helper.ts
+++ b/web/helpers/analytics.helper.ts
@@ -1,13 +1,13 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // helpers
-import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
+import { DATE_KEYS } from "@/constants/analytics";
+import { MONTHS_LIST } from "@/constants/calendar";
+import { STATE_GROUPS } from "@/constants/state";
+import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "@/helpers/string.helper";
 // types
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse, TStateGroups } from "@plane/types";
 // constants
-import { STATE_GROUPS } from "constants/state";
-import { MONTHS_LIST } from "constants/calendar";
-import { DATE_KEYS } from "constants/analytics";
 
 export const convertResponseToBarGraphData = (
   response: IAnalyticsData | undefined,
@@ -36,8 +36,8 @@ export const convertResponseToBarGraphData = (
         name: DATE_KEYS.includes(params.x_axis)
           ? renderMonthAndYear(key)
           : params.x_axis === "priority" || params.x_axis === "state__group"
-          ? capitalizeFirstLetter(key)
-          : key,
+            ? capitalizeFirstLetter(key)
+            : key,
         ...segments,
       });
     } else {
@@ -49,8 +49,8 @@ export const convertResponseToBarGraphData = (
         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",
+            ? capitalizeFirstLetter(item.dimension ?? "None")
+            : item.dimension ?? "None",
         [yAxisKey]: item[yAxisKey] ?? 0,
       });
     }
@@ -84,12 +84,12 @@ export const generateBarColor = (
       priority === "urgent"
         ? "#ef4444"
         : priority === "high"
-        ? "#f97316"
-        : priority === "medium"
-        ? "#eab308"
-        : priority === "low"
-        ? "#22c55e"
-        : "#ced4da";
+          ? "#f97316"
+          : priority === "medium"
+            ? "#eab308"
+            : priority === "low"
+              ? "#22c55e"
+              : "#ced4da";
   }
 
   return color ?? generateRandomColor(value);
diff --git a/web/helpers/calendar.helper.ts b/web/helpers/calendar.helper.ts
index e570a5c9a34..5b89d8625f8 100644
--- a/web/helpers/calendar.helper.ts
+++ b/web/helpers/calendar.helper.ts
@@ -1,7 +1,7 @@
 // helpers
-import { getWeekNumberOfDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { ICalendarDate, ICalendarPayload } from "@/components/issues";
+import { getWeekNumberOfDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
-import { ICalendarDate, ICalendarPayload } from "components/issues";
 
 export const formatDate = (date: Date, format: string): string => {
   const day = date.getDate();
diff --git a/web/helpers/cycle.helper.ts b/web/helpers/cycle.helper.ts
new file mode 100644
index 00000000000..1964ed5e3d1
--- /dev/null
+++ b/web/helpers/cycle.helper.ts
@@ -0,0 +1,60 @@
+import sortBy from "lodash/sortBy";
+// helpers
+import { satisfiesDateFilter } from "@/helpers/filter.helper";
+import { getDate } from "@/helpers/date-time.helper";
+// types
+import { ICycle, TCycleFilters } from "@plane/types";
+
+/**
+ * @description orders cycles based on their status
+ * @param {ICycle[]} cycles
+ * @returns {ICycle[]}
+ */
+export const orderCycles = (cycles: ICycle[]): ICycle[] => {
+  if (cycles.length === 0) return [];
+
+  const STATUS_ORDER: {
+    [key: string]: number;
+  } = {
+    current: 1,
+    upcoming: 2,
+    draft: 3,
+  };
+
+  let filteredCycles = cycles.filter((c) => c.status.toLowerCase() !== "completed");
+  filteredCycles = sortBy(filteredCycles, [
+    (c) => STATUS_ORDER[c.status.toLowerCase()],
+    (c) => (c.status.toLowerCase() === "upcoming" ? c.start_date : c.name.toLowerCase()),
+  ]);
+
+  return filteredCycles;
+};
+
+/**
+ * @description filters cycles based on the filter
+ * @param {ICycle} cycle
+ * @param {TCycleFilters} filter
+ * @returns {boolean}
+ */
+export const shouldFilterCycle = (cycle: ICycle, filter: TCycleFilters): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filter).forEach((key) => {
+    const filterKey = key as keyof TCycleFilters;
+    if (filterKey === "status" && filter.status && filter.status.length > 0)
+      fallsInFilters = fallsInFilters && filter.status.includes(cycle.status.toLowerCase());
+    if (filterKey === "start_date" && filter.start_date && filter.start_date.length > 0) {
+      const startDate = getDate(cycle.start_date);
+      filter.start_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!startDate && satisfiesDateFilter(startDate, dateFilter);
+      });
+    }
+    if (filterKey === "end_date" && filter.end_date && filter.end_date.length > 0) {
+      const endDate = getDate(cycle.end_date);
+      filter.end_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!endDate && satisfiesDateFilter(endDate, dateFilter);
+      });
+    }
+  });
+
+  return fallsInFilters;
+};
diff --git a/web/helpers/dashboard.helper.ts b/web/helpers/dashboard.helper.ts
index 90319a90b90..97286bc3a94 100644
--- a/web/helpers/dashboard.helper.ts
+++ b/web/helpers/dashboard.helper.ts
@@ -1,36 +1,40 @@
 import { endOfMonth, endOfWeek, endOfYear, startOfMonth, startOfWeek, startOfYear } from "date-fns";
 // helpers
-import { renderFormattedPayloadDate } from "./date-time.helper";
+import { renderFormattedDate, renderFormattedPayloadDate } from "./date-time.helper";
 // types
-import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
+import { TIssuesListTypes } from "@plane/types";
+// constants
+import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@/constants/dashboard";
 
 /**
  * @description returns date range based on the duration filter
  * @param duration
  */
-export const getCustomDates = (duration: TDurationFilterOptions): string => {
+export const getCustomDates = (duration: EDurationFilters, customDates: string[]): string => {
   const today = new Date();
   let firstDay, lastDay;
 
   switch (duration) {
-    case "none":
+    case EDurationFilters.NONE:
       return "";
-    case "today":
+    case EDurationFilters.TODAY:
       firstDay = renderFormattedPayloadDate(today);
       lastDay = renderFormattedPayloadDate(today);
       return `${firstDay};after,${lastDay};before`;
-    case "this_week":
+    case EDurationFilters.THIS_WEEK:
       firstDay = renderFormattedPayloadDate(startOfWeek(today));
       lastDay = renderFormattedPayloadDate(endOfWeek(today));
       return `${firstDay};after,${lastDay};before`;
-    case "this_month":
+    case EDurationFilters.THIS_MONTH:
       firstDay = renderFormattedPayloadDate(startOfMonth(today));
       lastDay = renderFormattedPayloadDate(endOfMonth(today));
       return `${firstDay};after,${lastDay};before`;
-    case "this_year":
+    case EDurationFilters.THIS_YEAR:
       firstDay = renderFormattedPayloadDate(startOfYear(today));
       lastDay = renderFormattedPayloadDate(endOfYear(today));
       return `${firstDay};after,${lastDay};before`;
+    case EDurationFilters.CUSTOM:
+      return customDates.join(",");
   }
 };
 
@@ -45,10 +49,10 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
     type === "pending"
       ? "?state_group=backlog,unstarted,started"
       : type === "upcoming"
-      ? `?target_date=${today};after`
-      : type === "overdue"
-      ? `?target_date=${today};before`
-      : "?state_group=completed";
+        ? `?target_date=${today};after`
+        : type === "overdue"
+          ? `?target_date=${today};before`
+          : "?state_group=completed";
 
   return filterParams;
 };
@@ -58,7 +62,7 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
  * @param duration
  * @param tab
  */
-export const getTabKey = (duration: TDurationFilterOptions, tab: TIssuesListTypes | undefined): TIssuesListTypes => {
+export const getTabKey = (duration: EDurationFilters, tab: TIssuesListTypes | undefined): TIssuesListTypes => {
   if (!tab) return "completed";
 
   if (tab === "completed") return tab;
@@ -69,3 +73,21 @@ export const getTabKey = (duration: TDurationFilterOptions, tab: TIssuesListType
     else return "upcoming";
   }
 };
+
+/**
+ * @description returns the label for the duration filter dropdown
+ * @param duration
+ * @param customDates
+ */
+export const getDurationFilterDropdownLabel = (duration: EDurationFilters, customDates: string[]): string => {
+  if (duration !== "custom") return DURATION_FILTER_OPTIONS.find((option) => option.key === duration)?.label ?? "";
+  else {
+    const afterDate = customDates.find((date) => date.includes("after"))?.split(";")[0];
+    const beforeDate = customDates.find((date) => date.includes("before"))?.split(";")[0];
+
+    if (afterDate && beforeDate) return `${renderFormattedDate(afterDate)} - ${renderFormattedDate(beforeDate)}`;
+    else if (afterDate) return `After ${renderFormattedDate(afterDate)}`;
+    else if (beforeDate) return `Before ${renderFormattedDate(beforeDate)}`;
+    else return "";
+  }
+};
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index 5423d4e9295..7ca4d49fb12 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -1,5 +1,5 @@
 import { differenceInDays, format, formatDistanceToNow, isAfter, isEqual, isValid, parseISO } from "date-fns";
-import { isNil } from "lodash";
+import isNumber from "lodash/isNumber";
 
 // Format Date Helpers
 /**
@@ -8,10 +8,11 @@ import { isNil } from "lodash";
  * @param {Date | string} date
  * @example renderFormattedDate("2024-01-01") // Jan 01, 2024
  */
-export const renderFormattedDate = (date: string | Date): string | null => {
-  if (!date) return null;
+export const renderFormattedDate = (date: string | Date | undefined | null): string | null => {
   // Parse the date to check if it is valid
-  const parsedDate = new Date(date);
+  const parsedDate = getDate(date);
+  // return if undefined
+  if (!parsedDate) return null;
   // Check if the parsed date is valid before formatting
   if (!isValid(parsedDate)) return null; // Return null for invalid dates
   // Format the date in format (MMM dd, yyyy)
@@ -26,9 +27,10 @@ export const renderFormattedDate = (date: string | Date): string | null => {
  * @example renderShortDateFormat("2024-01-01") // Jan 01
  */
 export const renderFormattedDateWithoutYear = (date: string | Date): string => {
-  if (!date) return "";
   // Parse the date to check if it is valid
-  const parsedDate = new Date(date);
+  const parsedDate = getDate(date);
+  // return if undefined
+  if (!parsedDate) return "";
   // Check if the parsed date is valid before formatting
   if (!isValid(parsedDate)) return ""; // Return empty string for invalid dates
   // Format the date in short format (MMM dd)
@@ -42,10 +44,11 @@ export const renderFormattedDateWithoutYear = (date: string | Date): string => {
  * @param {Date | string} date
  * @example renderFormattedPayloadDate("Jan 01, 20224") // "2024-01-01"
  */
-export const renderFormattedPayloadDate = (date: Date | string): string | null => {
-  if (!date) return null;
+export const renderFormattedPayloadDate = (date: Date | string | undefined | null): string | null => {
   // Parse the date to check if it is valid
-  const parsedDate = new Date(date);
+  const parsedDate = getDate(date);
+  // return if undefined
+  if (!parsedDate) return null;
   // Check if the parsed date is valid before formatting
   if (!isValid(parsedDate)) return null; // Return null for invalid dates
   // Format the date in payload format (yyyy-mm-dd)
@@ -63,9 +66,10 @@ export const renderFormattedPayloadDate = (date: Date | string): string | null =
  * @example renderFormattedTime("2024-01-01 13:00:00", "12-hour") // 01:00 PM
  */
 export const renderFormattedTime = (date: string | Date, timeFormat: "12-hour" | "24-hour" = "24-hour"): string => {
-  if (!date || date === "") return "";
   // Parse the date to check if it is valid
   const parsedDate = new Date(date);
+  // return if undefined
+  if (!parsedDate) return "";
   // Check if the parsed date is valid
   if (!isValid(parsedDate)) return ""; // Return empty string for invalid dates
   // Format the date in 12 hour format if in12HourFormat is true
@@ -92,10 +96,11 @@ export const findTotalDaysInRange = (
   endDate: Date | string | undefined | null,
   inclusive: boolean = true
 ): number | undefined => {
-  if (!startDate || !endDate) return undefined;
   // Parse the dates to check if they are valid
-  const parsedStartDate = new Date(startDate);
-  const parsedEndDate = new Date(endDate);
+  const parsedStartDate = getDate(startDate);
+  const parsedEndDate = getDate(endDate);
+  // return if undefined
+  if (!parsedStartDate || !parsedEndDate) return;
   // Check if the parsed dates are valid before calculating the difference
   if (!isValid(parsedStartDate) || !isValid(parsedEndDate)) return 0; // Return 0 for invalid dates
   // Calculate the difference in days
@@ -131,6 +136,7 @@ export const calculateTimeAgo = (time: string | number | Date | null): string =>
   if (!time) return "";
   // Parse the time to check if it is valid
   const parsedTime = typeof time === "string" || typeof time === "number" ? parseISO(String(time)) : time;
+  // return if undefined
   if (!parsedTime) return ""; // Return empty string for invalid dates
   // Format the time in the form of amount of time passed since the event happened
   const distance = formatDistanceToNow(parsedTime, { addSuffix: true });
@@ -164,7 +170,7 @@ export const isDateGreaterThanToday = (dateStr: string): boolean => {
  * @example getWeekNumber(new Date("2023-09-01")) // 35
  */
 export const getWeekNumberOfDate = (date: Date): number => {
-  const currentDate = new Date(date);
+  const currentDate = date;
   // Adjust the starting day to Sunday (0) instead of Monday (1)
   const startDate = new Date(currentDate.getFullYear(), 0, 1);
   // Calculate the number of days between currentDate and startDate
@@ -186,10 +192,35 @@ export const checkIfDatesAreEqual = (
   date1: Date | string | null | undefined,
   date2: Date | string | null | undefined
 ): boolean => {
-  if (isNil(date1) && isNil(date2)) return true;
-  if (isNil(date1) || isNil(date2)) return false;
+  const parsedDate1 = getDate(date1);
+  const parsedDate2 = getDate(date2);
+  // return if undefined
+  if (!parsedDate1 && !parsedDate2) return true;
+  if (!parsedDate1 || !parsedDate2) return false;
 
-  const parsedDate1 = new Date(date1);
-  const parsedDate2 = new Date(date2);
   return isEqual(parsedDate1, parsedDate2);
 };
+
+/**
+ * This method returns a date from string of type yyyy-mm-dd
+ * This method is recommended to use instead of new Date() as this does not introduce any timezone offsets
+ * @param date
+ * @returns date or undefined
+ */
+export const getDate = (date: string | Date | undefined | null): Date | undefined => {
+  try {
+    if (!date || date === "") return;
+
+    if (typeof date !== "string" && !(date instanceof String)) return date;
+
+    const [yearString, monthString, dayString] = date.substring(0, 10).split("-");
+    const year = parseInt(yearString);
+    const month = parseInt(monthString);
+    const day = parseInt(dayString);
+    if (!isNumber(year) || !isNumber(month) || !isNumber(day)) return;
+
+    return new Date(year, month - 1, day);
+  } catch (e) {
+    return undefined;
+  }
+};
diff --git a/web/helpers/emoji.helper.tsx b/web/helpers/emoji.helper.tsx
index 5ff95027b52..513f9b6c4e1 100644
--- a/web/helpers/emoji.helper.tsx
+++ b/web/helpers/emoji.helper.tsx
@@ -41,13 +41,25 @@ export const groupReactions: (reactions: any[], key: string) => { [key: string]:
   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[] });
+  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;
 };
+
+export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
+  if (!emojiUnified) return "";
+
+  return emojiUnified
+    .split("-")
+    .map((e) => parseInt(e, 16))
+    .join("-");
+};
diff --git a/web/helpers/filter.helper.ts b/web/helpers/filter.helper.ts
index 0b30f95e1c7..2b8212f0250 100644
--- a/web/helpers/filter.helper.ts
+++ b/web/helpers/filter.helper.ts
@@ -1,16 +1,60 @@
+import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+// helpers
+import { getDate } from "./date-time.helper";
 // types
-import { IIssueFilterOptions } from "@plane/types";
+// import { IIssueFilterOptions } from "@plane/types";
 
-export const calculateTotalFilters = (filters: IIssueFilterOptions): number =>
+type TFilters = {
+  [key: string]: string[] | null;
+};
+
+/**
+ * @description calculates the total number of filters applied
+ * @param {TFilters} filters
+ * @returns {number}
+ */
+export const calculateTotalFilters = (filters: TFilters): 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)
+          filters[key as keyof TFilters] !== null
+            ? isNaN((filters[key as keyof TFilters] as string[]).length)
               ? 0
-              : (filters[key as keyof IIssueFilterOptions] as string[]).length
+              : (filters[key as keyof TFilters] as string[]).length
             : 0
         )
         .reduce((curr, prev) => curr + prev, 0)
     : 0;
 
+/**
+ * @description checks if the date satisfies the filter
+ * @param {Date} date
+ * @param {string} filter
+ * @returns {boolean}
+ */
+export const satisfiesDateFilter = (date: Date, filter: string): boolean => {
+  const [value, operator, from] = filter.split(";");
+
+  const dateValue = getDate(value);
+  if (!from && dateValue) {
+    if (operator === "after") return date >= dateValue;
+    if (operator === "before") return date <= dateValue;
+  }
+
+  if (from === "fromnow") {
+    if (operator === "before") {
+      if (value === "1_weeks") return differenceInCalendarDays(date, new Date()) <= -7;
+      if (value === "2_weeks") return differenceInCalendarDays(date, new Date()) <= -14;
+      if (value === "1_months") return differenceInCalendarDays(date, new Date()) <= -30;
+    }
+
+    if (operator === "after") {
+      if (value === "1_weeks") return differenceInCalendarDays(date, new Date()) >= 7;
+      if (value === "2_weeks") return differenceInCalendarDays(date, new Date()) >= 14;
+      if (value === "1_months") return differenceInCalendarDays(date, new Date()) >= 30;
+      if (value === "2_months") return differenceInCalendarDays(date, new Date()) >= 60;
+    }
+  }
+
+  return false;
+};
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
index 831cb321ef6..2ac7dc7bd10 100644
--- a/web/helpers/issue.helper.ts
+++ b/web/helpers/issue.helper.ts
@@ -1,8 +1,13 @@
-import { v4 as uuidv4 } from "uuid";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import { v4 as uuidv4 } from "uuid";
 // helpers
-import { orderArrayBy } from "helpers/array.helper";
+import { getDate } from "@/helpers/date-time.helper";
+import { orderArrayBy } from "@/helpers/array.helper";
 // types
+import { IGanttBlock } from "@/components/gantt-chart";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
+import { STATE_GROUPS } from "@/constants/state";
 import {
   TIssue,
   TIssueGroupByOptions,
@@ -11,10 +16,6 @@ import {
   TIssueParams,
   TStateGroups,
 } from "@plane/types";
-import { IGanttBlock } from "components/gantt-chart";
-// constants
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-import { STATE_GROUPS } from "constants/state";
 
 type THandleIssuesMutation = (
   formData: Partial<TIssue>,
@@ -157,7 +158,9 @@ export const shouldHighlightIssueDueDate = (
   // if the issue is completed or cancelled, don't highlight the due date
   if ([STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateGroup)) return false;
 
-  const parsedDate = new Date(date);
+  const parsedDate = getDate(date);
+  if (!parsedDate) return false;
+
   const targetDateDistance = differenceInCalendarDays(parsedDate, new Date());
 
   // if the issue is overdue, highlight the due date
@@ -168,6 +171,37 @@ export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] =>
     data: block,
     id: block.id,
     sort_order: block.sort_order,
-    start_date: block.start_date ? new Date(block.start_date) : null,
-    target_date: block.target_date ? new Date(block.target_date) : null,
+    start_date: getDate(block.start_date),
+    target_date: getDate(block.target_date),
   }));
+
+export function getChangedIssuefields(formData: Partial<TIssue>, dirtyFields: { [key: string]: boolean | undefined }) {
+  const changedFields: Partial<TIssue> = {};
+
+  const dirtyFieldKeys = Object.keys(dirtyFields) as (keyof TIssue)[];
+  for (const dirtyField of dirtyFieldKeys) {
+    if (!!dirtyFields[dirtyField]) {
+      changedFields[dirtyField] = formData[dirtyField];
+    }
+  }
+
+  return changedFields;
+}
+
+export const formatTextList = (TextArray: string[]): string => {
+  const count = TextArray.length;
+  switch (count) {
+    case 0:
+      return "";
+    case 1:
+      return TextArray[0];
+    case 2:
+      return `${TextArray[0]} and ${TextArray[1]}`;
+    case 3:
+      return `${TextArray.slice(0, 2).join(", ")}, and ${TextArray[2]}`;
+    case 4:
+      return `${TextArray.slice(0, 3).join(", ")}, and ${TextArray[3]}`;
+    default:
+      return `${TextArray.slice(0, 3).join(", ")}, and +${count - 3} more`;
+  }
+};
diff --git a/web/helpers/module.helper.ts b/web/helpers/module.helper.ts
new file mode 100644
index 00000000000..f5cbfe08ab6
--- /dev/null
+++ b/web/helpers/module.helper.ts
@@ -0,0 +1,81 @@
+import sortBy from "lodash/sortBy";
+// helpers
+import { satisfiesDateFilter } from "@/helpers/filter.helper";
+import { getDate } from "@/helpers/date-time.helper";
+// types
+import { IModule, TModuleDisplayFilters, TModuleFilters, TModuleOrderByOptions } from "@plane/types";
+
+/**
+ * @description orders modules based on their status
+ * @param {IModule[]} modules
+ * @param {TModuleOrderByOptions | undefined} orderByKey
+ * @returns {IModule[]}
+ */
+export const orderModules = (modules: IModule[], orderByKey: TModuleOrderByOptions | undefined): IModule[] => {
+  let orderedModules: IModule[] = [];
+  if (modules.length === 0 || !orderByKey) return [];
+
+  if (orderByKey === "name") orderedModules = sortBy(modules, [(m) => m.name.toLowerCase()]);
+  if (orderByKey === "-name") orderedModules = sortBy(modules, [(m) => m.name.toLowerCase()]).reverse();
+  if (["progress", "-progress"].includes(orderByKey))
+    orderedModules = sortBy(modules, [
+      (m) => {
+        let progress = (m.completed_issues + m.cancelled_issues) / m.total_issues;
+        if (isNaN(progress)) progress = 0;
+        return orderByKey === "progress" ? progress : -progress;
+      },
+      "name",
+    ]);
+  if (["issues_length", "-issues_length"].includes(orderByKey))
+    orderedModules = sortBy(modules, [
+      (m) => (orderByKey === "issues_length" ? m.total_issues : !m.total_issues),
+      "name",
+    ]);
+  if (orderByKey === "target_date") orderedModules = sortBy(modules, [(m) => m.target_date]);
+  if (orderByKey === "-target_date") orderedModules = sortBy(modules, [(m) => !m.target_date]);
+  if (orderByKey === "created_at") orderedModules = sortBy(modules, [(m) => m.created_at]);
+  if (orderByKey === "-created_at") orderedModules = sortBy(modules, [(m) => !m.created_at]);
+
+  return orderedModules;
+};
+
+/**
+ * @description filters modules based on the filters
+ * @param {IModule} module
+ * @param {TModuleDisplayFilters} displayFilters
+ * @param {TModuleFilters} filters
+ * @returns {boolean}
+ */
+export const shouldFilterModule = (
+  module: IModule,
+  displayFilters: TModuleDisplayFilters,
+  filters: TModuleFilters
+): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filters).forEach((key) => {
+    const filterKey = key as keyof TModuleFilters;
+    if (filterKey === "status" && filters.status && filters.status.length > 0)
+      fallsInFilters = fallsInFilters && filters.status.includes(module.status.toLowerCase());
+    if (filterKey === "lead" && filters.lead && filters.lead.length > 0)
+      fallsInFilters = fallsInFilters && filters.lead.includes(`${module.lead_id}`);
+    if (filterKey === "members" && filters.members && filters.members.length > 0) {
+      const memberIds = module.member_ids;
+      fallsInFilters = fallsInFilters && filters.members.some((memberId) => memberIds.includes(memberId));
+    }
+    if (filterKey === "start_date" && filters.start_date && filters.start_date.length > 0) {
+      const startDate = getDate(module.start_date);
+      filters.start_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!startDate && satisfiesDateFilter(startDate, dateFilter);
+      });
+    }
+    if (filterKey === "target_date" && filters.target_date && filters.target_date.length > 0) {
+      const endDate = getDate(module.target_date);
+      filters.target_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!endDate && satisfiesDateFilter(endDate, dateFilter);
+      });
+    }
+  });
+  if (displayFilters.favorites && !module.is_favorite) fallsInFilters = false;
+
+  return fallsInFilters;
+};
diff --git a/web/helpers/project.helper.ts b/web/helpers/project.helper.ts
index 8d78964ee70..f479eb25c22 100644
--- a/web/helpers/project.helper.ts
+++ b/web/helpers/project.helper.ts
@@ -1,4 +1,11 @@
-import { IProject } from "@plane/types";
+import sortBy from "lodash/sortBy";
+// types
+import { IProject, TProjectDisplayFilters, TProjectFilters, TProjectOrderByOptions } from "@plane/types";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { getDate } from "@/helpers/date-time.helper";
+import { satisfiesDateFilter } from "@/helpers/filter.helper";
 
 /**
  * Updates the sort order of the project.
@@ -43,3 +50,72 @@ export const orderJoinedProjects = (
 
   return updatedSortOrder;
 };
+
+export const projectIdentifierSanitizer = (identifier: string): string =>
+  identifier.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "");
+
+/**
+ * @description Checks if the project should be rendered or not based on the user role
+ * @param {IProject} project
+ * @returns {boolean}
+ */
+export const shouldRenderProject = (project: IProject): boolean =>
+  !!project.member_role && project.member_role >= EUserProjectRoles.MEMBER;
+
+/**
+ * @description filters projects based on the filter
+ * @param {IProject} project
+ * @param {TProjectFilters} filters
+ * @param {TProjectDisplayFilters} displayFilters
+ * @returns {boolean}
+ */
+export const shouldFilterProject = (
+  project: IProject,
+  displayFilters: TProjectDisplayFilters,
+  filters: TProjectFilters
+): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filters).forEach((key) => {
+    const filterKey = key as keyof TProjectFilters;
+    if (filterKey === "access" && filters.access && filters.access.length > 0)
+      fallsInFilters = fallsInFilters && filters.access.includes(`${project.network}`);
+    if (filterKey === "lead" && filters.lead && filters.lead.length > 0)
+      fallsInFilters = fallsInFilters && filters.lead.includes(`${project.project_lead}`);
+    if (filterKey === "members" && filters.members && filters.members.length > 0) {
+      const memberIds = project.members.map((member) => member.member_id);
+      fallsInFilters = fallsInFilters && filters.members.some((memberId) => memberIds.includes(memberId));
+    }
+    if (filterKey === "created_at" && filters.created_at && filters.created_at.length > 0) {
+      const createdDate = getDate(project.created_at);
+      filters.created_at.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!createdDate && satisfiesDateFilter(createdDate, dateFilter);
+      });
+    }
+  });
+  if (displayFilters.my_projects && !project.is_member) fallsInFilters = false;
+  if (displayFilters.archived_projects && !project.archived_at) fallsInFilters = false;
+  if (project.archived_at) fallsInFilters = displayFilters.archived_projects ? fallsInFilters : false;
+
+  return fallsInFilters;
+};
+
+/**
+ * @description orders projects based on the orderByKey
+ * @param {IProject[]} projects
+ * @param {TProjectOrderByOptions | undefined} orderByKey
+ * @returns {IProject[]}
+ */
+export const orderProjects = (projects: IProject[], orderByKey: TProjectOrderByOptions | undefined): IProject[] => {
+  let orderedProjects: IProject[] = [];
+  if (projects.length === 0) return orderedProjects;
+
+  if (orderByKey === "sort_order") orderedProjects = sortBy(projects, [(p) => p.sort_order]);
+  if (orderByKey === "name") orderedProjects = sortBy(projects, [(p) => p.name.toLowerCase()]);
+  if (orderByKey === "-name") orderedProjects = sortBy(projects, [(p) => p.name.toLowerCase()]).reverse();
+  if (orderByKey === "created_at") orderedProjects = sortBy(projects, [(p) => p.created_at]);
+  if (orderByKey === "-created_at") orderedProjects = sortBy(projects, [(p) => !p.created_at]);
+  if (orderByKey === "members_length") orderedProjects = sortBy(projects, [(p) => p.members.length]);
+  if (orderByKey === "-members_length") orderedProjects = sortBy(projects, [(p) => p.members.length]).reverse();
+
+  return orderedProjects;
+};
diff --git a/web/helpers/state.helper.ts b/web/helpers/state.helper.ts
index c19af3e9577..a7f07c72e84 100644
--- a/web/helpers/state.helper.ts
+++ b/web/helpers/state.helper.ts
@@ -1,5 +1,5 @@
 // types
-import { STATE_GROUPS } from "constants/state";
+import { STATE_GROUPS } from "@/constants/state";
 import { IState, IStateResponse } from "@plane/types";
 
 export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
index d30b29b5231..03233a9181c 100644
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@@ -1,10 +1,10 @@
+import * as DOMPurify from "dompurify";
 import {
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   VIEW_ISSUES,
-} from "constants/fetch-keys";
-import * as DOMPurify from 'dompurify';
+} from "@/constants/fetch-keys";
 
 export const addSpaceIfCamelCase = (str: string) => {
   if (str === undefined || str === null) return "";
@@ -34,7 +34,7 @@ export const createSimilarString = (str: string) => {
 };
 
 const fallbackCopyTextToClipboard = (text: string) => {
-  var textArea = document.createElement("textarea");
+  const textArea = document.createElement("textarea");
   textArea.value = text;
 
   // Avoid scrolling to bottom
@@ -49,7 +49,7 @@ const fallbackCopyTextToClipboard = (text: string) => {
   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");
+    document.execCommand("copy");
   } catch (err) {}
 
   document.body.removeChild(textArea);
@@ -117,9 +117,9 @@ export const getFirstCharacters = (str: string) => {
  * 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
+export const sanitizeHTML = (htmlString: string) => {
+  const sanitizedText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] }); // sanitize the string to remove all HTML tags
+  return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces
 };
 
 /**
@@ -130,7 +130,7 @@ export const stripHTML = (html: string) => {
  * console.log(text); // Some text
  */
 
-export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(stripHTML(html), length);
+export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(sanitizeHTML(html), length);
 
 /**
  * @description: This function return number count in string if number is more than 100 then it will return 99+
diff --git a/web/helpers/theme.helper.ts b/web/helpers/theme.helper.ts
index 16cd8cd7992..6ebebc820fd 100644
--- a/web/helpers/theme.helper.ts
+++ b/web/helpers/theme.helper.ts
@@ -1,4 +1,4 @@
-import { TRgb, hexToRgb } from "helpers/color.helper";
+import { TRgb, hexToRgb } from "@/helpers/color.helper";
 
 type TShades = {
   10: TRgb;
@@ -118,3 +118,6 @@ export const unsetCustomCssVariables = () => {
     dom?.style.removeProperty("--color-scheme");
   }
 };
+
+export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
+  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/web/helpers/user.helper.ts b/web/helpers/user.helper.ts
index 7af73b021c8..2b053a31c45 100644
--- a/web/helpers/user.helper.ts
+++ b/web/helpers/user.helper.ts
@@ -1,4 +1,4 @@
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 
 export const getUserRole = (role: EUserWorkspaceRoles) => {
   switch (role) {
diff --git a/web/hooks/store/index.ts b/web/hooks/store/index.ts
index 2349b1585a7..906b473ff3b 100644
--- a/web/hooks/store/index.ts
+++ b/web/hooks/store/index.ts
@@ -1,7 +1,8 @@
 export * from "./use-application";
-export * from "./use-event-tracker"
 export * from "./use-calendar-view";
+export * from "./use-cycle-filter";
 export * from "./use-cycle";
+export * from "./use-event-tracker";
 export * from "./use-dashboard";
 export * from "./use-estimate";
 export * from "./use-global-view";
@@ -9,7 +10,9 @@ export * from "./use-label";
 export * from "./use-member";
 export * from "./use-mention";
 export * from "./use-module";
+export * from "./use-module-filter";
 export * from "./use-page";
+export * from "./use-project-filter";
 export * from "./use-project-publish";
 export * from "./use-project-state";
 export * from "./use-project-view";
diff --git a/web/hooks/store/use-application.ts b/web/hooks/store/use-application.ts
index dad1f081fe7..2763a02910d 100644
--- a/web/hooks/store/use-application.ts
+++ b/web/hooks/store/use-application.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IAppRootStore } from "store/application";
+import { IAppRootStore } from "@/store/application";
 
 export const useApplication = (): IAppRootStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-calendar-view.ts b/web/hooks/store/use-calendar-view.ts
index c2c5a51d89a..c980610a8e4 100644
--- a/web/hooks/store/use-calendar-view.ts
+++ b/web/hooks/store/use-calendar-view.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { ICalendarStore } from "store/issue/issue_calendar_view.store";
+import { ICalendarStore } from "@/store/issue/issue_calendar_view.store";
 
 export const useCalendarView = (): ICalendarStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-cycle-filter.ts b/web/hooks/store/use-cycle-filter.ts
new file mode 100644
index 00000000000..9eafc16813c
--- /dev/null
+++ b/web/hooks/store/use-cycle-filter.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/contexts/store-context";
+// types
+import { ICycleFilterStore } from "@/store/cycle_filter.store";
+
+export const useCycleFilter = (): ICycleFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useCycleFilter must be used within StoreProvider");
+  return context.cycleFilter;
+};
diff --git a/web/hooks/store/use-cycle.ts b/web/hooks/store/use-cycle.ts
index 01c8e3f2439..e53376e02df 100644
--- a/web/hooks/store/use-cycle.ts
+++ b/web/hooks/store/use-cycle.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { ICycleStore } from "store/cycle.store";
+import { ICycleStore } from "@/store/cycle.store";
 
 export const useCycle = (): ICycleStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-dashboard.ts b/web/hooks/store/use-dashboard.ts
index bf54518aec9..2fc65670cef 100644
--- a/web/hooks/store/use-dashboard.ts
+++ b/web/hooks/store/use-dashboard.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IDashboardStore } from "store/dashboard.store";
+import { IDashboardStore } from "@/store/dashboard.store";
 
 export const useDashboard = (): IDashboardStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-estimate.ts b/web/hooks/store/use-estimate.ts
index 2a9ba82f119..9941e77d97b 100644
--- a/web/hooks/store/use-estimate.ts
+++ b/web/hooks/store/use-estimate.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IEstimateStore } from "store/estimate.store";
+import { IEstimateStore } from "@/store/estimate.store";
 
 export const useEstimate = (): IEstimateStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-event-tracker.ts b/web/hooks/store/use-event-tracker.ts
index bcff65ae06b..85a2a1274e0 100644
--- a/web/hooks/store/use-event-tracker.ts
+++ b/web/hooks/store/use-event-tracker.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IEventTrackerStore } from "store/event-tracker.store";
+import { IEventTrackerStore } from "@/store/event-tracker.store";
 
 export const useEventTracker = (): IEventTrackerStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-global-view.ts b/web/hooks/store/use-global-view.ts
index cb712e6e1e3..73e5f405bc5 100644
--- a/web/hooks/store/use-global-view.ts
+++ b/web/hooks/store/use-global-view.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IGlobalViewStore } from "store/global-view.store";
+import { IGlobalViewStore } from "@/store/global-view.store";
 
 export const useGlobalView = (): IGlobalViewStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-inbox-issues.ts b/web/hooks/store/use-inbox-issues.ts
index 2b2941f84ee..000539e2c7c 100644
--- a/web/hooks/store/use-inbox-issues.ts
+++ b/web/hooks/store/use-inbox-issues.ts
@@ -1,9 +1,9 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IInboxIssue } from "store/inbox/inbox_issue.store";
-import { IInboxFilter } from "store/inbox/inbox_filter.store";
+import { IInboxFilter } from "@/store/inbox/inbox_filter.store";
+import { IInboxIssue } from "@/store/inbox/inbox_issue.store";
 
 export const useInboxIssues = (): {
   issues: IInboxIssue;
diff --git a/web/hooks/store/use-inbox.ts b/web/hooks/store/use-inbox.ts
index 598801d7472..d2a0698344c 100644
--- a/web/hooks/store/use-inbox.ts
+++ b/web/hooks/store/use-inbox.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IInbox } from "store/inbox/inbox.store";
+import { IInbox } from "@/store/inbox/inbox.store";
 
 export const useInbox = (): IInbox => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-issue-detail.ts b/web/hooks/store/use-issue-detail.ts
index 23d7bceadda..489881c7f1d 100644
--- a/web/hooks/store/use-issue-detail.ts
+++ b/web/hooks/store/use-issue-detail.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IIssueDetail } from "store/issue/issue-details/root.store";
+import { IIssueDetail } from "@/store/issue/issue-details/root.store";
 
 export const useIssueDetail = (): IIssueDetail => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-issues.ts b/web/hooks/store/use-issues.ts
index f2da9d954e0..375023b9e89 100644
--- a/web/hooks/store/use-issues.ts
+++ b/web/hooks/store/use-issues.ts
@@ -1,19 +1,19 @@
 import { useContext } from "react";
 import merge from "lodash/merge";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { EIssuesStoreType } from "@/constants/issue";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IWorkspaceIssues, IWorkspaceIssuesFilter } from "store/issue/workspace";
-import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile";
-import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
-import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
-import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
-import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
-import { IArchivedIssues, IArchivedIssuesFilter } from "store/issue/archived";
-import { IDraftIssues, IDraftIssuesFilter } from "store/issue/draft";
+import { IArchivedIssues, IArchivedIssuesFilter } from "@/store/issue/archived";
+import { ICycleIssues, ICycleIssuesFilter } from "@/store/issue/cycle";
+import { IDraftIssues, IDraftIssuesFilter } from "@/store/issue/draft";
+import { IModuleIssues, IModuleIssuesFilter } from "@/store/issue/module";
+import { IProfileIssues, IProfileIssuesFilter } from "@/store/issue/profile";
+import { IProjectIssues, IProjectIssuesFilter } from "@/store/issue/project";
+import { IProjectViewIssues, IProjectViewIssuesFilter } from "@/store/issue/project-views";
+import { IWorkspaceIssues, IWorkspaceIssuesFilter } from "@/store/issue/workspace";
 import { TIssueMap } from "@plane/types";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 type defaultIssueStore = {
   issueMap: TIssueMap;
diff --git a/web/hooks/store/use-kanban-view.ts b/web/hooks/store/use-kanban-view.ts
index 627703e69ff..9d100ce64b7 100644
--- a/web/hooks/store/use-kanban-view.ts
+++ b/web/hooks/store/use-kanban-view.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IIssueKanBanViewStore } from "store/issue/issue_kanban_view.store";
+import { IIssueKanBanViewStore } from "@/store/issue/issue_kanban_view.store";
 
 export const useKanbanView = (): IIssueKanBanViewStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-label.ts b/web/hooks/store/use-label.ts
index 5d4646a75a7..389d54f4319 100644
--- a/web/hooks/store/use-label.ts
+++ b/web/hooks/store/use-label.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { ILabelStore } from "store/label.store";
+import { ILabelStore } from "@/store/label.store";
 
 export const useLabel = (): ILabelStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-member.ts b/web/hooks/store/use-member.ts
index 09c06d12b20..0c5f9531e52 100644
--- a/web/hooks/store/use-member.ts
+++ b/web/hooks/store/use-member.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types;
-import { IMemberRootStore } from "store/member";
+import { IMemberRootStore } from "@/store/member";
 
 export const useMember = (): IMemberRootStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-mention.ts b/web/hooks/store/use-mention.ts
index bf688053cc5..9bbd75c5140 100644
--- a/web/hooks/store/use-mention.ts
+++ b/web/hooks/store/use-mention.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IMentionStore } from "store/mention.store";
+import { IMentionStore } from "@/store/mention.store";
 
 export const useMention = (): IMentionStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-module-filter.ts b/web/hooks/store/use-module-filter.ts
new file mode 100644
index 00000000000..30514893d8e
--- /dev/null
+++ b/web/hooks/store/use-module-filter.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/contexts/store-context";
+// types
+import { IModuleFilterStore } from "@/store/module_filter.store";
+
+export const useModuleFilter = (): IModuleFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useModuleFilter must be used within StoreProvider");
+  return context.moduleFilter;
+};
diff --git a/web/hooks/store/use-module.ts b/web/hooks/store/use-module.ts
index b645e610b4b..69d13977dd1 100644
--- a/web/hooks/store/use-module.ts
+++ b/web/hooks/store/use-module.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IModuleStore } from "store/module.store";
+import { IModuleStore } from "@/store/module.store";
 
 export const useModule = (): IModuleStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-page.ts b/web/hooks/store/use-page.ts
index 2d4dbd5b1b1..2df7e0de622 100644
--- a/web/hooks/store/use-page.ts
+++ b/web/hooks/store/use-page.ts
@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 
 export const usePage = (pageId: string) => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-project-filter.ts b/web/hooks/store/use-project-filter.ts
new file mode 100644
index 00000000000..81877a844ca
--- /dev/null
+++ b/web/hooks/store/use-project-filter.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/contexts/store-context";
+// types
+import { IProjectFilterStore } from "@/store/project/project_filter.store";
+
+export const useProjectFilter = (): IProjectFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectFilter must be used within StoreProvider");
+  return context.projectRoot.projectFilter;
+};
diff --git a/web/hooks/store/use-project-page.ts b/web/hooks/store/use-project-page.ts
index f7c25ea1757..50a70bdbb27 100644
--- a/web/hooks/store/use-project-page.ts
+++ b/web/hooks/store/use-project-page.ts
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
-import { IProjectPageStore } from "store/project-page.store";
+import { StoreContext } from "@/contexts/store-context";
+import { IProjectPageStore } from "@/store/project-page.store";
 
 export const useProjectPages = (): IProjectPageStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-project-publish.ts b/web/hooks/store/use-project-publish.ts
index 1c6cdf777c5..7f3ec043e81 100644
--- a/web/hooks/store/use-project-publish.ts
+++ b/web/hooks/store/use-project-publish.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IProjectPublishStore } from "store/project/project-publish.store";
+import { IProjectPublishStore } from "@/store/project/project-publish.store";
 
 export const useProjectPublish = (): IProjectPublishStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-project-specific-pages.ts b/web/hooks/store/use-project-specific-pages.ts
index 325c2ef1609..64234678024 100644
--- a/web/hooks/store/use-project-specific-pages.ts
+++ b/web/hooks/store/use-project-specific-pages.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IProjectPageStore } from "store/project-page.store";
+import { IProjectPageStore } from "@/store/project-page.store";
 
 export const useProjectPages = (): IProjectPageStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-project-state.ts b/web/hooks/store/use-project-state.ts
index 77c713e1f61..6501df6f107 100644
--- a/web/hooks/store/use-project-state.ts
+++ b/web/hooks/store/use-project-state.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IStateStore } from "store/state.store";
+import { IStateStore } from "@/store/state.store";
 
 export const useProjectState = (): IStateStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-project-view.ts b/web/hooks/store/use-project-view.ts
index a53e2720dbd..f9ca21ff5d2 100644
--- a/web/hooks/store/use-project-view.ts
+++ b/web/hooks/store/use-project-view.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IProjectViewStore } from "store/project-view.store";
+import { IProjectViewStore } from "@/store/project-view.store";
 
 export const useProjectView = (): IProjectViewStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-project.ts b/web/hooks/store/use-project.ts
index a6fb8cc2081..64e9b136651 100644
--- a/web/hooks/store/use-project.ts
+++ b/web/hooks/store/use-project.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IProjectStore } from "store/project/project.store";
+import { IProjectStore } from "@/store/project/project.store";
 
 export const useProject = (): IProjectStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-user.ts b/web/hooks/store/use-user.ts
index 10939dd765c..4f10d9492e5 100644
--- a/web/hooks/store/use-user.ts
+++ b/web/hooks/store/use-user.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IUserRootStore } from "store/user";
+import { IUserRootStore } from "@/store/user";
 
 export const useUser = (): IUserRootStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-webhook.ts b/web/hooks/store/use-webhook.ts
index bf35827c56c..3ba8959dbf6 100644
--- a/web/hooks/store/use-webhook.ts
+++ b/web/hooks/store/use-webhook.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IWebhookStore } from "store/workspace/webhook.store";
+import { IWebhookStore } from "@/store/workspace/webhook.store";
 
 export const useWebhook = (): IWebhookStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/store/use-workspace.ts b/web/hooks/store/use-workspace.ts
index 7d1343a6cc5..edbfdd91446 100644
--- a/web/hooks/store/use-workspace.ts
+++ b/web/hooks/store/use-workspace.ts
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 // mobx store
-import { StoreContext } from "contexts/store-context";
+import { StoreContext } from "@/contexts/store-context";
 // types
-import { IWorkspaceRootStore } from "store/workspace";
+import { IWorkspaceRootStore } from "@/store/workspace";
 
 export const useWorkspace = (): IWorkspaceRootStore => {
   const context = useContext(StoreContext);
diff --git a/web/hooks/use-comment-reaction.tsx b/web/hooks/use-comment-reaction.tsx
index 2327fddcdc8..eceed3621a4 100644
--- a/web/hooks/use-comment-reaction.tsx
+++ b/web/hooks/use-comment-reaction.tsx
@@ -1,10 +1,10 @@
 import useSWR from "swr";
 // fetch keys
-import { COMMENT_REACTION_LIST } from "constants/fetch-keys";
+import { COMMENT_REACTION_LIST } from "@/constants/fetch-keys";
 // services
-import { IssueReactionService } from "services/issue";
+import { groupReactions } from "@/helpers/emoji.helper";
+import { IssueReactionService } from "@/services/issue";
 // helpers
-import { groupReactions } from "helpers/emoji.helper";
 import { useUser } from "./store";
 // hooks
 
diff --git a/web/hooks/use-draggable-portal.ts b/web/hooks/use-draggable-portal.ts
index 383c277f39d..325f8b26803 100644
--- a/web/hooks/use-draggable-portal.ts
+++ b/web/hooks/use-draggable-portal.ts
@@ -1,6 +1,6 @@
-import { createPortal } from "react-dom";
 import { useEffect, useRef } from "react";
 import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
+import { createPortal } from "react-dom";
 
 const useDraggableInPortal = () => {
   const self = useRef<Element>();
diff --git a/web/hooks/use-dropdown-key-down.tsx b/web/hooks/use-dropdown-key-down.tsx
index 228e3557511..174cfdd8ae4 100644
--- a/web/hooks/use-dropdown-key-down.tsx
+++ b/web/hooks/use-dropdown-key-down.tsx
@@ -1,9 +1,11 @@
 import { useCallback } from "react";
 
 type TUseDropdownKeyDown = {
-  (onEnterKeyDown: () => void, onEscKeyDown: () => void, stopPropagation?: boolean): (
-    event: React.KeyboardEvent<HTMLElement>
-  ) => void;
+  (
+    onEnterKeyDown: () => void,
+    onEscKeyDown: () => void,
+    stopPropagation?: boolean
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
 };
 
 export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
diff --git a/web/hooks/use-issue-notification-subscription.tsx b/web/hooks/use-issue-notification-subscription.tsx
index 5929e0738a8..9cbf1c09c8c 100644
--- a/web/hooks/use-issue-notification-subscription.tsx
+++ b/web/hooks/use-issue-notification-subscription.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 import useSWR from "swr";
 // hooks
-import useUserAuth from "hooks/use-user-auth";
+import useUserAuth from "@/hooks/use-user-auth";
 // services
-import { NotificationService } from "services/notification.service";
+import { NotificationService } from "@/services/notification.service";
 // types
 import { IUser } from "@plane/types";
 
diff --git a/web/hooks/use-issues-actions.tsx b/web/hooks/use-issues-actions.tsx
new file mode 100644
index 00000000000..f77513f2134
--- /dev/null
+++ b/web/hooks/use-issues-actions.tsx
@@ -0,0 +1,576 @@
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { useApplication, useIssues } from "./store";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssue,
+  TIssueKanbanFilters,
+  TLoader,
+} from "@plane/types";
+import { useCallback, useMemo } from "react";
+
+interface IssueActions {
+  fetchIssues?: (projectId: string, loadType: TLoader) => Promise<TIssue[] | undefined>;
+  removeIssue: (projectId: string, issueId: string) => Promise<void>;
+  createIssue?: (projectId: string, data: Partial<TIssue>) => Promise<TIssue | undefined>;
+  updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  removeIssueFromView?: (projectId: string, issueId: string) => Promise<void>;
+  archiveIssue?: (projectId: string, issueId: string) => Promise<void>;
+  restoreIssue?: (projectId: string, issueId: string) => Promise<void>;
+  updateFilters: (
+    projectId: string,
+    filterType: EIssueFilterType,
+    filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+  ) => Promise<void>;
+}
+
+export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
+  const projectIssueActions = useProjectIssueActions();
+  const cycleIssueActions = useCycleIssueActions();
+  const moduleIssueActions = useModuleIssueActions();
+  const profileIssueActions = useProfileIssueActions();
+  const projectViewIssueActions = useProjectViewIssueActions();
+  const draftIssueActions = useDraftIssueActions();
+  const archivedIssueActions = useArchivedIssueActions();
+  const globalIssueActions = useGlobalIssueActions();
+
+  switch (storeType) {
+    case EIssuesStoreType.PROJECT_VIEW:
+      return projectViewIssueActions;
+    case EIssuesStoreType.PROFILE:
+      return profileIssueActions;
+    case EIssuesStoreType.CYCLE:
+      return cycleIssueActions;
+    case EIssuesStoreType.MODULE:
+      return moduleIssueActions;
+    case EIssuesStoreType.ARCHIVED:
+      return archivedIssueActions;
+    case EIssuesStoreType.DRAFT:
+      return draftIssueActions;
+    case EIssuesStoreType.GLOBAL:
+      return globalIssueActions;
+    case EIssuesStoreType.PROJECT:
+    default:
+      return projectIssueActions;
+  }
+};
+
+const useProjectIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType);
+    },
+    [issues.fetchIssues, workspaceSlug]
+  );
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!workspaceSlug) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters);
+    },
+    [issuesFilter.updateFilters, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useCycleIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+
+  const {
+    router: { workspaceSlug, cycleId },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType, cycleId);
+    },
+    [issues.fetchIssues, cycleId, workspaceSlug]
+  );
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, cycleId);
+    },
+    [issues.createIssue, cycleId, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data, cycleId);
+    },
+    [issues.updateIssue, cycleId, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId, cycleId);
+    },
+    [issues.removeIssue, cycleId, workspaceSlug]
+  );
+  const removeIssueFromView = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issues.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+    },
+    [issues.removeIssueFromCycle, cycleId, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId, cycleId);
+    },
+    [issues.archiveIssue, cycleId, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, cycleId);
+    },
+    [issuesFilter.updateFilters, cycleId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      removeIssueFromView,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, removeIssueFromView, archiveIssue, updateFilters]
+  );
+};
+
+const useModuleIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+
+  const {
+    router: { workspaceSlug, moduleId },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType, moduleId);
+    },
+    [issues.fetchIssues, moduleId, workspaceSlug]
+  );
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, moduleId);
+    },
+    [issues.createIssue, moduleId, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data, moduleId);
+    },
+    [issues.updateIssue, moduleId, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId, moduleId);
+    },
+    [issues.removeIssue, moduleId, workspaceSlug]
+  );
+  const removeIssueFromView = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issues.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+    },
+    [issues.removeIssueFromModule, moduleId, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId, moduleId);
+    },
+    [issues.archiveIssue, moduleId, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, moduleId);
+    },
+    [issuesFilter.updateFilters, moduleId]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      removeIssueFromView,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, removeIssueFromView, archiveIssue, updateFilters]
+  );
+};
+
+const useProfileIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROFILE);
+
+  const {
+    router: { workspaceSlug, userId },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!userId || !workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType, userId);
+    },
+    [issues.fetchIssues, userId, workspaceSlug]
+  );
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!userId || !workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, userId);
+    },
+    [issues.createIssue, userId, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!userId || !workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data, userId);
+    },
+    [issues.updateIssue, userId, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!userId || !workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId, userId);
+    },
+    [issues.removeIssue, userId, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!userId || !workspaceSlug) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId, userId);
+    },
+    [issues.archiveIssue, userId, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!userId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, userId);
+    },
+    [issuesFilter.updateFilters, userId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useProjectViewIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+
+  const {
+    router: { workspaceSlug, viewId },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType, viewId);
+    },
+    [issues.fetchIssues, viewId, workspaceSlug]
+  );
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, viewId);
+    },
+    [issues.createIssue, viewId, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data, viewId);
+    },
+    [issues.updateIssue, viewId, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId, viewId);
+    },
+    [issues.removeIssue, viewId, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId, viewId);
+    },
+    [issues.archiveIssue, viewId, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, viewId);
+    },
+    [issuesFilter.updateFilters, viewId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useDraftIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
+
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType);
+    },
+    [issues.fetchIssues, workspaceSlug]
+  );
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters);
+    },
+    [issuesFilter.updateFilters]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, updateFilters]
+  );
+};
+
+const useArchivedIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+
+  const fetchIssues = useCallback(
+    async (projectId: string, loadType: TLoader) => {
+      if (!workspaceSlug) return;
+      return await issues.fetchIssues(workspaceSlug, projectId, loadType);
+    },
+    [issues.fetchIssues]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue]
+  );
+  const restoreIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!workspaceSlug) return;
+      return await issues.restoreIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.restoreIssue]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters);
+    },
+    [issuesFilter.updateFilters]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      removeIssue,
+      restoreIssue,
+      updateFilters,
+    }),
+    [fetchIssues, removeIssue, restoreIssue, updateFilters]
+  );
+};
+
+const useGlobalIssueActions = () => {
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.GLOBAL);
+
+  const {
+    router: { workspaceSlug, globalViewId },
+  } = useApplication();
+  const createIssue = useCallback(
+    async (projectId: string, data: Partial<TIssue>) => {
+      if (!globalViewId || !workspaceSlug) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, globalViewId);
+    },
+    [issues.createIssue, globalViewId, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string, issueId: string, data: Partial<TIssue>) => {
+      if (!globalViewId || !workspaceSlug) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data, globalViewId);
+    },
+    [issues.updateIssue, globalViewId, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string, issueId: string) => {
+      if (!globalViewId || !workspaceSlug) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId, globalViewId);
+    },
+    [issues.removeIssue, globalViewId, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (
+      projectId: string,
+      filterType: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      if (!globalViewId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, globalViewId);
+    },
+    [issuesFilter.updateFilters, globalViewId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      createIssue,
+      updateIssue,
+      removeIssue,
+      updateFilters,
+    }),
+    [createIssue, updateIssue, removeIssue, updateFilters]
+  );
+};
diff --git a/web/hooks/use-platform-os.tsx b/web/hooks/use-platform-os.tsx
new file mode 100644
index 00000000000..da7dfca11d0
--- /dev/null
+++ b/web/hooks/use-platform-os.tsx
@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export const usePlatformOS = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const userAgent = window.navigator.userAgent;
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+
+    if (isMobile) setIsMobile(isMobile);
+  }, []);
+  return { isMobile };
+};
diff --git a/web/hooks/use-project-issue-properties.ts b/web/hooks/use-project-issue-properties.ts
new file mode 100644
index 00000000000..195dd4e5c10
--- /dev/null
+++ b/web/hooks/use-project-issue-properties.ts
@@ -0,0 +1,89 @@
+import { useCycle, useEstimate, useLabel, useMember, useModule, useProjectState } from "./store";
+
+export const useProjectIssueProperties = () => {
+  const { fetchProjectStates } = useProjectState();
+  const {
+    project: { fetchProjectMembers },
+  } = useMember();
+  const { fetchProjectLabels } = useLabel();
+  const { fetchAllCycles: fetchProjectAllCycles } = useCycle();
+  const { fetchModules: fetchProjectAllModules } = useModule();
+  const { fetchProjectEstimates } = useEstimate();
+
+  // fetching project states
+  const fetchStates = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectStates(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project members
+  const fetchMembers = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectMembers(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+
+  // fetching project labels
+  const fetchLabels = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectLabels(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project cycles
+  const fetchCycles = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectAllCycles(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project modules
+  const fetchModules = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectAllModules(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project estimates
+  const fetchEstimates = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectEstimates(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+
+  const fetchAll = async (workspaceSlug: string | string[] | undefined, projectId: string | string[] | undefined) => {
+    if (workspaceSlug && projectId) {
+      await fetchStates(workspaceSlug, projectId);
+      await fetchMembers(workspaceSlug, projectId);
+      await fetchLabels(workspaceSlug, projectId);
+      await fetchCycles(workspaceSlug, projectId);
+      await fetchModules(workspaceSlug, projectId);
+      await fetchEstimates(workspaceSlug, projectId);
+    }
+  };
+
+  return {
+    fetchAll,
+    fetchStates,
+    fetchMembers,
+    fetchLabels,
+    fetchCycles,
+    fetchModules,
+    fetchEstimates,
+  };
+};
diff --git a/web/hooks/use-sign-in-redirection.ts b/web/hooks/use-sign-in-redirection.ts
index 6a5c3eda390..0427ee2f588 100644
--- a/web/hooks/use-sign-in-redirection.ts
+++ b/web/hooks/use-sign-in-redirection.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 // hooks
-import { useUser } from "hooks/store";
+import { useUser } from "@/hooks/store";
 // types
 import { IUser, IUserSettings } from "@plane/types";
 
diff --git a/web/hooks/use-toast.tsx b/web/hooks/use-toast.tsx
deleted file mode 100644
index 6de3c104c67..00000000000
--- a/web/hooks/use-toast.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { toastContext } from "contexts/toast.context";
-
-const useToast = () => {
-  const toastContextData = useContext(toastContext);
-  return toastContextData;
-};
-
-export default useToast;
diff --git a/web/hooks/use-user-auth.tsx b/web/hooks/use-user-auth.tsx
index 7ec21f657f9..dabe170cd67 100644
--- a/web/hooks/use-user-auth.tsx
+++ b/web/hooks/use-user-auth.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 // services
-import { WorkspaceService } from "services/workspace.service";
+import { WorkspaceService } from "@/services/workspace.service";
 // types
 import { IUser } from "@plane/types";
 
diff --git a/web/hooks/use-user-notifications.tsx b/web/hooks/use-user-notifications.tsx
index 17a2c63dcc9..26ea2a55b16 100644
--- a/web/hooks/use-user-notifications.tsx
+++ b/web/hooks/use-user-notifications.tsx
@@ -4,13 +4,13 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 // services
-import { NotificationService } from "services/notification.service";
-// hooks
-import useToast from "./use-toast";
+import { UNREAD_NOTIFICATIONS_COUNT, getPaginatedNotificationKey } from "@/constants/fetch-keys";
+import { NotificationService } from "@/services/notification.service";
 // fetch-keys
-import { UNREAD_NOTIFICATIONS_COUNT, getPaginatedNotificationKey } from "constants/fetch-keys";
 // type
 import type { NotificationType, NotificationCount, IMarkAllAsReadPayload } from "@plane/types";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
 
 const PER_PAGE = 30;
 
@@ -20,8 +20,6 @@ const useUserNotification = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const [snoozed, setSnoozed] = useState<boolean>(false);
   const [archived, setArchived] = useState<boolean>(false);
   const [readNotification, setReadNotification] = useState<boolean>(false);
@@ -265,15 +263,15 @@ const useUserNotification = () => {
     await userNotificationServices
       .markAllNotificationsAsRead(workspaceSlug.toString(), markAsReadParams)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "All Notifications marked as read.",
         });
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         });
diff --git a/web/hooks/use-user.tsx b/web/hooks/use-user.tsx
index 35757902611..a94f077fc9e 100644
--- a/web/hooks/use-user.tsx
+++ b/web/hooks/use-user.tsx
@@ -2,9 +2,9 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
-import { UserService } from "services/user.service";
+import { CURRENT_USER } from "@/constants/fetch-keys";
+import { UserService } from "@/services/user.service";
 // constants
-import { CURRENT_USER } from "constants/fetch-keys";
 // types
 import type { IUser } from "@plane/types";
 
diff --git a/web/layouts/admin-layout/header.tsx b/web/layouts/admin-layout/header.tsx
index 2607fe91d62..00dce851e42 100644
--- a/web/layouts/admin-layout/header.tsx
+++ b/web/layouts/admin-layout/header.tsx
@@ -2,10 +2,10 @@ import { FC } from "react";
 // mobx
 import { observer } from "mobx-react-lite";
 // ui
+import { Settings } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // icons
-import { Settings } from "lucide-react";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
 
 export interface IInstanceAdminHeader {
   title?: string;
diff --git a/web/layouts/admin-layout/layout.tsx b/web/layouts/admin-layout/layout.tsx
index 2dbcdf1f5df..5326c0fadee 100644
--- a/web/layouts/admin-layout/layout.tsx
+++ b/web/layouts/admin-layout/layout.tsx
@@ -1,13 +1,13 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { InstanceSetupView } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
 // layouts
-import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
+import { AdminAuthWrapper, UserAuthWrapper } from "@/layouts/auth-layout";
 // components
-import { InstanceAdminSidebar } from "./sidebar";
 import { InstanceAdminHeader } from "./header";
-import { InstanceSetupView } from "components/instance";
+import { InstanceAdminSidebar } from "./sidebar";
 
 export interface IInstanceAdminLayout {
   children: ReactNode;
diff --git a/web/layouts/admin-layout/sidebar.tsx b/web/layouts/admin-layout/sidebar.tsx
index efd3cfc76a4..6cc5b82c516 100644
--- a/web/layouts/admin-layout/sidebar.tsx
+++ b/web/layouts/admin-layout/sidebar.tsx
@@ -1,9 +1,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { InstanceAdminSidebarMenu, InstanceHelpSection, InstanceSidebarDropdown } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
 // components
-import { InstanceAdminSidebarMenu, InstanceHelpSection, InstanceSidebarDropdown } from "components/instance";
 
 export interface IInstanceAdminSidebar {}
 
diff --git a/web/layouts/app-layout/layout.tsx b/web/layouts/app-layout/layout.tsx
index 07ec9711df7..4ce3a9ab1f8 100644
--- a/web/layouts/app-layout/layout.tsx
+++ b/web/layouts/app-layout/layout.tsx
@@ -1,29 +1,39 @@
 import { FC, ReactNode } from "react";
-// layouts
-import { UserAuthWrapper, WorkspaceAuthWrapper, ProjectAuthWrapper } from "layouts/auth-layout";
+import { observer } from "mobx-react-lite";
 // components
-import { CommandPalette } from "components/command-palette";
+import { CommandPalette } from "@/components/command-palette";
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+// layouts
+import { UserAuthWrapper, WorkspaceAuthWrapper, ProjectAuthWrapper } from "@/layouts/auth-layout";
 import { AppSidebar } from "./sidebar";
-import { observer } from "mobx-react-lite";
 
 export interface IAppLayout {
   children: ReactNode;
   header: ReactNode;
   withProjectWrapper?: boolean;
+  mobileHeader?: ReactNode;
 }
 
 export const AppLayout: FC<IAppLayout> = observer((props) => {
-  const { children, header, withProjectWrapper = false } = props;
+  const { children, header, withProjectWrapper = false, mobileHeader } = props;
 
   return (
     <>
-      <CommandPalette />
       <UserAuthWrapper>
+        <CommandPalette />
         <WorkspaceAuthWrapper>
           <div className="relative flex h-screen w-full overflow-hidden">
             <AppSidebar />
             <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-              {header}
+              <div className="z-[15]">
+                <div className="flex items-center w-full border-b border-custom-border-200 z-10">
+                  <div className="pl-5 py-4  bg-custom-sidebar-background-100 block md:hidden">
+                    <SidebarHamburgerToggle />
+                  </div>
+                  <div className="w-full">{header}</div>
+                </div>
+                {mobileHeader && mobileHeader}
+              </div>
               <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}</>}
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index c3b47d02189..e8fec2b40a2 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -1,16 +1,16 @@
 import { FC, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // components
+import { ProjectSidebarList } from "@/components/project";
 import {
   WorkspaceHelpSection,
   WorkspaceSidebarDropdown,
   WorkspaceSidebarMenu,
   WorkspaceSidebarQuickAction,
-} from "components/workspace";
-import { ProjectSidebarList } from "components/project";
+} from "@/components/workspace";
 // hooks
-import { useApplication } from "hooks/store";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { useApplication } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 export interface IAppSidebar {}
 
diff --git a/web/layouts/auth-layout/admin-wrapper.tsx b/web/layouts/auth-layout/admin-wrapper.tsx
index 236d1c440d9..36f0f07c6fe 100644
--- a/web/layouts/auth-layout/admin-wrapper.tsx
+++ b/web/layouts/auth-layout/admin-wrapper.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { InstanceAdminRestriction } from "@/components/instance";
+import { useApplication, useUser } from "@/hooks/store";
 // components
-import { InstanceAdminRestriction } from "components/instance";
 
 export interface IAdminAuthWrapper {
   children: ReactNode;
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
index bdd2da8b524..58084b0d4bd 100644
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -1,8 +1,12 @@
 import { FC, ReactNode } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // hooks
+// components
+import { Spinner } from "@plane/ui";
+import { JoinProject } from "@/components/auth-screens";
+import { EmptyState } from "@/components/common";
 import {
   useApplication,
   useEventTracker,
@@ -16,11 +20,7 @@ import {
   useProjectView,
   useUser,
   useInbox,
-} from "hooks/store";
-// components
-import { Spinner } from "@plane/ui";
-import { JoinProject } from "components/auth-screens";
-import { EmptyState } from "components/common";
+} from "@/hooks/store";
 // images
 import emptyProject from "public/empty-state/project.svg";
 
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
index b48e20b1027..e40f710bf50 100644
--- a/web/layouts/auth-layout/user-wrapper.tsx
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -1,12 +1,12 @@
 import { FC, ReactNode } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
 // hooks
-import { useUser, useWorkspace } from "hooks/store";
-// ui
 import { Spinner } from "@plane/ui";
+import { useUser, useWorkspace } from "@/hooks/store";
+// ui
 
 export interface IUserAuthWrapper {
   children: ReactNode;
@@ -34,15 +34,15 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
     shouldRetryOnError: false,
   });
   // fetching user settings
-  useSWR("CURRENT_USER_SETTINGS", () => fetchCurrentUserSettings(), {
+  const { isLoading: userSettingsLoader } = useSWR("CURRENT_USER_SETTINGS", () => fetchCurrentUserSettings(), {
     shouldRetryOnError: false,
   });
   // fetching all workspaces
-  useSWR("USER_WORKSPACES_LIST", () => fetchWorkspaces(), {
+  const { isLoading: workspaceLoader } = useSWR("USER_WORKSPACES_LIST", () => fetchWorkspaces(), {
     shouldRetryOnError: false,
   });
 
-  if (!currentUser && !currentUserError) {
+  if ((!currentUser && !currentUserError) || userSettingsLoader || workspaceLoader) {
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index ba64983012e..8b40597b2ca 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -1,12 +1,19 @@
 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";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
+import useSWR, { mutate } from "swr";
+import { LogOut } from "lucide-react";
 // hooks
-import { useLabel, useMember, useProject, useUser } from "hooks/store";
-// icons
-import { Button, Spinner } from "@plane/ui";
+import { Button, Spinner, TOAST_TYPE, setToast, Tooltip } from "@plane/ui";
+import { useMember, useProject, useUser, useWorkspace } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// images
+import PlaneBlackLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
+import WorkSpaceNotAvailable from "public/workspace/workspace-not-available.png";
 
 export interface IWorkspaceAuthWrapper {
   children: ReactNode;
@@ -14,42 +21,70 @@ export interface IWorkspaceAuthWrapper {
 
 export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
   const { children } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // next themes
+  const { resolvedTheme, setTheme } = useTheme();
   // store hooks
-  const { membership } = useUser();
+  const { membership, signOut, currentUser } = useUser();
   const { fetchProjects } = useProject();
   const {
     workspace: { fetchWorkspaceMembers },
   } = useMember();
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaces } = useWorkspace();
+  const { isMobile } = usePlatformOS();
+
+  const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
+  const allWorkspaces = workspaces ? Object.values(workspaces) : undefined;
+  const currentWorkspace =
+    (allWorkspaces && allWorkspaces.find((workspace) => workspace?.slug === workspaceSlug)) || undefined;
+
   // fetching user workspace information
   useSWR(
-    workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
-    workspaceSlug ? () => membership.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => membership.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching workspace projects
   useSWR(
-    workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchProjects(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchProjects(workspaceSlug.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetch workspace members
   useSWR(
-    workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetch workspace user projects role
   useSWR(
-    workspaceSlug ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,
-    workspaceSlug ? () => membership.fetchUserWorkspaceProjectsRole(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace
+      ? () => membership.fetchUserWorkspaceProjectsRole(workspaceSlug.toString())
+      : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  // while data is being loaded
-  if (!membership.currentWorkspaceMemberInfo && membership.hasPermissionToCurrentWorkspace === undefined) {
+  const handleSignOut = async () => {
+    await signOut()
+      .then(() => {
+        mutate("CURRENT_USER_DETAILS", null);
+        setTheme("system");
+        router.push("/");
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      );
+  };
+
+  // if list of workspaces are not there then we have to render the spinner
+  if (allWorkspaces === undefined) {
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
@@ -58,6 +93,58 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
       </div>
     );
   }
+
+  // if workspaces are there and we are trying to access the workspace that we are not part of then show the existing workspaces
+  if (
+    currentWorkspace === undefined &&
+    !membership.currentWorkspaceMemberInfo &&
+    membership.hasPermissionToCurrentWorkspace === undefined
+  ) {
+    return (
+      <div className="relative w-full h-full flex flex-col justify-center items-center bg-custom-background-90">
+        <div className="relative container px-5 md:px-0 w-full h-full mx-auto py-14 overflow-hidden overflow-y-auto flex flex-col">
+          <div className="flex-shrink-0 relative flex justify-between items-center gap-4">
+            <div className="flex-shrink-0 py-4 z-10 bg-custom-background-90">
+              <Image src={planeLogo} className="h-[26px] w-full" alt="Plane logo" />
+            </div>
+            <div className="relative flex items-center gap-2">
+              <div className="text-sm font-medium">{currentUser?.email}</div>
+              <div
+                className="relative flex-shrink-0 w-6 h-6 rounded overflow-hidden flex justify-center items-center cursor-pointer hover:bg-custom-background-80"
+                onClick={handleSignOut}
+              >
+                <Tooltip tooltipContent={"Sign out"} position="top" className="ml-2" isMobile={isMobile}>
+                  <LogOut size={14} />
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-3 w-full h-full flex-grow relative flex flex-col justify-center items-center">
+            <div className="flex-shrink-0 relative">
+              <Image src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
+            </div>
+            <h3 className="text-lg font-semibold text-center">Workspace not found</h3>
+            <p className="text-sm text-custom-text-200 text-center">
+              No workspace found with the URL. It may not exist or you lack authorization to view it.
+            </p>
+            <div className="flex justify-center items-center gap-2 pt-4">
+              {allWorkspaces && allWorkspaces.length > 1 && (
+                <Link href="/">
+                  <Button>Go Home</Button>
+                </Link>
+              )}
+              <Link href="/profile">
+                <Button variant="neutral-primary">Visit Profile</Button>
+              </Link>
+            </div>
+          </div>
+
+          <div className="absolute top-0 bottom-0 left-4 w-0 md:w-0.5 bg-custom-background-80" />
+        </div>
+      </div>
+    );
+  }
+
   // while user does not have access to view that workspace
   if (
     membership.hasPermissionToCurrentWorkspace !== undefined &&
diff --git a/web/layouts/instance-layout/index.tsx b/web/layouts/instance-layout/index.tsx
index d5df476d95a..92af28cd7e5 100644
--- a/web/layouts/instance-layout/index.tsx
+++ b/web/layouts/instance-layout/index.tsx
@@ -1,12 +1,12 @@
 import { FC, ReactNode } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
-// components
 import { Spinner } from "@plane/ui";
-import { InstanceNotReady } from "components/instance";
+import { InstanceNotReady } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
+// components
 
 type Props = {
   children: ReactNode;
diff --git a/web/layouts/settings-layout/profile/layout.tsx b/web/layouts/settings-layout/profile/layout.tsx
index 08dfd55098e..a8c17f3dc10 100644
--- a/web/layouts/settings-layout/profile/layout.tsx
+++ b/web/layouts/settings-layout/profile/layout.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
 // layout
-import { UserAuthWrapper } from "layouts/auth-layout";
-import { ProfileLayoutSidebar } from "layouts/settings-layout";
+import { CommandPalette } from "@/components/command-palette";
+import { UserAuthWrapper } from "@/layouts/auth-layout";
+import { ProfileLayoutSidebar } from "@/layouts/settings-layout";
 // components
-import { CommandPalette } from "components/command-palette";
 
 interface IProfileSettingsLayout {
   children: ReactNode;
@@ -21,7 +21,7 @@ export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
           <ProfileLayoutSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             {header}
-            <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
+            <div className="h-full w-full overflow-hidden">{children}</div>
           </main>
         </div>
       </UserAuthWrapper>
diff --git a/web/layouts/settings-layout/profile/preferences/index.ts b/web/layouts/settings-layout/profile/preferences/index.ts
index 34e23025847..c4bfd4db38a 100644
--- a/web/layouts/settings-layout/profile/preferences/index.ts
+++ b/web/layouts/settings-layout/profile/preferences/index.ts
@@ -1,2 +1,2 @@
 export * from "./layout";
-export * from "./sidebar";
\ No newline at end of file
+export * from "./sidebar";
diff --git a/web/layouts/settings-layout/profile/preferences/layout.tsx b/web/layouts/settings-layout/profile/preferences/layout.tsx
index 0e1d3158764..f7fff2ef136 100644
--- a/web/layouts/settings-layout/profile/preferences/layout.tsx
+++ b/web/layouts/settings-layout/profile/preferences/layout.tsx
@@ -1,13 +1,13 @@
 import { FC, ReactNode } from "react";
 // layout
-import { ProfileSettingsLayout } from "layouts/settings-layout";
-import { ProfilePreferenceSettingsSidebar } from "./sidebar";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
-import { CustomMenu } from "@plane/ui";
-import { ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useApplication } from "hooks/store";
+import { ChevronDown } from "lucide-react";
+import { CustomMenu } from "@plane/ui";
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { useApplication } from "@/hooks/store";
+import { ProfileSettingsLayout } from "@/layouts/settings-layout";
+import { ProfilePreferenceSettingsSidebar } from "./sidebar";
 
 interface IProfilePreferenceSettingsLayout {
   children: ReactNode;
@@ -73,7 +73,7 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
         <ProfilePreferenceSettingsSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
           {header}
-          <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
+          <div className="h-full w-full overflow-hidden">{children}</div>
         </main>
       </div>
     </ProfileSettingsLayout>
diff --git a/web/layouts/settings-layout/profile/preferences/sidebar.tsx b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
index 7f43f3cad17..27b28905ba6 100644
--- a/web/layouts/settings-layout/profile/preferences/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 export const ProfilePreferenceSettingsSidebar = () => {
   const router = useRouter();
@@ -9,15 +9,15 @@ export const ProfilePreferenceSettingsSidebar = () => {
     label: string;
     href: string;
   }> = [
-      {
-        label: "Theme",
-        href: `/profile/preferences/theme`,
-      },
-      {
-        label: "Email",
-        href: `/profile/preferences/email`,
-      },
-    ];
+    {
+      label: "Theme",
+      href: `/profile/preferences/theme`,
+    },
+    {
+      label: "Email",
+      href: `/profile/preferences/email`,
+    },
+  ];
   return (
     <div className="hidden md:flex w-96 flex-col gap-6 px-8 py-12">
       <div className="flex flex-col gap-4">
@@ -26,10 +26,11 @@ export const ProfilePreferenceSettingsSidebar = () => {
           {profilePreferenceLinks.map((link) => (
             <Link key={link.href} href={link.href}>
               <div
-                className={`rounded-md px-4 py-2 text-sm font-medium ${(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"
-                  }`}
+                className={`rounded-md px-4 py-2 text-sm font-medium ${
+                  (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>
diff --git a/web/layouts/settings-layout/profile/sidebar.tsx b/web/layouts/settings-layout/profile/sidebar.tsx
index 85f82961fee..b3efbe2c4cb 100644
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@@ -1,18 +1,18 @@
 import { useEffect, useRef, useState } from "react";
-import { mutate } from "swr";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
+import { mutate } from "swr";
 import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
 // hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useApplication, useUser, useWorkspace } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROFILE_ACTION_LINKS } from "constants/profile";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { PROFILE_ACTION_LINKS } from "@/constants/profile";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 const WORKSPACE_ACTION_LINKS = [
   {
@@ -36,14 +36,13 @@ export const ProfileLayoutSidebar = observer(() => {
   const router = useRouter();
   // next themes
   const { setTheme } = useTheme();
-  // toast
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     theme: { sidebarCollapsed, toggleSidebar },
   } = useApplication();
   const { currentUser, currentUserSettings, signOut } = useUser();
   const { workspaces } = useWorkspace();
+  const { isMobile } = usePlatformOS();
 
   const workspacesList = Object.values(workspaces ?? {});
 
@@ -92,8 +91,8 @@ export const ProfileLayoutSidebar = observer(() => {
         router.push("/");
       })
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Failed to sign out. Please try again.",
         })
@@ -129,13 +128,19 @@ export const ProfileLayoutSidebar = observer(() => {
           {!sidebarCollapsed && (
             <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
           )}
-          <div className="mt-2 h-full space-y-1.5 overflow-y-auto">
+          <div className="mt-2 h-full space-y-1.5 overflow-y-auto vertical-scrollbar scrollbar-sm">
             {PROFILE_ACTION_LINKS.map((link) => {
               if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
 
               return (
                 <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
-                  <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
+                  <Tooltip
+                    tooltipContent={link.label}
+                    position="right"
+                    className="ml-2"
+                    disabled={!sidebarCollapsed}
+                    isMobile={isMobile}
+                  >
                     <div
                       className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                         link.highlight(router.pathname)
@@ -157,7 +162,7 @@ export const ProfileLayoutSidebar = observer(() => {
             <h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
-            <div className="mt-2 h-full space-y-1.5 overflow-y-auto">
+            <div className="mt-2 h-full space-y-1.5 overflow-y-auto vertical-scrollbar scrollbar-sm">
               {workspacesList.map((workspace) => (
                 <Link
                   key={workspace.id}
@@ -198,7 +203,13 @@ export const ProfileLayoutSidebar = observer(() => {
           <div className="mt-1.5">
             {WORKSPACE_ACTION_LINKS.map((link) => (
               <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
-                <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
+                <Tooltip
+                  tooltipContent={link.label}
+                  position="right"
+                  className="ml-2"
+                  disabled={!sidebarCollapsed}
+                  isMobile={isMobile}
+                >
                   <div
                     className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
                       sidebarCollapsed ? "justify-center" : ""
diff --git a/web/layouts/settings-layout/project/layout.tsx b/web/layouts/settings-layout/project/layout.tsx
index 2fb382b3a92..91f3a9f5e25 100644
--- a/web/layouts/settings-layout/project/layout.tsx
+++ b/web/layouts/settings-layout/project/layout.tsx
@@ -1,16 +1,16 @@
 import { FC, ReactNode } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
-import { useUser } from "hooks/store";
 // components
-import { ProjectSettingsSidebar } from "./sidebar";
-import { NotAuthorizedView } from "components/auth-screens";
-// ui
 import { Button, LayersIcon } from "@plane/ui";
+import { NotAuthorizedView } from "@/components/auth-screens";
+// ui
 // constants
-import { EUserProjectRoles } from "constants/project";
+import { EUserProjectRoles } from "@/constants/project";
+import { useUser } from "@/hooks/store";
+import { ProjectSettingsSidebar } from "./sidebar";
 
 export interface IProjectSettingLayout {
   children: ReactNode;
@@ -45,7 +45,9 @@ export const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props)
       <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
         <ProjectSettingsSidebar />
       </div>
-      <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll">{children}</div>
+      <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+        {children}
+      </div>
     </div>
   );
 });
diff --git a/web/layouts/settings-layout/project/sidebar.tsx b/web/layouts/settings-layout/project/sidebar.tsx
index 054add4ee37..98fc16bb906 100644
--- a/web/layouts/settings-layout/project/sidebar.tsx
+++ b/web/layouts/settings-layout/project/sidebar.tsx
@@ -1,12 +1,12 @@
 import React from "react";
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // ui
 import { Loader } from "@plane/ui";
 // hooks
-import { useUser } from "hooks/store";
+import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
+import { useUser } from "@/hooks/store";
 // constants
-import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 
 export const ProjectSettingsSidebar = () => {
   const router = useRouter();
@@ -24,8 +24,8 @@ export const ProjectSettingsSidebar = () => {
         <div className="flex flex-col gap-2">
           <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
           <Loader className="flex w-full flex-col gap-2">
-            {[...Array(8)].map(() => (
-              <Loader.Item height="34px" />
+            {[...Array(8)].map((index) => (
+              <Loader.Item key={index} height="34px" />
             ))}
           </Loader>
         </div>
diff --git a/web/layouts/settings-layout/workspace/layout.tsx b/web/layouts/settings-layout/workspace/layout.tsx
index 4ee0f1e3352..3d5d057bebd 100644
--- a/web/layouts/settings-layout/workspace/layout.tsx
+++ b/web/layouts/settings-layout/workspace/layout.tsx
@@ -10,11 +10,11 @@ export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
   const { children } = props;
 
   return (
-    <div className="inset-y-0 z-20 flex h-full w-full gap-2 overflow-x-hidden overflow-y-scroll">
+    <div className="inset-y-0 z-20 flex h-full w-full gap-2">
       <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
         <WorkspaceSettingsSidebar />
       </div>
-      <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0">
+      <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
         {children}
       </div>
     </div>
diff --git a/web/layouts/settings-layout/workspace/sidebar.tsx b/web/layouts/settings-layout/workspace/sidebar.tsx
index c8d4718c706..f49eb84d9e7 100644
--- a/web/layouts/settings-layout/workspace/sidebar.tsx
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@@ -1,12 +1,13 @@
 import React from "react";
-import { useRouter } from "next/router";
+import { observer } from "mobx-react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
-import { useUser } from "hooks/store";
+import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
 // constants
-import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
 
-export const WorkspaceSettingsSidebar = () => {
+export const WorkspaceSettingsSidebar = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -44,4 +45,4 @@ export const WorkspaceSettingsSidebar = () => {
       </div>
     </div>
   );
-};
+});
diff --git a/web/layouts/user-profile-layout/layout.tsx b/web/layouts/user-profile-layout/layout.tsx
index 60c17d8d4ef..ba7a3a88e11 100644
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/layouts/user-profile-layout/layout.tsx
@@ -1,9 +1,11 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-// hooks
-import { useUser } from "hooks/store";
+import { useRouter } from "next/router";
 // components
-import { ProfileNavbar, ProfileSidebar } from "components/profile";
+import { ProfileNavbar, ProfileSidebar } from "@/components/profile";
+// hooks
+import { useUser } from "@/hooks/store";
+// constants
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 
 type Props = {
   children: React.ReactNode;
@@ -11,27 +13,25 @@ type Props = {
   showProfileIssuesFilter?: boolean;
 };
 
-const AUTHORIZED_ROLES = [20, 15, 10];
+const AUTHORIZED_ROLES = [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.VIEWER];
 
 export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
   const { children, className, showProfileIssuesFilter } = props;
+  // router
   const router = useRouter();
-
+  // store hooks
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-
-  if (!currentWorkspaceRole) return null;
-
-  const isAuthorized = AUTHORIZED_ROLES.includes(currentWorkspaceRole);
-
+  // derived values
+  const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
   const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");
 
   return (
     <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
       <ProfileSidebar />
       <div className="flex w-full flex-col md:h-full md:overflow-hidden">
-        <ProfileNavbar isAuthorized={isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
+        <ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
         {isAuthorized || !isAuthorizedPath ? (
           <div className={`w-full overflow-hidden md:h-full ${className}`}>{children}</div>
         ) : (
diff --git a/web/lib/app-provider.tsx b/web/lib/app-provider.tsx
index 9c06947af89..46caa9ffe70 100644
--- a/web/lib/app-provider.tsx
+++ b/web/lib/app-provider.tsx
@@ -1,25 +1,24 @@
 import { FC, ReactNode } from "react";
+import { observer } from "mobx-react-lite";
 import dynamic from "next/dynamic";
 import Router from "next/router";
+import { useTheme } from "next-themes";
 import NProgress from "nprogress";
-import { observer } from "mobx-react-lite";
-import { ThemeProvider } from "next-themes";
-// hooks
-import { useApplication, useUser, useWorkspace } from "hooks/store";
-// constants
-import { THEMES } from "constants/themes";
-// layouts
-import InstanceLayout from "layouts/instance-layout";
-// contexts
-import { ToastContextProvider } from "contexts/toast.context";
 import { SWRConfig } from "swr";
+// ui
+import { Toast } from "@plane/ui";
 // constants
-import { SWR_CONFIG } from "constants/swr-config";
+import { SWR_CONFIG } from "@/constants/swr-config";
+//helpers
+import { resolveGeneralTheme } from "@/helpers/theme.helper";
+// hooks
+import { useApplication, useUser, useWorkspace } from "@/hooks/store";
+// layouts
+import InstanceLayout from "@/layouts/instance-layout";
 // dynamic imports
-const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
-const PostHogProvider = dynamic(() => import("lib/posthog-provider"), { ssr: false });
-const CrispWrapper = dynamic(() => import("lib/wrappers/crisp-wrapper"), { ssr: false });
-
+const StoreWrapper = dynamic(() => import("@/lib/wrappers/store-wrapper"), { ssr: false });
+const PostHogProvider = dynamic(() => import("@/lib/posthog-provider"), { ssr: false });
+const CrispWrapper = dynamic(() => import("@/lib/wrappers/crisp-wrapper"), { ssr: false });
 // nprogress
 NProgress.configure({ showSpinner: false });
 Router.events.on("routeChangeStart", NProgress.start);
@@ -41,27 +40,29 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
   const {
     config: { envConfig },
   } = useApplication();
+  // themes
+  const { resolvedTheme } = useTheme();
 
   return (
-    <ThemeProvider themes={THEMES} defaultTheme="system">
-      <ToastContextProvider>
-        <InstanceLayout>
-          <StoreWrapper>
-            <CrispWrapper user={currentUser}>
-              <PostHogProvider
-                user={currentUser}
-                currentWorkspaceId={currentWorkspace?.id}
-                workspaceRole={currentWorkspaceRole}
-                projectRole={currentProjectRole}
-                posthogAPIKey={envConfig?.posthog_api_key || null}
-                posthogHost={envConfig?.posthog_host || null}
-              >
-                <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
-              </PostHogProvider>
-            </CrispWrapper>
-          </StoreWrapper>
-        </InstanceLayout>
-      </ToastContextProvider>
-    </ThemeProvider>
+    <>
+      {/* TODO: Need to handle custom themes for toast */}
+      <Toast theme={resolveGeneralTheme(resolvedTheme)} />
+      <InstanceLayout>
+        <StoreWrapper>
+          <CrispWrapper user={currentUser}>
+            <PostHogProvider
+              user={currentUser}
+              currentWorkspaceId={currentWorkspace?.id}
+              workspaceRole={currentWorkspaceRole}
+              projectRole={currentProjectRole}
+              posthogAPIKey={envConfig?.posthog_api_key || null}
+              posthogHost={envConfig?.posthog_host || null}
+            >
+              <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
+            </PostHogProvider>
+          </CrispWrapper>
+        </StoreWrapper>
+      </InstanceLayout>
+    </>
   );
 });
diff --git a/web/lib/local-storage.ts b/web/lib/local-storage.ts
index e0d77dc516f..ab84b358f57 100644
--- a/web/lib/local-storage.ts
+++ b/web/lib/local-storage.ts
@@ -3,15 +3,15 @@ import isEmpty from "lodash/isEmpty";
 export const storage = {
   set: (key: string, value: object | string | boolean): void => {
     if (typeof window === undefined || typeof window === "undefined" || !key || !value) return undefined;
-    const _value: string | undefined = value
+    const tempValue: string | undefined = value
       ? ["string", "boolean"].includes(typeof value)
         ? value.toString()
         : isEmpty(value)
-        ? undefined
-        : JSON.stringify(value)
+          ? undefined
+          : JSON.stringify(value)
       : undefined;
-    if (!_value) return undefined;
-    window.localStorage.setItem(key, _value);
+    if (!tempValue) return undefined;
+    window.localStorage.setItem(key, tempValue);
   },
 
   get: (key: string): string | undefined => {
diff --git a/web/lib/posthog-provider.tsx b/web/lib/posthog-provider.tsx
index e8c1b7899a4..1f8f6f64ac6 100644
--- a/web/lib/posthog-provider.tsx
+++ b/web/lib/posthog-provider.tsx
@@ -2,12 +2,12 @@ import { FC, ReactNode, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
-// mobx store provider
 import { IUser } from "@plane/types";
-// helpers
-import { getUserRole } from "helpers/user.helper";
 // constants
-import { GROUP_WORKSPACE } from "constants/event-tracker";
+import { GROUP_WORKSPACE } from "@/constants/event-tracker";
+// helpers
+import { getUserRole } from "@/helpers/user.helper";
+// types
 
 export interface IPosthogWrapper {
   children: ReactNode;
@@ -45,6 +45,7 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
     if (posthogAPIKey && posthogHost) {
       posthog.init(posthogAPIKey, {
         api_host: posthogHost || "https://app.posthog.com",
+        debug: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "1", // Debug mode based on the environment variable
         autocapture: false,
         capture_pageview: false, // Disable automatic pageview capture, as we capture manually
       });
@@ -58,7 +59,7 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
       posthog?.identify(user.email);
       posthog?.group(GROUP_WORKSPACE, currentWorkspaceId);
     }
-  }, [currentWorkspaceId, user]);
+  }, [currentWorkspaceId, lastWorkspaceId, user]);
 
   useEffect(() => {
     // Track page views
diff --git a/web/lib/types.d.ts b/web/lib/types.d.ts
index 2b03f6975b9..8dac1ff8259 100644
--- a/web/lib/types.d.ts
+++ b/web/lib/types.d.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
diff --git a/web/lib/wrappers/crisp-wrapper.tsx b/web/lib/wrappers/crisp-wrapper.tsx
index beacf916bb5..d2771abd846 100644
--- a/web/lib/wrappers/crisp-wrapper.tsx
+++ b/web/lib/wrappers/crisp-wrapper.tsx
@@ -4,8 +4,8 @@ import { IUser } from "@plane/types";
 
 declare global {
   interface Window {
-    $crisp: any;
-    CRISP_WEBSITE_ID: any;
+    $crisp: unknown[];
+    CRISP_WEBSITE_ID: unknown;
   }
 }
 
@@ -22,8 +22,8 @@ const CrispWrapper: FC<ICrispWrapper> = (props) => {
       window.$crisp = [];
       window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_ID;
       (function () {
-        var d = document;
-        var s = d.createElement("script");
+        const d = document;
+        const s = d.createElement("script");
         s.src = "https://client.crisp.chat/l.js";
         s.async = true;
         d.getElementsByTagName("head")[0].appendChild(s);
diff --git a/web/lib/wrappers/store-wrapper.tsx b/web/lib/wrappers/store-wrapper.tsx
index 83867f557d6..f686c063c96 100644
--- a/web/lib/wrappers/store-wrapper.tsx
+++ b/web/lib/wrappers/store-wrapper.tsx
@@ -1,12 +1,12 @@
 import { ReactNode, useEffect, useState, FC } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
+import { useRouter } from "next/router";
 import { useTheme } from "next-themes";
-// hooks
-import { useApplication, useUser } from "hooks/store";
+import useSWR from "swr";
 // helpers
-import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
+import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
+// hooks
+import { useApplication, useUser } from "@/hooks/store";
 
 interface IStoreWrapper {
   children: ReactNode;
@@ -15,7 +15,7 @@ interface IStoreWrapper {
 const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
   const { children } = props;
   // states
-  const [dom, setDom] = useState<any>();
+  const [dom, setDom] = useState<unknown>();
   // router
   const router = useRouter();
   // store hooks
diff --git a/web/next.config.js b/web/next.config.js
index e018ea31731..256183e31ab 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 require("dotenv").config({ path: ".env" });
 const { withSentryConfig } = require("@sentry/nextjs");
 
@@ -24,8 +25,11 @@ const nextConfig = {
   output: "standalone",
 };
 
-if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0")) {
-  module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
+if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0", 10)) {
+  module.exports = withSentryConfig(nextConfig,
+    { silent: true, authToken: process.env.SENTRY_AUTH_TOKEN },
+    { hideSourceMaps: true }
+  );
 } else {
   module.exports = nextConfig;
 }
diff --git a/web/package.json b/web/package.json
index af28cbb3d49..de73ad407ff 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -20,7 +20,6 @@
     "@nivo/core": "0.80.0",
     "@nivo/legends": "0.80.0",
     "@nivo/line": "0.80.0",
-    "@nivo/marimekko": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
     "@plane/document-editor": "*",
@@ -29,12 +28,12 @@
     "@plane/types": "*",
     "@plane/ui": "*",
     "@popperjs/core": "^2.11.8",
-    "@sentry/nextjs": "^7.85.0",
+    "@sentry/nextjs": "^7.108.0",
     "axios": "^1.1.3",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
-    "dompurify": "^3.0.9",
+    "dompurify": "^3.0.11",
     "dotenv": "^16.0.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -71,11 +70,7 @@
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.2.17",
     "@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": "*",
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index a73cd2074db..514169deac8 100644
--- a/web/pages/404.tsx
+++ b/web/pages/404.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 
-import Link from "next/link";
+import type { NextPage } from "next";
 import Image from "next/image";
+import Link from "next/link";
 // components
-import { PageHead } from "components/core";
+import { Button } from "@plane/ui";
+import { PageHead } from "@/components/core";
 // layouts
-import DefaultLayout from "layouts/default-layout";
+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>
diff --git a/web/pages/[workspaceSlug]/active-cycles.tsx b/web/pages/[workspaceSlug]/active-cycles.tsx
index f366ddbd6c0..86bb37fa04f 100644
--- a/web/pages/[workspaceSlug]/active-cycles.tsx
+++ b/web/pages/[workspaceSlug]/active-cycles.tsx
@@ -1,15 +1,15 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react";
 // components
-import { PageHead } from "components/core";
-import { WorkspaceActiveCycleHeader } from "components/headers";
-import { WorkspaceActiveCyclesUpgrade } from "components/workspace";
+import { PageHead } from "@/components/core";
+import { WorkspaceActiveCycleHeader } from "@/components/headers";
+import { WorkspaceActiveCyclesUpgrade } from "@/components/workspace";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import { useWorkspace } from "hooks/store";
 
 const WorkspaceActiveCyclesPage: NextPageWithLayout = observer(() => {
   const { currentWorkspace } = useWorkspace();
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index 31c396b54af..6ef6f48b7b6 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -1,44 +1,33 @@
 import React, { Fragment, ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Tab } from "@headlessui/react";
-import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // components
-import { PageHead } from "components/core";
-import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
-import { WorkspaceAnalyticsHeader } from "components/headers";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// constants
-import { ANALYTICS_TABS } from "constants/analytics";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { WORKSPACE_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { WorkspaceAnalyticsHeader } from "@/components/headers";
 // type
-import { NextPageWithLayout } from "lib/types";
+// constants
+import { ANALYTICS_TABS } from "@/constants/analytics";
+import { EmptyStateType } from "@/constants/empty-state";
+import { useApplication, useEventTracker, useProject, useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const AnalyticsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { analytics_tab } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentWorkspaceRole },
-    currentUser,
-  } = useUser();
   const { workspaceProjectIds } = useProject();
   const { currentWorkspace } = useWorkspace();
   // derived values
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "analytics", isLightMode);
-  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Analytics` : undefined;
 
   return (
@@ -79,22 +68,11 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
         </div>
       ) : (
         <EmptyState
-          image={EmptyStateImagePath}
-          title={WORKSPACE_EMPTY_STATE_DETAILS["analytics"].title}
-          description={WORKSPACE_EMPTY_STATE_DETAILS["analytics"].description}
-          primaryButton={{
-            text: WORKSPACE_EMPTY_STATE_DETAILS["analytics"].primaryButton.text,
-            onClick: () => {
-              setTrackElement("Analytics empty state");
-              toggleCreateProjectModal(true);
-            },
-          }}
-          comicBox={{
-            title: WORKSPACE_EMPTY_STATE_DETAILS["analytics"].comicBox.title,
-            description: WORKSPACE_EMPTY_STATE_DETAILS["analytics"].comicBox.description,
+          type={EmptyStateType.WORKSPACE_ANALYTICS}
+          primaryButtonOnClick={() => {
+            setTrackElement("Analytics empty state");
+            toggleCreateProjectModal(true);
           }}
-          size="lg"
-          disabled={!isEditingAllowed}
         />
       )}
     </>
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
index 8a6782de889..19b8b1b7e09 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -1,20 +1,20 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // components
-import { PageHead } from "components/core";
-import { WorkspaceDashboardView } from "components/page-views";
-import { WorkspaceDashboardHeader } from "components/headers/workspace-dashboard";
+import { PageHead } from "@/components/core";
+import { WorkspaceDashboardHeader } from "@/components/headers/workspace-dashboard";
+import { WorkspaceDashboardView } from "@/components/page-views";
 // types
-import { NextPageWithLayout } from "lib/types";
 // hooks
-import { useWorkspace } from "hooks/store";
+import { useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const WorkspacePage: NextPageWithLayout = observer(() => {
   const { currentWorkspace } = useWorkspace();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Dashboard` : undefined;
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Home` : undefined;
 
   return (
     <>
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/activity.tsx b/web/pages/[workspaceSlug]/profile/[userId]/activity.tsx
new file mode 100644
index 00000000000..36319e66cd1
--- /dev/null
+++ b/web/pages/[workspaceSlug]/profile/[userId]/activity.tsx
@@ -0,0 +1,84 @@
+import { ReactElement, useState } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// hooks
+import { Button } from "@plane/ui";
+import { UserProfileHeader } from "@/components/headers";
+import { DownloadActivityButton, WorkspaceActivityListPage } from "@/components/profile";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useUser } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
+// components
+// ui
+// types
+import { NextPageWithLayout } from "@/lib/types";
+// constants
+
+const PER_PAGE = 100;
+
+const ProfileActivityPage: NextPageWithLayout = observer(() => {
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
+  // router
+  const router = useRouter();
+  const { userId } = router.query;
+  // store hooks
+  const {
+    currentUser,
+    membership: { currentWorkspaceRole },
+  } = useUser();
+
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const activityPages: JSX.Element[] = [];
+  for (let i = 0; i < pageCount; i++)
+    activityPages.push(
+      <WorkspaceActivityListPage
+        key={i}
+        cursor={`${PER_PAGE}:${i}:0`}
+        perPage={PER_PAGE}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+      />
+    );
+
+  const canDownloadActivity =
+    currentUser?.id === userId && !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
+  return (
+    <div className="h-full w-full py-5 flex flex-col overflow-hidden">
+      <div className="flex items-center justify-between gap-2 px-5 md:px-9">
+        <h3 className="text-lg font-medium">Recent activity</h3>
+        {canDownloadActivity && <DownloadActivityButton />}
+      </div>
+      <div className="h-full flex flex-col overflow-y-auto vertical-scrollbar scrollbar-md px-5 md:px-9">
+        {activityPages}
+        {pageCount < totalPages && resultsCount !== 0 && (
+          <div className="flex items-center justify-center text-xs w-full">
+            <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+              Load more
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+ProfileActivityPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<UserProfileHeader type="Activity" />}>
+      <ProfileAuthWrapper>{page}</ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default ProfileActivityPage;
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
index 1cef81e7843..bc770cc95dd 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement } from "react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProfileAuthWrapper } from "layouts/user-profile-layout";
+import { PageHead } from "@/components/core";
+import { UserProfileHeader } from "@/components/headers";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
 // components
-import { UserProfileHeader } from "components/headers";
-import { PageHead } from "components/core";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { ProfileIssuesPage } from "components/profile/profile-issues";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProfileAssignedIssuesPage: NextPageWithLayout = () => (
   <>
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
index 47a8445d7ce..ef7179f0b96 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@@ -2,14 +2,14 @@ import { ReactElement } from "react";
 // store
 import { observer } from "mobx-react-lite";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProfileAuthWrapper } from "layouts/user-profile-layout";
+import { PageHead } from "@/components/core";
+import { UserProfileHeader } from "@/components/headers";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
 // components
-import { UserProfileHeader } from "components/headers";
-import { PageHead } from "components/core";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { ProfileIssuesPage } from "components/profile/profile-issues";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProfileCreatedIssuesPage: NextPageWithLayout = () => (
   <>
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
index a4d1debe1c9..66e820f90de 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
@@ -1,27 +1,27 @@
 import { ReactElement } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { IUserStateDistribution, TStateGroups } from "@plane/types";
 // services
-import { UserService } from "services/user.service";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
-import { UserProfileHeader } from "components/headers";
-import { PageHead } from "components/core";
+import { PageHead } from "@/components/core";
+import { UserProfileHeader } from "@/components/headers";
 import {
   ProfileActivity,
   ProfilePriorityDistribution,
   ProfileStateDistribution,
   ProfileStats,
   ProfileWorkload,
-} from "components/profile";
+} from "@/components/profile";
 // types
-import { IUserStateDistribution, TStateGroups } from "@plane/types";
-import { NextPageWithLayout } from "lib/types";
 // constants
-import { USER_PROFILE_DATA } from "constants/fetch-keys";
-import { GROUP_CHOICES } from "constants/project";
+import { USER_PROFILE_DATA } from "@/constants/fetch-keys";
+import { GROUP_CHOICES } from "@/constants/project";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
+import { NextPageWithLayout } from "@/lib/types";
+import { UserService } from "@/services/user.service";
 
 // services
 const userService = new UserService();
@@ -45,7 +45,7 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
   return (
     <>
       <PageHead title="Profile - Summary" />
-      <div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9">
+      <div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9 vertical-scrollbar scrollbar-md">
         <ProfileStats userProfile={userProfile} />
         <ProfileWorkload stateDistribution={stateDistribution} />
         <div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
index c05c3930292..e4a871ec8b3 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@@ -2,14 +2,14 @@ import { ReactElement } from "react";
 // store
 import { observer } from "mobx-react-lite";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProfileAuthWrapper } from "layouts/user-profile-layout";
+import { PageHead } from "@/components/core";
+import { UserProfileHeader } from "@/components/headers";
+import { ProfileIssuesPage } from "@/components/profile/profile-issues";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProfileAuthWrapper } from "@/layouts/user-profile-layout";
 // components
-import { UserProfileHeader } from "components/headers";
-import { PageHead } from "components/core";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { ProfileIssuesPage } from "components/profile/profile-issues";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProfileSubscribedIssuesPage: NextPageWithLayout = () => (
   <>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archives/cycles/index.tsx
new file mode 100644
index 00000000000..bcc406fa087
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archives/cycles/index.tsx
@@ -0,0 +1,44 @@
+import { ReactElement } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// components
+import { PageHead } from "@/components/core";
+import { ArchivedCycleLayoutRoot, ArchivedCyclesHeader } from "@/components/cycles";
+import { ProjectArchivesHeader } from "@/components/headers";
+// hooks
+import { useProject } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
+
+const ProjectArchivedCyclesPage: NextPageWithLayout = observer(() => {
+  // router
+  const router = useRouter();
+  const { projectId } = router.query;
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && `${project?.name} - Archived cycles`;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <ArchivedCyclesHeader />
+        <ArchivedCycleLayoutRoot />
+      </div>
+    </>
+  );
+});
+
+ProjectArchivedCyclesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectArchivesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectArchivedCyclesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
similarity index 82%
rename from web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
rename to web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
index ee1be4ebb08..12b0c83917d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
@@ -1,25 +1,24 @@
 import { useState, ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 import useSWR from "swr";
+// icons
+import { ArchiveRestoreIcon } from "lucide-react";
+// ui
+import { ArchiveIcon, Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { PageHead } from "@/components/core";
+import { ProjectArchivedIssueDetailsHeader } from "@/components/headers";
+import { IssueDetailRoot } from "@/components/issues";
+// constants
+import { EIssuesStoreType } from "@/constants/issue";
+import { EUserProjectRoles } from "@/constants/project";
 // hooks
-import useToast from "hooks/use-toast";
-import { useIssueDetail, useIssues, useProject, useUser } from "hooks/store";
+import { useIssueDetail, useIssues, useProject, useUser } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-// components
-import { IssueDetailRoot } from "components/issues";
-import { ProjectArchivedIssueDetailsHeader } from "components/headers";
-import { PageHead } from "components/core";
-// ui
-import { ArchiveIcon, Button, Loader } from "@plane/ui";
-// icons
-import { RotateCcw } from "lucide-react";
+import { AppLayout } from "@/layouts/app-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
-// constants
-import { EIssuesStoreType } from "constants/issue";
-import { EUserProjectRoles } from "constants/project";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
@@ -35,7 +34,6 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
   const {
     issues: { restoreIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const { setToastAlert } = useToast();
   const { getProjectById } = useProject();
   const {
     membership: { currentProjectRole },
@@ -66,20 +64,21 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
 
     await restoreIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString())
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success",
           message:
             issue &&
-            `${getProjectById(issue.project_id)?.identifier}-${
-              issue?.sequence_id
-            } is restored successfully under the project ${getProjectById(issue.project_id)?.name}`,
+            `${getProjectById(issue.project_id)
+              ?.identifier}-${issue?.sequence_id} is restored successfully under the project ${getProjectById(
+              issue.project_id
+            )?.name}`,
         });
         router.push(`/${workspaceSlug}/projects/${projectId}/issues/${archivedIssueId}`);
       })
       .catch(() => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong. Please try again.",
         });
@@ -113,7 +112,7 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
             {issue?.archived_at && canRestoreIssue && (
               <div className="flex items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200">
                 <div className="flex items-center gap-2">
-                  <ArchiveIcon className="h-3.5 w-3.5" />
+                  <ArchiveIcon className="h-4 w-4" />
                   <p>This issue has been archived.</p>
                 </div>
                 <Button
@@ -122,7 +121,7 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
                   disabled={isRestoring}
                   variant="neutral-primary"
                 >
-                  <RotateCcw className="h-3 w-3" />
+                  <ArchiveRestoreIcon className="h-3.5 w-3.5" />
                   <span>{isRestoring ? "Restoring" : "Restore"}</span>
                 </Button>
               </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/index.tsx
similarity index 58%
rename from web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
rename to web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/index.tsx
index 34019c02632..b2c08e0a3e6 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/index.tsx
@@ -1,17 +1,16 @@
 import { ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-// contexts
-import { ArchivedIssueLayoutRoot } from "components/issues";
+import { useRouter } from "next/router";
 // components
-import { ProjectArchivedIssuesHeader } from "components/headers";
-import { PageHead } from "components/core";
-// types
-import { NextPageWithLayout } from "lib/types";
+import { PageHead } from "@/components/core";
+import { ProjectArchivesHeader } from "@/components/headers";
+import { ArchivedIssueLayoutRoot, ArchivedIssuesHeader } from "@/components/issues";
 // hooks
-import { useProject } from "hooks/store";
+import { useProject } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectArchivedIssuesPage: NextPageWithLayout = observer(() => {
   // router
@@ -26,14 +25,17 @@ const ProjectArchivedIssuesPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <ArchivedIssueLayoutRoot />
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <ArchivedIssuesHeader />
+        <ArchivedIssueLayoutRoot />
+      </div>
     </>
   );
 });
 
 ProjectArchivedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectArchivedIssuesHeader />} withProjectWrapper>
+    <AppLayout header={<ProjectArchivesHeader />} withProjectWrapper>
       {page}
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archives/modules/index.tsx
new file mode 100644
index 00000000000..1e346098e67
--- /dev/null
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archives/modules/index.tsx
@@ -0,0 +1,44 @@
+import { ReactElement } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// components
+import { PageHead } from "@/components/core";
+import { ProjectArchivesHeader } from "@/components/headers";
+import { ArchivedModuleLayoutRoot, ArchivedModulesHeader } from "@/components/modules";
+// hooks
+import { useProject } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
+
+const ProjectArchivedModulesPage: NextPageWithLayout = observer(() => {
+  // router
+  const router = useRouter();
+  const { projectId } = router.query;
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const project = projectId ? getProjectById(projectId.toString()) : undefined;
+  const pageTitle = project?.name && `${project?.name} - Archived modules`;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <ArchivedModulesHeader />
+        <ArchivedModuleLayoutRoot />
+      </div>
+    </>
+  );
+});
+
+ProjectArchivedModulesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectArchivesHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectArchivedModulesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 7b5ec883312..6bde8da41ad 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -1,23 +1,24 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 // hooks
-import { useCycle, useProject } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { CycleDetailsSidebar } from "@/components/cycles";
+import { CycleMobileHeader } from "@/components/cycles/cycle-mobile-header";
+import { CycleIssuesHeader } from "@/components/headers";
+import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
+import { useCycle, useProject } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // components
-import { PageHead } from "components/core";
-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 { NextPageWithLayout } from "@/lib/types";
 import emptyCycle from "public/empty-state/cycle.svg";
 // types
-import { NextPageWithLayout } from "lib/types";
 
 const CycleDetailPage: NextPageWithLayout = observer(() => {
   // router
@@ -67,7 +68,7 @@ const CycleDetailPage: NextPageWithLayout = observer(() => {
             </div>
             {cycleId && !isSidebarCollapsed && (
               <div
-                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 vertical-scrollbar scrollbar-sm"
+                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm"
                 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)",
@@ -85,7 +86,7 @@ const CycleDetailPage: NextPageWithLayout = observer(() => {
 
 CycleDetailPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<CycleIssuesHeader />} withProjectWrapper>
+    <AppLayout header={<CycleIssuesHeader />} mobileHeader={<CycleMobileHeader />} withProjectWrapper>
       {page}
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 0f86089aa69..5fd59d871ac 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -1,69 +1,64 @@
-import { Fragment, useCallback, useState, ReactElement } from "react";
-import { useRouter } from "next/router";
+import { Fragment, useState, ReactElement } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Tab } from "@headlessui/react";
-import { useTheme } from "next-themes";
+import { TCycleFilters } from "@plane/types";
 // hooks
-import { useEventTracker, useCycle, useUser, useProject } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
+import { PageHead } from "@/components/core";
+import {
+  CyclesView,
+  CycleCreateUpdateModal,
+  CyclesViewHeader,
+  CycleAppliedFiltersList,
+  ActiveCycleRoot,
+} from "@/components/cycles";
+import CyclesListMobileHeader from "@/components/cycles/cycles-list-mobile-header";
+import { EmptyState } from "@/components/empty-state";
+import { CyclesHeader } from "@/components/headers";
+import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
+import { CYCLE_TABS_LIST } from "@/constants/cycle";
+import { EmptyStateType } from "@/constants/empty-state";
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { useEventTracker, useCycle, useProject, useCycleFilter } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // components
-import { PageHead } from "components/core";
-import { CyclesHeader } from "components/headers";
-import { CyclesView, ActiveCycleDetails, CycleCreateUpdateModal } from "components/cycles";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Tooltip } from "@plane/ui";
-import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "components/ui";
+// helpers
 // types
-import { TCycleView, TCycleLayout } from "@plane/types";
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { CYCLE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 const ProjectCyclesPage: NextPageWithLayout = observer(() => {
+  // states
   const [createModal, setCreateModal] = useState(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const { setTrackElement } = useEventTracker();
-  const {
-    membership: { currentProjectRole },
-    currentUser,
-  } = useUser();
   const { currentProjectCycleIds, loader } = useCycle();
   const { getProjectById } = useProject();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
-  // local storage
-  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage<TCycleView>("cycle_tab", "active");
-  const { storedValue: cycleLayout, setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
+  // cycle filters hook
+  const { clearAllFilters, currentProjectDisplayFilters, currentProjectFilters, updateDisplayFilters, updateFilters } =
+    useCycleFilter();
   // derived values
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "cycles", isLightMode);
   const totalCycles = currentProjectCycleIds?.length ?? 0;
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
   const project = projectId ? getProjectById(projectId?.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Cycles` : undefined;
+  // selected display filters
+  const cycleTab = currentProjectDisplayFilters?.active_tab;
+  const cycleLayout = currentProjectDisplayFilters?.layout ?? "list";
 
-  const handleCurrentLayout = useCallback(
-    (_layout: TCycleLayout) => {
-      setCycleLayout(_layout);
-    },
-    [setCycleLayout]
-  );
+  const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
+    if (!projectId) return;
+    let newValues = currentProjectFilters?.[key] ?? [];
 
-  const handleCurrentView = useCallback(
-    (_view: TCycleView) => {
-      setCycleTab(_view);
-      if (_view === "draft") handleCurrentLayout("list");
-    },
-    [handleCurrentLayout, setCycleTab]
-  );
+    if (!value) newValues = [];
+    else newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(projectId.toString(), { [key]: newValues });
+  };
 
   if (!workspaceSlug || !projectId) return null;
 
@@ -89,128 +84,49 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
         {totalCycles === 0 ? (
           <div className="h-full place-items-center">
             <EmptyState
-              title={CYCLE_EMPTY_STATE_DETAILS["cycles"].title}
-              description={CYCLE_EMPTY_STATE_DETAILS["cycles"].description}
-              image={EmptyStateImagePath}
-              comicBox={{
-                title: CYCLE_EMPTY_STATE_DETAILS["cycles"].comicBox.title,
-                description: CYCLE_EMPTY_STATE_DETAILS["cycles"].comicBox.description,
+              type={EmptyStateType.PROJECT_CYCLES}
+              primaryButtonOnClick={() => {
+                setTrackElement("Cycle empty state");
+                setCreateModal(true);
               }}
-              primaryButton={{
-                text: CYCLE_EMPTY_STATE_DETAILS["cycles"].primaryButton.text,
-                onClick: () => {
-                  setTrackElement("Cycle empty state");
-                  setCreateModal(true);
-                },
-              }}
-              size="lg"
-              disabled={!isEditingAllowed}
             />
           </div>
         ) : (
           <Tab.Group
             as="div"
             className="flex h-full flex-col overflow-hidden"
-            defaultIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleTab)}
-            selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleTab)}
-            onChange={(i) => handleCurrentView(CYCLE_TAB_LIST[i]?.key ?? "active")}
+            defaultIndex={CYCLE_TABS_LIST.findIndex((i) => i.key == cycleTab)}
+            selectedIndex={CYCLE_TABS_LIST.findIndex((i) => i.key == cycleTab)}
+            onChange={(i) => {
+              if (!projectId) return;
+              const tab = CYCLE_TABS_LIST[i];
+              if (!tab) return;
+              updateDisplayFilters(projectId.toString(), {
+                active_tab: tab.key,
+              });
+            }}
           >
-            <div className="flex flex-col items-start justify-between gap-4 border-b border-custom-border-200 px-4 sm:flex-row sm:items-center sm:px-5 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>
-              <div className="hidden sm:block">
-                {cycleTab !== "active" && (
-                  <div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-custom-background-80 p-1">
-                    {CYCLE_VIEW_LAYOUTS.map((layout) => {
-                      if (layout.key === "gantt" && cycleTab === "draft") return null;
-
-                      return (
-                        <Tooltip key={layout.key} tooltipContent={layout.title}>
-                          <button
-                            type="button"
-                            className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                              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 ${
-                                cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
-                              }`}
-                            />
-                          </button>
-                        </Tooltip>
-                      );
-                    })}
-                  </div>
-                )}
+            <CyclesViewHeader projectId={projectId.toString()} />
+            {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
+              <div className="border-b border-custom-border-200 px-5 py-3">
+                <CycleAppliedFiltersList
+                  appliedFilters={currentProjectFilters ?? {}}
+                  handleClearAllFilters={() => clearAllFilters(projectId.toString())}
+                  handleRemoveFilter={handleRemoveFilter}
+                />
               </div>
-            </div>
-
+            )}
             <Tab.Panels as={Fragment}>
-              <Tab.Panel as="div" className="h-full overflow-y-auto">
-                {cycleTab && cycleLayout && (
-                  <CyclesView
-                    filter="all"
-                    layout={cycleLayout}
-                    workspaceSlug={workspaceSlug.toString()}
-                    projectId={projectId.toString()}
-                    peekCycle={peekCycle?.toString()}
-                  />
-                )}
-              </Tab.Panel>
-
               <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto p-4 sm:p-5">
-                <ActiveCycleDetails workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
-              </Tab.Panel>
-
-              <Tab.Panel as="div" className="h-full overflow-y-auto">
-                {cycleTab && cycleLayout && (
-                  <CyclesView
-                    filter="upcoming"
-                    layout={cycleLayout as TCycleLayout}
-                    workspaceSlug={workspaceSlug.toString()}
-                    projectId={projectId.toString()}
-                    peekCycle={peekCycle?.toString()}
-                  />
-                )}
+                <ActiveCycleRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
               </Tab.Panel>
-
-              <Tab.Panel as="div" className="h-full overflow-y-auto">
-                {cycleTab && cycleLayout && workspaceSlug && projectId && (
-                  <CyclesView
-                    filter="completed"
-                    layout={cycleLayout as TCycleLayout}
-                    workspaceSlug={workspaceSlug.toString()}
-                    projectId={projectId.toString()}
-                    peekCycle={peekCycle?.toString()}
-                  />
-                )}
-              </Tab.Panel>
-
               <Tab.Panel as="div" className="h-full overflow-y-auto">
-                {cycleTab && cycleLayout && workspaceSlug && projectId && (
-                  <CyclesView
-                    filter="draft"
-                    layout={cycleLayout as TCycleLayout}
-                    workspaceSlug={workspaceSlug.toString()}
-                    projectId={projectId.toString()}
-                    peekCycle={peekCycle?.toString()}
-                  />
-                )}
+                <CyclesView
+                  layout={cycleLayout}
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  peekCycle={peekCycle?.toString()}
+                />
               </Tab.Panel>
             </Tab.Panels>
           </Tab.Group>
@@ -222,7 +138,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
 
 ProjectCyclesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<CyclesHeader />} withProjectWrapper>
+    <AppLayout header={<CyclesHeader />} mobileHeader={<CyclesListMobileHeader />} withProjectWrapper>
       {page}
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
index bf11063c3b2..f6e0658d9a1 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -1,17 +1,17 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { X, PenSquare } from "lucide-react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // components
-import { DraftIssueLayoutRoot } from "components/issues/issue-layouts/roots/draft-issue-layout-root";
-import { PageHead } from "components/core";
-import { ProjectDraftIssueHeader } from "components/headers";
+import { PageHead } from "@/components/core";
+import { ProjectDraftIssueHeader } from "@/components/headers";
+import { DraftIssueLayoutRoot } from "@/components/issues/issue-layouts/roots/draft-issue-layout-root";
 // types
-import { NextPageWithLayout } from "lib/types";
 // hooks
-import { useProject } from "hooks/store";
-import { observer } from "mobx-react";
+import { useProject } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectDraftIssuesPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index de412c9d7dd..03b1cc96357 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -1,18 +1,18 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 // hooks
-import { useProject, useInboxIssues } from "hooks/store";
+import { PageHead } from "@/components/core";
+import { ProjectInboxHeader } from "@/components/headers";
+import { InboxSidebarRoot, InboxContentRoot } from "@/components/inbox";
+import { InboxLayoutLoader } from "@/components/ui";
+import { useProject, useInboxIssues } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // components
-import { InboxLayoutLoader } from "components/ui";
-import { PageHead } from "components/core";
-import { ProjectInboxHeader } from "components/headers";
-import { InboxSidebarRoot, InboxContentRoot } from "components/inbox";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectInboxPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
index 1021ad1020e..6f8bdda93e7 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
@@ -1,17 +1,17 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 // hooks
-import { useInbox, useProject } from "hooks/store";
+import { ProjectInboxHeader } from "@/components/headers";
+import { InboxLayoutLoader } from "@/components/ui";
+import { useInbox, useProject } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // ui
-import { InboxLayoutLoader } from "components/ui";
 // components
-import { ProjectInboxHeader } from "components/headers";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectInboxPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 6ff7d5aa512..539373652a3 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,19 +1,19 @@
 import React, { ReactElement, useEffect } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { Loader } from "@plane/ui";
+import { PageHead } from "@/components/core";
 // components
-import { PageHead } from "components/core";
-import { ProjectIssueDetailsHeader } from "components/headers";
-import { IssueDetailRoot } from "components/issues";
+import { ProjectIssueDetailsHeader } from "@/components/headers";
+import { IssueDetailRoot } from "@/components/issues";
 // ui
-import { Loader } from "@plane/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
 // store hooks
-import { useApplication, useIssueDetail, useProject } from "hooks/store";
+import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const IssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 2aa9ab2e6a2..381b16267ce 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -1,17 +1,18 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react";
 // components
-import { ProjectLayoutRoot } from "components/issues";
-import { ProjectIssuesHeader } from "components/headers";
+import { PageHead } from "@/components/core";
+import { ProjectIssuesHeader } from "@/components/headers";
+import { ProjectLayoutRoot } from "@/components/issues";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { IssuesMobileHeader } from "@/components/issues/issues-mobile-header";
+import { useProject } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // hooks
-import { useProject } from "hooks/store";
-import { PageHead } from "components/core";
 
 const ProjectIssuesPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
@@ -42,7 +43,7 @@ const ProjectIssuesPage: NextPageWithLayout = observer(() => {
 
 ProjectIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ProjectIssuesHeader />} withProjectWrapper>
+    <AppLayout header={<ProjectIssuesHeader />} mobileHeader={<IssuesMobileHeader />} withProjectWrapper>
       {page}
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index afbd97b8e22..d6a0c034230 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -1,22 +1,23 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 // hooks
-import { useModule, useProject } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { ModuleIssuesHeader } from "@/components/headers";
+import { ModuleLayoutRoot } from "@/components/issues";
+import { ModuleDetailsSidebar } from "@/components/modules";
+import { ModuleMobileHeader } from "@/components/modules/module-mobile-header";
+import { useModule, useProject } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // components
-import { ModuleDetailsSidebar } from "components/modules";
-import { ModuleLayoutRoot } from "components/issues";
-import { ModuleIssuesHeader } from "components/headers";
-import { PageHead } from "components/core";
-import { EmptyState } from "components/common";
 // assets
+import { NextPageWithLayout } from "@/lib/types";
 import emptyModule from "public/empty-state/module.svg";
 // types
-import { NextPageWithLayout } from "lib/types";
 
 const ModuleIssuesPage: NextPageWithLayout = observer(() => {
   // router
@@ -66,7 +67,7 @@ const ModuleIssuesPage: NextPageWithLayout = observer(() => {
           </div>
           {moduleId && !isSidebarCollapsed && (
             <div
-              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 vertical-scrollbar scrollbar-sm"
+              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm"
               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)",
@@ -83,7 +84,7 @@ const ModuleIssuesPage: NextPageWithLayout = observer(() => {
 
 ModuleIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
+    <AppLayout header={<ModuleIssuesHeader />} mobileHeader={<ModuleMobileHeader />} withProjectWrapper>
       {page}
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 085f1e3c3bc..8f626bfdf30 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -1,37 +1,66 @@
-import { ReactElement } from "react";
+import { ReactElement, useCallback } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
+import { TModuleFilters } from "@plane/types";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // components
-import { PageHead } from "components/core";
-import { ModulesListView } from "components/modules";
-import { ModulesListHeader } from "components/headers";
+import { PageHead } from "@/components/core";
+import { ModulesListHeader } from "@/components/headers";
+import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
 // types
-import { NextPageWithLayout } from "lib/types";
 // hooks
-import { useProject } from "hooks/store";
-import { observer } from "mobx-react";
+import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { useModuleFilter, useProject } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectModulesPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { projectId } = router.query;
   // store
   const { getProjectById } = useProject();
+  const { currentProjectFilters, clearAllFilters, updateFilters } = useModuleFilter();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Modules` : undefined;
 
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [currentProjectFilters, projectId, updateFilters]
+  );
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <ModulesListView />
+      <div className="h-full w-full flex flex-col">
+        {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
+          <div className="border-b border-custom-border-200 px-5 py-3">
+            <ModuleAppliedFiltersList
+              appliedFilters={currentProjectFilters ?? {}}
+              handleClearAllFilters={() => clearAllFilters(`${projectId}`)}
+              handleRemoveFilter={handleRemoveFilter}
+              alwaysAllowEditing
+            />
+          </div>
+        )}
+        <ModulesListView />
+      </div>
     </>
   );
 });
 
 ProjectModulesPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<ModulesListHeader />} withProjectWrapper>
+    <AppLayout header={<ModulesListHeader />} mobileHeader={<ModulesListMobileHeader />} withProjectWrapper>
       {page}
     </AppLayout>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index bee4fc9c724..02fb238feae 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -1,34 +1,34 @@
-import { Sparkle } from "lucide-react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 import { useRouter } from "next/router";
-import { ReactElement, useEffect, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
+import useSWR from "swr";
+import { Sparkle } from "lucide-react";
+import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
+import { IPage } from "@plane/types";
 // hooks
 
-import { useApplication, usePage, useUser, useWorkspace } from "hooks/store";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
-import useToast from "hooks/use-toast";
+import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { GptAssistantPopover, PageHead } from "@/components/core";
+import { PageDetailsHeader } from "@/components/headers/page-details";
+import { IssuePeekOverview } from "@/components/issues";
+import { EUserProjectRoles } from "@/constants/project";
+import { getDate } from "@/helpers/date-time.helper";
+import { useApplication, usePage, useUser, useWorkspace } from "@/hooks/store";
+import { useProjectPages } from "@/hooks/store/use-project-specific-pages";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // services
-import { FileService } from "services/file.service";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
+import { FileService } from "@/services/file.service";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // components
-import { GptAssistantPopover, PageHead } from "components/core";
-import { PageDetailsHeader } from "components/headers/page-details";
 // ui
-import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
-import { Spinner } from "@plane/ui";
 // assets
 // helpers
 // types
-import { IPage } from "@plane/types";
-import { NextPageWithLayout } from "lib/types";
 // fetch-keys
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { useProjectPages } from "hooks/store/use-project-specific-pages";
-import { IssuePeekOverview } from "components/issues";
 
 // services
 const fileService = new FileService();
@@ -53,10 +53,8 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     currentUser,
     membership: { currentProjectRole },
   } = useUser();
-  // toast alert
-  const { setToastAlert } = useToast();
 
-  const { handleSubmit, setValue, watch, getValues, control, reset } = useForm<IPage>({
+  const { handleSubmit, getValues, control, reset } = useForm<IPage>({
     defaultValues: { name: "", description_html: "" },
   });
 
@@ -127,16 +125,13 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   const updatePage = async (formData: IPage) => {
     if (!workspaceSlug || !projectId || !pageId) return;
-    await updateDescriptionAction(formData.description_html);
+    updateDescriptionAction(formData.description_html);
   };
 
   const handleAiAssistance = async (response: string) => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
-    const newDescription = `${watch("description_html")}<p>${response}</p>`;
-    setValue("description_html", newDescription);
-    editorRef.current?.setEditorValue(newDescription);
-    updateDescriptionAction(newDescription);
+    editorRef.current?.setEditorValueAtCursorPosition(response);
   };
 
   const actionCompleteAlert = ({
@@ -148,10 +143,10 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
     message: string;
     type: "success" | "error" | "warning" | "info";
   }) => {
-    setToastAlert({
+    setToast({
       title,
       message,
-      type,
+      type: type as TOAST_TYPE,
     });
   };
 
@@ -271,8 +266,8 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
               documentDetails={{
                 title: pageTitle,
                 created_by: created_by,
-                created_on: created_at,
-                last_updated_at: updated_at,
+                created_on: getDate(created_at) ?? new Date(created_at ?? ""),
+                last_updated_at: getDate(updated_at) ?? new Date(created_at ?? ""),
                 last_updated_by: updated_by,
               }}
               pageLockConfig={userCanLock && !archived_at ? { action: unlockPage, is_locked: is_locked } : undefined}
@@ -282,7 +277,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
                   ? {
                       action: archived_at ? unArchivePage : archivePage,
                       is_archived: archived_at ? true : false,
-                      archived_at: archived_at ? new Date(archived_at) : undefined,
+                      archived_at: getDate(archived_at),
                     }
                   : undefined
               }
@@ -298,8 +293,8 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
                     documentDetails={{
                       title: pageTitle,
                       created_by: created_by,
-                      created_on: created_at,
-                      last_updated_at: updated_at,
+                      created_on: getDate(created_at) ?? new Date(created_at ?? ""),
+                      last_updated_at: getDate(updated_at) ?? new Date(created_at ?? ""),
                       last_updated_by: updated_by,
                     }}
                     uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
@@ -314,7 +309,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
                     updatePageTitle={updatePageTitle}
                     onActionCompleteHandler={actionCompleteAlert}
                     customClassName="tracking-tight self-center h-full w-full right-[0.675rem]"
-                    onChange={(_description_json: Object, description_html: string) => {
+                    onChange={(_description_json: any, description_html: string) => {
                       setShowAlert(true);
                       onChange(description_html);
                       handleSubmit(updatePage)();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index a8c85ef8dc5..1912565a792 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -1,48 +1,46 @@
 import { useState, Fragment, ReactElement } from "react";
-import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import dynamic from "next/dynamic";
-import { Tab } from "@headlessui/react";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
+import { Tab } from "@headlessui/react";
 // hooks
-import { useApplication, useEventTracker, useUser, useProject } from "hooks/store";
-import useLocalStorage from "hooks/use-local-storage";
-import useUserAuth from "hooks/use-user-auth";
-import useSize from "hooks/use-window-size";
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { PagesHeader } from "@/components/headers";
+import { RecentPagesList, CreateUpdatePageModal } from "@/components/pages";
+import { PagesLoader } from "@/components/ui";
+import { EmptyStateType } from "@/constants/empty-state";
+import { PAGE_TABS_LIST } from "@/constants/page";
+import { useApplication, useEventTracker, useUser, useProject } from "@/hooks/store";
+import { useProjectPages } from "@/hooks/store/use-project-page";
+import useLocalStorage from "@/hooks/use-local-storage";
+import useUserAuth from "@/hooks/use-user-auth";
+import useSize from "@/hooks/use-window-size";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // components
-import { RecentPagesList, CreateUpdatePageModal } from "components/pages";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-import { PagesHeader } from "components/headers";
-import { PagesLoader } from "components/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { PAGE_TABS_LIST } from "constants/page";
-import { useProjectPages } from "hooks/store/use-project-page";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { PAGE_EMPTY_STATE_DETAILS } from "constants/empty-state";
-import { PageHead } from "components/core";
 
-const AllPagesList = dynamic<any>(() => import("components/pages").then((a) => a.AllPagesList), {
+const AllPagesList = dynamic<any>(() => import("@/components/pages").then((a) => a.AllPagesList), {
   ssr: false,
 });
 
-const FavoritePagesList = dynamic<any>(() => import("components/pages").then((a) => a.FavoritePagesList), {
+const FavoritePagesList = dynamic<any>(() => import("@/components/pages").then((a) => a.FavoritePagesList), {
   ssr: false,
 });
 
-const PrivatePagesList = dynamic<any>(() => import("components/pages").then((a) => a.PrivatePagesList), {
+const PrivatePagesList = dynamic<any>(() => import("@/components/pages").then((a) => a.PrivatePagesList), {
   ssr: false,
 });
 
-const ArchivedPagesList = dynamic<any>(() => import("components/pages").then((a) => a.ArchivedPagesList), {
+const ArchivedPagesList = dynamic<any>(() => import("@/components/pages").then((a) => a.ArchivedPagesList), {
   ssr: false,
 });
 
-const SharedPagesList = dynamic<any>(() => import("components/pages").then((a) => a.SharedPagesList), {
+const SharedPagesList = dynamic<any>(() => import("@/components/pages").then((a) => a.SharedPagesList), {
   ssr: false,
 });
 
@@ -52,14 +50,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // states
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    currentUser,
-    currentUserLoader,
-    membership: { currentProjectRole },
-  } = useUser();
+  const { currentUser, currentUserLoader } = useUser();
   const {
     commandPalette: { toggleCreatePageModal },
   } = useApplication();
@@ -103,9 +95,6 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
   };
 
   // derived values
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "pages", isLightMode);
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Pages` : undefined;
 
@@ -216,22 +205,11 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
         </>
       ) : (
         <EmptyState
-          image={EmptyStateImagePath}
-          title={PAGE_EMPTY_STATE_DETAILS["pages"].title}
-          description={PAGE_EMPTY_STATE_DETAILS["pages"].description}
-          primaryButton={{
-            text: PAGE_EMPTY_STATE_DETAILS["pages"].primaryButton.text,
-            onClick: () => {
-              setTrackElement("Pages empty state");
-              toggleCreatePageModal(true);
-            },
-          }}
-          comicBox={{
-            title: PAGE_EMPTY_STATE_DETAILS["pages"].comicBox.title,
-            description: PAGE_EMPTY_STATE_DETAILS["pages"].comicBox.description,
+          type={EmptyStateType.PROJECT_PAGE}
+          primaryButtonOnClick={() => {
+            setTrackElement("Pages empty state");
+            toggleCreatePageModal(true);
           }}
-          size="lg"
-          disabled={!isEditingAllowed}
         />
       )}
     </>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 8c4780cba0c..6dd3c6f8d89 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -1,29 +1,30 @@
 import React, { ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { IProject } from "@plane/types";
 // hooks
-import { useProject, useUser } from "hooks/store";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automation";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
+// ui
+// components
+import { PageHead } from "@/components/core";
+import { ProjectSettingHeader } from "@/components/headers";
+import { EUserProjectRoles } from "@/constants/project";
+import { useProject, useUser } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+// layouts
+import { ProjectSettingLayout } from "@/layouts/settings-layout";
 // hooks
-import useToast from "hooks/use-toast";
 // components
-import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
-import { PageHead } from "components/core";
-import { ProjectSettingHeader } from "components/headers";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { IProject } from "@plane/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
 
 const AutomationSettingsPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const {
     membership: { currentProjectRole },
@@ -34,8 +35,8 @@ const AutomationSettingsPage: NextPageWithLayout = observer(() => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
     await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Something went wrong. Please try again.",
       });
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 3aea45adbc0..91d553958b2 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -1,18 +1,18 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useUser, useProject } from "hooks/store";
+import { PageHead } from "@/components/core";
+import { EstimatesList } from "@/components/estimates";
+import { ProjectSettingHeader } from "@/components/headers";
+import { EUserProjectRoles } from "@/constants/project";
+import { useUser, useProject } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProjectSettingLayout } from "@/layouts/settings-layout";
 // components
-import { PageHead } from "components/core";
-import { ProjectSettingHeader } from "components/headers";
-import { EstimatesList } from "components/estimates";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
 
 const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
   const {
@@ -26,7 +26,7 @@ const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className={`h-full w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "pointer-events-none opacity-60"}`}>
+      <div className={`w-full overflow-y-auto py-8 pr-9  ${isAdmin ? "" : "pointer-events-none opacity-60"}`}>
         <EstimatesList />
       </div>
     </>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index b618437abd0..a9bffc2e2a9 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -1,18 +1,20 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 // hooks
-import { useProject, useUser } from "hooks/store";
+import { PageHead } from "@/components/core";
+import { ProjectSettingHeader } from "@/components/headers";
+import { ProjectFeaturesList } from "@/components/project";
+import { EUserProjectRoles } from "@/constants/project";
+import { useProject, useUser } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProjectSettingLayout } from "@/layouts/settings-layout";
 // components
-import { PageHead } from "components/core";
-import { ProjectSettingHeader } from "components/headers";
-import { ProjectFeaturesList } from "components/project";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
+// constants
 
 const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
@@ -28,9 +30,11 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
     workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
   );
   // derived values
-  const isAdmin = memberDetails?.role === 20;
+  const isAdmin = memberDetails?.role === EUserProjectRoles.ADMIN;
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Features` : undefined;
 
+  if (!workspaceSlug || !projectId) return null;
+
   return (
     <>
       <PageHead title={pageTitle} />
@@ -38,7 +42,11 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
         <div className="flex items-center border-b border-custom-border-100 py-3.5">
           <h3 className="text-xl font-medium">Features</h3>
         </div>
-        <ProjectFeaturesList />
+        <ProjectFeaturesList
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          isAdmin={isAdmin}
+        />
       </section>
     </>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 347d64f8440..946d9b9cb3a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -1,27 +1,30 @@
 import { useState, ReactElement } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useProject } from "hooks/store";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
-import { PageHead } from "components/core";
-import { ProjectSettingHeader } from "components/headers";
+import { PageHead } from "@/components/core";
+import { ProjectSettingHeader } from "@/components/headers";
 import {
+  ArchiveRestoreProjectModal,
+  ArchiveProjectSelection,
   DeleteProjectModal,
   DeleteProjectSection,
   ProjectDetailsForm,
   ProjectDetailsFormLoader,
-} from "components/project";
+} from "@/components/project";
+// hooks
+import { useProject } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+import { ProjectSettingLayout } from "@/layouts/settings-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   // states
   const [selectProject, setSelectedProject] = useState<string | null>(null);
+  const [archiveProject, setArchiveProject] = useState<boolean>(false);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -42,12 +45,21 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {currentProjectDetails && (
-        <DeleteProjectModal
-          project={currentProjectDetails}
-          isOpen={Boolean(selectProject)}
-          onClose={() => setSelectedProject(null)}
-        />
+      {currentProjectDetails && workspaceSlug && projectId && (
+        <>
+          <ArchiveRestoreProjectModal
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            isOpen={archiveProject}
+            onClose={() => setArchiveProject(false)}
+            archive
+          />
+          <DeleteProjectModal
+            project={currentProjectDetails}
+            isOpen={Boolean(selectProject)}
+            onClose={() => setSelectedProject(null)}
+          />
+        </>
       )}
 
       <div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
@@ -63,10 +75,16 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
         )}
 
         {isAdmin && (
-          <DeleteProjectSection
-            projectDetails={currentProjectDetails}
-            handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
-          />
+          <>
+            <ArchiveProjectSelection
+              projectDetails={currentProjectDetails}
+              handleArchive={() => setArchiveProject(true)}
+            />
+            <DeleteProjectSection
+              projectDetails={currentProjectDetails}
+              handleDelete={() => setSelectedProject(currentProjectDetails.id ?? null)}
+            />
+          </>
         )}
       </div>
     </>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
deleted file mode 100644
index 06246f1c201..00000000000
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { ReactElement } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-import { useTheme } from "next-themes";
-import { observer } from "mobx-react";
-// hooks
-import { useUser } from "hooks/store";
-// 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 { PageHead } from "components/core";
-import { IntegrationCard } from "components/project";
-import { ProjectSettingHeader } from "components/headers";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// ui
-import { IntegrationsSettingsLoader } from "components/ui";
-// types
-import { IProject } from "@plane/types";
-import { NextPageWithLayout } from "lib/types";
-// fetch-keys
-import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
-import { PROJECT_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
-
-// services
-const integrationService = new IntegrationService();
-const projectService = new ProjectService();
-
-const ProjectIntegrationsPage: NextPageWithLayout = observer(() => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
-  // store hooks
-  const { currentUser } = useUser();
-  // fetch project details
-  const { data: projectDetails } = useSWR<IProject>(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
-  );
-  // fetch Integrations list
-  const { data: workspaceIntegrations } = useSWR(
-    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
-  );
-  // derived values
-  const emptyStateDetail = PROJECT_SETTINGS_EMPTY_STATE_DETAILS["integrations"];
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("project-settings", "integrations", isLightMode);
-  const isAdmin = projectDetails?.member_role === 20;
-  const pageTitle = projectDetails?.name ? `${projectDetails?.name} - Integrations` : undefined;
-
-  return (
-    <>
-      <PageHead title={pageTitle} />
-      <div className={`h-full w-full gap-10 overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
-          <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>
-          ) : (
-            <div className="h-full w-full py-8">
-              <EmptyState
-                title={emptyStateDetail.title}
-                description={emptyStateDetail.description}
-                image={emptyStateImage}
-                primaryButton={{
-                  text: "Configure now",
-                  onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
-                }}
-                size="lg"
-                disabled={!isAdmin}
-              />
-            </div>
-          )
-        ) : (
-          <IntegrationsSettingsLoader />
-        )}
-      </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
index 3bb1c8c04b6..9f4361c96b4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -1,16 +1,16 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
+import { PageHead } from "@/components/core";
+import { ProjectSettingHeader } from "@/components/headers";
+import { ProjectSettingsLabelList } from "@/components/labels";
+import { useProject } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProjectSettingLayout } from "@/layouts/settings-layout";
 // components
-import { PageHead } from "components/core";
-import { ProjectSettingsLabelList } from "components/labels";
-import { ProjectSettingHeader } from "components/headers";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import { useProject } from "hooks/store";
 
 const LabelsSettingsPage: NextPageWithLayout = observer(() => {
   const { currentProjectDetails } = useProject();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index f74d464d591..dcc46ed2d54 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -1,16 +1,16 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
-import { PageHead } from "components/core";
-import { ProjectSettingHeader } from "components/headers";
-import { ProjectMemberList, ProjectSettingsMemberDefaults } from "components/project";
+import { PageHead } from "@/components/core";
+import { ProjectSettingHeader } from "@/components/headers";
+import { ProjectMemberList, ProjectSettingsMemberDefaults } from "@/components/project";
 // types
-import { NextPageWithLayout } from "lib/types";
 // hooks
-import { useProject } from "hooks/store";
+import { useProject } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { ProjectSettingLayout } from "@/layouts/settings-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const MembersSettingsPage: NextPageWithLayout = observer(() => {
   // store
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 3fa9561a8a6..19d1c03550a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -1,21 +1,34 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 // layout
-import { AppLayout } from "layouts/app-layout";
-import { ProjectSettingLayout } from "layouts/settings-layout";
+import { PageHead } from "@/components/core";
+import { ProjectSettingHeader } from "@/components/headers";
+import { ProjectSettingStateList } from "@/components/states";
+import { useProject } from "@/hooks/store";
+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 "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
+// hook
 
-const StatesSettingsPage: NextPageWithLayout = () => (
-  <div className="w-full gap-10 overflow-y-auto py-8 pr-9">
-    <div className="flex items-center border-b border-custom-border-100 py-3.5">
-      <h3 className="text-xl font-medium">States</h3>
-    </div>
-    <ProjectSettingStateList />
-  </div>
-);
+const StatesSettingsPage: NextPageWithLayout = observer(() => {
+  // store
+  const { currentProjectDetails } = useProject();
+  // derived values
+  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="w-full gap-10 overflow-y-auto py-8 pr-9">
+        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+          <h3 className="text-xl font-medium">States</h3>
+        </div>
+        <ProjectSettingStateList />
+      </div>
+    </>
+  );
+});
 
 StatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 2ac6b2e0046..7358e836fdb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -1,21 +1,21 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react";
 // hooks
-import { useProject, useProjectView } from "hooks/store";
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { ProjectViewIssuesHeader } from "@/components/headers";
+import { ProjectViewLayoutRoot } from "@/components/issues";
+import { useProject, useProjectView } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // components
-import { ProjectViewLayoutRoot } from "components/issues";
-import { ProjectViewIssuesHeader } from "components/headers";
-import { PageHead } from "components/core";
 // ui
-import { EmptyState } from "components/common";
 // assets
+import { NextPageWithLayout } from "@/lib/types";
 import emptyView from "public/empty-state/view.svg";
 // types
-import { NextPageWithLayout } from "lib/types";
 
 const ProjectViewIssuesPage: NextPageWithLayout = observer(() => {
   // router
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 33be5d10201..59c7aa2153d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -1,16 +1,16 @@
 import { ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 // components
-import { ProjectViewsHeader } from "components/headers";
-import { ProjectViewsList } from "components/views";
-import { PageHead } from "components/core";
+import { PageHead } from "@/components/core";
+import { ProjectViewsHeader } from "@/components/headers";
+import { ProjectViewsList } from "@/components/views";
 // hooks
-import { useProject } from "hooks/store";
+import { useProject } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { AppLayout } from "@/layouts/app-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectViewsPage: NextPageWithLayout = observer(() => {
   // router
diff --git a/web/pages/[workspaceSlug]/projects/index.tsx b/web/pages/[workspaceSlug]/projects/index.tsx
index 1a145a2d1c9..5db5daa34cf 100644
--- a/web/pages/[workspaceSlug]/projects/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/index.tsx
@@ -1,25 +1,84 @@
-import { ReactElement } from "react";
+import { ReactElement, useCallback } from "react";
 import { observer } from "mobx-react";
+import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // components
-import { PageHead } from "components/core";
-import { ProjectCardList } from "components/project";
-import { ProjectsHeader } from "components/headers";
+import { PageHead } from "@/components/core";
+import { ProjectsHeader } from "@/components/headers";
+import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-// type
-import { NextPageWithLayout } from "lib/types";
-import { useWorkspace } from "hooks/store";
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { useApplication, useProject, useProjectFilter, useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+// helpers
+// types
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProjectsPage: NextPageWithLayout = observer(() => {
   // store
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
   const { currentWorkspace } = useWorkspace();
+  const { totalProjectIds, filteredProjectIds } = useProject();
+  const {
+    currentWorkspaceFilters,
+    currentWorkspaceAppliedDisplayFilters,
+    clearAllFilters,
+    clearAllAppliedDisplayFilters,
+    updateFilters,
+    updateDisplayFilters,
+  } = useProjectFilter();
   // derived values
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
 
+  const handleRemoveFilter = useCallback(
+    (key: keyof TProjectFilters, value: string | null) => {
+      if (!workspaceSlug) return;
+      let newValues = currentWorkspaceFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
+    },
+    [currentWorkspaceFilters, updateFilters, workspaceSlug]
+  );
+
+  const handleRemoveDisplayFilter = useCallback(
+    (key: TProjectAppliedDisplayFilterKeys) => {
+      if (!workspaceSlug) return;
+      updateDisplayFilters(workspaceSlug.toString(), { [key]: false });
+    },
+    [updateDisplayFilters, workspaceSlug]
+  );
+
+  const handleClearAllFilters = useCallback(() => {
+    if (!workspaceSlug) return;
+    clearAllFilters(workspaceSlug.toString());
+    clearAllAppliedDisplayFilters(workspaceSlug.toString());
+  }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <ProjectCardList />
+      <div className="h-full w-full flex flex-col">
+        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
+          currentWorkspaceAppliedDisplayFilters?.length !== 0) && (
+          <div className="border-b border-custom-border-200 px-5 py-3">
+            <ProjectAppliedFiltersList
+              appliedFilters={currentWorkspaceFilters ?? {}}
+              appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
+              handleClearAllFilters={handleClearAllFilters}
+              handleRemoveFilter={handleRemoveFilter}
+              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
+              filteredProjects={filteredProjectIds?.length ?? 0}
+              totalProjects={totalProjectIds?.length ?? 0}
+              alwaysAllowEditing
+            />
+          </div>
+        )}
+        <ProjectCardList />
+      </div>
     </>
   );
 });
diff --git a/web/pages/[workspaceSlug]/settings/api-tokens.tsx b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
index 1f203ff04c5..3df25bae01d 100644
--- a/web/pages/[workspaceSlug]/settings/api-tokens.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
@@ -1,29 +1,28 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
-import { useTheme } from "next-themes";
 // store hooks
-import { useUser, useWorkspace } from "hooks/store";
+import { Button } from "@plane/ui";
+import { ApiTokenListItem, CreateApiTokenModal } from "@/components/api-token";
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { APITokenSettingsLoader } from "@/components/ui";
+import { EmptyStateType } from "@/constants/empty-state";
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useUser, useWorkspace } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
 // component
-import { WorkspaceSettingHeader } from "components/headers";
-import { ApiTokenListItem, CreateApiTokenModal } from "components/api-token";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button } from "@plane/ui";
-import { APITokenSettingsLoader } from "components/ui";
 // services
-import { APITokenService } from "services/api_token.service";
+import { NextPageWithLayout } from "@/lib/types";
+import { APITokenService } from "@/services/api_token.service";
 // types
-import { NextPageWithLayout } from "lib/types";
 // constants
-import { API_TOKENS_LIST } from "constants/fetch-keys";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
-import { PageHead } from "components/core";
 
 const apiTokenService = new APITokenService();
 
@@ -33,12 +32,9 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // store hooks
   const {
     membership: { currentWorkspaceRole },
-    currentUser,
   } = useUser();
   const { currentWorkspace } = useWorkspace();
 
@@ -48,9 +44,6 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
     workspaceSlug && isAdmin ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
   );
 
-  const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["api-tokens"];
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("workspace-settings", "api-tokens", isLightMode);
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - API Tokens` : undefined;
 
   if (!isAdmin)
@@ -71,7 +64,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
-      <section className="h-full w-full overflow-y-auto py-8 pr-9">
+      <section className="w-full overflow-y-auto py-8 pr-9 ">
         {tokens.length > 0 ? (
           <>
             <div className="flex items-center justify-between border-b border-custom-border-200 py-3.5">
@@ -95,12 +88,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
               </Button>
             </div>
             <div className="h-full w-full flex items-center justify-center">
-              <EmptyState
-                title={emptyStateDetail.title}
-                description={emptyStateDetail.description}
-                image={emptyStateImage}
-                size="lg"
-              />
+              <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS} />
             </div>
           </div>
         )}
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index f4f5d5397dd..a4bd5b697e4 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -1,18 +1,18 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useUser, useWorkspace } from "hooks/store";
+import { Button } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useUser, useWorkspace } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
 // component
-import { WorkspaceSettingHeader } from "components/headers";
-import { PageHead } from "components/core";
 // ui
-import { Button } from "@plane/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
 
 const BillingSettingsPage: NextPageWithLayout = observer(() => {
   // store hooks
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index c124a642392..0264016b9e0 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -1,17 +1,17 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useUser, useWorkspace } from "hooks/store";
+import { PageHead } from "@/components/core";
+import ExportGuide from "@/components/exporter/guide";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { useUser, useWorkspace } from "@/hooks/store";
 // layout
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-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";
-import { PageHead } from "components/core";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
 
 const ExportsPage: NextPageWithLayout = observer(() => {
   // store hooks
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
deleted file mode 100644
index 5178209d272..00000000000
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { observer } from "mobx-react-lite";
-// hooks
-import { useUser, useWorkspace } from "hooks/store";
-// 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";
-import { PageHead } from "components/core";
-// types
-import { NextPageWithLayout } from "lib/types";
-// constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-
-const ImportsPage: NextPageWithLayout = observer(() => {
-  // store hooks
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  const { currentWorkspace } = useWorkspace();
-
-  // derived values
-  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
-
-  if (!isAdmin)
-    return (
-      <>
-        <PageHead title={pageTitle} />
-        <div className="mt-10 flex h-full w-full justify-center p-4">
-          <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
-        </div>
-      </>
-    );
-
-  return (
-    <>
-      <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto py-8 pr-9">
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
-          <h3 className="text-xl font-medium">Imports</h3>
-        </div>
-        <IntegrationGuide />
-      </section>
-    </>
-  );
-});
-
-ImportsPage.getLayout = function getLayout(page: React.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
index 2924b13c4a8..dcd8a710bc6 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -1,16 +1,16 @@
 import { ReactElement } from "react";
 import { observer } from "mobx-react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { PageHead } from "@/components/core";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { WorkspaceDetails } from "@/components/workspace";
+import { useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
 // hooks
-import { useWorkspace } from "hooks/store";
 // components
-import { WorkspaceSettingHeader } from "components/headers";
-import { WorkspaceDetails } from "components/workspace";
-import { PageHead } from "components/core";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const WorkspaceSettingsPage: NextPageWithLayout = observer(() => {
   // store hooks
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
deleted file mode 100644
index 500533877a4..00000000000
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ReactElement } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-// hooks
-import { useUser, useWorkspace } from "hooks/store";
-// 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";
-import { PageHead } from "components/core";
-// ui
-import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "components/ui";
-// types
-import { NextPageWithLayout } from "lib/types";
-// fetch-keys
-import { APP_INTEGRATIONS } from "constants/fetch-keys";
-// constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-
-const integrationService = new IntegrationService();
-
-const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // store hooks
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  const { currentWorkspace } = useWorkspace();
-
-  // derived values
-  const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Integrations` : undefined;
-
-  if (!isAdmin)
-    return (
-      <>
-        <PageHead title={pageTitle} />
-        <div className="mt-10 flex h-full w-full justify-center p-4">
-          <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
-        </div>
-      </>
-    );
-
-  const { data: appIntegrations } = useSWR(workspaceSlug && isAdmin ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug && isAdmin ? integrationService.getAppIntegrationsList() : null
-  );
-
-  return (
-    <>
-      <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto py-8 pr-9">
-        <IntegrationAndImportExportBanner bannerName="Integrations" />
-        <div>
-          {appIntegrations ? (
-            appIntegrations.map((integration) => (
-              <SingleIntegrationCard key={integration.id} integration={integration} />
-            ))
-          ) : (
-            <IntegrationsSettingsLoader />
-          )}
-        </div>
-      </section>
-    </>
-  );
-});
-
-WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Integrations Settings" />}>
-      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-
-export default WorkspaceIntegrationsPage;
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index b8739ae7756..f644a294b12 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -1,27 +1,26 @@
 import { useState, ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Search } from "lucide-react";
+import { IWorkspaceBulkInviteFormData } from "@plane/types";
 // hooks
-import { useEventTracker, useMember, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "@/components/workspace";
+import { MEMBER_INVITED } from "@/constants/event-tracker";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { getUserRole } from "@/helpers/user.helper";
+import { useEventTracker, useMember, useUser, useWorkspace } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
 // components
-import { WorkspaceSettingHeader } from "components/headers";
-import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace";
-import { PageHead } from "components/core";
 // ui
-import { Button } from "@plane/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { IWorkspaceBulkInviteFormData } from "@plane/types";
+import { NextPageWithLayout } from "@/lib/types";
 // helpers
-import { getUserRole } from "helpers/user.helper";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { MEMBER_INVITED } from "constants/event-tracker";
 
 const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
   // states
@@ -31,7 +30,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const { captureEvent, setTrackElement } = useEventTracker();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -39,8 +38,6 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
     workspace: { inviteMembersToWorkspace },
   } = useMember();
   const { currentWorkspace } = useWorkspace();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const handleWorkspaceInvite = (data: IWorkspaceBulkInviteFormData) => {
     if (!workspaceSlug) return;
@@ -59,8 +56,8 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
           state: "SUCCESS",
           element: "Workspace settings member page",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Invitations sent successfully.",
         });
@@ -77,8 +74,8 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
           state: "FAILED",
           element: "Workspace settings member page",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: `${err.error ?? "Something went wrong. Please try again."}`,
         });
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
index 60e65e90544..e6ebe3644de 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
@@ -1,23 +1,22 @@
 import { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import useSWR from "swr";
+import { IWebhook } from "@plane/types";
 // hooks
-import { useUser, useWebhook, useWorkspace } from "hooks/store";
+import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { PageHead } from "@/components/core";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
+import { useUser, useWebhook, useWorkspace } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-// hooks
-import useToast from "hooks/use-toast";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
 // components
-import { WorkspaceSettingHeader } from "components/headers";
-import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "components/web-hooks";
-import { PageHead } from "components/core";
 // ui
-import { Spinner } from "@plane/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { IWebhook } from "@plane/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const WebhookDetailsPage: NextPageWithLayout = observer(() => {
   // states
@@ -31,8 +30,6 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
   } = useUser();
   const { currentWebhook, fetchWebhookById, updateWebhook } = useWebhook();
   const { currentWorkspace } = useWorkspace();
-  // toast
-  const { setToastAlert } = useToast();
 
   // TODO: fix this error
   // useEffect(() => {
@@ -62,15 +59,15 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
     };
     await updateWebhook(workspaceSlug.toString(), formData.id, payload)
       .then(() => {
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Webhook updated successfully.",
         });
       })
       .catch((error) => {
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: error?.error ?? "Something went wrong. Please try again.",
         });
diff --git a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
index 46c7e99cb7b..3c5ae614a7f 100644
--- a/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/webhooks/index.tsx
@@ -1,25 +1,24 @@
 import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
-import { useTheme } from "next-themes";
 // hooks
-import { useUser, useWebhook, useWorkspace } from "hooks/store";
+import { Button } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { WorkspaceSettingHeader } from "@/components/headers";
+import { WebhookSettingsLoader } from "@/components/ui";
+import { WebhooksList, CreateWebhookModal } from "@/components/web-hooks";
+import { EmptyStateType } from "@/constants/empty-state";
+import { useUser, useWebhook, useWorkspace } from "@/hooks/store";
 // layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
+import { AppLayout } from "@/layouts/app-layout";
+import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
 // components
-import { WorkspaceSettingHeader } from "components/headers";
-import { WebhooksList, CreateWebhookModal } from "components/web-hooks";
-import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button } from "@plane/ui";
-import { WebhookSettingsLoader } from "components/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state";
-import { PageHead } from "components/core";
 
 const WebhooksListPage: NextPageWithLayout = observer(() => {
   // states
@@ -27,12 +26,9 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // theme
-  const { resolvedTheme } = useTheme();
   // mobx store
   const {
     membership: { currentWorkspaceRole },
-    currentUser,
   } = useUser();
   const { fetchWebhooks, webhooks, clearSecretKey, webhookSecretKey, createWebhook } = useWebhook();
   const { currentWorkspace } = useWorkspace();
@@ -44,10 +40,6 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
     workspaceSlug && isAdmin ? () => fetchWebhooks(workspaceSlug.toString()) : null
   );
 
-  const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["webhooks"];
-
-  const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
-  const emptyStateImage = getEmptyStateImagePath("workspace-settings", "webhooks", isLightMode);
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Webhooks` : undefined;
 
   // clear secret key when modal is closed.
@@ -70,7 +62,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="h-full w-full overflow-hidden py-8 pr-9">
+      <div className="w-full overflow-y-auto py-8 pr-9">
         <CreateWebhookModal
           createWebhook={createWebhook}
           clearSecretKey={clearSecretKey}
@@ -99,12 +91,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
               </Button>
             </div>
             <div className="h-full w-full flex items-center justify-center">
-              <EmptyState
-                title={emptyStateDetail.title}
-                description={emptyStateDetail.description}
-                image={emptyStateImage}
-                size="lg"
-              />
+              <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS} />
             </div>
           </div>
         )}
diff --git a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
index 85e90748115..5979755a96f 100644
--- a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@@ -1,19 +1,19 @@
 import { ReactElement } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react";
+import { useRouter } from "next/router";
 // layouts
-import { AppLayout } from "layouts/app-layout";
+import { PageHead } from "@/components/core";
+import { GlobalIssuesHeader } from "@/components/headers";
+import { AllIssueLayoutRoot } from "@/components/issues";
+import { GlobalViewsHeader } from "@/components/workspace";
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "@/constants/workspace";
+import { useGlobalView, useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
 // hooks
-import { useGlobalView, useWorkspace } from "hooks/store";
 // components
-import { GlobalViewsHeader } from "components/workspace";
-import { AllIssueLayoutRoot } from "components/issues";
-import { GlobalIssuesHeader } from "components/headers";
-import { PageHead } from "components/core";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // constants
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
 
 const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
   // router
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 61fdcf05822..c7f57e91204 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -1,21 +1,21 @@
 import React, { useState, ReactElement } from "react";
 import { observer } from "mobx-react";
 // layouts
-import { AppLayout } from "layouts/app-layout";
 // components
-import { PageHead } from "components/core";
-import { GlobalDefaultViewListItem, GlobalViewsList } from "components/workspace";
-import { GlobalIssuesHeader } from "components/headers";
 // ui
+import { Search } from "lucide-react";
 import { Input } from "@plane/ui";
 // icons
-import { Search } from "lucide-react";
+import { PageHead } from "@/components/core";
+import { GlobalIssuesHeader } from "@/components/headers";
+import { GlobalDefaultViewListItem, GlobalViewsList } from "@/components/workspace";
 // types
-import { NextPageWithLayout } from "lib/types";
 // constants
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "@/constants/workspace";
 // hooks
-import { useWorkspace } from "hooks/store";
+import { useWorkspace } from "@/hooks/store";
+import { AppLayout } from "@/layouts/app-layout";
+import { NextPageWithLayout } from "@/lib/types";
 
 const WorkspaceViewsPage: NextPageWithLayout = observer(() => {
   const [query, setQuery] = useState("");
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 75023d36e9b..dc4bf3101cd 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -1,19 +1,22 @@
 import { ReactElement } from "react";
-import Head from "next/head";
 import { AppProps } from "next/app";
+import Head from "next/head";
+import { ThemeProvider } from "next-themes";
 // styles
-import "styles/globals.css";
-import "styles/command-pallette.css";
-import "styles/nprogress.css";
-import "styles/react-day-picker.css";
+import "@/styles/globals.css";
+import "@/styles/command-pallette.css";
+import "@/styles/nprogress.css";
+import "@/styles/emoji.css";
+import "@/styles/react-day-picker.css";
 // constants
-import { SITE_TITLE } from "constants/seo-variables";
+import { SITE_TITLE } from "@/constants/seo-variables";
+import { THEMES } from "@/constants/themes";
 // mobx store provider
-import { StoreProvider } from "contexts/store-context";
+import { StoreProvider } from "@/contexts/store-context";
 
-import { AppProvider } from "lib/app-provider";
+import { AppProvider } from "@/lib/app-provider";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
@@ -29,7 +32,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         <title>{SITE_TITLE}</title>
       </Head>
       <StoreProvider {...pageProps}>
-        <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
+        <ThemeProvider themes={THEMES} defaultTheme="system">
+          <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
+        </ThemeProvider>
       </StoreProvider>
     </>
   );
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index cc0411068ca..1b54e3f66fd 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -1,5 +1,6 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 // constants
+import Script from "next/script";
 import {
   SITE_NAME,
   SITE_DESCRIPTION,
@@ -7,8 +8,7 @@ import {
   TWITTER_USER_NAME,
   SITE_KEYWORDS,
   SITE_TITLE,
-} from "constants/seo-variables";
-import Script from "next/script";
+} from "@/constants/seo-variables";
 
 class MyDocument extends Document {
   render() {
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index 11a7ee852e2..4c446f19f6e 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -3,13 +3,12 @@ import * as Sentry from "@sentry/nextjs";
 import { useRouter } from "next/router";
 
 // services
-import { AuthService } from "services/auth.service";
-// hooks
-import useToast from "hooks/use-toast";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+
+import DefaultLayout from "@/layouts/default-layout";
+import { AuthService } from "@/services/auth.service";
 // layouts
-import DefaultLayout from "layouts/default-layout";
 // ui
-import { Button } from "@plane/ui";
 
 // services
 const authService = new AuthService();
@@ -17,14 +16,12 @@ const authService = new AuthService();
 const CustomErrorComponent = () => {
   const router = useRouter();
 
-  const { setToastAlert } = useToast();
-
   const handleSignOut = async () => {
     await authService
       .signOut()
       .catch(() =>
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Failed to sign out. Please try again.",
         })
diff --git a/web/pages/accounts/forgot-password.tsx b/web/pages/accounts/forgot-password.tsx
index 0eef16009c3..25a18900982 100644
--- a/web/pages/accounts/forgot-password.tsx
+++ b/web/pages/accounts/forgot-password.tsx
@@ -3,25 +3,24 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 // services
-import { AuthService } from "services/auth.service";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { LatestFeatureBlock } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { FORGOT_PASS_LINK } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
+import useTimer from "@/hooks/use-timer";
+import DefaultLayout from "@/layouts/default-layout";
+import { NextPageWithLayout } from "@/lib/types";
+import { AuthService } from "@/services/auth.service";
 // hooks
-import useToast from "hooks/use-toast";
-import useTimer from "hooks/use-timer";
-import { useEventTracker } from "hooks/store";
 // layouts
-import DefaultLayout from "layouts/default-layout";
 // components
-import { LatestFeatureBlock } from "components/common";
-import { PageHead } from "components/core";
 // ui
-import { Button, Input } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // type
-import { NextPageWithLayout } from "lib/types";
-import { FORGOT_PASS_LINK } from "constants/event-tracker";
 
 type TForgotPasswordFormValues = {
   email: string;
@@ -40,8 +39,6 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
   const { email } = router.query;
   // store hooks
   const { captureEvent } = useEventTracker();
-  // toast
-  const { setToastAlert } = useToast();
   // timer
   const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
   // form info
@@ -65,8 +62,8 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         captureEvent(FORGOT_PASS_LINK, {
           state: "SUCCESS",
         });
-        setToastAlert({
-          type: "success",
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
           title: "Email sent",
           message:
             "Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
@@ -77,8 +74,8 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
         captureEvent(FORGOT_PASS_LINK, {
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index c848245ac1c..0c089873066 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -3,28 +3,27 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 // services
-import { AuthService } from "services/auth.service";
+import { Eye, EyeOff } from "lucide-react";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { LatestFeatureBlock } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { NEW_PASS_CREATED } from "@/constants/event-tracker";
+import { checkEmailValidity } from "@/helpers/string.helper";
+import { useEventTracker } from "@/hooks/store";
+import useSignInRedirection from "@/hooks/use-sign-in-redirection";
+import DefaultLayout from "@/layouts/default-layout";
+import { NextPageWithLayout } from "@/lib/types";
+import { AuthService } from "@/services/auth.service";
 // hooks
-import useToast from "hooks/use-toast";
-import useSignInRedirection from "hooks/use-sign-in-redirection";
-import { useEventTracker } from "hooks/store";
 // layouts
-import DefaultLayout from "layouts/default-layout";
 // components
-import { LatestFeatureBlock } from "components/common";
-import { PageHead } from "components/core";
 // ui
-import { Button, Input } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // type
-import { NextPageWithLayout } from "lib/types";
 // icons
-import { Eye, EyeOff } from "lucide-react";
 // constants
-import { NEW_PASS_CREATED } from "constants/event-tracker";
 
 type TResetPasswordFormValues = {
   email: string;
@@ -47,8 +46,6 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   const [showPassword, setShowPassword] = useState(false);
   // store hooks
   const { captureEvent } = useEventTracker();
-  // toast
-  const { setToastAlert } = useToast();
   // sign in redirection hook
   const { handleRedirection } = useSignInRedirection();
   // form info
@@ -82,8 +79,8 @@ const ResetPasswordPage: NextPageWithLayout = () => {
         captureEvent(NEW_PASS_CREATED, {
           state: "FAILED",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         });
diff --git a/web/pages/accounts/sign-up.tsx b/web/pages/accounts/sign-up.tsx
index cba9c0166e8..b53def6385d 100644
--- a/web/pages/accounts/sign-up.tsx
+++ b/web/pages/accounts/sign-up.tsx
@@ -1,19 +1,19 @@
 import React from "react";
-import Image from "next/image";
 import { observer } from "mobx-react-lite";
+import Image from "next/image";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { Spinner } from "@plane/ui";
+import { SignUpRoot } from "@/components/account";
+import { PageHead } from "@/components/core";
+import { useApplication, useUser } from "@/hooks/store";
 // layouts
-import DefaultLayout from "layouts/default-layout";
+import DefaultLayout from "@/layouts/default-layout";
 // components
-import { SignUpRoot } from "components/account";
-import { PageHead } from "components/core";
 // ui
-import { Spinner } from "@plane/ui";
 // assets
+import { NextPageWithLayout } from "@/lib/types";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
-import { NextPageWithLayout } from "lib/types";
 
 const SignUpPage: NextPageWithLayout = observer(() => {
   // store hooks
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
index 952ed0b6874..48fb4f3847b 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace.tsx
@@ -1,23 +1,23 @@
 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";
+import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
+import { IWorkspace } from "@plane/types";
 // hooks
-import { useUser } from "hooks/store";
+import { PageHead } from "@/components/core";
+import { CreateWorkspaceForm } from "@/components/workspace";
+import { useUser } from "@/hooks/store";
 // layouts
-import DefaultLayout from "layouts/default-layout";
-import { UserAuthWrapper } from "layouts/auth-layout";
+import { UserAuthWrapper } from "@/layouts/auth-layout";
+import DefaultLayout from "@/layouts/default-layout";
 // components
-import { CreateWorkspaceForm } from "components/workspace";
-import { PageHead } from "components/core";
 // images
+import { NextPageWithLayout } from "@/lib/types";
 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 "@plane/types";
-import { NextPageWithLayout } from "lib/types";
 
 const CreateWorkspacePage: NextPageWithLayout = observer(() => {
   // router
@@ -66,7 +66,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
               <CreateWorkspaceForm
                 onSubmit={onSubmit}
                 defaultValues={defaultValues}
-                setDefaultValues={setDefaultValues}
+                setDefaultValues={setDefaultValues as any}
               />
             </div>
           </div>
diff --git a/web/pages/god-mode/ai.tsx b/web/pages/god-mode/ai.tsx
index b84e98098d3..907487fdb17 100644
--- a/web/pages/god-mode/ai.tsx
+++ b/web/pages/god-mode/ai.tsx
@@ -1,19 +1,19 @@
 import { ReactElement } from "react";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { Lightbulb } from "lucide-react";
+import { Loader } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { InstanceAIForm } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
+import { InstanceAdminLayout } from "@/layouts/admin-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import { useApplication } from "hooks/store";
 // ui
-import { Loader } from "@plane/ui";
 // icons
-import { Lightbulb } from "lucide-react";
 // components
-import { InstanceAIForm } from "components/instance";
-import { PageHead } from "components/core";
 
 const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
   // store
diff --git a/web/pages/god-mode/authorization.tsx b/web/pages/god-mode/authorization.tsx
index e36a1a455c3..17ee43ad4ad 100644
--- a/web/pages/god-mode/authorization.tsx
+++ b/web/pages/god-mode/authorization.tsx
@@ -1,20 +1,19 @@
 import { ReactElement, useState } from "react";
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { PageHead } from "@/components/core";
+import { InstanceGithubConfigForm, InstanceGoogleConfigForm } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
+import { InstanceAdminLayout } from "@/layouts/admin-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
-// hooks
-import { useApplication } from "hooks/store";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import useToast from "hooks/use-toast";
 // ui
-import { Loader, ToggleSwitch } from "@plane/ui";
 // components
-import { InstanceGithubConfigForm, InstanceGoogleConfigForm } from "components/instance";
-import { PageHead } from "components/core";
 
 const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
   // store
@@ -24,9 +23,6 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
 
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
-  // toast
-  const { setToastAlert } = useToast();
-
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
@@ -46,18 +42,18 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
 
     await updateInstanceConfigurations(payload)
       .then(() => {
-        setToastAlert({
+        setToast({
           title: "Success",
-          type: "success",
+          type: TOAST_TYPE.SUCCESS,
           message: "SSO and OAuth Settings updated successfully",
         });
         setIsSubmitting(false);
       })
       .catch((err) => {
         console.error(err);
-        setToastAlert({
+        setToast({
           title: "Error",
-          type: "error",
+          type: TOAST_TYPE.ERROR,
           message: "Failed to update SSO and OAuth Settings",
         });
         setIsSubmitting(false);
@@ -95,12 +91,11 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
                 <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
                   <ToggleSwitch
                     value={Boolean(parseInt(enableMagicLogin))}
-                    // onChange={() => {
-                    //   Boolean(parseInt(enableMagicLogin)) === true
-                    //     ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
-                    //     : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
-                    // }}
-                    onChange={() => {}}
+                    onChange={() => {
+                      Boolean(parseInt(enableMagicLogin)) === true
+                        ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
+                        : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
+                    }}
                     size="sm"
                     disabled={isSubmitting}
                   />
diff --git a/web/pages/god-mode/email.tsx b/web/pages/god-mode/email.tsx
index 65889607fa6..fe8aa80ec88 100644
--- a/web/pages/god-mode/email.tsx
+++ b/web/pages/god-mode/email.tsx
@@ -1,17 +1,17 @@
 import { ReactElement } from "react";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { Loader } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { InstanceEmailForm } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
+import { InstanceAdminLayout } from "@/layouts/admin-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import { useApplication } from "hooks/store";
 // ui
-import { Loader } from "@plane/ui";
 // components
-import { InstanceEmailForm } from "components/instance";
-import { PageHead } from "components/core";
 
 const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
   // store
diff --git a/web/pages/god-mode/image.tsx b/web/pages/god-mode/image.tsx
index 349dccf4bf6..e75ff275d8e 100644
--- a/web/pages/god-mode/image.tsx
+++ b/web/pages/god-mode/image.tsx
@@ -1,17 +1,17 @@
 import { ReactElement } from "react";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { Loader } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { InstanceImageConfigForm } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
+import { InstanceAdminLayout } from "@/layouts/admin-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import { useApplication } from "hooks/store";
 // ui
-import { Loader } from "@plane/ui";
 // components
-import { InstanceImageConfigForm } from "components/instance";
-import { PageHead } from "components/core";
 
 const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
   // store
diff --git a/web/pages/god-mode/index.tsx b/web/pages/god-mode/index.tsx
index a93abad3105..130e8a02ebe 100644
--- a/web/pages/god-mode/index.tsx
+++ b/web/pages/god-mode/index.tsx
@@ -1,17 +1,17 @@
 import { ReactElement } from "react";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { Loader } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { InstanceGeneralForm } from "@/components/instance";
+import { useApplication } from "@/hooks/store";
+import { InstanceAdminLayout } from "@/layouts/admin-layout";
 // types
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 // hooks
-import { useApplication } from "hooks/store";
 // ui
-import { Loader } from "@plane/ui";
 // components
-import { InstanceGeneralForm } from "components/instance";
-import { PageHead } from "components/core";
 
 const InstanceAdminPage: NextPageWithLayout = observer(() => {
   // store hooks
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 2f8b32394cc..66f7e8e3520 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,10 +1,10 @@
 import { ReactElement } from "react";
 // layouts
-import DefaultLayout from "layouts/default-layout";
+import { SignInView } from "@/components/page-views";
+import DefaultLayout from "@/layouts/default-layout";
 // components
-import { SignInView } from "components/page-views";
 // type
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const HomePage: NextPageWithLayout = () => <SignInView />;
 
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
index 85bf2153995..c66d7d7c56d 100644
--- a/web/pages/installations/[provider]/index.tsx
+++ b/web/pages/installations/[provider]/index.tsx
@@ -1,11 +1,11 @@
 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 "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
+import { AppInstallationService } from "@/services/app_installation.service";
 
 // services
 const appInstallationService = new AppInstallationService();
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index b5acec19689..5d22ab5875c 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -1,38 +1,37 @@
 import React, { useState, ReactElement } from "react";
-import Link from "next/link";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import useSWR, { mutate } from "swr";
 import { useTheme } from "next-themes";
-import { observer } from "mobx-react-lite";
+import useSWR, { mutate } from "swr";
 import { CheckCircle2 } from "lucide-react";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
 // services
-import { WorkspaceService } from "services/workspace.service";
-import { UserService } from "services/user.service";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { MEMBER_ACCEPTED } from "@/constants/event-tracker";
+import { ROLE } from "@/constants/workspace";
+import { truncateText } from "@/helpers/string.helper";
+import { getUserRole } from "@/helpers/user.helper";
+import { useEventTracker, useUser } from "@/hooks/store";
+import { UserAuthWrapper } from "@/layouts/auth-layout";
+import DefaultLayout from "@/layouts/default-layout";
+import { NextPageWithLayout } from "@/lib/types";
+import { UserService } from "@/services/user.service";
+import { WorkspaceService } from "@/services/workspace.service";
 // hooks
-import { useEventTracker, useUser } from "hooks/store";
-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";
 // images
+import emptyInvitation from "public/empty-state/invitation.svg";
 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";
-import { getUserRole } from "helpers/user.helper";
 // types
-import { NextPageWithLayout } from "lib/types";
-import type { IWorkspaceMemberInvitation } from "@plane/types";
 // constants
-import { ROLE } from "constants/workspace";
-import { MEMBER_ACCEPTED } from "constants/event-tracker";
 // components
-import { EmptyState } from "components/common";
-import { PageHead } from "components/core";
 // services
 const workspaceService = new WorkspaceService();
 const userService = new UserService();
@@ -48,8 +47,6 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
   // next-themes
   const { theme } = useTheme();
-  // toast alert
-  const { setToastAlert } = useToast();
 
   const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
 
@@ -68,8 +65,8 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
 
   const submitInvitations = () => {
     if (invitationsRespond.length === 0) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "Please select at least one invitation.",
       });
@@ -80,7 +77,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
 
     workspaceService
       .joinWorkspaces({ invitations: invitationsRespond })
-      .then((res) => {
+      .then(() => {
         mutate("USER_WORKSPACES");
         const firstInviteId = invitationsRespond[0];
         const invitation = invitations?.find((i) => i.id === firstInviteId);
@@ -88,6 +85,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
         joinWorkspaceMetricGroup(redirectWorkspace?.id);
         captureEvent(MEMBER_ACCEPTED, {
           member_id: invitation?.id,
+          // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
           role: getUserRole(invitation?.role!),
           project_id: undefined,
           accepted_from: "App",
@@ -101,8 +99,8 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
             router.push(`/${redirectWorkspace?.slug}`);
           })
           .catch(() => {
-            setToastAlert({
-              type: "error",
+            setToast({
+              type: TOAST_TYPE.ERROR,
               title: "Error!",
               message: "Something went wrong, Please try again.",
             });
@@ -116,8 +114,8 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
           state: "FAILED",
           element: "Workspace invitations page",
         });
-        setToastAlert({
-          type: "error",
+        setToast({
+          type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "Something went wrong, Please try again.",
         });
@@ -222,7 +220,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
                 description="You can see here if someone invites you to a workspace."
                 image={emptyInvitation}
                 primaryButton={{
-                  text: "Back to dashboard",
+                  text: "Back to home",
                   onClick: () => router.push("/"),
                 }}
               />
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 5b5b91280f6..9d084f25900 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -1,32 +1,32 @@
 import { useEffect, useState, ReactElement } from "react";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
-import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
+import { useTheme } from "next-themes";
+import { Controller, useForm } from "react-hook-form";
 import useSWR from "swr";
 import { ChevronDown } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
-import { Controller, useForm } from "react-hook-form";
+import { IUser, TOnboardingSteps } from "@plane/types";
 // hooks
-import { useEventTracker, useUser, useWorkspace } from "hooks/store";
-import useUserAuth from "hooks/use-user-auth";
+import { Avatar, Spinner } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { InviteMembers, JoinWorkspaces, UserDetails, SwitchOrDeleteAccountModal } from "@/components/onboarding";
+import { USER_ONBOARDING_COMPLETED } from "@/constants/event-tracker";
+import { useEventTracker, useUser, useWorkspace } from "@/hooks/store";
+import useUserAuth from "@/hooks/use-user-auth";
 // services
-import { WorkspaceService } from "services/workspace.service";
+import { UserAuthWrapper } from "@/layouts/auth-layout";
+import DefaultLayout from "@/layouts/default-layout";
+import { NextPageWithLayout } from "@/lib/types";
+import { WorkspaceService } from "@/services/workspace.service";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // layouts
-import DefaultLayout from "layouts/default-layout";
-import { UserAuthWrapper } from "layouts/auth-layout";
 // components
-import { InviteMembers, JoinWorkspaces, UserDetails, SwitchOrDeleteAccountModal } from "components/onboarding";
-import { PageHead } from "components/core";
 // ui
-import { Avatar, Spinner } from "@plane/ui";
 // images
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
-import { IUser, TOnboardingSteps } from "@plane/types";
-import { NextPageWithLayout } from "lib/types";
 // constants
-import { USER_ONBOARDING_COMPLETED } from "constants/event-tracker";
 
 // services
 const workspaceService = new WorkspaceService();
@@ -166,8 +166,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
                             currentUser?.first_name
                               ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
                               : value.length > 0
-                              ? value
-                              : currentUser?.email
+                                ? value
+                                : currentUser?.email
                           }
                           src={currentUser?.avatar}
                           size={35}
@@ -182,8 +182,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
                             {currentUser?.first_name
                               ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
                               : value.length > 0
-                              ? value
-                              : null}
+                                ? value
+                                : null}
                           </p>
                         )}
 
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index 4460f2ec506..f2a73c1808d 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -1,191 +1,66 @@
-import { ReactElement } from "react";
-import useSWR from "swr";
-import Link from "next/link";
+import { ReactElement, useState } from "react";
 import { observer } from "mobx-react";
 //hooks
-import { useApplication, useUser } from "hooks/store";
-// services
-import { UserService } from "services/user.service";
+import { Button } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { ProfileActivityListPage } from "@/components/profile";
+import { useApplication } from "@/hooks/store";
 // layouts
-import { ProfileSettingsLayout } from "layouts/settings-layout";
+import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 // components
-import { ActivityIcon, ActivityMessage, IssueLink, PageHead } from "components/core";
-import { RichReadOnlyEditor } from "@plane/rich-text-editor";
-// icons
-import { History, MessageSquare } from "lucide-react";
 // ui
-import { ActivitySettingsLoader } from "components/ui";
-// fetch-keys
-import { USER_ACTIVITY } from "constants/fetch-keys";
-// helper
-import { calculateTimeAgo } from "helpers/date-time.helper";
 // type
-import { NextPageWithLayout } from "lib/types";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { NextPageWithLayout } from "@/lib/types";
 
-const userService = new UserService();
+const PER_PAGE = 100;
 
 const ProfileActivityPage: NextPageWithLayout = observer(() => {
-  const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
   // store hooks
-  const { currentUser } = useUser();
   const { theme: themeStore } = useApplication();
 
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const activityPages: JSX.Element[] = [];
+  for (let i = 0; i < pageCount; i++)
+    activityPages.push(
+      <ProfileActivityListPage
+        key={i}
+        cursor={`${PER_PAGE}:${i}:0`}
+        perPage={PER_PAGE}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+      />
+    );
+
+  const isLoadMoreVisible = pageCount < totalPages && resultsCount !== 0;
+
   return (
     <>
       <PageHead title="Profile - Activity" />
-      <section className="mx-auto mt-5  md:mt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
-        <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5">
+      <section className="mx-auto h-full w-full flex flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
+        <div className="flex items-center border-b border-custom-border-100 gap-4 pb-3.5 mt-5 md:mt-16">
           <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
           <h3 className="text-xl font-medium">Activity</h3>
         </div>
-        {userActivity ? (
-          <div className="flex h-full w-full flex-col gap-2 overflow-y-auto">
-            <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 {calculateTimeAgo(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" &&
-                  !activityItem.field ? (
-                    <span>
-                      created <IssueLink activity={activityItem} />
-                    </span>
-                  ) : (
-                    <ActivityMessage activity={activityItem} showIssue />
-                  );
-
-                if ("field" in activityItem && activityItem.field !== "updated_by") {
-                  return (
-                    <li key={activityItem.id}>
-                      <div className="relative pb-1">
-                        <div className="relative flex items-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="h-full w-full rounded-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 border-b border-custom-border-100 py-4">
-                              <div className="flex gap-1 break-words text-sm text-custom-text-200">
-                                {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
-                                  <span className="text-gray font-medium">Plane</span>
-                                ) : activityItem.actor_detail.is_bot ? (
-                                  <span className="text-gray font-medium">
-                                    {activityItem.actor_detail.first_name} Bot
-                                  </span>
-                                ) : (
-                                  <Link
-                                    href={`/${activityItem.workspace_detail.slug}/profile/${activityItem.actor_detail.id}`}
-                                  >
-                                    <span className="text-gray font-medium">
-                                      {currentUser?.id === activityItem.actor_detail.id
-                                        ? "You"
-                                        : activityItem.actor_detail.display_name}
-                                    </span>
-                                  </Link>
-                                )}{" "}
-                                <div className="flex gap-1 truncate">
-                                  {message}{" "}
-                                  <span className="flex-shrink-0 whitespace-nowrap">
-                                    {calculateTimeAgo(activityItem.created_at)}
-                                  </span>
-                                </div>
-                              </div>
-                            </div>
-                          </>
-                        </div>
-                      </div>
-                    </li>
-                  );
-                }
-              })}
-            </ul>
-          </div>
-        ) : (
-          <ActivitySettingsLoader />
-        )}
+        <div className="h-full w-full flex flex-col overflow-y-auto vertical-scrollbar scrollbar-md">
+          {activityPages}
+          {isLoadMoreVisible && (
+            <div className="flex items-center justify-center text-xs w-full">
+              <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+                Load more
+              </Button>
+            </div>
+          )}
+        </div>
       </section>
     </>
   );
diff --git a/web/pages/profile/change-password.tsx b/web/pages/profile/change-password.tsx
index 80e2965d67e..01bedb83d81 100644
--- a/web/pages/profile/change-password.tsx
+++ b/web/pages/profile/change-password.tsx
@@ -1,22 +1,20 @@
 import { ReactElement, useEffect, useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { Button, Input, Spinner, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+import { PageHead } from "@/components/core";
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { useApplication, useUser } from "@/hooks/store";
 // services
-import { UserService } from "services/user.service";
 // components
-import { PageHead } from "components/core";
-// hooks
-import useToast from "hooks/use-toast";
 // layout
-import { ProfileSettingsLayout } from "layouts/settings-layout";
+import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 // ui
-import { Button, Input, Spinner } from "@plane/ui";
 // types
-import { NextPageWithLayout } from "lib/types";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { NextPageWithLayout } from "@/lib/types";
+import { UserService } from "@/services/user.service";
 
 interface FormValues {
   old_password: string;
@@ -46,33 +44,28 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
     handleSubmit,
     formState: { errors, isSubmitting },
   } = useForm<FormValues>({ defaultValues });
-  const { setToastAlert } = useToast();
 
   const handleChangePassword = async (formData: FormValues) => {
     if (formData.new_password !== formData.confirm_password) {
-      setToastAlert({
-        type: "error",
+      setToast({
+        type: TOAST_TYPE.ERROR,
         title: "Error!",
         message: "The new password and the confirm password don't match.",
       });
       return;
     }
-    await userService
-      .changePassword(formData)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Password changed successfully.",
-        });
-      })
-      .catch((error) => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: error?.error ?? "Something went wrong. Please try again.",
-        });
-      });
+    const changePasswordPromise = userService.changePassword(formData);
+    setPromiseToast(changePasswordPromise, {
+      loading: "Changing password...",
+      success: {
+        title: "Success!",
+        message: () => "Password changed successfully.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Something went wrong. Please try again.",
+      },
+    });
   };
 
   useEffect(() => {
@@ -92,8 +85,8 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title="Profile - Change Password" />
-      <div className="flex flex-col h-full">
-        <div className="block md:hidden flex-shrink-0 border-b border-custom-border-200 p-4">
+      <div className="flex h-full flex-col">
+        <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
           <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
         </div>
         <form
diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx
index bdde41d08f6..6d2fe4d5489 100644
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@@ -1,29 +1,42 @@
 import React, { useEffect, useState, ReactElement } from "react";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
+import { ChevronDown, User2 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
 // services
-import { FileService } from "services/file.service";
 // hooks
-import { useApplication, useUser } from "hooks/store";
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
 // layouts
-import { ProfileSettingsLayout } from "layouts/settings-layout";
 // components
-import { ImagePickerPopover, UserImageUploadModal, PageHead } from "components/core";
-import { DeactivateAccountModal } from "components/account";
+import type { IUser } from "@plane/types";
+import {
+  Button,
+  CustomSelect,
+  CustomSearchSelect,
+  Input,
+  Spinner,
+  TOAST_TYPE,
+  setPromiseToast,
+  setToast,
+} from "@plane/ui";
+import { DeactivateAccountModal } from "@/components/account";
+import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core";
 // ui
-import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
 // icons
-import { ChevronDown, User2 } from "lucide-react";
-// types
-import type { IUser } from "@plane/types";
-import type { NextPageWithLayout } from "lib/types";
+// components
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
 // constants
-import { USER_ROLES } from "constants/workspace";
-import { TIME_ZONES } from "constants/timezones";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { TIME_ZONES } from "@/constants/timezones";
+import { USER_ROLES } from "@/constants/workspace";
+// hooks
+import { useApplication, useUser } from "@/hooks/store";
+import useUserAuth from "@/hooks/use-user-auth";
+import { ProfileSettingsLayout } from "@/layouts/settings-layout";
+// layouts
+// lib types
+import type { NextPageWithLayout } from "@/lib/types";
+import { FileService } from "@/services/file.service";
+// services
+// types
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -52,8 +65,6 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
     control,
     formState: { errors },
   } = useForm<IUser>({ defaultValues });
-  // toast alert
-  const { setToastAlert } = useToast();
   // store hooks
   const { currentUser: myProfile, updateCurrentUser, currentUserLoader } = useUser();
   // custom hooks
@@ -72,28 +83,26 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
       avatar: formData.avatar,
       cover_image: formData.cover_image,
       role: formData.role,
-      display_name: formData.display_name,
+      display_name: formData?.display_name,
       user_timezone: formData.user_timezone,
     };
 
-    await updateCurrentUser(payload)
-      .then(() => {
-        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.",
-        })
-      );
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 300);
+    const updateCurrentUserDetail = updateCurrentUser(payload).finally(() => setIsLoading(false));
+    setPromiseToast(updateCurrentUserDetail, {
+      loading: "Updating...",
+      success: {
+        title: "Success!",
+        message: () => `Profile updated successfully.`,
+      },
+      error: {
+        title: "Error!",
+        message: () => `There was some error in updating your profile. Please try again.`,
+      },
+    });
+
+    // setTimeout(() => {
+    //   setIsLoading(false);
+    // }, 300);
   };
 
   const handleDelete = (url: string | null | undefined, updateUser: boolean = false) => {
@@ -105,16 +114,16 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
       if (updateUser)
         updateCurrentUser({ avatar: "" })
           .then(() => {
-            setToastAlert({
-              type: "success",
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
               title: "Success!",
-              message: "Profile picture removed successfully.",
+              message: "Profile picture deleted successfully.",
             });
             setIsRemoving(false);
           })
           .catch(() => {
-            setToastAlert({
-              type: "error",
+            setToast({
+              type: TOAST_TYPE.ERROR,
               title: "Error!",
               message: "There was some error in deleting your profile picture. Please try again.",
             });
@@ -139,8 +148,8 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title="Profile - General Settings" />
-      <div className="flex flex-col h-full">
-        <div className="block md:hidden flex-shrink-0 border-b border-custom-border-200 p-4">
+      <div className="flex h-full flex-col">
+        <div className="block flex-shrink-0 border-b border-custom-border-200 p-4 md:hidden">
           <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
         </div>
         <div className="overflow-hidden">
@@ -163,7 +172,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
             )}
           />
           <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-          <div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-10 md:pt-16 px-8 pb-8 lg:w-3/5">
+          <div className="vertical-scrollbar scrollbar-md mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto px-8 pb-8 pt-10 md:pt-16 lg:w-3/5">
             <form onSubmit={handleSubmit(onSubmit)}>
               <div className="flex w-full flex-col gap-8">
                 <div className="relative h-44 w-full">
@@ -186,7 +195,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                                 src={watch("avatar")}
                                 className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
                                 onClick={() => setIsImageUploadModalOpen(true)}
-                                alt={myProfile.display_name}
+                                alt={myProfile?.display_name}
                                 role="button"
                               />
                             </div>
@@ -206,6 +215,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           onChange={(imageUrl) => onChange(imageUrl)}
                           control={control}
                           value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                          isProfileCover
                         />
                       )}
                     />
@@ -299,7 +309,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           ref={ref}
                           hasError={Boolean(errors.email)}
                           placeholder="Enter your email"
-                          className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${
+                          className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
                             errors.email ? "border-red-500" : ""
                           }`}
                           disabled
@@ -368,14 +378,14 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           value={value}
                           onChange={onChange}
                           ref={ref}
-                          hasError={Boolean(errors.display_name)}
+                          hasError={Boolean(errors?.display_name)}
                           placeholder="Enter your display name"
-                          className={`w-full ${errors.display_name ? "border-red-500" : ""}`}
+                          className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
                           maxLength={24}
                         />
                       )}
                     />
-                    {errors.display_name && <span className="text-xs text-red-500">Please enter display name</span>}
+                    {errors?.display_name && <span className="text-xs text-red-500">Please enter display name</span>}
                   </div>
 
                   <div className="flex flex-col gap-1">
diff --git a/web/pages/profile/preferences/email.tsx b/web/pages/profile/preferences/email.tsx
index 34bd6fb0305..268a596f0aa 100644
--- a/web/pages/profile/preferences/email.tsx
+++ b/web/pages/profile/preferences/email.tsx
@@ -1,16 +1,16 @@
 import { ReactElement } from "react";
 import useSWR from "swr";
 // layouts
-import { ProfilePreferenceSettingsLayout } from "layouts/settings-layout/profile/preferences";
+import { PageHead } from "@/components/core";
+import { EmailNotificationForm } from "@/components/profile/preferences";
+import { EmailSettingsLoader } from "@/components/ui";
+import { ProfilePreferenceSettingsLayout } from "@/layouts/settings-layout/profile/preferences";
 // ui
-import { EmailSettingsLoader } from "components/ui";
 // components
-import { EmailNotificationForm } from "components/profile/preferences";
-import { PageHead } from "components/core";
 // services
-import { UserService } from "services/user.service";
+import { NextPageWithLayout } from "@/lib/types";
+import { UserService } from "@/services/user.service";
 // type
-import { NextPageWithLayout } from "lib/types";
 
 // services
 const userService = new UserService();
@@ -28,7 +28,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = () => {
   return (
     <>
       <PageHead title="Profile - Email Preference" />
-      <div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb-8">
+      <div className="mx-auto mt-8 h-full w-full px-6 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
         <EmailNotificationForm data={data} />
       </div>
     </>
diff --git a/web/pages/profile/preferences/theme.tsx b/web/pages/profile/preferences/theme.tsx
index 134ace79e99..09dc9043ee2 100644
--- a/web/pages/profile/preferences/theme.tsx
+++ b/web/pages/profile/preferences/theme.tsx
@@ -1,19 +1,18 @@
 import { useEffect, useState, ReactElement } from "react";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
-// hooks
-import { useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
-// layouts
-import { ProfilePreferenceSettingsLayout } from "layouts/settings-layout/profile/preferences";
-// components
-import { CustomThemeSelector, ThemeSwitch, PageHead } from "components/core";
 // ui
-import { Spinner } from "@plane/ui";
+import { Spinner, setPromiseToast } from "@plane/ui";
+// components
+import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
 // constants
-import { I_THEME_OPTION, THEME_OPTIONS } from "constants/themes";
+import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
+// hooks
+import { useUser } from "@/hooks/store";
+// layouts
+import { ProfilePreferenceSettingsLayout } from "@/layouts/settings-layout/profile/preferences";
 // type
-import { NextPageWithLayout } from "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
 
 const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
   // states
@@ -24,7 +23,6 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
   const userTheme = currentUser?.theme;
   // hooks
   const { setTheme } = useTheme();
-  const { setToastAlert } = useToast();
 
   useEffect(() => {
     if (userTheme) {
@@ -37,11 +35,18 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
 
   const handleThemeChange = (themeOption: I_THEME_OPTION) => {
     setTheme(themeOption.value);
-    updateCurrentUserTheme(themeOption.value).catch(() => {
-      setToastAlert({
-        title: "Failed to Update the theme",
-        type: "error",
-      });
+    const updateCurrentUserThemePromise = updateCurrentUserTheme(themeOption.value);
+
+    setPromiseToast(updateCurrentUserThemePromise, {
+      loading: "Updating theme...",
+      success: {
+        title: "Success!",
+        message: () => "Theme updated successfully!",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Failed to Update the theme",
+      },
     });
   };
 
@@ -49,7 +54,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title="Profile - Theme Prefrence" />
       {currentUser ? (
-        <div className="mx-auto mt-10 md:mt-14 h-full w-full overflow-y-auto px-6 lg:px-20 pb-8">
+        <div className="mx-auto mt-10 h-full w-full overflow-y-auto px-6 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
           <div className="flex items-center border-b border-custom-border-100 pb-3.5">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>
diff --git a/web/pages/workspace-invitations/index.tsx b/web/pages/workspace-invitations/index.tsx
index aa95d0a3829..85ed5e593c9 100644
--- a/web/pages/workspace-invitations/index.tsx
+++ b/web/pages/workspace-invitations/index.tsx
@@ -1,22 +1,22 @@
 import React, { ReactElement } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
+import { Spinner } from "@plane/ui";
+import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
+import { WORKSPACE_INVITATION } from "@/constants/fetch-keys";
+import { useUser } from "@/hooks/store";
 // services
-import { WorkspaceService } from "services/workspace.service";
 // layouts
-import DefaultLayout from "layouts/default-layout";
+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 "lib/types";
+import { NextPageWithLayout } from "@/lib/types";
+import { WorkspaceService } from "@/services/workspace.service";
 // constants
-import { WORKSPACE_INVITATION } from "constants/fetch-keys";
 
 // services
 const workspaceService = new WorkspaceService();
@@ -81,7 +81,7 @@ const WorkspaceInvitationPage: NextPageWithLayout = observer(() => {
                     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" href="/" />
+                    <EmptySpaceItem Icon={Boxes} title="Continue to home" href="/" />
                   </EmptySpace>
                 </>
               ) : (
@@ -105,7 +105,7 @@ const WorkspaceInvitationPage: NextPageWithLayout = observer(() => {
           {!currentUser ? (
             <EmptySpaceItem Icon={User2} title="Sign in to continue" href="/" />
           ) : (
-            <EmptySpaceItem Icon={Boxes} title="Continue to Dashboard" href="/" />
+            <EmptySpaceItem Icon={Boxes} title="Continue to home" href="/" />
           )}
           <EmptySpaceItem Icon={Star} title="Star us on GitHub" href="https://github.com/makeplane" />
           <EmptySpaceItem
diff --git a/web/public/empty-state/Project_full_screen.svg b/web/public/empty-state/Project_full_screen.svg
deleted file mode 100644
index ce373850737..00000000000
--- a/web/public/empty-state/Project_full_screen.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg width="1053" height="653" viewBox="0 0 1053 653" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.3">
-<path d="M1033.18 69.7706H6.69667C6.24668 69.7706 5.81515 69.5629 5.49697 69.193C5.17878 68.8231 5 68.3215 5 67.7984C5 67.2753 5.17878 66.7737 5.49697 66.4039C5.81515 66.034 6.24668 65.8262 6.69667 65.8262H1033.18C1033.63 65.8262 1034.06 66.034 1034.38 66.4039C1034.7 66.7737 1034.88 67.2753 1034.88 67.7984C1034.88 68.3215 1034.7 68.8231 1034.38 69.193C1034.06 69.5629 1033.63 69.7706 1033.18 69.7706Z" fill="#E5E5E5"/>
-<path d="M258.869 652.805C258.419 652.805 257.987 652.598 257.669 652.228C257.351 651.858 257.172 651.356 257.172 650.833V1.97222C257.172 1.44916 257.351 0.947512 257.669 0.577649C257.987 0.207786 258.419 0 258.869 0C259.319 0 259.75 0.207786 260.068 0.577649C260.386 0.947512 260.565 1.44916 260.565 1.97222V650.833C260.565 651.356 260.386 651.858 260.068 652.228C259.75 652.598 259.319 652.805 258.869 652.805Z" fill="#E5E5E5"/>
-<path d="M529.005 475.358C528.634 475.358 528.279 475.207 528.016 474.938C527.754 474.669 527.606 474.304 527.606 473.924V1.95019C527.606 1.56972 527.754 1.20483 528.016 0.9358C528.279 0.666766 528.634 0.515625 529.005 0.515625C529.376 0.515625 529.732 0.666766 529.995 0.9358C530.257 1.20483 530.404 1.56972 530.404 1.95019V473.924C530.404 474.304 530.257 474.669 529.995 474.938C529.732 475.207 529.376 475.358 529.005 475.358Z" fill="#E5E5E5"/>
-<path d="M809.21 652.805C808.76 652.805 808.329 652.598 808.011 652.228C807.692 651.858 807.514 651.356 807.514 650.833V1.97222C807.514 1.44916 807.692 0.947512 808.011 0.577649C808.329 0.207786 808.76 0 809.21 0C809.66 0 810.092 0.207786 810.41 0.577649C810.728 0.947512 810.907 1.44916 810.907 1.97222V650.833C810.907 651.356 810.728 651.858 810.41 652.228C810.092 652.598 809.66 652.805 809.21 652.805Z" fill="#E5E5E5"/>
-<path d="M106.007 272.791H44.011C41.9867 272.789 40.0461 271.853 38.6147 270.189C37.1834 268.525 36.3782 266.269 36.376 263.916V178.875C36.3782 176.522 37.1834 174.266 38.6147 172.602C40.0461 170.938 41.9867 170.003 44.011 170H106.007C108.031 170.003 109.972 170.938 111.403 172.602C112.835 174.266 113.64 176.522 113.642 178.875V263.916C113.64 266.269 112.835 268.525 111.403 270.189C109.972 271.853 108.031 272.789 106.007 272.791Z" fill="#A3A3A3"/>
-<path d="M88.6312 592.862H26.635C24.6108 592.859 22.6701 591.923 21.2387 590.259C19.8074 588.596 19.0022 586.34 19 583.987V498.945C19.0022 496.592 19.8074 494.336 21.2387 492.673C22.6701 491.009 24.6108 490.073 26.635 490.07H88.6312C90.6554 490.073 92.5961 491.009 94.0274 492.673C95.4588 494.336 96.2639 496.592 96.2662 498.945V583.987C96.2639 586.34 95.4588 588.596 94.0274 590.259C92.5961 591.923 90.6554 592.859 88.6312 592.862Z" fill="#D4D4D4"/>
-<path d="M195.631 466.862H133.635C131.611 466.859 129.67 465.923 128.239 464.259C126.807 462.596 126.002 460.34 126 457.987V372.945C126.002 370.592 126.807 368.336 128.239 366.673C129.67 365.009 131.611 364.073 133.635 364.07H195.631C197.655 364.073 199.596 365.009 201.027 366.673C202.459 368.336 203.264 370.592 203.266 372.945V457.987C203.264 460.34 202.459 462.596 201.027 464.259C199.596 465.923 197.655 466.859 195.631 466.862Z" fill="#A3A3A3"/>
-<path d="M393.538 324.588H331.542C329.518 324.586 327.577 323.65 326.146 321.986C324.715 320.322 323.91 318.066 323.907 315.713V230.672C323.91 228.319 324.715 226.063 326.146 224.399C327.577 222.735 329.518 221.8 331.542 221.797H393.538C395.563 221.8 397.503 222.735 398.935 224.399C400.366 226.063 401.171 228.319 401.173 230.672V315.713C401.171 318.066 400.366 320.322 398.935 321.986C397.503 323.65 395.563 324.586 393.538 324.588Z" fill="#A3A3A3"/>
-<path d="M661.184 231.901H599.188C597.164 231.898 595.223 230.962 593.791 229.298C592.36 227.635 591.555 225.379 591.553 223.026V137.984C591.555 135.631 592.36 133.376 593.791 131.712C595.223 130.048 597.164 129.112 599.188 129.109H661.184C663.208 129.112 665.149 130.048 666.58 131.712C668.011 133.376 668.817 135.631 668.819 137.984V223.026C668.817 225.379 668.011 227.635 666.58 229.298C665.149 230.962 663.208 231.898 661.184 231.901Z" fill="#A3A3A3"/>
-<path d="M919.359 231.903H857.363C855.339 231.9 853.398 230.964 851.967 229.3C850.535 227.637 849.73 225.381 849.728 223.028V137.986C849.73 135.633 850.535 133.377 851.967 131.714C853.398 130.05 855.339 129.114 857.363 129.111H919.359C921.383 129.114 923.324 130.05 924.755 131.714C926.187 133.377 926.992 135.633 926.994 137.986V223.028C926.992 225.381 926.187 227.637 924.755 229.3C923.324 230.964 921.383 231.9 919.359 231.903Z" fill="#A3A3A3"/>
-<path d="M1044.71 554.403H982.711C980.686 554.4 978.746 553.464 977.314 551.8C975.883 550.137 975.078 547.881 975.076 545.528V460.486C975.078 458.133 975.883 455.877 977.314 454.214C978.746 452.55 980.686 451.614 982.711 451.611H1044.71C1046.73 451.614 1048.67 452.55 1050.1 454.214C1051.53 455.877 1052.34 458.133 1052.34 460.486V545.528C1052.34 547.881 1051.53 550.137 1050.1 551.8C1048.67 553.464 1046.73 554.4 1044.71 554.403Z" fill="#A3A3A3"/>
-<path d="M1029.64 255.573H967.645C965.621 255.57 963.68 254.634 962.249 252.97C960.818 251.306 960.013 249.051 960.01 246.698V161.656C960.013 159.303 960.818 157.047 962.249 155.384C963.68 153.72 965.621 152.784 967.645 152.781H1029.64C1031.67 152.784 1033.61 153.72 1035.04 155.384C1036.47 157.047 1037.27 159.303 1037.28 161.656V246.698C1037.27 249.051 1036.47 251.307 1035.04 252.97C1033.61 254.634 1031.67 255.57 1029.64 255.573Z" fill="#E5E5E5"/>
-<path d="M980.442 407.442H918.446C916.422 407.439 914.481 406.503 913.05 404.839C911.618 403.176 910.813 400.92 910.811 398.567V313.525C910.813 311.172 911.618 308.917 913.05 307.253C914.481 305.589 916.422 304.653 918.446 304.65H980.442C982.466 304.653 984.407 305.589 985.838 307.253C987.27 308.917 988.075 311.172 988.077 313.525V398.567C988.075 400.92 987.27 403.176 985.838 404.84C984.407 406.503 982.466 407.439 980.442 407.442Z" fill="#E5E5E5"/>
-<path d="M759.707 307.401H697.711C695.687 307.398 693.746 306.462 692.315 304.798C690.884 303.135 690.078 300.879 690.076 298.526V213.484C690.078 211.131 690.884 208.876 692.315 207.212C693.746 205.548 695.687 204.612 697.711 204.609H759.707C761.732 204.612 763.672 205.548 765.103 207.212C766.535 208.876 767.34 211.131 767.342 213.484V298.526C767.34 300.879 766.535 303.135 765.103 304.798C763.672 306.462 761.732 307.398 759.707 307.401Z" fill="#D4D4D4"/>
-<path d="M652.707 407.401H590.711C588.687 407.398 586.746 406.462 585.315 404.798C583.884 403.135 583.078 400.879 583.076 398.526V313.484C583.078 311.131 583.884 308.876 585.315 307.212C586.746 305.548 588.687 304.612 590.711 304.609H652.707C654.732 304.612 656.672 305.548 658.103 307.212C659.535 308.876 660.34 311.131 660.342 313.484V398.526C660.34 400.879 659.535 403.135 658.103 404.798C656.672 406.462 654.732 407.398 652.707 407.401Z" fill="#E5E5E5"/>
-<path d="M362.975 541.557H300.979C298.955 541.554 297.014 540.618 295.582 538.955C294.151 537.291 293.346 535.035 293.344 532.682V447.641C293.346 445.288 294.151 443.032 295.582 441.368C297.014 439.704 298.955 438.768 300.979 438.766H362.975C364.999 438.768 366.94 439.704 368.371 441.368C369.802 443.032 370.608 445.288 370.61 447.641V532.682C370.608 535.035 369.802 537.291 368.371 538.955C366.94 540.619 364.999 541.554 362.975 541.557Z" fill="#E5E5E5"/>
-<path d="M488.707 231.401H426.711C424.687 231.398 422.746 230.462 421.315 228.798C419.884 227.135 419.078 224.879 419.076 222.526V137.484C419.078 135.131 419.884 132.876 421.315 131.212C422.746 129.548 424.687 128.612 426.711 128.609H488.707C490.732 128.612 492.672 129.548 494.103 131.212C495.535 132.876 496.34 135.131 496.342 137.484V222.526C496.34 224.879 495.535 227.135 494.103 228.798C492.672 230.462 490.732 231.398 488.707 231.401Z" fill="#E5E5E5"/>
-<path d="M69.6312 428.862H7.635C5.61076 428.859 3.67008 427.923 2.23873 426.259C0.807378 424.596 0.00224541 422.34 0 419.987V334.945C0.00224541 332.592 0.807378 330.336 2.23873 328.673C3.67008 327.009 5.61076 326.073 7.635 326.07H69.6312C71.6554 326.073 73.5961 327.009 75.0274 328.673C76.4588 330.336 77.2639 332.592 77.2662 334.945V419.987C77.2639 422.34 76.4588 424.596 75.0274 426.259C73.5961 427.923 71.6554 428.859 69.6312 428.862Z" fill="#F1F1F1"/>
-<path d="M467.707 438.401H405.711C403.687 438.398 401.746 437.462 400.315 435.798C398.884 434.135 398.078 431.879 398.076 429.526V344.484C398.078 342.131 398.884 339.875 400.315 338.212C401.746 336.548 403.687 335.612 405.711 335.609H467.707C469.732 335.612 471.672 336.548 473.104 338.212C474.535 339.875 475.34 342.131 475.342 344.484V429.526C475.34 431.879 474.535 434.135 473.104 435.798C471.672 437.462 469.732 438.398 467.707 438.401Z" fill="#F1F1F1"/>
-<path d="M918.707 582.403H856.711C854.686 582.4 852.746 581.464 851.314 579.8C849.883 578.137 849.078 575.881 849.076 573.528V488.486C849.078 486.133 849.883 483.877 851.314 482.214C852.746 480.55 854.686 479.614 856.711 479.611H918.707C920.731 479.614 922.672 480.55 924.103 482.214C925.534 483.877 926.34 486.133 926.342 488.486V573.528C926.34 575.881 925.534 578.137 924.103 579.8C922.672 581.464 920.731 582.4 918.707 582.403Z" fill="#F1F1F1"/>
-<path d="M742.707 527.401H680.711C678.687 527.398 676.746 526.462 675.315 524.798C673.884 523.135 673.078 520.879 673.076 518.526V433.484C673.078 431.131 673.884 428.875 675.315 427.212C676.746 425.548 678.687 424.612 680.711 424.609H742.707C744.732 424.612 746.672 425.548 748.104 427.212C749.535 428.875 750.34 431.131 750.342 433.484V518.526C750.34 520.879 749.535 523.135 748.104 524.798C746.672 526.462 744.732 527.398 742.707 527.401Z" fill="#F1F1F1"/>
-<path d="M224.889 272.791H162.893C160.869 272.789 158.928 271.853 157.497 270.189C156.065 268.525 155.26 266.269 155.258 263.916V178.875C155.26 176.522 156.065 174.266 157.497 172.602C158.928 170.938 160.869 170.003 162.893 170H224.889C226.913 170.003 228.854 170.938 230.285 172.602C231.717 174.266 232.522 176.522 232.524 178.875V263.916C232.522 266.269 231.717 268.525 230.285 270.189C228.854 271.853 226.913 272.789 224.889 272.791Z" fill="#E5E5E5"/>
-<path d="M225.631 644.862H163.635C161.611 644.859 159.67 643.923 158.239 642.259C156.807 640.596 156.002 638.34 156 635.987V550.945C156.002 548.592 156.807 546.336 158.239 544.673C159.67 543.009 161.611 542.073 163.635 542.07H225.631C227.655 542.073 229.596 543.009 231.027 544.673C232.459 546.336 233.264 548.592 233.266 550.945V635.987C233.264 638.34 232.459 640.596 231.027 642.259C229.596 643.923 227.655 644.859 225.631 644.862Z" fill="#E5E5E5"/>
-<path d="M178.101 37.4731H81.3912C79.5912 37.4731 77.865 36.6419 76.5923 35.1625C75.3195 33.683 74.6045 31.6765 74.6045 29.5842C74.6045 27.4919 75.3195 25.4854 76.5923 24.0059C77.865 22.5265 79.5912 21.6953 81.3912 21.6953H178.101C179.901 21.6953 181.627 22.5265 182.9 24.0059C184.173 25.4854 184.888 27.4919 184.888 29.5842C184.888 31.6765 184.173 33.683 182.9 35.1625C181.627 36.6419 179.901 37.4731 178.101 37.4731Z" fill="#D4D4D4"/>
-<path d="M442.272 37.4731H345.562C343.762 37.4731 342.036 36.6419 340.763 35.1625C339.49 33.683 338.775 31.6765 338.775 29.5842C338.775 27.4919 339.49 25.4854 340.763 24.0059C342.036 22.5265 343.762 21.6953 345.562 21.6953H442.272C444.072 21.6953 445.798 22.5265 447.071 24.0059C448.344 25.4854 449.059 27.4919 449.059 29.5842C449.059 31.6765 448.344 33.683 447.071 35.1625C445.798 36.6419 444.072 37.4731 442.272 37.4731Z" fill="#D4D4D4"/>
-<path d="M720.483 37.4731H623.773C621.973 37.4731 620.247 36.6419 618.974 35.1625C617.701 33.683 616.986 31.6765 616.986 29.5842C616.986 27.4919 617.701 25.4854 618.974 24.0059C620.247 22.5265 621.973 21.6953 623.773 21.6953H720.483C722.283 21.6953 724.009 22.5265 725.282 24.0059C726.555 25.4854 727.27 27.4919 727.27 29.5842C727.27 31.6765 726.555 33.683 725.282 35.1625C724.009 36.6419 722.283 37.4731 720.483 37.4731Z" fill="#D4D4D4"/>
-<path d="M990.77 37.4731H894.06C892.26 37.4731 890.534 36.6419 889.261 35.1625C887.988 33.683 887.273 31.6765 887.273 29.5842C887.273 27.4919 887.988 25.4854 889.261 24.0059C890.534 22.5265 892.26 21.6953 894.06 21.6953H990.77C992.57 21.6953 994.296 22.5265 995.569 24.0059C996.842 25.4854 997.557 27.4919 997.557 29.5842C997.557 31.6765 996.842 33.683 995.569 35.1625C994.296 36.6419 992.57 37.4731 990.77 37.4731Z" fill="#D4D4D4"/>
-</g>
-</svg>
diff --git a/web/public/empty-state/active-cycle/assignee-dark.webp b/web/public/empty-state/active-cycle/assignee-dark.webp
new file mode 100644
index 00000000000..25906276703
Binary files /dev/null and b/web/public/empty-state/active-cycle/assignee-dark.webp differ
diff --git a/web/public/empty-state/active-cycle/assignee-light.webp b/web/public/empty-state/active-cycle/assignee-light.webp
new file mode 100644
index 00000000000..b8ae5c01022
Binary files /dev/null and b/web/public/empty-state/active-cycle/assignee-light.webp differ
diff --git a/web/public/empty-state/active-cycle/chart-dark.webp b/web/public/empty-state/active-cycle/chart-dark.webp
new file mode 100644
index 00000000000..033d6fe3c4d
Binary files /dev/null and b/web/public/empty-state/active-cycle/chart-dark.webp differ
diff --git a/web/public/empty-state/active-cycle/chart-light.webp b/web/public/empty-state/active-cycle/chart-light.webp
new file mode 100644
index 00000000000..587906fba3d
Binary files /dev/null and b/web/public/empty-state/active-cycle/chart-light.webp differ
diff --git a/web/public/empty-state/active-cycle/cycle-dark.webp b/web/public/empty-state/active-cycle/cycle-dark.webp
new file mode 100644
index 00000000000..d092308046f
Binary files /dev/null and b/web/public/empty-state/active-cycle/cycle-dark.webp differ
diff --git a/web/public/empty-state/active-cycle/cycle-light.webp b/web/public/empty-state/active-cycle/cycle-light.webp
new file mode 100644
index 00000000000..a218d4d268c
Binary files /dev/null and b/web/public/empty-state/active-cycle/cycle-light.webp differ
diff --git a/web/public/empty-state/active-cycle/label-dark.webp b/web/public/empty-state/active-cycle/label-dark.webp
new file mode 100644
index 00000000000..c15d3be26e1
Binary files /dev/null and b/web/public/empty-state/active-cycle/label-dark.webp differ
diff --git a/web/public/empty-state/active-cycle/label-light.webp b/web/public/empty-state/active-cycle/label-light.webp
new file mode 100644
index 00000000000..e5ccc6994d1
Binary files /dev/null and b/web/public/empty-state/active-cycle/label-light.webp differ
diff --git a/web/public/empty-state/active-cycle/priority-dark.webp b/web/public/empty-state/active-cycle/priority-dark.webp
new file mode 100644
index 00000000000..f662e92eecc
Binary files /dev/null and b/web/public/empty-state/active-cycle/priority-dark.webp differ
diff --git a/web/public/empty-state/active-cycle/priority-light.webp b/web/public/empty-state/active-cycle/priority-light.webp
new file mode 100644
index 00000000000..fde814c6a7c
Binary files /dev/null and b/web/public/empty-state/active-cycle/priority-light.webp differ
diff --git a/web/public/empty-state/active-cycle/progress-dark.webp b/web/public/empty-state/active-cycle/progress-dark.webp
new file mode 100644
index 00000000000..4beda66ea4e
Binary files /dev/null and b/web/public/empty-state/active-cycle/progress-dark.webp differ
diff --git a/web/public/empty-state/active-cycle/progress-light.webp b/web/public/empty-state/active-cycle/progress-light.webp
new file mode 100644
index 00000000000..ae30cf76a5c
Binary files /dev/null and b/web/public/empty-state/active-cycle/progress-light.webp differ
diff --git a/web/public/empty-state/analytics.svg b/web/public/empty-state/analytics.svg
deleted file mode 100644
index 4f7cd4b7d34..00000000000
--- a/web/public/empty-state/analytics.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg width="126" height="136" viewBox="0 0 126 136" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M113.955 135.906C113.919 135.906 113.883 135.906 113.848 135.906L19.4 134.786C14.0318 134.715 9.70802 130.233 9.74578 124.787C3.07794 102.326 0.140014 84.6385 0.220352 67.4423C0.304227 49.494 3.79635 31.2365 11.2096 9.98858C11.2958 4.57842 15.6643 0.222153 20.9864 0.222153C21.0208 0.222153 21.0552 0.222371 21.0897 0.222697L115.538 1.34477C120.918 1.41524 125.248 5.91626 125.189 11.3783L124.998 28.0142L124.856 28.0159L123.728 126.104C123.659 131.532 119.285 135.906 113.955 135.906ZM20.9863 0.668279C15.8915 0.668279 11.7123 4.84756 11.6484 10.0314L11.648 10.0683L11.6358 10.1031C-2.52107 50.6621 -2.90313 80.6475 10.1761 124.69L10.1858 124.723L10.1854 124.757C10.1319 129.973 14.2679 134.272 19.4054 134.34L113.853 135.459C113.887 135.46 113.921 135.46 113.955 135.46C119.046 135.46 123.223 131.282 123.289 126.099L124.33 35.5712L124.335 35.1254L124.456 24.7741L124.596 24.773L124.75 11.3732C124.806 6.15696 120.671 1.8582 115.532 1.79089L21.0848 0.668824C21.0522 0.668498 21.0188 0.668279 20.9863 0.668279Z" fill="#F5F5F5"/>
-<path d="M105.57 95.7116L105.563 96.1577H51.6133V95.7116H105.57Z" fill="#F5F5F5"/>
-<path d="M105.677 86.2315L105.673 86.6777H51.6133V86.2315H105.677Z" fill="#F5F5F5"/>
-<path d="M105.787 76.7513L105.783 77.1975H51.6133V76.7513H105.787Z" fill="#F5F5F5"/>
-<path d="M105.442 106.062L105.437 106.508H50.4023V59.6869L50.8417 59.6914V87.7104C50.8417 90.579 51.4897 93.2937 52.6451 95.7117C52.7176 95.8611 52.7901 96.0106 52.867 96.1578C55.8764 102.042 61.9348 106.062 68.9158 106.062H105.442Z" fill="#F5F5F5"/>
-<path d="M29.1238 129.338C23.8536 129.27 19.6326 124.882 19.6882 119.53C7.13649 77.2648 6.35043 47.2084 21.1499 4.80458C21.1795 3.11704 21.6476 1.46746 22.5066 0.0226944L20.6481 0.000550955C15.3778 -0.0558841 11.0569 4.23032 10.9891 9.582C-3.81039 51.9859 -3.0243 82.0422 9.52746 124.308C9.47176 129.659 13.6928 134.047 18.963 134.116L113.411 135.237C116.826 135.266 119.994 133.434 121.713 130.437L29.1238 129.338Z" fill="#F5F5F5"/>
-<path d="M17.1014 125.311C17.0716 124.32 17.9447 123.617 18.8372 123.436C19.9713 123.205 21.1291 123.799 22.09 124.338C23.8072 125.303 22.5893 124.924 24.6061 125.743C27.4295 126.563 29.8496 124.515 30.7316 121.601C31.2526 119.19 31.1434 117.133 31.2579 114.916C31.3681 112.78 31.9407 110.611 33.7234 109.285C34.4718 108.728 35.404 108.398 36.3333 108.594C37.3258 108.802 38.1186 109.527 39.075 109.842C40.8547 110.429 42.7264 109.637 44.061 108.429C45.6134 107.025 46.3714 105.05 46.9048 103.058C47.4579 100.992 47.7957 98.8294 48.8098 96.9266C49.6752 95.3029 51.0345 93.8043 52.908 93.4946C54.7436 93.1912 56.5024 94.105 58.0867 94.9234C59.7173 95.7656 61.4029 96.6782 63.2711 96.7567C67.2745 96.925 70.3669 93.4662 72.1019 90.1776C74.0822 86.424 75.2304 81.8692 78.7486 79.2155C80.2608 78.0749 82.1795 77.2786 84.09 77.5982C86.0209 77.9212 87.4315 79.3434 88.7138 80.7334C90.0273 82.1572 91.3314 83.5599 93.111 84.3799C94.8575 85.1846 96.8087 85.486 98.7111 85.2311C99.6298 85.108 100.509 84.8524 101.359 84.4796C101.747 84.3092 101.412 83.7326 101.026 83.9017C99.1621 84.7195 97.04 84.8612 95.0732 84.3691C93.0971 83.8747 91.5224 82.7522 90.127 81.2828C88.8495 79.9375 87.6484 78.4058 85.9773 77.5413C84.2868 76.6668 82.3485 76.6891 80.6038 77.3946C78.8348 78.1101 77.3023 79.3755 76.1402 80.8969C74.7902 82.6643 73.8925 84.7357 72.9901 86.7604C71.359 90.4199 69.2681 94.7415 65.0953 95.8789C61.1443 96.9559 58.221 93.4057 54.5355 92.8421C52.7237 92.5651 51.009 93.2021 49.726 94.5162C48.3977 95.8768 47.6298 97.6761 47.1226 99.4939C46.501 101.721 46.181 104.107 45.0397 106.146C44.1375 107.758 42.4664 109.253 40.5676 109.365C39.4798 109.429 38.6469 108.919 37.7171 108.427C36.879 107.983 36.0038 107.754 35.0617 107.941C33.2973 108.291 31.9264 109.874 31.2526 111.488C29.5906 115.47 31.8793 120.586 28.6257 123.99C28.0311 124.612 27.2683 125.08 26.4071 125.175C25.2534 125.303 24.1746 124.757 23.1966 124.204C21.5072 123.249 19.3683 121.971 17.5167 123.297C16.8596 123.768 16.4174 124.478 16.4424 125.311C16.4554 125.74 17.1144 125.742 17.1014 125.311Z" fill="#3A3A3A"/>
-<path d="M82.8793 78.9819C83.9712 78.9819 84.8563 78.0831 84.8563 76.9743C84.8563 75.8656 83.9712 74.9667 82.8793 74.9667C81.7875 74.9667 80.9023 75.8656 80.9023 76.9743C80.9023 78.0831 81.7875 78.9819 82.8793 78.9819Z" fill="#3F76FF"/>
-<path d="M64.4223 97.9423C65.5142 97.9423 66.3993 97.0435 66.3993 95.9347C66.3993 94.826 65.5142 93.9272 64.4223 93.9272C63.3304 93.9272 62.4453 94.826 62.4453 95.9347C62.4453 97.0435 63.3304 97.9423 64.4223 97.9423Z" fill="#3F76FF"/>
-<path d="M53.1523 35.2409C54.3647 32.6859 57.5101 31.2629 60.1915 32.0564C61.702 32.5034 62.969 33.5304 64.3579 34.281C65.7468 35.0315 67.4699 35.4976 68.867 34.763C71.2685 33.5002 71.122 29.7301 73.2108 27.9858C74.6011 26.8248 76.6411 26.8791 78.3595 27.4234C80.0778 27.9677 81.6492 28.9286 83.3787 29.4352C86.5972 30.3778 90.2569 29.5851 92.8165 27.3909C92.8421 27.369 92.8673 27.3469 92.8922 27.3246C94.1594 26.191 96.1451 27.1252 96.0986 28.8395L95.7746 40.7943H53.3791L53.1523 35.2409Z" fill="#F5F5F5"/>
-<path d="M90.36 33.0866C90.4996 33.029 90.4996 32.8303 90.3599 32.7727C89.3853 32.3712 88.2938 31.7997 87.4596 31.178C87.3261 31.0784 87.1476 31.2157 87.204 31.3738L87.6788 32.7065H79.5547V33.1527H87.6788L87.2039 34.4858C87.1476 34.644 87.326 34.7812 87.4596 34.6817C88.2937 34.0599 89.3853 33.4883 90.36 33.0866Z" fill="#3A3A3A"/>
-<path d="M72.0801 30.9379C72.157 30.8062 72.0385 30.648 71.893 30.6881C70.8779 30.9678 69.6684 31.184 68.6339 31.2021C68.4682 31.205 68.408 31.4239 68.5472 31.5152L69.7197 32.2839L63.2539 37.2788L63.5199 37.6339L69.9857 32.6389L70.4026 33.9919C70.4521 34.1525 70.6759 34.1519 70.7229 33.9906C71.0161 32.9829 71.544 31.8569 72.0801 30.9379Z" fill="#3A3A3A"/>
-<path d="M94.3087 30.3053C96.3884 30.3053 98.0744 28.5933 98.0744 26.4814C98.0744 24.3694 96.3884 22.6574 94.3087 22.6574C92.2289 22.6574 90.543 24.3694 90.543 26.4814C90.543 28.5933 92.2289 30.3053 94.3087 30.3053Z" fill="#3F76FF"/>
-<path opacity="0.7" d="M75.8673 30.3053C77.947 30.3053 79.633 28.5933 79.633 26.4814C79.633 24.3694 77.947 22.6574 75.8673 22.6574C73.7875 22.6574 72.1016 24.3694 72.1016 26.4814C72.1016 28.5933 73.7875 30.3053 75.8673 30.3053Z" fill="#3F76FF"/>
-<path opacity="0.25" d="M59.168 33.8743C61.2478 33.8743 62.9337 32.1623 62.9337 30.0504C62.9337 27.9384 61.2478 26.2264 59.168 26.2264C57.0883 26.2264 55.4023 27.9384 55.4023 30.0504C55.4023 32.1623 57.0883 33.8743 59.168 33.8743Z" fill="#3F76FF"/>
-<path d="M104.847 48.4215L46.4175 47.9963C44.5394 47.9826 43.0018 49.5218 42.9884 51.4289C42.9749 53.336 44.4906 54.8974 46.3687 54.9111L104.798 55.3363C106.676 55.35 108.214 53.8109 108.227 51.9037C108.241 49.9966 106.725 48.4352 104.847 48.4215Z" fill="#F5F5F5"/>
-<path d="M37.69 52.2934C38.5392 52.2934 39.2277 51.5943 39.2277 50.7319C39.2277 49.8695 38.5392 49.1705 37.69 49.1705C36.8408 49.1705 36.1523 49.8695 36.1523 50.7319C36.1523 51.5943 36.8408 52.2934 37.69 52.2934Z" fill="#F5F5F5"/>
-<path d="M104.847 10.0546L46.4175 9.62939C44.5394 9.61572 43.0018 11.1549 42.9884 13.062C42.9749 14.9692 44.4906 16.5305 46.3687 16.5442L104.798 16.9694C106.676 16.9831 108.214 15.444 108.227 13.5368C108.241 11.6297 106.725 10.0683 104.847 10.0546Z" fill="#F5F5F5"/>
-<path d="M37.69 13.9265C38.5392 13.9265 39.2277 13.2274 39.2277 12.365C39.2277 11.5027 38.5392 10.8036 37.69 10.8036C36.8408 10.8036 36.1523 11.5027 36.1523 12.365C36.1523 13.2274 36.8408 13.9265 37.69 13.9265Z" fill="#F5F5F5"/>
-</svg>
diff --git a/web/public/empty-state/archived/empty-cycles-dark.webp b/web/public/empty-state/archived/empty-cycles-dark.webp
new file mode 100644
index 00000000000..872fb2fca19
Binary files /dev/null and b/web/public/empty-state/archived/empty-cycles-dark.webp differ
diff --git a/web/public/empty-state/archived/empty-cycles-light.webp b/web/public/empty-state/archived/empty-cycles-light.webp
new file mode 100644
index 00000000000..2db1dc4b780
Binary files /dev/null and b/web/public/empty-state/archived/empty-cycles-light.webp differ
diff --git a/web/public/empty-state/archived/empty-issues-dark.webp b/web/public/empty-state/archived/empty-issues-dark.webp
index 264488cbf63..01abef1fee1 100644
Binary files a/web/public/empty-state/archived/empty-issues-dark.webp and b/web/public/empty-state/archived/empty-issues-dark.webp differ
diff --git a/web/public/empty-state/archived/empty-issues-light.webp b/web/public/empty-state/archived/empty-issues-light.webp
index 602f0b14f0f..f010155fc99 100644
Binary files a/web/public/empty-state/archived/empty-issues-light.webp and b/web/public/empty-state/archived/empty-issues-light.webp differ
diff --git a/web/public/empty-state/archived/empty-modules-dark.webp b/web/public/empty-state/archived/empty-modules-dark.webp
new file mode 100644
index 00000000000..e34bf373738
Binary files /dev/null and b/web/public/empty-state/archived/empty-modules-dark.webp differ
diff --git a/web/public/empty-state/archived/empty-modules-light.webp b/web/public/empty-state/archived/empty-modules-light.webp
new file mode 100644
index 00000000000..5caf2ea9039
Binary files /dev/null and b/web/public/empty-state/archived/empty-modules-light.webp differ
diff --git a/web/public/empty-state/cycle/all-filters.svg b/web/public/empty-state/cycle/all-filters.svg
new file mode 100644
index 00000000000..b00841cc85e
--- /dev/null
+++ b/web/public/empty-state/cycle/all-filters.svg
@@ -0,0 +1,42 @@
+<svg width="205" height="217" viewBox="0 0 205 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="102.5" cy="102.5" r="102.5" fill="url(#paint0_linear_7901_142254)"/>
+<path d="M102 165.5C136.518 165.5 164.5 137.518 164.5 103C164.5 68.4822 136.518 40.5 102 40.5C67.4822 40.5 39.5 68.4822 39.5 103C39.5 137.518 67.4822 165.5 102 165.5Z" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M102 140.5C111.946 140.5 121.484 136.549 128.517 129.517C135.549 122.484 139.5 112.946 139.5 103C139.5 93.0544 135.549 83.5161 128.517 76.4835C121.484 69.4509 111.946 65.5 102 65.5V140.5Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_7901_142254)">
+<circle cx="102.754" cy="173.828" r="31" fill="#3A5BC7"/>
+<path d="M91.75 166.5H114.25" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M96.75 174H109.25" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.5 181.5H105.5" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_7901_142254" x="63.7539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_7901_142254"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7901_142254"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_7901_142254"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7901_142254" result="effect2_dropShadow_7901_142254"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_7901_142254"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_7901_142254" result="effect3_dropShadow_7901_142254"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_7901_142254" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_7901_142254" x1="102.5" y1="0" x2="102.5" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/empty-state/cycle/completed-no-issues-dark.webp b/web/public/empty-state/cycle/completed-no-issues-dark.webp
new file mode 100644
index 00000000000..a187dbf5cf8
Binary files /dev/null and b/web/public/empty-state/cycle/completed-no-issues-dark.webp differ
diff --git a/web/public/empty-state/cycle/completed-no-issues-light.webp b/web/public/empty-state/cycle/completed-no-issues-light.webp
new file mode 100644
index 00000000000..6009f60f416
Binary files /dev/null and b/web/public/empty-state/cycle/completed-no-issues-light.webp differ
diff --git a/web/public/empty-state/cycle/name-filter.svg b/web/public/empty-state/cycle/name-filter.svg
new file mode 100644
index 00000000000..168611119d5
--- /dev/null
+++ b/web/public/empty-state/cycle/name-filter.svg
@@ -0,0 +1,41 @@
+<svg width="205" height="217" viewBox="0 0 205 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="102.5" cy="102.5" r="102.5" fill="url(#paint0_linear_7901_142341)"/>
+<path d="M103 165.5C137.518 165.5 165.5 137.518 165.5 103C165.5 68.4822 137.518 40.5 103 40.5C68.4822 40.5 40.5 68.4822 40.5 103C40.5 137.518 68.4822 165.5 103 165.5Z" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M103 140.5C112.946 140.5 122.484 136.549 129.517 129.517C136.549 122.484 140.5 112.946 140.5 103C140.5 93.0544 136.549 83.5161 129.517 76.4835C122.484 69.4509 112.946 65.5 103 65.5V140.5Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_7901_142341)">
+<circle cx="102.754" cy="173.828" r="31" fill="#3A5BC7"/>
+<path d="M101.075 185.585C108.494 185.585 114.508 179.571 114.508 172.152C114.508 164.733 108.494 158.719 101.075 158.719C93.6559 158.719 87.6416 164.733 87.6416 172.152C87.6416 179.571 93.6559 185.585 101.075 185.585Z" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M117.866 188.939L110.646 181.719" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_7901_142341" x="63.7539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_7901_142341"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7901_142341"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_7901_142341"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7901_142341" result="effect2_dropShadow_7901_142341"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_7901_142341"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_7901_142341" result="effect3_dropShadow_7901_142341"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_7901_142341" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_7901_142341" x1="102.5" y1="0" x2="102.5" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/empty-state/dashboard.svg b/web/public/empty-state/dashboard.svg
deleted file mode 100644
index 1e45c69ee59..00000000000
--- a/web/public/empty-state/dashboard.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<svg width="277" height="167" viewBox="0 0 277 167" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M55.1378 23.975H33.4777C31.3953 23.9769 29.3987 24.805 27.9262 26.2775C26.4538 27.75 25.6257 29.7465 25.6238 31.8289V55.3121C25.3469 55.2955 25.07 55.2708 24.7971 55.2377C19.6656 54.6978 14.787 52.7351 10.7113 49.5709C6.63556 46.4067 3.52485 42.1669 1.72986 37.3293C-0.0651362 32.4918 -0.473025 27.2491 0.552182 22.1921C1.57739 17.1352 3.99491 12.4652 7.5322 8.70874C11.0695 4.95225 15.5858 2.25865 20.5721 0.931613C25.5583 -0.395423 30.8161 -0.303114 35.7527 1.19814C40.6893 2.69939 45.1083 5.54988 48.5115 9.42823C51.9147 13.3066 54.1669 18.0585 55.0139 23.1483C55.0593 23.4211 55.1007 23.6981 55.1378 23.975Z" fill="#B2C8FF"/>
-<path d="M310.84 23.1483H33.4736C31.1721 23.1508 28.9656 24.0662 27.3382 25.6936C25.7109 27.321 24.7955 29.5275 24.793 31.8289V178.159C24.7955 180.461 25.7109 182.667 27.3382 184.295C28.9656 185.922 31.1721 186.837 33.4736 186.84H310.84C313.141 186.837 315.348 185.922 316.975 184.295C318.603 182.667 319.518 180.461 319.521 178.159V31.8289C319.518 29.5275 318.603 27.321 316.975 25.6936C315.348 24.0662 313.141 23.1508 310.84 23.1483ZM318.694 178.159C318.692 180.242 317.864 182.238 316.391 183.711C314.919 185.183 312.922 186.011 310.84 186.013H33.4736C31.3912 186.011 29.3946 185.183 27.9221 183.711C26.4496 182.238 25.6216 180.242 25.6197 178.159V31.8289C25.6216 29.7465 26.4496 27.75 27.9221 26.2775C29.3946 24.805 31.3912 23.9769 33.4736 23.975H310.84C312.922 23.9769 314.919 24.805 316.391 26.2775C317.864 27.75 318.692 29.7465 318.694 31.8289V178.159Z" fill="#E5E5E5"/>
-<path d="M297.201 46.8628H47.1165C47.0069 46.8628 46.9017 46.8192 46.8242 46.7417C46.7467 46.6642 46.7031 46.5591 46.7031 46.4494C46.7031 46.3398 46.7467 46.2347 46.8242 46.1571C46.9017 46.0796 47.0069 46.0361 47.1165 46.0361H297.201C297.31 46.0361 297.416 46.0796 297.493 46.1571C297.571 46.2347 297.614 46.3398 297.614 46.4494C297.614 46.5591 297.571 46.6642 297.493 46.7417C297.416 46.8192 297.31 46.8628 297.201 46.8628Z" fill="#E5E5E5"/>
-<path d="M117.812 169.065C117.702 169.065 117.597 169.022 117.52 168.944C117.442 168.867 117.398 168.762 117.398 168.652V32.6557C117.398 32.546 117.442 32.4409 117.52 32.3634C117.597 32.2858 117.702 32.2423 117.812 32.2423C117.921 32.2423 118.027 32.2858 118.104 32.3634C118.182 32.4409 118.225 32.546 118.225 32.6557V168.652C118.225 168.762 118.182 168.867 118.104 168.944C118.027 169.022 117.921 169.065 117.812 169.065Z" fill="#E5E5E5"/>
-<path d="M180.214 169.065C180.105 169.065 179.999 169.022 179.922 168.944C179.844 168.867 179.801 168.762 179.801 168.652V32.6557C179.801 32.546 179.844 32.4409 179.922 32.3634C179.999 32.2858 180.105 32.2423 180.214 32.2423C180.324 32.2423 180.429 32.2858 180.506 32.3634C180.584 32.4409 180.628 32.546 180.628 32.6557V168.652C180.628 168.762 180.584 168.867 180.506 168.944C180.429 169.022 180.324 169.065 180.214 169.065Z" fill="#E5E5E5"/>
-<path d="M242.636 169.065C242.526 169.065 242.421 169.022 242.344 168.944C242.266 168.867 242.223 168.762 242.223 168.652V32.6557C242.223 32.546 242.266 32.4409 242.344 32.3634C242.421 32.2858 242.526 32.2423 242.636 32.2423C242.746 32.2423 242.851 32.2858 242.928 32.3634C243.006 32.4409 243.049 32.546 243.049 32.6557V168.652C243.049 168.762 243.006 168.867 242.928 168.944C242.851 169.022 242.746 169.065 242.636 169.065Z" fill="#E5E5E5"/>
-<path d="M77.6675 89.5292H62.5633C62.0701 89.5286 61.5973 89.3325 61.2486 88.9838C60.8998 88.635 60.7037 88.1622 60.7031 87.6691V69.845C60.7037 69.3518 60.8998 68.879 61.2486 68.5303C61.5973 68.1816 62.0701 67.9854 62.5633 67.9849H77.6675C78.1607 67.9854 78.6335 68.1816 78.9822 68.5303C79.3309 68.879 79.5271 69.3518 79.5276 69.845V87.6691C79.5271 88.1622 79.3309 88.635 78.9822 88.9838C78.6335 89.3325 78.1607 89.5286 77.6675 89.5292Z" fill="#3F76FF"/>
-<path d="M99.1753 140.373H84.0711C83.5779 140.372 83.1051 140.176 82.7564 139.827C82.4076 139.479 82.2115 139.006 82.2109 138.513V120.689C82.2115 120.195 82.4076 119.723 82.7564 119.374C83.1051 119.025 83.5779 118.829 84.0711 118.829H99.1753C99.6685 118.829 100.141 119.025 100.49 119.374C100.839 119.723 101.035 120.195 101.035 120.689V138.513C101.035 139.006 100.839 139.479 100.49 139.827C100.141 140.176 99.6685 140.372 99.1753 140.373Z" fill="#3F76FF"/>
-<path d="M147.937 100.277H132.833C132.34 100.276 131.867 100.08 131.518 99.7311C131.169 99.3824 130.973 98.9096 130.973 98.4164V80.5924C130.973 80.0992 131.169 79.6264 131.518 79.2777C131.867 78.9289 132.34 78.7328 132.833 78.7322H147.937C148.43 78.7328 148.903 78.9289 149.252 79.2777C149.6 79.6264 149.797 80.0992 149.797 80.5924V98.4164C149.797 98.9096 149.6 99.3824 149.252 99.7311C148.903 100.08 148.43 100.276 147.937 100.277Z" fill="#3F76FF"/>
-<path d="M211.195 80.8485H196.091C195.597 80.848 195.125 80.6518 194.776 80.3031C194.427 79.9544 194.231 79.4816 194.23 78.9884V61.1644C194.231 60.6712 194.427 60.1984 194.776 59.8497C195.125 59.5009 195.597 59.3048 196.091 59.3042H211.195C211.688 59.3048 212.161 59.5009 212.51 59.8497C212.858 60.1984 213.054 60.6712 213.055 61.1644V78.9884C213.054 79.4816 212.858 79.9544 212.51 80.3031C212.161 80.6518 211.688 80.848 211.195 80.8485Z" fill="#3F76FF"/>
-<path d="M269.468 80.8485H254.364C253.871 80.848 253.398 80.6518 253.049 80.3031C252.701 79.9544 252.504 79.4816 252.504 78.9884V61.1644C252.504 60.6712 252.701 60.1984 253.049 59.8497C253.398 59.5009 253.871 59.3048 254.364 59.3042H269.468C269.961 59.3048 270.434 59.5009 270.783 59.8497C271.132 60.1984 271.328 60.6712 271.328 61.1644V78.9884C271.328 79.4816 271.132 79.9544 270.783 80.3031C270.434 80.6518 269.961 80.848 269.468 80.8485Z" fill="#3F76FF"/>
-<path d="M284.347 117.638H269.243C268.75 117.637 268.277 117.441 267.928 117.092C267.58 116.744 267.383 116.271 267.383 115.778V97.9536C267.383 97.4604 267.58 96.9876 267.928 96.6389C268.277 96.2902 268.75 96.094 269.243 96.0935H284.347C284.84 96.094 285.313 96.2902 285.662 96.6389C286.011 96.9876 286.207 97.4604 286.207 97.9536V115.778C286.207 116.271 286.011 116.744 285.662 117.092C285.313 117.441 284.84 117.637 284.347 117.638Z" fill="#E5E5E5"/>
-<path d="M233.105 111.024H218.001C217.508 111.023 217.035 110.827 216.686 110.479C216.337 110.13 216.141 109.657 216.141 109.164V91.3399C216.141 90.8467 216.337 90.3739 216.686 90.0252C217.035 89.6764 217.508 89.4803 218.001 89.4797H233.105C233.598 89.4803 234.071 89.6764 234.42 90.0252C234.768 90.3739 234.965 90.8467 234.965 91.3399V109.164C234.965 109.657 234.768 110.13 234.42 110.479C234.071 110.827 233.598 111.023 233.105 111.024Z" fill="#FF6584"/>
-<path d="M203.757 117.638H188.653C188.16 117.637 187.687 117.441 187.338 117.092C186.99 116.744 186.794 116.271 186.793 115.778V97.9536C186.794 97.4604 186.99 96.9876 187.338 96.6389C187.687 96.2902 188.16 96.094 188.653 96.0935H203.757C204.251 96.094 204.723 96.2902 205.072 96.6389C205.421 96.9876 205.617 97.4604 205.617 97.9536V115.778C205.617 116.271 205.421 116.744 205.072 117.092C204.723 117.441 204.251 117.637 203.757 117.638Z" fill="#E5E5E5"/>
-<path d="M140.496 145.746H125.391C124.898 145.746 124.425 145.55 124.077 145.201C123.728 144.852 123.532 144.379 123.531 143.886V126.062C123.532 125.569 123.728 125.096 124.077 124.748C124.425 124.399 124.898 124.203 125.391 124.202H140.496C140.989 124.203 141.462 124.399 141.81 124.748C142.159 125.096 142.355 125.569 142.356 126.062V143.886C142.355 144.38 142.159 144.852 141.81 145.201C141.462 145.55 140.989 145.746 140.496 145.746Z" fill="#E5E5E5"/>
-<path d="M64.0308 122.185H48.9265C48.4334 122.184 47.9606 121.988 47.6118 121.639C47.2631 121.291 47.067 120.818 47.0664 120.325V102.501C47.067 102.008 47.2631 101.535 47.6118 101.186C47.9606 100.837 48.4334 100.641 48.9265 100.641H64.0308C64.524 100.641 64.9968 100.837 65.3455 101.186C65.6942 101.535 65.8904 102.008 65.8909 102.501V120.325C65.8904 120.818 65.6942 121.291 65.3455 121.639C64.9968 121.988 64.524 122.184 64.0308 122.185Z" fill="#FF6584"/>
-<path d="M106.617 89.5292H91.5125C91.0193 89.5286 90.5465 89.3325 90.1978 88.9838C89.849 88.635 89.6529 88.1622 89.6523 87.6691V69.845C89.6529 69.3518 89.849 68.879 90.1978 68.5303C90.5465 68.1816 91.0193 67.9854 91.5125 67.9849H106.617C107.11 67.9854 107.583 68.1816 107.931 68.5303C108.28 68.879 108.476 69.3518 108.477 69.845V87.6691C108.476 88.1622 108.28 88.635 107.931 88.9838C107.583 89.3325 107.11 89.5286 106.617 89.5292Z" fill="#E5E5E5"/>
-<path d="M94.2386 40.0962H70.6769C70.2384 40.0962 69.8178 39.922 69.5077 39.6119C69.1976 39.3018 69.0234 38.8813 69.0234 38.4427C69.0234 38.0042 69.1976 37.5837 69.5077 37.2736C69.8178 36.9635 70.2384 36.7893 70.6769 36.7893H94.2386C94.6771 36.7893 95.0976 36.9635 95.4077 37.2736C95.7178 37.5837 95.892 38.0042 95.892 38.4427C95.892 38.8813 95.7178 39.3018 95.4077 39.6119C95.0976 39.922 94.6771 40.0962 94.2386 40.0962Z" fill="#D4D4D4"/>
-<path d="M160.782 40.0962H137.22C136.781 40.0962 136.361 39.922 136.051 39.6119C135.741 39.3018 135.566 38.8813 135.566 38.4427C135.566 38.0042 135.741 37.5837 136.051 37.2736C136.361 36.9635 136.781 36.7893 137.22 36.7893H160.782C161.22 36.7893 161.641 36.9635 161.951 37.2736C162.261 37.5837 162.435 38.0042 162.435 38.4427C162.435 38.8813 162.261 39.3018 161.951 39.6119C161.641 39.922 161.22 40.0962 160.782 40.0962Z" fill="#D4D4D4"/>
-<path d="M223.207 40.0962H199.646C199.207 40.0962 198.787 39.922 198.476 39.6119C198.166 39.3018 197.992 38.8813 197.992 38.4427C197.992 38.0042 198.166 37.5837 198.476 37.2736C198.787 36.9635 199.207 36.7893 199.646 36.7893H223.207C223.646 36.7893 224.066 36.9635 224.376 37.2736C224.687 37.5837 224.861 38.0042 224.861 38.4427C224.861 38.8813 224.687 39.3018 224.376 39.6119C224.066 39.922 223.646 40.0962 223.207 40.0962Z" fill="#D4D4D4"/>
-<path d="M281.496 40.0962H257.935C257.496 40.0962 257.076 39.922 256.766 39.6119C256.455 39.3018 256.281 38.8813 256.281 38.4427C256.281 38.0042 256.455 37.5837 256.766 37.2736C257.076 36.9635 257.496 36.7893 257.935 36.7893H281.496C281.935 36.7893 282.355 36.9635 282.666 37.2736C282.976 37.5837 283.15 38.0042 283.15 38.4427C283.15 38.8813 282.976 39.3018 282.666 39.6119C282.355 39.922 281.935 40.0962 281.496 40.0962Z" fill="#D4D4D4"/>
-</svg>
diff --git a/web/public/empty-state/estimate.svg b/web/public/empty-state/estimate.svg
deleted file mode 100644
index 604b2f143fe..00000000000
--- a/web/public/empty-state/estimate.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg width="98" height="121" viewBox="0 0 98 121" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.8707 74.5375C16.3076 72.9545 18.6808 73.4171 20.2598 74.5344C22.2919 75.9722 22.873 78.598 23.1728 80.9255C23.6803 84.8657 23.8304 90.4355 28.2986 92.0828C30.363 92.8439 32.7261 92.2154 34.4697 90.9796C36.3742 89.6297 37.5622 87.5534 38.3579 85.4014C39.3213 82.796 39.879 80.0089 40.3517 77.2785C40.8351 74.4863 41.1519 71.664 41.2941 68.8338C41.4333 66.0649 41.3427 63.3142 41.2327 60.5471C41.1467 58.3866 41.1139 56.1179 41.8437 54.052C42.5808 51.9655 44.2945 50.3785 46.5478 50.1692C48.7349 49.966 50.9875 50.8883 52.57 52.3768C56.3668 55.9484 56.5454 61.7791 57.3941 66.5679C57.8399 69.084 58.4917 71.63 59.8579 73.819C60.9816 75.6193 62.5432 77.1286 64.3419 78.2484C67.9699 80.507 72.5929 81.1661 76.6187 79.6144C80.5491 78.0995 83.713 74.7878 85.082 70.8073C85.4201 69.8243 85.6289 68.8088 85.7348 67.7756C85.7841 67.2952 85.0326 67.2986 84.9838 67.7756C84.5336 72.1666 81.7151 76.1433 77.8526 78.2259C73.8783 80.3689 69.0654 80.097 65.1824 77.8754C63.2735 76.7832 61.6129 75.2427 60.4591 73.364C59.0598 71.0857 58.4606 68.4301 58.0247 65.8227C57.2373 61.1135 56.8802 55.7066 53.3508 52.0908C50.6136 49.2866 45.5767 48.1613 42.635 51.2848C39.6059 54.501 40.5139 59.682 40.6106 63.6745C40.7523 69.5217 40.1494 75.3825 38.8131 81.0769C38.2314 83.5555 37.5623 86.1115 36.1024 88.2369C34.7681 90.1793 32.5875 91.6848 30.1594 91.6609C27.7378 91.637 26.0364 89.8572 25.1768 87.7354C24.2698 85.4969 24.2104 83.0793 23.8965 80.7163C23.6084 78.5472 23.0835 76.1467 21.4568 74.5592C20.1918 73.3248 18.3152 72.5301 16.5348 72.814C15.6794 72.9505 14.9208 73.3661 14.3396 74.0064C14.0153 74.3636 14.5449 74.8963 14.8707 74.5375Z" fill="#3F76FF"/>
-<path d="M55.4847 43.7299H38.3499C37.9179 43.7299 37.5664 43.3784 37.5664 42.9464C37.5664 42.5144 37.9179 42.1631 38.3499 42.1631H55.4847C55.9167 42.1631 56.268 42.5144 56.268 42.9464C56.268 43.3784 55.9167 43.7299 55.4847 43.7299Z" fill="#D4D4D4"/>
-<path d="M81.9847 89.2958H64.8499C64.4179 89.2958 64.0664 88.9443 64.0664 88.5123C64.0664 88.0803 64.4179 87.729 64.8499 87.729H81.9847C82.4167 87.729 82.768 88.0803 82.768 88.5123C82.768 88.9443 82.4167 89.2958 81.9847 89.2958Z" fill="#D4D4D4"/>
-<path d="M96.0159 120.34H78.8811C78.4491 120.34 78.0977 119.989 78.0977 119.557C78.0977 119.125 78.4491 118.773 78.8811 118.773H96.0159C96.4479 118.773 96.7993 119.125 96.7993 119.557C96.7993 119.989 96.4479 120.34 96.0159 120.34Z" fill="#D4D4D4"/>
-<path d="M17.9183 26.7069H0.78347C0.351487 26.7069 0 26.3554 0 25.9235C0 25.4915 0.351492 25.1401 0.78347 25.1401H17.9183C18.3503 25.1401 18.7016 25.4915 18.7016 25.9235C18.7016 26.3554 18.3503 26.7069 17.9183 26.7069Z" fill="#D4D4D4"/>
-<path d="M87.2283 111.248H9.56712C9.29059 111.248 9.06641 111.023 9.06641 110.747V36.6409C9.06641 36.3641 9.2906 36.1401 9.56712 36.1401C9.84364 36.1401 10.0678 36.3641 10.0678 36.6409V66.8782C10.0678 90.8296 29.4843 110.246 53.4358 110.246H87.2283C87.5048 110.246 87.729 110.47 87.729 110.747C87.729 111.024 87.5048 111.248 87.2283 111.248Z" fill="#D4D4D4"/>
-<path d="M25.9613 81.4652H8.82644C8.39446 81.4652 8.04297 81.1137 8.04297 80.6817C8.04297 80.2498 8.39446 79.8984 8.82644 79.8984H25.9613C26.3932 79.8984 26.7446 80.2498 26.7446 80.6817C26.7446 81.1137 26.3932 81.4652 25.9613 81.4652Z" fill="#D4D4D4"/>
-<path d="M14.8118 76.6085C16.0562 76.6085 17.065 75.5997 17.065 74.3553C17.065 73.1109 16.0562 72.1021 14.8118 72.1021C13.5674 72.1021 12.5586 73.1109 12.5586 74.3553C12.5586 75.5997 13.5674 76.6085 14.8118 76.6085Z" fill="#2E2E2E"/>
-<path d="M29.8431 94.1349C31.0875 94.1349 32.0963 93.1261 32.0963 91.8816C32.0963 90.6372 31.0875 89.6284 29.8431 89.6284C28.5986 89.6284 27.5898 90.6372 27.5898 91.8816C27.5898 93.1261 28.5986 94.1349 29.8431 94.1349Z" fill="#2E2E2E"/>
-<path d="M46.8587 52.0738C48.1031 52.0738 49.1119 51.065 49.1119 49.8206C49.1119 48.5762 48.1031 47.5674 46.8587 47.5674C45.6143 47.5674 44.6055 48.5762 44.6055 49.8206C44.6055 51.065 45.6143 52.0738 46.8587 52.0738Z" fill="#2E2E2E"/>
-<path d="M71.9017 82.1178C73.1461 82.1178 74.1549 81.109 74.1549 79.8646C74.1549 78.6201 73.1461 77.6113 71.9017 77.6113C70.6572 77.6113 69.6484 78.6201 69.6484 79.8646C69.6484 81.109 70.6572 82.1178 71.9017 82.1178Z" fill="#2E2E2E"/>
-<path d="M86.4368 70.1007C87.6812 70.1007 88.69 69.0919 88.69 67.8475C88.69 66.603 87.6812 65.5942 86.4368 65.5942C85.1924 65.5942 84.1836 66.603 84.1836 67.8475C84.1836 69.0919 85.1924 70.1007 86.4368 70.1007Z" fill="#2E2E2E"/>
-<path d="M82.1267 20.0406L86.2476 21.9926C84.5574 19.6339 83.101 15.95 82.3213 13.0186C81.0011 15.7492 78.873 19.0903 76.7664 21.0861L81.1217 19.9656C78.438 33.1184 68.3439 42.5608 56.7847 42.5608L56.6211 43.0359C68.6949 43.0359 79.3865 33.7244 82.1267 20.0406Z" fill="#2E2E2E"/>
-<path d="M69.6669 0H95.7042C96.8085 0 97.707 0.8985 97.707 2.00286C97.707 3.10723 96.8085 4.00573 95.7042 4.00573H69.6669C68.5626 4.00573 67.6641 3.10723 67.6641 2.00286C67.6641 0.8985 68.5626 0 69.6669 0Z" fill="#3F76FF"/>
-<path d="M87.2735 115.346C86.999 115.346 86.722 115.285 86.4582 115.162C85.8076 114.856 85.399 114.245 85.3658 113.527L85.0959 107.706C85.0612 106.958 85.4514 106.278 86.1144 105.931C86.7772 105.584 87.5586 105.651 88.153 106.105L92.1177 109.137C92.5944 109.502 92.8668 110.055 92.8648 110.655C92.8631 111.255 92.5873 111.806 92.1084 112.168L88.4136 114.958C88.0726 115.215 87.6757 115.346 87.2735 115.346Z" fill="#D4D4D4"/>
-<path d="M14.2019 37.1274C14.2019 37.402 14.1407 37.679 14.017 37.9428C13.7114 38.5934 13.1002 39.0019 12.3824 39.0352L6.56105 39.3051C5.8134 39.3398 5.13372 38.9496 4.78654 38.2865C4.43937 37.6237 4.50684 36.8423 4.96062 36.248L7.99279 32.2833C8.35708 31.8066 8.9106 31.5342 9.51009 31.5361C10.1106 31.5379 10.6616 31.8136 11.0235 32.2926L13.8131 35.9873C14.0703 36.3284 14.2019 36.7252 14.2019 37.1274Z" fill="#D4D4D4"/>
-<path d="M46.6797 31.9702C43.7154 31.2601 40.5482 31.9028 38.0143 33.5767C35.3571 35.332 33.5978 38.1427 33.0023 41.2566C31.7737 47.6809 35.5272 54.0986 41.4594 56.6556C47.6955 59.3435 55.114 57.5399 59.6426 52.5512C61.8873 50.0785 63.2901 46.9504 63.7125 43.6423C64.1286 40.3835 63.654 36.6235 61.6807 33.9037C59.7234 31.2058 56.464 30.3005 53.3163 29.8584C50.262 29.4294 46.2102 29.2429 44.5587 32.4757C44.2438 33.0921 44.0958 33.7563 44.1307 34.4476C44.155 34.9286 44.9062 34.9315 44.8818 34.4476C44.8055 32.9361 45.8132 31.6731 47.1049 30.9938C48.6018 30.2065 50.4074 30.2731 52.04 30.4486C54.9873 30.7654 58.3335 31.3306 60.459 33.5942C62.5762 35.8491 63.2109 39.2854 63.0795 42.2786C62.9423 45.4028 61.8658 48.4778 59.9796 50.9765C56.2574 55.9072 49.7451 58.253 43.754 56.6601C37.9165 55.1081 37.8402 51.6438 37.9365 45.5088C37.9879 42.2359 34.8963 37.0842 37.4205 34.9513C39.8919 32.8631 43.3172 31.9368 46.4801 32.6944C46.9499 32.807 47.1503 32.0829 46.6797 31.9702Z" fill="#3F76FF"/>
-</svg>
diff --git a/web/public/empty-state/integration.svg b/web/public/empty-state/integration.svg
deleted file mode 100644
index d4f8ec5e8ee..00000000000
--- a/web/public/empty-state/integration.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="236" height="53" viewBox="0 0 236 53" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M195.448 46.8071H100.383C99.8783 46.8065 99.3948 46.6059 99.0382 46.2494C98.6816 45.8928 98.481 45.4093 98.4805 44.905V26.987H99.2413V44.905C99.2416 45.2076 99.362 45.4977 99.5759 45.7116C99.7899 45.9256 100.08 46.0459 100.383 46.0463H195.448C195.75 46.0459 196.04 45.9256 196.254 45.7116C196.468 45.4977 196.589 45.2076 196.589 44.905V26.8618H197.35V44.905C197.349 45.4093 197.149 45.8928 196.792 46.2494C196.435 46.6059 195.952 46.8065 195.448 46.8071Z" fill="#262626"/>
-<path d="M229.943 26.606H6.55078V27.3668H229.943V26.606Z" fill="#262626"/>
-<path d="M6.54403 33.4724C10.1582 33.4724 13.0881 30.5425 13.0881 26.9283C13.0881 23.3141 10.1582 20.3843 6.54403 20.3843C2.92986 20.3843 0 23.3141 0 26.9283C0 30.5425 2.92986 33.4724 6.54403 33.4724Z" fill="#3F76FF"/>
-<path d="M73.0636 33.4724C76.6777 33.4724 79.6076 30.5425 79.6076 26.9283C79.6076 23.3141 76.6777 20.3843 73.0636 20.3843C69.4494 20.3843 66.5195 23.3141 66.5195 26.9283C66.5195 30.5425 69.4494 33.4724 73.0636 33.4724Z" fill="#3F76FF"/>
-<path d="M118.189 52.7062C121.803 52.7062 124.733 49.7764 124.733 46.1622C124.733 42.548 121.803 39.6182 118.189 39.6182C114.574 39.6182 111.645 42.548 111.645 46.1622C111.645 49.7764 114.574 52.7062 118.189 52.7062Z" fill="#262626"/>
-<path d="M152.493 52.7062C156.107 52.7062 159.037 49.7764 159.037 46.1622C159.037 42.548 156.107 39.6182 152.493 39.6182C148.879 39.6182 145.949 42.548 145.949 46.1622C145.949 49.7764 148.879 52.7062 152.493 52.7062Z" fill="#D4D4D4"/>
-<path d="M135.853 33.4724C139.467 33.4724 142.397 30.5425 142.397 26.9283C142.397 23.3141 139.467 20.3843 135.853 20.3843C132.238 20.3843 129.309 23.3141 129.309 26.9283C129.309 30.5425 132.238 33.4724 135.853 33.4724Z" fill="#3F76FF"/>
-<path d="M229.009 33.4724C232.623 33.4724 235.553 30.5425 235.553 26.9283C235.553 23.3141 232.623 20.3843 229.009 20.3843C225.395 20.3843 222.465 23.3141 222.465 26.9283C222.465 30.5425 225.395 33.4724 229.009 33.4724Z" fill="#3F76FF"/>
-<path d="M196.962 33.4724C200.576 33.4724 203.506 30.5425 203.506 26.9283C203.506 23.3141 200.576 20.3843 196.962 20.3843C193.348 20.3843 190.418 23.3141 190.418 26.9283C190.418 30.5425 193.348 33.4724 196.962 33.4724Z" fill="#3F76FF"/>
-<path d="M26.8335 27.3682C26.7327 27.3682 26.6359 27.3281 26.5646 27.2568C26.4932 27.1855 26.4531 27.0887 26.4531 26.9878V8.20924C26.4537 7.70495 26.6543 7.22148 27.0109 6.86489C27.3675 6.5083 27.8509 6.30771 28.3552 6.30713H46.8723C46.9731 6.30713 47.0699 6.34721 47.1413 6.41856C47.2126 6.4899 47.2527 6.58666 47.2527 6.68755C47.2527 6.78845 47.2126 6.88521 47.1413 6.95656C47.0699 7.0279 46.9731 7.06798 46.8723 7.06798H28.3552C28.0527 7.06831 27.7626 7.18865 27.5486 7.40261C27.3346 7.61657 27.2143 7.90666 27.214 8.20924V26.9878C27.214 27.0887 27.1739 27.1855 27.1025 27.2568C27.0312 27.3281 26.9344 27.3682 26.8335 27.3682Z" fill="#262626"/>
-<path d="M47.7433 13.0881C51.3574 13.0881 54.2873 10.1582 54.2873 6.54404C54.2873 2.92987 51.3574 0 47.7433 0C44.1291 0 41.1992 2.92987 41.1992 6.54404C41.1992 10.1582 44.1291 13.0881 47.7433 13.0881Z" fill="#D4D4D4"/>
-<path d="M173.319 26.9878H172.559V8.20924C172.559 7.70495 172.76 7.22148 173.116 6.86489C173.473 6.5083 173.956 6.30771 174.461 6.30713H192.978V7.06798H174.461C174.158 7.06831 173.868 7.18865 173.654 7.40261C173.44 7.61657 173.32 7.90666 173.319 8.20924V26.9878Z" fill="#262626"/>
-<path d="M193.806 13.0881C197.42 13.0881 200.35 10.1582 200.35 6.54404C200.35 2.92987 197.42 0 193.806 0C190.192 0 187.262 2.92987 187.262 6.54404C187.262 10.1582 190.192 13.0881 193.806 13.0881Z" fill="#D4D4D4"/>
-</svg>
diff --git a/web/public/empty-state/issue-archive.svg b/web/public/empty-state/issue-archive.svg
deleted file mode 100644
index eee79ff3a1f..00000000000
--- a/web/public/empty-state/issue-archive.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.75 87.5C17.0833 87.5 15.625 86.875 14.375 85.625C13.125 84.375 12.5 82.9167 12.5 81.25V26.7708C12.5 25.7292 12.6042 24.8438 12.8125 24.1146C13.0208 23.3854 13.4028 22.7083 13.9583 22.0833L19.7917 14.1667C20.3472 13.5417 20.9896 13.1076 21.7188 12.8646C22.4479 12.6215 23.312 12.5 24.311 12.5H75.689C76.688 12.5 77.5347 12.6215 78.2292 12.8646C78.9236 13.1076 79.5486 13.5417 80.1042 14.1667L86.0417 22.0833C86.5972 22.7083 86.9792 23.3854 87.1875 24.1146C87.3958 24.8438 87.5 25.7292 87.5 26.7708V81.25C87.5 82.9167 86.875 84.375 85.625 85.625C84.375 86.875 82.9167 87.5 81.25 87.5H18.75ZM20.5208 23.5417H79.375L75.5824 18.75H24.2708L20.5208 23.5417ZM18.75 29.7917V81.25H81.25V29.7917H18.75ZM50 71.875L66.25 55.625L62.0833 51.4583L53.125 60.4167V39.4792H46.875V60.4167L37.9167 51.4583L33.75 55.625L50 71.875Z" fill="#ACB5BD"/>
-</svg>
diff --git a/web/public/empty-state/module-issues/gantt-dark-resp.webp b/web/public/empty-state/module-issues/gantt_chart-dark-resp.webp
similarity index 100%
rename from web/public/empty-state/module-issues/gantt-dark-resp.webp
rename to web/public/empty-state/module-issues/gantt_chart-dark-resp.webp
diff --git a/web/public/empty-state/module-issues/gantt-dark.webp b/web/public/empty-state/module-issues/gantt_chart-dark.webp
similarity index 100%
rename from web/public/empty-state/module-issues/gantt-dark.webp
rename to web/public/empty-state/module-issues/gantt_chart-dark.webp
diff --git a/web/public/empty-state/module-issues/gantt-light-resp.webp b/web/public/empty-state/module-issues/gantt_chart-light-resp.webp
similarity index 100%
rename from web/public/empty-state/module-issues/gantt-light-resp.webp
rename to web/public/empty-state/module-issues/gantt_chart-light-resp.webp
diff --git a/web/public/empty-state/module-issues/gantt-light.webp b/web/public/empty-state/module-issues/gantt_chart-light.webp
similarity index 100%
rename from web/public/empty-state/module-issues/gantt-light.webp
rename to web/public/empty-state/module-issues/gantt_chart-light.webp
diff --git a/web/public/empty-state/module/all-filters.svg b/web/public/empty-state/module/all-filters.svg
new file mode 100644
index 00000000000..6ba0731fe4d
--- /dev/null
+++ b/web/public/empty-state/module/all-filters.svg
@@ -0,0 +1,45 @@
+<svg width="205" height="217" viewBox="0 0 205 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="102.5" cy="102.5" r="102.5" fill="url(#paint0_linear_8097_110478)"/>
+<path d="M146.167 47.5H59.8333C53.0218 47.5 47.5 53.0218 47.5 59.8333V146.167C47.5 152.978 53.0218 158.5 59.8333 158.5H146.167C152.978 158.5 158.5 152.978 158.5 146.167V59.8333C158.5 53.0218 152.978 47.5 146.167 47.5Z" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M83.1297 72.167H73.5371C72.7802 72.167 72.1667 72.7805 72.1667 73.5374V83.13C72.1667 83.8868 72.7802 84.5003 73.5371 84.5003H83.1297C83.8865 84.5003 84.5 83.8868 84.5 83.13V73.5374C84.5 72.7805 83.8865 72.167 83.1297 72.167Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M83.1297 121.5H73.5371C72.7802 121.5 72.1667 122.114 72.1667 122.87V132.463C72.1667 133.22 72.7802 133.833 73.5371 133.833H83.1297C83.8865 133.833 84.5 133.22 84.5 132.463V122.87C84.5 122.114 83.8865 121.5 83.1297 121.5Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M132.463 72.167H122.87C122.114 72.167 121.5 72.7805 121.5 73.5374V83.13C121.5 83.8868 122.114 84.5003 122.87 84.5003H132.463C133.22 84.5003 133.833 83.8868 133.833 83.13V73.5374C133.833 72.7805 133.22 72.167 132.463 72.167Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M132.463 121.5H122.87C122.114 121.5 121.5 122.114 121.5 122.87V132.463C121.5 133.22 122.114 133.833 122.87 133.833H132.463C133.22 133.833 133.833 133.22 133.833 132.463V122.87C133.833 122.114 133.22 121.5 132.463 121.5Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_8097_110478)">
+<circle cx="103" cy="173.828" r="31" fill="#3A5BC7"/>
+<path d="M91.9961 166.5H114.496" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M96.9961 174H109.496" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.746 181.5H105.746" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_8097_110478" x="64" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_8097_110478"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8097_110478"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8097_110478"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_8097_110478" result="effect2_dropShadow_8097_110478"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_8097_110478"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_8097_110478" result="effect3_dropShadow_8097_110478"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_8097_110478" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8097_110478" x1="102.5" y1="0" x2="102.5" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/empty-state/module/name-filter.svg b/web/public/empty-state/module/name-filter.svg
new file mode 100644
index 00000000000..0d9655b66b1
--- /dev/null
+++ b/web/public/empty-state/module/name-filter.svg
@@ -0,0 +1,44 @@
+<svg width="206" height="217" viewBox="0 0 206 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="103" cy="102.5" r="102.5" fill="url(#paint0_linear_8097_112031)"/>
+<path d="M146.667 47.5H60.3333C53.5218 47.5 48 53.0218 48 59.8333V146.167C48 152.978 53.5218 158.5 60.3333 158.5H146.667C153.478 158.5 159 152.978 159 146.167V59.8333C159 53.0218 153.478 47.5 146.667 47.5Z" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M83.6297 72.167H74.0371C73.2803 72.167 72.6667 72.7805 72.6667 73.5374V83.13C72.6667 83.8868 73.2803 84.5003 74.0371 84.5003H83.6297C84.3865 84.5003 85.0001 83.8868 85.0001 83.13V73.5374C85.0001 72.7805 84.3865 72.167 83.6297 72.167Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M83.6297 121.5H74.0371C73.2803 121.5 72.6667 122.114 72.6667 122.87V132.463C72.6667 133.22 73.2803 133.833 74.0371 133.833H83.6297C84.3865 133.833 85.0001 133.22 85.0001 132.463V122.87C85.0001 122.114 84.3865 121.5 83.6297 121.5Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M132.963 72.167H123.37C122.614 72.167 122 72.7805 122 73.5374V83.13C122 83.8868 122.614 84.5003 123.37 84.5003H132.963C133.72 84.5003 134.333 83.8868 134.333 83.13V73.5374C134.333 72.7805 133.72 72.167 132.963 72.167Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M132.963 121.5H123.37C122.614 121.5 122 122.114 122 122.87V132.463C122 133.22 122.614 133.833 123.37 133.833H132.963C133.72 133.833 134.333 133.22 134.333 132.463V122.87C134.333 122.114 133.72 121.5 132.963 121.5Z" fill="#80838D" stroke="#80838D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_8097_112031)">
+<circle cx="103.5" cy="174" r="31" fill="#3A5BC7"/>
+<path d="M101.821 185.756C109.24 185.756 115.254 179.742 115.254 172.323C115.254 164.904 109.24 158.89 101.821 158.89C94.4015 158.89 88.3872 164.904 88.3872 172.323C88.3872 179.742 94.4015 185.756 101.821 185.756Z" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M118.612 189.114L111.392 181.894" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_8097_112031" x="64.5" y="138" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_8097_112031"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8097_112031"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8097_112031"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_8097_112031" result="effect2_dropShadow_8097_112031"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_8097_112031"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_8097_112031" result="effect3_dropShadow_8097_112031"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_8097_112031" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8097_112031" x1="103" y1="0" x2="103" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/empty-state/my-issues.svg b/web/public/empty-state/my-issues.svg
deleted file mode 100644
index 98a420d75a4..00000000000
--- a/web/public/empty-state/my-issues.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="97" height="110" viewBox="0 0 97 110" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M86.748 110H9.8374C7.22926 109.997 4.72879 108.96 2.88456 107.115C1.04033 105.271 0.00294615 102.771 0 100.163V9.8374C0.00294615 7.22926 1.04033 4.72879 2.88456 2.88456C4.72879 1.04033 7.22926 0.00294615 9.8374 0H81.3901L96.5854 12.1116V100.163C96.5824 102.771 95.545 105.271 93.7008 107.115C91.8566 108.96 89.3561 109.997 86.748 110Z" fill="#E5E5E5"/>
-<path d="M9.83745 2.83199C7.98014 2.83409 6.1995 3.57283 4.88618 4.88615C3.57287 6.19946 2.83412 7.9801 2.83203 9.83741V100.163C2.83412 102.02 3.57287 103.801 4.88618 105.114C6.1995 106.427 7.98014 107.166 9.83745 107.168H86.748C88.6053 107.166 90.386 106.427 91.6993 105.114C93.0126 103.801 93.7514 102.02 93.7534 100.163V13.4759L80.3996 2.83199H9.83745Z" fill="white"/>
-<path d="M71.7873 29.0961H36.771C36.5559 29.0961 36.3428 29.0538 36.1441 28.9714C35.9453 28.8891 35.7647 28.7685 35.6126 28.6163C35.4605 28.4642 35.3398 28.2836 35.2575 28.0849C35.1752 27.8861 35.1328 27.6731 35.1328 27.458C35.1328 27.2428 35.1752 27.0298 35.2575 26.8311C35.3398 26.6323 35.4605 26.4517 35.6126 26.2996C35.7647 26.1475 35.9453 26.0268 36.1441 25.9445C36.3428 25.8621 36.5559 25.8198 36.771 25.8198H71.7873C72.0024 25.8198 72.2155 25.8621 72.4142 25.9445C72.613 26.0268 72.7936 26.1475 72.9457 26.2996C73.0978 26.4517 73.2185 26.6323 73.3008 26.8311C73.3831 27.0298 73.4255 27.2428 73.4255 27.458C73.4255 27.6731 73.3831 27.8861 73.3008 28.0849C73.2185 28.2836 73.0978 28.4642 72.9457 28.6163C72.7936 28.7685 72.613 28.8891 72.4142 28.9714C72.2155 29.0538 72.0024 29.0961 71.7873 29.0961Z" fill="#D4D4D4"/>
-<path d="M78.5448 34.625H36.771C36.3365 34.625 35.9198 34.4524 35.6126 34.1452C35.3054 33.838 35.1328 33.4213 35.1328 32.9868C35.1328 32.5523 35.3054 32.1356 35.6126 31.8284C35.9198 31.5212 36.3365 31.3486 36.771 31.3486H78.5448C78.9793 31.3486 79.396 31.5212 79.7032 31.8284C80.0104 32.1356 80.183 32.5523 80.183 32.9868C80.183 33.4213 80.0104 33.838 79.7032 34.1452C79.396 34.4524 78.9793 34.625 78.5448 34.625Z" fill="#D4D4D4"/>
-<path d="M71.7873 53.8737H36.771C36.3365 53.8737 35.9198 53.7011 35.6126 53.3939C35.3054 53.0867 35.1328 52.67 35.1328 52.2355C35.1328 51.8011 35.3054 51.3844 35.6126 51.0772C35.9198 50.77 36.3365 50.5974 36.771 50.5974H71.7873C72.2218 50.5974 72.6385 50.77 72.9457 51.0772C73.2529 51.3844 73.4255 51.8011 73.4255 52.2355C73.4255 52.67 73.2529 53.0867 72.9457 53.3939C72.6385 53.7011 72.2218 53.8737 71.7873 53.8737Z" fill="#D4D4D4"/>
-<path d="M78.5448 59.4026H36.771C36.3365 59.4026 35.9198 59.23 35.6126 58.9228C35.3054 58.6156 35.1328 58.1989 35.1328 57.7644C35.1328 57.33 35.3054 56.9133 35.6126 56.6061C35.9198 56.2988 36.3365 56.1263 36.771 56.1263H78.5448C78.9793 56.1263 79.396 56.2988 79.7032 56.6061C80.0104 56.9133 80.183 57.33 80.183 57.7644C80.183 58.1989 80.0104 58.6156 79.7032 58.9228C79.396 59.23 78.9793 59.4026 78.5448 59.4026Z" fill="#D4D4D4"/>
-<path d="M71.7873 78.6514H36.771C36.3365 78.6514 35.9198 78.4788 35.6126 78.1716C35.3054 77.8643 35.1328 77.4477 35.1328 77.0132C35.1328 76.5787 35.3054 76.162 35.6126 75.8548C35.9198 75.5476 36.3365 75.375 36.771 75.375H71.7873C72.2218 75.375 72.6385 75.5476 72.9457 75.8548C73.2529 76.162 73.4255 76.5787 73.4255 77.0132C73.4255 77.4477 73.2529 77.8643 72.9457 78.1716C72.6385 78.4788 72.2218 78.6514 71.7873 78.6514Z" fill="#D4D4D4"/>
-<path d="M78.5448 84.1803H36.771C36.3365 84.1803 35.9198 84.0077 35.6126 83.7004C35.3054 83.3932 35.1328 82.9766 35.1328 82.5421C35.1328 82.1076 35.3054 81.6909 35.6126 81.3837C35.9198 81.0765 36.3365 80.9039 36.771 80.9039H78.5448C78.9793 80.9039 79.396 81.0765 79.7032 81.3837C80.0104 81.6909 80.183 82.1076 80.183 82.5421C80.183 82.9766 80.0104 83.3932 79.7032 83.7004C79.396 84.0077 78.9793 84.1803 78.5448 84.1803Z" fill="#D4D4D4"/>
-<path d="M22.1846 36.0125C25.3824 36.0125 27.9747 33.4202 27.9747 30.2224C27.9747 27.0246 25.3824 24.4323 22.1846 24.4323C18.9868 24.4323 16.3945 27.0246 16.3945 30.2224C16.3945 33.4202 18.9868 36.0125 22.1846 36.0125Z" fill="#3F76FF"/>
-<path d="M21.6211 32.4311C21.4909 32.4314 21.3641 32.3892 21.2598 32.3111L21.2534 32.3062L19.8926 31.2653C19.7655 31.1677 19.6823 31.0236 19.6614 30.8646C19.6405 30.7057 19.6835 30.545 19.781 30.4178C19.8786 30.2906 20.0226 30.2073 20.1815 30.1862C20.3404 30.1652 20.5012 30.2081 20.6285 30.3055L21.5098 30.9814L23.5926 28.2642C23.6409 28.2012 23.7011 28.1483 23.7698 28.1086C23.8386 28.0689 23.9145 28.0431 23.9932 28.0327C24.0718 28.0223 24.1518 28.0275 24.2285 28.048C24.3052 28.0685 24.3771 28.1039 24.4401 28.1522L24.4273 28.1703L24.4406 28.1524C24.5677 28.2501 24.6508 28.3942 24.6718 28.5531C24.6928 28.712 24.6498 28.8727 24.5524 29L22.1026 32.1946C22.046 32.2682 21.9731 32.3278 21.8897 32.3687C21.8063 32.4096 21.7145 32.4307 21.6216 32.4304L21.6211 32.4311Z" fill="white"/>
-<path d="M22.7823 60.7901C25.9801 60.7901 28.5724 58.1978 28.5724 55C28.5724 51.8022 25.9801 49.2099 22.7823 49.2099C19.5845 49.2099 16.9922 51.8022 16.9922 55C16.9922 58.1978 19.5845 60.7901 22.7823 60.7901Z" fill="#D4D4D4"/>
-<path d="M22.1846 85.5677C25.3824 85.5677 27.9747 82.9754 27.9747 79.7776C27.9747 76.5798 25.3824 73.9875 22.1846 73.9875C18.9868 73.9875 16.3945 76.5798 16.3945 79.7776C16.3945 82.9754 18.9868 85.5677 22.1846 85.5677Z" fill="#D4D4D4"/>
-<path d="M96.2887 12.5014H84.3857C83.5168 12.5014 82.6834 12.1562 82.069 11.5418C81.4546 10.9273 81.1094 10.094 81.1094 9.22501V0.433652C81.1094 0.395162 81.1202 0.357449 81.1407 0.324842C81.1611 0.292236 81.1904 0.266054 81.225 0.249298C81.2597 0.232542 81.2983 0.22589 81.3366 0.230107C81.3748 0.234324 81.4111 0.249237 81.4413 0.273137L96.4158 12.1361C96.4492 12.1625 96.4735 12.1986 96.4853 12.2394C96.4972 12.2803 96.4961 12.3238 96.4821 12.3639C96.4681 12.4041 96.442 12.4389 96.4073 12.4635C96.3727 12.4882 96.3312 12.5014 96.2887 12.5014Z" fill="#E5E5E5"/>
-</svg>
diff --git a/web/public/empty-state/page.svg b/web/public/empty-state/page.svg
deleted file mode 100644
index 2b0e88fcf31..00000000000
--- a/web/public/empty-state/page.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg width="145" height="140" viewBox="0 0 145 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M80.0936 50.2539H48.8101C48.1252 50.256 47.4489 50.1018 46.8326 49.8031C46.2163 49.5045 45.6762 49.0691 45.2535 48.5303C44.8231 47.9864 44.5225 47.3514 44.3745 46.6738C44.2265 45.9961 44.2352 45.2936 44.3997 44.6198C47.2829 32.5432 47.2828 19.9576 44.3995 7.88101C44.2351 7.20721 44.2266 6.50478 44.3745 5.82718C44.5225 5.14958 44.8231 4.51466 45.2534 3.97073C45.6761 3.43186 46.2162 2.99651 46.8325 2.69783C47.4489 2.39914 48.1252 2.24498 48.8101 2.24709H80.0936C81.1737 2.2502 82.2176 2.63659 83.0395 3.33747C83.8613 4.03834 84.4076 5.00817 84.5812 6.07424C86.6401 19.4463 86.6401 33.0547 84.5812 46.4268C84.4076 47.4928 83.8613 48.4627 83.0395 49.1636C82.2176 49.8644 81.1737 50.2508 80.0936 50.2539Z" fill="#E5E5E5"/>
-<path d="M48.8067 4.60109C48.4778 4.59998 48.153 4.67391 47.8569 4.81724C47.5609 4.96058 47.3015 5.16954 47.0984 5.42824C46.8892 5.69329 46.7433 6.00256 46.6716 6.33251C46.6 6.66246 46.6046 7.0044 46.685 7.33233C49.6545 19.7697 49.6545 32.7315 46.6852 45.1689C46.6047 45.4968 46.6001 45.8387 46.6717 46.1685C46.7432 46.4984 46.8891 46.8077 47.0983 47.0726C47.3013 47.3314 47.5609 47.5406 47.8569 47.684C48.1529 47.8273 48.4778 47.9013 48.8067 47.9002H80.0902C80.6089 47.9004 81.1108 47.7164 81.5066 47.3811C81.9023 47.0458 82.1663 46.5809 82.2513 46.0693C84.2736 32.9342 84.2736 19.567 82.2513 6.432C82.1663 5.92031 81.9023 5.45543 81.5066 5.12014C81.1108 4.78484 80.6089 4.60091 80.0902 4.60108L48.8067 4.60109Z" fill="white"/>
-<path d="M73.2662 15.9196H56.8499C56.2258 15.9189 55.6275 15.6707 55.1863 15.2295C54.745 14.7882 54.4968 14.1899 54.4961 13.5658V12.646C54.4968 12.022 54.745 11.4237 55.1863 10.9824C55.6275 10.5411 56.2258 10.2929 56.8499 10.2922H73.2662C73.8902 10.2929 74.4885 10.5411 74.9298 10.9824C75.371 11.4237 75.6193 12.022 75.6199 12.646V13.5659C75.6192 14.1899 75.371 14.7882 74.9298 15.2295C74.4885 15.6707 73.8902 15.9189 73.2662 15.9196Z" fill="#E5E5E5"/>
-<path d="M73.2662 27.5422H56.8499C56.2258 27.5415 55.6275 27.2933 55.1863 26.852C54.745 26.4107 54.4968 25.8124 54.4961 25.1884V24.2686C54.4968 23.6445 54.745 23.0462 55.1863 22.6049C55.6275 22.1637 56.2258 21.9155 56.8499 21.9148H73.2662C73.8902 21.9155 74.4885 22.1637 74.9298 22.6049C75.371 23.0462 75.6193 23.6445 75.6199 24.2686V25.1884C75.6193 25.8124 75.371 26.4107 74.9298 26.852C74.4885 27.2933 73.8902 27.5415 73.2662 27.5422Z" fill="#E5E5E5"/>
-<path d="M73.2662 39.1645H56.8499C56.2258 39.1638 55.6275 38.9156 55.1863 38.4743C54.745 38.0331 54.4968 37.4348 54.4961 36.8107V35.8909C54.4968 35.2668 54.745 34.6685 55.1863 34.2273C55.6275 33.786 56.2258 33.5378 56.8499 33.5371H73.2662C73.8902 33.5378 74.4885 33.786 74.9298 34.2273C75.371 34.6685 75.6193 35.2668 75.6199 35.8909V36.8107C75.6193 37.4347 75.371 38.0331 74.9298 38.4743C74.4885 38.9156 73.8902 39.1638 73.2662 39.1645Z" fill="#E5E5E5"/>
-<path d="M138.937 80.0698H107.654C106.969 80.0719 106.293 79.9177 105.676 79.6191C105.06 79.3204 104.52 78.8851 104.097 78.3462C103.667 77.8023 103.366 77.1673 103.218 76.4897C103.07 75.812 103.079 75.1096 103.243 74.4357C106.127 62.3592 106.127 49.7735 103.243 37.6969C103.079 37.0231 103.07 36.3207 103.218 35.6431C103.366 34.9655 103.667 34.3306 104.097 33.7867C104.52 33.2478 105.06 32.8124 105.676 32.5137C106.293 32.2151 106.969 32.0609 107.654 32.063H138.937C140.017 32.0661 141.061 32.4525 141.883 33.1534C142.705 33.8543 143.251 34.8241 143.425 35.8902C145.484 49.2622 145.484 62.8706 143.425 76.2427C143.251 77.3088 142.705 78.2786 141.883 78.9795C141.061 79.6803 140.017 80.0667 138.937 80.0698Z" fill="#E5E5E5"/>
-<path d="M107.65 34.4168C107.322 34.4157 106.997 34.4896 106.701 34.6329C106.405 34.7762 106.145 34.9852 105.942 35.2439C105.733 35.509 105.587 35.8182 105.515 36.1482C105.444 36.4781 105.448 36.8201 105.529 37.148C108.498 49.5854 108.498 62.5472 105.529 74.9846C105.448 75.3124 105.444 75.6543 105.515 75.9842C105.587 76.3141 105.733 76.6233 105.942 76.8883C106.145 77.1471 106.405 77.3563 106.701 77.4997C106.997 77.643 107.322 77.717 107.65 77.7159H138.934C139.453 77.716 139.955 77.5321 140.35 77.1968C140.746 76.8615 141.01 76.3966 141.095 75.8849C143.117 62.7499 143.117 49.3827 141.095 36.2477C141.01 35.736 140.746 35.2711 140.35 34.9358C139.955 34.6005 139.453 34.4166 138.934 34.4167L107.65 34.4168Z" fill="white"/>
-<path d="M76.5633 114.005H45.2798C44.5652 114.007 43.8596 113.846 43.2166 113.535C42.5736 113.223 42.0102 112.769 41.5692 112.207C41.1204 111.639 40.8069 110.977 40.6525 110.271C40.4982 109.564 40.5071 108.831 40.6786 108.129C43.5546 96.0824 43.5546 83.528 40.6784 71.4816C40.507 70.779 40.4982 70.0465 40.6525 69.3399C40.8068 68.6333 41.1203 67.9713 41.5691 67.4041C42.0101 66.8419 42.5736 66.3877 43.2166 66.0761C43.8596 65.7644 44.5652 65.6036 45.2798 65.6057H76.5633C77.6901 65.6091 78.7792 66.0124 79.6366 66.7437C80.4939 67.475 81.0638 68.4869 81.2448 69.5992C83.3067 82.991 83.3067 96.6196 81.2448 110.011C81.0638 111.124 80.4939 112.136 79.6366 112.867C78.7792 113.598 77.6901 114.002 76.5633 114.005Z" fill="#F5F5F5"/>
-<path d="M132.11 51.6198H115.694C115.07 51.6191 114.471 51.3709 114.03 50.9297C113.589 50.4884 113.341 49.8901 113.34 49.266V48.3462C113.341 47.7222 113.589 47.1239 114.03 46.6826C114.471 46.2413 115.07 45.9931 115.694 45.9924H132.11C132.734 45.9931 133.332 46.2413 133.774 46.6826C134.215 47.1239 134.463 47.7222 134.464 48.3462V49.2661C134.463 49.8901 134.215 50.4884 133.774 50.9297C133.332 51.3709 132.734 51.6191 132.11 51.6198Z" fill="#E5E5E5"/>
-<path d="M132.11 63.2424H115.694C115.07 63.2417 114.471 62.9935 114.03 62.5522C113.589 62.1109 113.341 61.5126 113.34 60.8886V59.9688C113.341 59.3447 113.589 58.7464 114.03 58.3051C114.471 57.8639 115.07 57.6157 115.694 57.615H132.11C132.734 57.6157 133.332 57.8639 133.774 58.3051C134.215 58.7464 134.463 59.3447 134.464 59.9688V60.8886C134.463 61.5126 134.215 62.1109 133.774 62.5522C133.332 62.9935 132.734 63.2417 132.11 63.2424Z" fill="#E5E5E5"/>
-<path d="M61.0036 98.6664C65.987 98.6664 70.0268 94.6266 70.0268 89.6433C70.0268 84.6599 65.987 80.6201 61.0036 80.6201C56.0203 80.6201 51.9805 84.6599 51.9805 89.6433C51.9805 94.6266 56.0203 98.6664 61.0036 98.6664Z" fill="white"/>
-<path d="M65.3195 88.4663H62.181V85.3278C62.181 85.0157 62.057 84.7163 61.8363 84.4956C61.6156 84.2749 61.3162 84.1509 61.0041 84.1509C60.6919 84.1509 60.3926 84.2749 60.1719 84.4956C59.9511 84.7163 59.8271 85.0157 59.8271 85.3278V88.4663H56.6887C56.3765 88.4663 56.0771 88.5903 55.8564 88.811C55.6357 89.0317 55.5117 89.3311 55.5117 89.6432C55.5117 89.9554 55.6357 90.2547 55.8564 90.4755C56.0771 90.6962 56.3765 90.8202 56.6887 90.8202H59.8271V93.9587C59.8271 94.2708 59.9511 94.5702 60.1719 94.7909C60.3926 95.0116 60.6919 95.1356 61.0041 95.1356C61.3162 95.1356 61.6156 95.0116 61.8363 94.7909C62.057 94.5702 62.181 94.2708 62.181 93.9587V90.8202H65.3195C65.6317 90.8202 65.931 90.6962 66.1517 90.4755C66.3725 90.2547 66.4964 89.9554 66.4964 89.6432C66.4964 89.3311 66.3725 89.0317 66.1517 88.811C65.931 88.5903 65.6317 88.4663 65.3195 88.4663Z" fill="#E5E5E5"/>
-<path d="M72.3792 6.6693H55.9021C55.4341 6.66877 54.9853 6.4826 54.6544 6.15164C54.3234 5.82068 54.1372 5.37195 54.1367 4.90389V1.7654C54.1372 1.29735 54.3234 0.848619 54.6544 0.517657C54.9853 0.186694 55.4341 0.000527486 55.9021 0H72.3792C72.8473 0.000527486 73.296 0.186694 73.6269 0.517657C73.9579 0.848619 74.1441 1.29735 74.1446 1.7654V4.90389C74.1441 5.37195 73.9579 5.82068 73.6269 6.15164C73.296 6.4826 72.8473 6.66877 72.3792 6.6693Z" fill="#CCCCCC"/>
-<path d="M132.02 36.8773H115.543C115.075 36.8768 114.626 36.6906 114.295 36.3596C113.964 36.0287 113.778 35.58 113.777 35.1119V31.9734C113.778 31.5054 113.964 31.0566 114.295 30.7257C114.626 30.3947 115.075 30.2085 115.543 30.208H132.02C132.488 30.2085 132.937 30.3947 133.268 30.7257C133.599 31.0566 133.785 31.5054 133.785 31.9734V35.1119C133.785 35.58 133.599 36.0287 133.268 36.3596C132.937 36.6906 132.488 36.8768 132.02 36.8773Z" fill="#CCCCCC"/>
-<path d="M31.6843 139.656L2.79513 127.653C2.16188 127.392 1.59648 126.99 1.14194 126.478C0.687406 125.965 0.35571 125.356 0.172095 124.696C-0.0166774 124.029 -0.0506717 123.327 0.0726878 122.645C0.196047 121.962 0.47351 121.317 0.883962 120.758C8.18011 110.712 13.009 99.0892 14.9799 86.8306C15.0866 86.1453 15.3482 85.4934 15.7449 84.9244C16.1415 84.3555 16.6627 83.8845 17.2688 83.5473C17.8659 83.2118 18.5317 83.017 19.2155 82.9777C19.8992 82.9383 20.5829 83.0555 21.2146 83.3202L50.1038 95.3232C51.1 95.7404 51.9158 96.4978 52.4058 97.4604C52.8958 98.4229 53.0283 99.5281 52.7796 100.579C49.5502 113.718 44.3289 126.285 37.2969 137.843C36.7276 138.761 35.8509 139.447 34.8231 139.779C33.7952 140.111 32.6829 140.067 31.6843 139.656Z" fill="#E5E5E5"/>
-<path d="M20.3118 85.494C20.0085 85.3668 19.6801 85.3104 19.3518 85.3292C19.0234 85.348 18.7036 85.4414 18.4168 85.6024C18.122 85.7669 17.8685 85.9965 17.6758 86.2737C17.483 86.551 17.3561 86.8685 17.3045 87.2022C15.2747 99.827 10.3015 111.797 2.78737 122.143C2.58727 122.415 2.45183 122.729 2.39136 123.061C2.33089 123.393 2.34699 123.735 2.43843 124.059C2.52665 124.376 2.68612 124.669 2.90448 124.915C3.12283 125.161 3.39442 125.354 3.69858 125.479L32.5878 137.482C33.0667 137.681 33.6008 137.704 34.0949 137.546C34.5891 137.388 35.0111 137.06 35.286 136.621C42.1932 125.267 47.322 112.923 50.4942 100.017C50.612 99.5118 50.5466 98.9812 50.3098 98.5198C50.073 98.0583 49.68 97.6958 49.2009 97.497L20.3118 85.494Z" fill="white"/>
-<path d="M35.6957 112.213L20.5358 105.915C19.9598 105.675 19.5025 105.216 19.2643 104.639C19.0261 104.062 19.0265 103.414 19.2653 102.838L19.6182 101.988C19.8583 101.412 20.317 100.955 20.8938 100.717C21.4707 100.479 22.1184 100.479 22.695 100.718L37.8548 107.017C38.4308 107.257 38.8881 107.715 39.1263 108.292C39.3645 108.869 39.3641 109.517 39.1253 110.093L38.7724 110.943C38.5323 111.519 38.0736 111.976 37.4968 112.214C36.92 112.452 36.2722 112.452 35.6957 112.213Z" fill="#3F76FF"/>
-<path d="M31.2387 122.946L16.0788 116.648C15.5027 116.408 15.0455 115.949 14.8073 115.372C14.5691 114.795 14.5695 114.148 14.8083 113.571L15.1612 112.722C15.4013 112.146 15.86 111.688 16.4368 111.45C17.0136 111.212 17.6614 111.212 18.2379 111.451L33.3978 117.75C33.9738 117.99 34.4311 118.449 34.6693 119.025C34.9075 119.602 34.9071 120.25 34.6683 120.826L34.3154 121.676C34.0753 122.252 33.6166 122.709 33.0398 122.947C32.463 123.186 31.8152 123.185 31.2387 122.946Z" fill="#3F76FF"/>
-<path d="M41.7713 97.1291C41.5444 97.1289 41.3196 97.0848 41.1094 96.9994L25.8336 90.8233C25.3998 90.6474 25.0536 90.3066 24.8708 89.8758C24.688 89.4449 24.6836 88.9591 24.8585 88.525L26.035 85.6153C26.2105 85.1812 26.5513 84.8347 26.9823 84.6519C27.4133 84.4691 27.8993 84.4649 28.3334 84.6404L43.6092 90.8164C44.0429 90.9924 44.3892 91.3331 44.5719 91.764C44.7547 92.1949 44.7592 92.6806 44.5843 93.1148L43.4078 96.0245C43.2756 96.3504 43.0494 96.6295 42.7579 96.8262C42.4664 97.023 42.123 97.1284 41.7713 97.1291Z" fill="#CCCCCC"/>
-</svg>
diff --git a/web/public/empty-state/project/all-filters.svg b/web/public/empty-state/project/all-filters.svg
new file mode 100644
index 00000000000..0280bcf2d5f
--- /dev/null
+++ b/web/public/empty-state/project/all-filters.svg
@@ -0,0 +1,42 @@
+<svg width="206" height="217" viewBox="0 0 206 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="103" cy="102.5" r="102.5" fill="url(#paint0_linear_8013_111910)"/>
+<path d="M153 64.75H53C46.0964 64.75 40.5 70.3464 40.5 77.25V139.75C40.5 146.654 46.0964 152.25 53 152.25H153C159.904 152.25 165.5 146.654 165.5 139.75V77.25C165.5 70.3464 159.904 64.75 153 64.75Z" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M128 152.25V52.25C128 48.9348 126.683 45.7554 124.339 43.4112C121.995 41.067 118.815 39.75 115.5 39.75H90.5C87.1848 39.75 84.0054 41.067 81.6612 43.4112C79.317 45.7554 78 48.9348 78 52.25V152.25" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_8013_111910)">
+<circle cx="104" cy="174" r="31" fill="#3A5BC7"/>
+<path d="M89 164H119" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M95.667 174H112.334" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.667 184H107.334" stroke="#F9F9FB" stroke-width="3.57143" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_8013_111910" x="65" y="138" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_8013_111910"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8013_111910"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8013_111910"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_8013_111910" result="effect2_dropShadow_8013_111910"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_8013_111910"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_8013_111910" result="effect3_dropShadow_8013_111910"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_8013_111910" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8013_111910" x1="103" y1="0" x2="103" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/empty-state/project/name-filter.svg b/web/public/empty-state/project/name-filter.svg
new file mode 100644
index 00000000000..a1e89c9a045
--- /dev/null
+++ b/web/public/empty-state/project/name-filter.svg
@@ -0,0 +1,41 @@
+<svg width="206" height="217" viewBox="0 0 206 217" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="103" cy="102.5" r="102.5" fill="url(#paint0_linear_8013_110289)"/>
+<path d="M153 64.75H53C46.0964 64.75 40.5 70.3464 40.5 77.25V139.75C40.5 146.654 46.0964 152.25 53 152.25H153C159.904 152.25 165.5 146.654 165.5 139.75V77.25C165.5 70.3464 159.904 64.75 153 64.75Z" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M128 152.25V52.25C128 48.9348 126.683 45.7554 124.339 43.4112C121.995 41.067 118.815 39.75 115.5 39.75H90.5C87.1848 39.75 84.0054 41.067 81.6612 43.4112C79.317 45.7554 78 48.9348 78 52.25V152.25" stroke="#B9BBC6" stroke-width="3.36" stroke-linecap="round" stroke-linejoin="round"/>
+<g filter="url(#filter0_ddd_8013_110289)">
+<circle cx="103.754" cy="173.828" r="31" fill="#3A5BC7"/>
+<path d="M102.074 185.584C109.493 185.584 115.508 179.57 115.508 172.151C115.508 164.732 109.493 158.717 102.074 158.717C94.6553 158.717 88.641 164.732 88.641 172.151C88.641 179.57 94.6553 185.584 102.074 185.584Z" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M118.866 188.942L111.646 181.722" stroke="white" stroke-width="2.52049" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_ddd_8013_110289" x="64.7539" y="137.828" width="78" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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"/>
+<feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_8013_110289"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0 0 0 0.051 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8013_110289"/>
+<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"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect2_dropShadow_8013_110289"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_8013_110289" result="effect2_dropShadow_8013_110289"/>
+<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"/>
+<feMorphology radius="8" operator="erode" in="SourceAlpha" result="effect3_dropShadow_8013_110289"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.078 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_8013_110289" result="effect3_dropShadow_8013_110289"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_8013_110289" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8013_110289" x1="103" y1="0" x2="103" y2="207.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F7F7F7"/>
+<stop offset="1" stop-color="#F8F9FA" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/public/empty-state/search/archive-dark.webp b/web/public/empty-state/search/archive-dark.webp
new file mode 100644
index 00000000000..d586be88862
Binary files /dev/null and b/web/public/empty-state/search/archive-dark.webp differ
diff --git a/web/public/empty-state/search/archive-light.webp b/web/public/empty-state/search/archive-light.webp
new file mode 100644
index 00000000000..5a79179e1c9
Binary files /dev/null and b/web/public/empty-state/search/archive-light.webp differ
diff --git a/web/public/empty-state/search/comments-dark.webp b/web/public/empty-state/search/comments-dark.webp
new file mode 100644
index 00000000000..d06ba7e4288
Binary files /dev/null and b/web/public/empty-state/search/comments-dark.webp differ
diff --git a/web/public/empty-state/search/comments-light.webp b/web/public/empty-state/search/comments-light.webp
new file mode 100644
index 00000000000..5a66067d6b3
Binary files /dev/null and b/web/public/empty-state/search/comments-light.webp differ
diff --git a/web/public/empty-state/search/issue-dark.webp b/web/public/empty-state/search/issue-dark.webp
new file mode 100644
index 00000000000..dcd00aa9479
Binary files /dev/null and b/web/public/empty-state/search/issue-dark.webp differ
diff --git a/web/public/empty-state/search/issues-light.webp b/web/public/empty-state/search/issues-light.webp
new file mode 100644
index 00000000000..7703fdede05
Binary files /dev/null and b/web/public/empty-state/search/issues-light.webp differ
diff --git a/web/public/empty-state/search/notification-dark.webp b/web/public/empty-state/search/notification-dark.webp
new file mode 100644
index 00000000000..cb299d11215
Binary files /dev/null and b/web/public/empty-state/search/notification-dark.webp differ
diff --git a/web/public/empty-state/search/notification-light.webp b/web/public/empty-state/search/notification-light.webp
new file mode 100644
index 00000000000..55c4ffac753
Binary files /dev/null and b/web/public/empty-state/search/notification-light.webp differ
diff --git a/web/public/empty-state/search/search-dark.webp b/web/public/empty-state/search/search-dark.webp
new file mode 100644
index 00000000000..92abc616ba7
Binary files /dev/null and b/web/public/empty-state/search/search-dark.webp differ
diff --git a/web/public/empty-state/search/search-light.webp b/web/public/empty-state/search/search-light.webp
new file mode 100644
index 00000000000..807ed26154c
Binary files /dev/null and b/web/public/empty-state/search/search-light.webp differ
diff --git a/web/public/empty-state/search/snooze-dark.webp b/web/public/empty-state/search/snooze-dark.webp
new file mode 100644
index 00000000000..296e797e82a
Binary files /dev/null and b/web/public/empty-state/search/snooze-dark.webp differ
diff --git a/web/public/empty-state/search/snooze-light.webp b/web/public/empty-state/search/snooze-light.webp
new file mode 100644
index 00000000000..897ff359887
Binary files /dev/null and b/web/public/empty-state/search/snooze-light.webp differ
diff --git a/web/public/onboarding/sign-in.webp b/web/public/onboarding/sign-in.webp
deleted file mode 100644
index 0c7fb571c55..00000000000
Binary files a/web/public/onboarding/sign-in.webp and /dev/null differ
diff --git a/web/public/theme-mode/custom-mode.svg b/web/public/theme-mode/custom-mode.svg
deleted file mode 100644
index 01be18d5b40..00000000000
--- a/web/public/theme-mode/custom-mode.svg
+++ /dev/null
@@ -1,54 +0,0 @@
-<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
deleted file mode 100644
index b7434cd764e..00000000000
--- a/web/public/theme-mode/custom-theme-banner.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<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
deleted file mode 100644
index e5839b28600..00000000000
--- a/web/public/theme-mode/dark-high-contrast.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<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
deleted file mode 100644
index b8c14711c17..00000000000
--- a/web/public/theme-mode/dark-mode.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<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
deleted file mode 100644
index c2f5ded22be..00000000000
--- a/web/public/theme-mode/light-high-contrast.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-<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
deleted file mode 100644
index 9c7fdae4b8d..00000000000
--- a/web/public/theme-mode/light-mode.svg
+++ /dev/null
@@ -1,42 +0,0 @@
-<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/web/public/web-view-spinner.png b/web/public/web-view-spinner.png
deleted file mode 100644
index 527f307c29f..00000000000
Binary files a/web/public/web-view-spinner.png and /dev/null differ
diff --git a/web/public/workspace/workspace-not-available.png b/web/public/workspace/workspace-not-available.png
new file mode 100644
index 00000000000..e95cdf02a7c
Binary files /dev/null and b/web/public/workspace/workspace-not-available.png differ
diff --git a/web/services/ai.service.ts b/web/services/ai.service.ts
index 11c489c1f30..9c754190758 100644
--- a/web/services/ai.service.ts
+++ b/web/services/ai.service.ts
@@ -1,8 +1,8 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { IGptResponse } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class AIService extends APIService {
   constructor() {
diff --git a/web/services/analytics.service.ts b/web/services/analytics.service.ts
index 5e3aac44b57..a89ff004df6 100644
--- a/web/services/analytics.service.ts
+++ b/web/services/analytics.service.ts
@@ -1,5 +1,6 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import {
   IAnalyticsParams,
@@ -9,7 +10,6 @@ import {
   ISaveAnalyticsFormData,
 } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class AnalyticsService extends APIService {
   constructor() {
diff --git a/web/services/api_token.service.ts b/web/services/api_token.service.ts
index 76a24798f36..37a18ed5557 100644
--- a/web/services/api_token.service.ts
+++ b/web/services/api_token.service.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from "helpers/common.helper";
-import { APIService } from "./api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
 import { IApiToken } from "@plane/types";
+import { APIService } from "./api.service";
 
 export class APITokenService extends APIService {
   constructor() {
diff --git a/web/services/app_config.service.ts b/web/services/app_config.service.ts
index 4b45e0cc467..f7dc76bfe2f 100644
--- a/web/services/app_config.service.ts
+++ b/web/services/app_config.service.ts
@@ -1,7 +1,7 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import { IAppConfig } from "@plane/types";
 
diff --git a/web/services/app_installation.service.ts b/web/services/app_installation.service.ts
index 17972103640..6c584feb660 100644
--- a/web/services/app_installation.service.ts
+++ b/web/services/app_installation.service.ts
@@ -1,7 +1,7 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class AppInstallationService extends APIService {
   constructor() {
diff --git a/web/services/auth.service.ts b/web/services/auth.service.ts
index f47a5282428..1572a544cb1 100644
--- a/web/services/auth.service.ts
+++ b/web/services/auth.service.ts
@@ -1,7 +1,7 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import {
   IEmailCheckData,
diff --git a/web/services/cycle.service.ts b/web/services/cycle.service.ts
index 5e13e3b8e5b..5a256614f16 100644
--- a/web/services/cycle.service.ts
+++ b/web/services/cycle.service.ts
@@ -1,9 +1,9 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import type { CycleDateCheckData, ICycle, TIssue } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class CycleService extends APIService {
   constructor() {
diff --git a/web/services/cycle_archive.service.ts b/web/services/cycle_archive.service.ts
new file mode 100644
index 00000000000..6ea3aeb40de
--- /dev/null
+++ b/web/services/cycle_archive.service.ts
@@ -0,0 +1,42 @@
+// type
+import { ICycle } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+
+export class CycleArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getArchivedCycles(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async archiveCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreCycle(workspaceSlug: string, projectId: string, cycleId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/dashboard.service.ts b/web/services/dashboard.service.ts
index e001f92a19a..d569df927af 100644
--- a/web/services/dashboard.service.ts
+++ b/web/services/dashboard.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import { THomeDashboardResponse, TWidget, TWidgetStatsResponse, TWidgetStatsRequestParams } from "@plane/types";
 
diff --git a/web/services/file.service.ts b/web/services/file.service.ts
index d5e80dd536b..a962af4cdd3 100644
--- a/web/services/file.service.ts
+++ b/web/services/file.service.ts
@@ -1,8 +1,8 @@
 // services
-import { APIService } from "services/api.service";
-// helpers
-import { API_BASE_URL } from "helpers/common.helper";
 import axios from "axios";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
+// helpers
 
 export interface UnSplashImage {
   id: string;
diff --git a/web/services/inbox.service.ts b/web/services/inbox.service.ts
index a36d356ce2f..b55c0287070 100644
--- a/web/services/inbox.service.ts
+++ b/web/services/inbox.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import type { IInboxIssue, IInbox, TInboxStatus, IInboxQueryParams } from "@plane/types";
 
diff --git a/web/services/inbox/inbox-issue.service.ts b/web/services/inbox/inbox-issue.service.ts
index 6b2099059fe..6bedf1256ff 100644
--- a/web/services/inbox/inbox-issue.service.ts
+++ b/web/services/inbox/inbox-issue.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import type { TInboxIssueFilterOptions, TInboxIssueExtendedDetail, TIssue, TInboxDetailedStatus } from "@plane/types";
 
diff --git a/web/services/inbox/inbox.service.ts b/web/services/inbox/inbox.service.ts
index 8ee6ee51456..b14fcae2130 100644
--- a/web/services/inbox/inbox.service.ts
+++ b/web/services/inbox/inbox.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import type { TInbox } from "@plane/types";
 
diff --git a/web/services/instance.service.ts b/web/services/instance.service.ts
index 1bc5ecdbcee..b1eeb8f62f6 100644
--- a/web/services/instance.service.ts
+++ b/web/services/instance.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import type { IFormattedInstanceConfiguration, IInstance, IInstanceAdmin, IInstanceConfiguration } from "@plane/types";
 
diff --git a/web/services/integrations/github.service.ts b/web/services/integrations/github.service.ts
index 6a05195652a..9f673c5c074 100644
--- a/web/services/integrations/github.service.ts
+++ b/web/services/integrations/github.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import { IGithubRepoInfo, IGithubServiceImportFormData } from "@plane/types";
 
diff --git a/web/services/integrations/integration.service.ts b/web/services/integrations/integration.service.ts
index 460dc17d926..66e4ae6ccb0 100644
--- a/web/services/integrations/integration.service.ts
+++ b/web/services/integrations/integration.service.ts
@@ -1,8 +1,8 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { IAppIntegration, IImporterService, IWorkspaceIntegration, IExportServiceResponse } from "@plane/types";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class IntegrationService extends APIService {
   constructor() {
diff --git a/web/services/integrations/jira.service.ts b/web/services/integrations/jira.service.ts
index 5641bb28b47..910d5f8b935 100644
--- a/web/services/integrations/jira.service.ts
+++ b/web/services/integrations/jira.service.ts
@@ -1,5 +1,5 @@
-import { APIService } from "services/api.service";
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { IJiraMetadata, IJiraResponse, IJiraImporterForm } from "@plane/types";
 
diff --git a/web/services/issue/issue.service.ts b/web/services/issue/issue.service.ts
index 316288278fb..d4a195d7662 100644
--- a/web/services/issue/issue.service.ts
+++ b/web/services/issue/issue.service.ts
@@ -1,9 +1,9 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // type
 import type { TIssue, IIssueDisplayProperties, TIssueLink, TIssueSubIssues, TIssueActivity } from "@plane/types";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class IssueService extends APIService {
   constructor() {
diff --git a/web/services/issue/issue_activity.service.ts b/web/services/issue/issue_activity.service.ts
index 87c7a8f5414..b2999237fc2 100644
--- a/web/services/issue/issue_activity.service.ts
+++ b/web/services/issue/issue_activity.service.ts
@@ -1,8 +1,8 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { TIssueActivity } from "@plane/types";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class IssueActivityService extends APIService {
   constructor() {
diff --git a/web/services/issue/issue_archive.service.ts b/web/services/issue/issue_archive.service.ts
index e2a5132a586..6a55c3d7d61 100644
--- a/web/services/issue/issue_archive.service.ts
+++ b/web/services/issue/issue_archive.service.ts
@@ -1,8 +1,8 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { TIssue } from "@plane/types";
 // constants
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class IssueArchiveService extends APIService {
   constructor() {
diff --git a/web/services/issue/issue_attachment.service.ts b/web/services/issue/issue_attachment.service.ts
index 16253218a58..d05270ff895 100644
--- a/web/services/issue/issue_attachment.service.ts
+++ b/web/services/issue/issue_attachment.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import { TIssueAttachment } from "@plane/types";
 
diff --git a/web/services/issue/issue_comment.service.ts b/web/services/issue/issue_comment.service.ts
index 8001d644a44..765a15fbb55 100644
--- a/web/services/issue/issue_comment.service.ts
+++ b/web/services/issue/issue_comment.service.ts
@@ -1,8 +1,8 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { TIssueComment } from "@plane/types";
 // helper
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class IssueCommentService extends APIService {
   constructor() {
diff --git a/web/services/issue/issue_draft.service.ts b/web/services/issue/issue_draft.service.ts
index a93bda776db..b34ccc847dd 100644
--- a/web/services/issue/issue_draft.service.ts
+++ b/web/services/issue/issue_draft.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 import { TIssue } from "@plane/types";
 
 export class IssueDraftService extends APIService {
diff --git a/web/services/issue/issue_label.service.ts b/web/services/issue/issue_label.service.ts
index 9d03caa524c..b20a02baec2 100644
--- a/web/services/issue/issue_label.service.ts
+++ b/web/services/issue/issue_label.service.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 // types
 import { IIssueLabel } from "@plane/types";
 
diff --git a/web/services/issue/issue_reaction.service.ts b/web/services/issue/issue_reaction.service.ts
index 9f91e48bed1..1ac1416ca04 100644
--- a/web/services/issue/issue_reaction.service.ts
+++ b/web/services/issue/issue_reaction.service.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 // types
 import type { TIssueCommentReaction, TIssueReaction } from "@plane/types";
 
diff --git a/web/services/issue/issue_relation.service.ts b/web/services/issue/issue_relation.service.ts
index ba9a64068ff..73f94a9fce4 100644
--- a/web/services/issue/issue_relation.service.ts
+++ b/web/services/issue/issue_relation.service.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 // types
 import type { TIssueRelation, TIssue, TIssueRelationTypes } from "@plane/types";
 
diff --git a/web/services/issue_filter.service.ts b/web/services/issue_filter.service.ts
index 5103a4bc8c6..5567c79ad57 100644
--- a/web/services/issue_filter.service.ts
+++ b/web/services/issue_filter.service.ts
@@ -1,8 +1,8 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import type { IIssueFiltersResponse } from "@plane/types";
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class IssueFiltersService extends APIService {
   constructor() {
diff --git a/web/services/module.service.ts b/web/services/module.service.ts
index 1efad8a2394..10c74fc8bc3 100644
--- a/web/services/module.service.ts
+++ b/web/services/module.service.ts
@@ -1,8 +1,8 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import type { IModule, TIssue, ILinkDetails, ModuleLink } from "@plane/types";
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class ModuleService extends APIService {
   constructor() {
diff --git a/web/services/module_archive.service.ts b/web/services/module_archive.service.ts
new file mode 100644
index 00000000000..3b8f0582771
--- /dev/null
+++ b/web/services/module_archive.service.ts
@@ -0,0 +1,42 @@
+// type
+import { IModule } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ModuleArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getArchivedModules(workspaceSlug: string, projectId: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async archiveModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreModule(workspaceSlug: string, projectId: string, moduleId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/notification.service.ts b/web/services/notification.service.ts
index db9c6d6d10d..b96d7f3e1b1 100644
--- a/web/services/notification.service.ts
+++ b/web/services/notification.service.ts
@@ -1,5 +1,6 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import type {
   IUserNotification,
@@ -9,7 +10,6 @@ import type {
   IMarkAllAsReadPayload,
 } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class NotificationService extends APIService {
   constructor() {
diff --git a/web/services/page.service.ts b/web/services/page.service.ts
index 3f0090b573e..461cdb62928 100644
--- a/web/services/page.service.ts
+++ b/web/services/page.service.ts
@@ -1,8 +1,9 @@
-import { API_BASE_URL } from "helpers/common.helper";
-// services
-import { APIService } from "services/api.service";
 // types
 import { IPage, IPageBlock, TIssue } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
 
 export class PageService extends APIService {
   constructor() {
diff --git a/web/services/project/index.ts b/web/services/project/index.ts
index 18cf1200aa3..d131ceb6b54 100644
--- a/web/services/project/index.ts
+++ b/web/services/project/index.ts
@@ -4,3 +4,4 @@ export * from "./project-export.service";
 export * from "./project-member.service";
 export * from "./project-state.service";
 export * from "./project-publish.service";
+export * from "./project-archive.service";
diff --git a/web/services/project/project-archive.service.ts b/web/services/project/project-archive.service.ts
new file mode 100644
index 00000000000..5fdca54b627
--- /dev/null
+++ b/web/services/project/project-archive.service.ts
@@ -0,0 +1,31 @@
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async archiveProject(
+    workspaceSlug: string,
+    projectId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreProject(workspaceSlug: string, projectId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/project-estimate.service.ts b/web/services/project/project-estimate.service.ts
index 6d276c7b96b..f15ae48374c 100644
--- a/web/services/project/project-estimate.service.ts
+++ b/web/services/project/project-estimate.service.ts
@@ -1,9 +1,9 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import type { IEstimate, IEstimateFormData, IEstimatePoint } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class ProjectEstimateService extends APIService {
   constructor() {
diff --git a/web/services/project/project-export.service.ts b/web/services/project/project-export.service.ts
index b5503a829f3..c94383d157e 100644
--- a/web/services/project/project-export.service.ts
+++ b/web/services/project/project-export.service.ts
@@ -1,6 +1,6 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class ProjectExportService extends APIService {
   constructor() {
diff --git a/web/services/project/project-member.service.ts b/web/services/project/project-member.service.ts
index 05345984e5b..43b19ae9922 100644
--- a/web/services/project/project-member.service.ts
+++ b/web/services/project/project-member.service.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 // types
 import type { IProjectBulkAddFormData, IProjectMember, IProjectMembership } from "@plane/types";
 
diff --git a/web/services/project/project-publish.service.ts b/web/services/project/project-publish.service.ts
index 1327453d22f..7ae3cdeca61 100644
--- a/web/services/project/project-publish.service.ts
+++ b/web/services/project/project-publish.service.ts
@@ -1,8 +1,8 @@
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 // types
-import { IProjectPublishSettings } from "store/project/project-publish.store";
+import { IProjectPublishSettings } from "@/store/project/project-publish.store";
 
 export class ProjectPublishService extends APIService {
   constructor() {
diff --git a/web/services/project/project-state.service.ts b/web/services/project/project-state.service.ts
index 9f846987ee7..0760ca23171 100644
--- a/web/services/project/project-state.service.ts
+++ b/web/services/project/project-state.service.ts
@@ -1,7 +1,7 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import type { IState } from "@plane/types";
 
diff --git a/web/services/project/project.service.ts b/web/services/project/project.service.ts
index 0a7c6e682b7..e8808a18c90 100644
--- a/web/services/project/project.service.ts
+++ b/web/services/project/project.service.ts
@@ -1,6 +1,6 @@
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 // types
 import type {
   GithubRepositoriesResponse,
diff --git a/web/services/user.service.ts b/web/services/user.service.ts
index 13ffa9c51ec..309c4106821 100644
--- a/web/services/user.service.ts
+++ b/web/services/user.service.ts
@@ -1,5 +1,6 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import type {
   TIssue,
@@ -9,11 +10,9 @@ import type {
   IUserProfileData,
   IUserProfileProjectSegregation,
   IUserSettings,
-  IUserWorkspaceDashboard,
   IUserEmailNotificationSettings,
 } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class UserService extends APIService {
   constructor() {
@@ -113,20 +112,8 @@ export class UserService extends APIService {
       });
   }
 
-  async getUserActivity(): Promise<IUserActivityResponse> {
-    return this.get(`/api/users/me/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,
-      },
-    })
+  async getUserActivity(params: { per_page: number; cursor?: string }): Promise<IUserActivityResponse> {
+    return this.get("/api/users/me/activities/", { params })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -160,8 +147,31 @@ export class UserService extends APIService {
       });
   }
 
-  async getUserProfileActivity(workspaceSlug: string, userId: string): Promise<IUserActivityResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/?per_page=15`)
+  async getUserProfileActivity(
+    workspaceSlug: string,
+    userId: string,
+    params: {
+      per_page: number;
+      cursor?: string;
+    }
+  ): Promise<IUserActivityResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async downloadProfileActivity(
+    workspaceSlug: string,
+    userId: string,
+    data: {
+      date: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/export/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
diff --git a/web/services/view.service.ts b/web/services/view.service.ts
index 95ae7dd0662..bf9b0816bd3 100644
--- a/web/services/view.service.ts
+++ b/web/services/view.service.ts
@@ -1,8 +1,8 @@
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // types
 import { IProjectView } from "@plane/types";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 
 export class ViewService extends APIService {
   constructor() {
diff --git a/web/services/webhook.service.ts b/web/services/webhook.service.ts
index abfe7c46d81..1c9110457c3 100644
--- a/web/services/webhook.service.ts
+++ b/web/services/webhook.service.ts
@@ -1,7 +1,7 @@
 // api services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import { IWebhook } from "@plane/types";
 
diff --git a/web/services/workspace.service.ts b/web/services/workspace.service.ts
index 2515853f590..dd22df41e25 100644
--- a/web/services/workspace.service.ts
+++ b/web/services/workspace.service.ts
@@ -1,7 +1,7 @@
 // services
-import { APIService } from "services/api.service";
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { APIService } from "@/services/api.service";
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import {
   IWorkspace,
diff --git a/web/store/application/app-config.store.ts b/web/store/application/app-config.store.ts
index 6faef8b697f..b764229d32d 100644
--- a/web/store/application/app-config.store.ts
+++ b/web/store/application/app-config.store.ts
@@ -1,8 +1,8 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // types
+import { AppConfigService } from "@/services/app_config.service";
 import { IAppConfig } from "@plane/types";
 // services
-import { AppConfigService } from "services/app_config.service";
 
 export interface IAppConfigStore {
   // observables
diff --git a/web/store/application/command-palette.store.ts b/web/store/application/command-palette.store.ts
index 22b395e3468..6a39c4334a0 100644
--- a/web/store/application/command-palette.store.ts
+++ b/web/store/application/command-palette.store.ts
@@ -1,8 +1,8 @@
 import { observable, action, makeObservable, computed } from "mobx";
 // services
-import { ProjectService } from "services/project";
-import { PageService } from "services/page.service";
-import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
+import { EIssuesStoreType, TCreateModalStoreTypes } from "@/constants/issue";
+import { PageService } from "@/services/page.service";
+import { ProjectService } from "@/services/project";
 
 export interface ModalData {
   store: EIssuesStoreType;
diff --git a/web/store/application/index.ts b/web/store/application/index.ts
index 30333535a42..6b49802420a 100644
--- a/web/store/application/index.ts
+++ b/web/store/application/index.ts
@@ -1,7 +1,7 @@
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
+import { EventTrackerStore, IEventTrackerStore } from "../event-tracker.store";
 import { AppConfigStore, IAppConfigStore } from "./app-config.store";
 import { CommandPaletteStore, ICommandPaletteStore } from "./command-palette.store";
-import { EventTrackerStore, IEventTrackerStore } from "../event-tracker.store";
 // import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
 import { InstanceStore, IInstanceStore } from "./instance.store";
 import { RouterStore, IRouterStore } from "./router.store";
diff --git a/web/store/application/instance.store.ts b/web/store/application/instance.store.ts
index 7c486ef8bfb..33f1f64b826 100644
--- a/web/store/application/instance.store.ts
+++ b/web/store/application/instance.store.ts
@@ -1,8 +1,8 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // types
+import { InstanceService } from "@/services/instance.service";
 import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration, IInstanceAdmin } from "@plane/types";
 // services
-import { InstanceService } from "services/instance.service";
 
 export interface IInstanceStore {
   // issues
diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
index 0f40e86ae3a..da499a63c81 100644
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@@ -1,7 +1,7 @@
 // mobx
 import { action, observable, makeObservable } from "mobx";
 // helper
-import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
+import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
 
 export interface IThemeStore {
   // observables
diff --git a/web/store/cycle.store.ts b/web/store/cycle.store.ts
index ee4842539b9..ac90f9e5eed 100644
--- a/web/store/cycle.store.ts
+++ b/web/store/cycle.store.ts
@@ -1,19 +1,23 @@
-import { action, computed, observable, makeObservable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import { isFuture, isPast, isToday } from "date-fns";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // types
 import { ICycle, CycleDateCheckData } from "@plane/types";
-// mobx
-import { RootStore } from "store/root.store";
+// helpers
+import { orderCycles, shouldFilterCycle } from "@/helpers/cycle.helper";
+import { getDate } from "@/helpers/date-time.helper";
 // services
-import { ProjectService } from "services/project";
-import { IssueService } from "services/issue";
-import { CycleService } from "services/cycle.service";
+import { CycleService } from "@/services/cycle.service";
+import { CycleArchiveService } from "@/services/cycle_archive.service";
+import { IssueService } from "@/services/issue";
+import { ProjectService } from "@/services/project";
+// store
+import { RootStore } from "@/store/root.store";
 
 export interface ICycleStore {
-  //Loaders
+  // loaders
   loader: boolean;
   // observables
   fetchedMap: Record<string, boolean>;
@@ -26,7 +30,11 @@ export interface ICycleStore {
   currentProjectIncompleteCycleIds: string[] | null;
   currentProjectDraftCycleIds: string[] | null;
   currentProjectActiveCycleId: string | null;
+  currentProjectArchivedCycleIds: string[] | null;
   // computed actions
+  getFilteredCycleIds: (projectId: string) => string[] | null;
+  getFilteredCompletedCycleIds: (projectId: string) => string[] | null;
+  getFilteredArchivedCycleIds: (projectId: string) => string[] | null;
   getCycleById: (cycleId: string) => ICycle | null;
   getCycleNameById: (cycleId: string) => string | undefined;
   getActiveCycleById: (cycleId: string) => ICycle | null;
@@ -37,6 +45,7 @@ export interface ICycleStore {
   fetchWorkspaceCycles: (workspaceSlug: string) => Promise<ICycle[]>;
   fetchAllCycles: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
   fetchActiveCycle: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
+  fetchArchivedCycles: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
   fetchCycleDetails: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
   // crud
   createCycle: (workspaceSlug: string, projectId: string, data: Partial<ICycle>) => Promise<ICycle>;
@@ -50,6 +59,9 @@ export interface ICycleStore {
   // favorites
   addCycleToFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
   removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  // archive
+  archiveCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  restoreCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
 }
 
 export class CycleStore implements ICycleStore {
@@ -65,6 +77,7 @@ export class CycleStore implements ICycleStore {
   projectService;
   issueService;
   cycleService;
+  cycleArchiveService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
@@ -80,22 +93,29 @@ export class CycleStore implements ICycleStore {
       currentProjectIncompleteCycleIds: computed,
       currentProjectDraftCycleIds: computed,
       currentProjectActiveCycleId: computed,
+      currentProjectArchivedCycleIds: computed,
       // actions
       fetchWorkspaceCycles: action,
       fetchAllCycles: action,
       fetchActiveCycle: action,
+      fetchArchivedCycles: action,
       fetchCycleDetails: action,
       createCycle: action,
       updateCycleDetails: action,
       deleteCycle: action,
       addCycleToFavorites: action,
       removeCycleFromFavorites: action,
+      archiveCycle: action,
+      restoreCycle: action,
     });
 
     this.rootStore = _rootStore;
+
+    // services
     this.projectService = new ProjectService();
     this.issueService = new IssueService();
     this.cycleService = new CycleService();
+    this.cycleArchiveService = new CycleArchiveService();
   }
 
   // computed
@@ -105,7 +125,7 @@ export class CycleStore implements ICycleStore {
   get currentProjectCycleIds() {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
-    let allCycles = Object.values(this.cycleMap ?? {}).filter((c) => c?.project_id === projectId);
+    let allCycles = Object.values(this.cycleMap ?? {}).filter((c) => c?.project_id === projectId && !c?.archived_at);
     allCycles = sortBy(allCycles, [(c) => c.sort_order]);
     const allCycleIds = allCycles.map((c) => c.id);
     return allCycleIds;
@@ -118,9 +138,10 @@ export class CycleStore implements ICycleStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let completedCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
-      const hasEndDatePassed = isPast(new Date(c.end_date ?? ""));
-      const isEndDateToday = isToday(new Date(c.end_date ?? ""));
-      return c.project_id === projectId && hasEndDatePassed && !isEndDateToday;
+      const endDate = getDate(c.end_date);
+      const hasEndDatePassed = endDate && isPast(endDate);
+      const isEndDateToday = endDate && isToday(endDate);
+      return c.project_id === projectId && hasEndDatePassed && !isEndDateToday && !c?.archived_at;
     });
     completedCycles = sortBy(completedCycles, [(c) => c.sort_order]);
     const completedCycleIds = completedCycles.map((c) => c.id);
@@ -134,8 +155,9 @@ export class CycleStore implements ICycleStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let upcomingCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
-      const isStartDateUpcoming = isFuture(new Date(c.start_date ?? ""));
-      return c.project_id === projectId && isStartDateUpcoming;
+      const startDate = getDate(c.start_date);
+      const isStartDateUpcoming = startDate && isFuture(startDate);
+      return c.project_id === projectId && isStartDateUpcoming && !c?.archived_at;
     });
     upcomingCycles = sortBy(upcomingCycles, [(c) => c.sort_order]);
     const upcomingCycleIds = upcomingCycles.map((c) => c.id);
@@ -149,8 +171,9 @@ export class CycleStore implements ICycleStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let incompleteCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
-      const hasEndDatePassed = isPast(new Date(c.end_date ?? ""));
-      return c.project_id === projectId && !hasEndDatePassed;
+      const endDate = getDate(c.end_date);
+      const hasEndDatePassed = endDate && isPast(endDate);
+      return c.project_id === projectId && !hasEndDatePassed && !c?.archived_at;
     });
     incompleteCycles = sortBy(incompleteCycles, [(c) => c.sort_order]);
     const incompleteCycleIds = incompleteCycles.map((c) => c.id);
@@ -164,7 +187,7 @@ export class CycleStore implements ICycleStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let draftCycles = Object.values(this.cycleMap ?? {}).filter(
-      (c) => c.project_id === projectId && !c.start_date && !c.end_date
+      (c) => c.project_id === projectId && !c.start_date && !c.end_date && !c?.archived_at
     );
     draftCycles = sortBy(draftCycles, [(c) => c.sort_order]);
     const draftCycleIds = draftCycles.map((c) => c.id);
@@ -183,6 +206,86 @@ export class CycleStore implements ICycleStore {
     return activeCycle || null;
   }
 
+  /**
+   * returns all archived cycle ids for a project
+   */
+  get currentProjectArchivedCycleIds() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let archivedCycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) => c.project_id === projectId && !!c.archived_at
+    );
+    archivedCycles = sortBy(archivedCycles, [(c) => c.sort_order]);
+    const archivedCycleIds = archivedCycles.map((c) => c.id);
+    return archivedCycleIds;
+  }
+
+  /**
+   * @description returns filtered cycle ids based on display filters and filters
+   * @param {TCycleDisplayFilters} displayFilters
+   * @param {TCycleFilters} filters
+   * @returns {string[] | null}
+   */
+  getFilteredCycleIds = computedFn((projectId: string) => {
+    const filters = this.rootStore.cycleFilter.getFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.cycleFilter.searchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let cycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) =>
+        c.project_id === projectId &&
+        !c.archived_at &&
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterCycle(c, filters ?? {})
+    );
+    cycles = orderCycles(cycles);
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds;
+  });
+
+  /**
+   * @description returns filtered cycle ids based on display filters and filters
+   * @param {TCycleDisplayFilters} displayFilters
+   * @param {TCycleFilters} filters
+   * @returns {string[] | null}
+   */
+  getFilteredCompletedCycleIds = computedFn((projectId: string) => {
+    const filters = this.rootStore.cycleFilter.getFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.cycleFilter.searchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let cycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) =>
+        c.project_id === projectId &&
+        !c.archived_at &&
+        c.status.toLowerCase() === "completed" &&
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterCycle(c, filters ?? {})
+    );
+    cycles = sortBy(cycles, [(c) => !c.start_date]);
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds;
+  });
+
+  /**
+   * @description returns filtered archived cycle ids based on display filters and filters
+   * @param {string} projectId
+   * @returns {string[] | null}
+   */
+  getFilteredArchivedCycleIds = computedFn((projectId: string) => {
+    const filters = this.rootStore.cycleFilter.getArchivedFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.cycleFilter.archivedCyclesSearchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let cycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) =>
+        c.project_id === projectId &&
+        !!c.archived_at &&
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterCycle(c, filters ?? {})
+    );
+    cycles = sortBy(cycles, [(c) => !c.start_date]);
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds;
+  });
+
   /**
    * @description returns cycle details by cycle id
    * @param cycleId
@@ -213,7 +316,7 @@ export class CycleStore implements ICycleStore {
   getProjectCycleIds = computedFn((projectId: string): string[] | null => {
     if (!this.fetchedMap[projectId]) return null;
 
-    let cycles = Object.values(this.cycleMap ?? {}).filter((c) => c.project_id === projectId);
+    let cycles = Object.values(this.cycleMap ?? {}).filter((c) => c.project_id === projectId && !c?.archived_at);
     cycles = sortBy(cycles, [(c) => c.sort_order]);
     const cycleIds = cycles.map((c) => c.id);
     return cycleIds || null;
@@ -270,6 +373,31 @@ export class CycleStore implements ICycleStore {
     }
   };
 
+  /**
+   * @description fetches archived cycles for a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchArchivedCycles = async (workspaceSlug: string, projectId: string) => {
+    this.loader = true;
+    return await this.cycleArchiveService
+      .getArchivedCycles(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          response.forEach((cycle) => {
+            set(this.cycleMap, [cycle.id], cycle);
+          });
+          this.loader = false;
+        });
+        return response;
+      })
+      .catch(() => {
+        this.loader = false;
+        return undefined;
+      });
+  };
+
   /**
    * @description fetches active cycle for a project
    * @param workspaceSlug
@@ -401,4 +529,48 @@ export class CycleStore implements ICycleStore {
       throw error;
     }
   };
+
+  /**
+   * @description archives a cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  archiveCycle = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const cycleDetails = this.getCycleById(cycleId);
+    if (cycleDetails?.archived_at) return;
+    await this.cycleArchiveService
+      .archiveCycle(workspaceSlug, projectId, cycleId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.cycleMap, [cycleId, "archived_at"], response.archived_at);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to archive cycle in cycle store", error);
+      });
+  };
+
+  /**
+   * @description restores a cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  restoreCycle = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const cycleDetails = this.getCycleById(cycleId);
+    if (!cycleDetails?.archived_at) return;
+    await this.cycleArchiveService
+      .restoreCycle(workspaceSlug, projectId, cycleId)
+      .then(() => {
+        runInAction(() => {
+          set(this.cycleMap, [cycleId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to restore cycle in cycle store", error);
+      });
+  };
 }
diff --git a/web/store/cycle_filter.store.ts b/web/store/cycle_filter.store.ts
new file mode 100644
index 00000000000..182ab0251dd
--- /dev/null
+++ b/web/store/cycle_filter.store.ts
@@ -0,0 +1,180 @@
+import set from "lodash/set";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import { TCycleDisplayFilters, TCycleFilters, TCycleFiltersByState } from "@plane/types";
+// store
+import { RootStore } from "@/store/root.store";
+
+export interface ICycleFilterStore {
+  // observables
+  displayFilters: Record<string, TCycleDisplayFilters>;
+  filters: Record<string, TCycleFiltersByState>;
+  searchQuery: string;
+  archivedCyclesSearchQuery: string;
+  // computed
+  currentProjectDisplayFilters: TCycleDisplayFilters | undefined;
+  currentProjectFilters: TCycleFilters | undefined;
+  currentProjectArchivedFilters: TCycleFilters | undefined;
+  // computed functions
+  getDisplayFiltersByProjectId: (projectId: string) => TCycleDisplayFilters | undefined;
+  getFiltersByProjectId: (projectId: string) => TCycleFilters | undefined;
+  getArchivedFiltersByProjectId: (projectId: string) => TCycleFilters | undefined;
+  // actions
+  updateDisplayFilters: (projectId: string, displayFilters: TCycleDisplayFilters) => void;
+  updateFilters: (projectId: string, filters: TCycleFilters, state?: keyof TCycleFiltersByState) => void;
+  updateSearchQuery: (query: string) => void;
+  updateArchivedCyclesSearchQuery: (query: string) => void;
+  clearAllFilters: (projectId: string, state?: keyof TCycleFiltersByState) => void;
+}
+
+export class CycleFilterStore implements ICycleFilterStore {
+  // observables
+  displayFilters: Record<string, TCycleDisplayFilters> = {};
+  filters: Record<string, TCycleFiltersByState> = {};
+  searchQuery: string = "";
+  archivedCyclesSearchQuery: string = "";
+  // root store
+  rootStore: RootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      archivedCyclesSearchQuery: observable.ref,
+      // computed
+      currentProjectDisplayFilters: computed,
+      currentProjectFilters: computed,
+      currentProjectArchivedFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      updateArchivedCyclesSearchQuery: action,
+      clearAllFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // initialize display filters of the current project
+    reaction(
+      () => this.rootStore.app.router.projectId,
+      (projectId) => {
+        if (!projectId) return;
+        this.initProjectCycleFilters(projectId);
+      }
+    );
+  }
+
+  /**
+   * @description get display filters of the current project
+   */
+  get currentProjectDisplayFilters() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId) return;
+    return this.displayFilters[projectId];
+  }
+
+  /**
+   * @description get filters of the current project
+   */
+  get currentProjectFilters() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId]?.default ?? {};
+  }
+
+  /**
+   * @description get archived filters of the current project
+   */
+  get currentProjectArchivedFilters() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId].archived;
+  }
+
+  /**
+   * @description get display filters of a project by projectId
+   * @param {string} projectId
+   */
+  getDisplayFiltersByProjectId = computedFn((projectId: string) => this.displayFilters[projectId]);
+
+  /**
+   * @description get filters of a project by projectId
+   * @param {string} projectId
+   */
+  getFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId]?.default ?? {});
+
+  /**
+   * @description get archived filters of a project by projectId
+   * @param {string} projectId
+   */
+  getArchivedFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId].archived);
+
+  /**
+   * @description initialize display filters and filters of a project
+   * @param {string} projectId
+   */
+  initProjectCycleFilters = (projectId: string) => {
+    const displayFilters = this.getDisplayFiltersByProjectId(projectId);
+    runInAction(() => {
+      this.displayFilters[projectId] = {
+        active_tab: displayFilters?.active_tab || "active",
+        layout: displayFilters?.layout || "list",
+      };
+      this.filters[projectId] = this.filters[projectId] ?? {
+        default: {},
+        archived: {},
+      };
+    });
+  };
+
+  /**
+   * @description update display filters of a project
+   * @param {string} projectId
+   * @param {TCycleDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (projectId: string, displayFilters: TCycleDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [projectId, key], displayFilters[key as keyof TCycleDisplayFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update filters of a project
+   * @param {string} projectId
+   * @param {TCycleFilters} filters
+   */
+  updateFilters = (projectId: string, filters: TCycleFilters, state: keyof TCycleFiltersByState = "default") => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [projectId, state, key], filters[key as keyof TCycleFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
+  /**
+   * @description update archived search query
+   * @param {string} query
+   */
+  updateArchivedCyclesSearchQuery = (query: string) => (this.archivedCyclesSearchQuery = query);
+
+  /**
+   * @description clear all filters of a project
+   * @param {string} projectId
+   */
+  clearAllFilters = (projectId: string, state: keyof TCycleFiltersByState = "default") => {
+    runInAction(() => {
+      this.filters[projectId][state] = {};
+    });
+  };
+}
diff --git a/web/store/dashboard.store.ts b/web/store/dashboard.store.ts
index ad0960c7bb6..94c9f32cfa6 100644
--- a/web/store/dashboard.store.ts
+++ b/web/store/dashboard.store.ts
@@ -1,10 +1,10 @@
+import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-import set from "lodash/set";
 // services
-import { DashboardService } from "services/dashboard.service";
+import { DashboardService } from "@/services/dashboard.service";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import {
   THomeDashboardResponse,
   TWidget,
@@ -15,6 +15,8 @@ import {
 } from "@plane/types";
 
 export interface IDashboardStore {
+  // error states
+  widgetStatsError: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, any | null>> };
   // observables
   homeDashboardId: string | null;
   widgetDetails: { [workspaceSlug: string]: Record<string, TWidget[]> };
@@ -36,6 +38,7 @@ export interface IDashboardStore {
   // computed actions
   getWidgetDetails: (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => TWidget | undefined;
   getWidgetStats: <T>(workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => T | undefined;
+  getWidgetStatsError: (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => any | null;
   // actions
   fetchHomeDashboardWidgets: (workspaceSlug: string) => Promise<THomeDashboardResponse>;
   fetchWidgetStats: (
@@ -58,6 +61,8 @@ export interface IDashboardStore {
 }
 
 export class DashboardStore implements IDashboardStore {
+  // error states
+  widgetStatsError: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, any>> } = {};
   // observables
   homeDashboardId: string | null = null;
   widgetDetails: { [workspaceSlug: string]: Record<string, TWidget[]> } = {};
@@ -70,6 +75,8 @@ export class DashboardStore implements IDashboardStore {
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
+      // error states
+      widgetStatsError: observable,
       // observables
       homeDashboardId: observable.ref,
       widgetDetails: observable,
@@ -93,7 +100,7 @@ export class DashboardStore implements IDashboardStore {
 
   /**
    * @description get home dashboard widgets
-   * @returns home dashboard widgets
+   * @returns {TWidget[] | undefined}
    */
   get homeDashboardWidgets() {
     const workspaceSlug = this.routerStore.workspaceSlug;
@@ -104,10 +111,10 @@ export class DashboardStore implements IDashboardStore {
 
   /**
    * @description get widget details
-   * @param workspaceSlug
-   * @param dashboardId
-   * @param widgetId
-   * @returns widget details
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetKeys} widgetKey
+   * @returns {TWidget | undefined}
    */
   getWidgetDetails = computedFn((workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => {
     const widgets = this.widgetDetails?.[workspaceSlug]?.[dashboardId];
@@ -117,20 +124,30 @@ export class DashboardStore implements IDashboardStore {
 
   /**
    * @description get widget stats
-   * @param workspaceSlug
-   * @param dashboardId
-   * @param widgetKey
-   * @returns widget stats
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetKeys} widgetKey
+   * @returns {T | undefined}
    */
   getWidgetStats = <T>(workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys): T | undefined =>
     (this.widgetStats?.[workspaceSlug]?.[dashboardId]?.[widgetKey] as unknown as T) ?? undefined;
 
+  /**
+   * @description get widget stats error
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetKeys} widgetKey
+   * @returns {any | null}
+   */
+  getWidgetStatsError = (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) =>
+    this.widgetStatsError?.[workspaceSlug]?.[dashboardId]?.[widgetKey] ?? null;
+
   /**
    * @description fetch home dashboard details and widgets
-   * @param workspaceSlug
-   * @returns home dashboard response
+   * @param {string} workspaceSlug
+   * @returns {Promise<THomeDashboardResponse>}
    */
-  fetchHomeDashboardWidgets = async (workspaceSlug: string) => {
+  fetchHomeDashboardWidgets = async (workspaceSlug: string): Promise<THomeDashboardResponse> => {
     try {
       const response = await this.dashboardService.getHomeDashboardWidgets(workspaceSlug);
 
@@ -151,27 +168,36 @@ export class DashboardStore implements IDashboardStore {
 
   /**
    * @description fetch widget stats
-   * @param workspaceSlug
-   * @param dashboardId
-   * @param widgetKey
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetStatsRequestParams} widgetKey
    * @returns widget stats
    */
   fetchWidgetStats = async (workspaceSlug: string, dashboardId: string, params: TWidgetStatsRequestParams) =>
-    this.dashboardService.getWidgetStats(workspaceSlug, dashboardId, params).then((res) => {
-      runInAction(() => {
-        // @ts-ignore
-        if (res.issues) this.issueStore.addIssue(res.issues);
-        set(this.widgetStats, [workspaceSlug, dashboardId, params.widget_key], res);
-      });
+    this.dashboardService
+      .getWidgetStats(workspaceSlug, dashboardId, params)
+      .then((res) => {
+        runInAction(() => {
+          // @ts-ignore
+          if (res.issues) this.issueStore.addIssue(res.issues);
+          set(this.widgetStats, [workspaceSlug, dashboardId, params.widget_key], res);
+          set(this.widgetStatsError, [workspaceSlug, dashboardId, params.widget_key], null);
+        });
+        return res;
+      })
+      .catch((error) => {
+        runInAction(() => {
+          set(this.widgetStatsError, [workspaceSlug, dashboardId, params.widget_key], error);
+        });
 
-      return res;
-    });
+        throw error;
+      });
 
   /**
    * @description update dashboard widget
-   * @param dashboardId
-   * @param widgetId
-   * @param data
+   * @param {string} dashboardId
+   * @param {string} widgetId
+   * @param {Partial<TWidget>} data
    * @returns updated widget
    */
   updateDashboardWidget = async (
@@ -209,9 +235,9 @@ export class DashboardStore implements IDashboardStore {
 
   /**
    * @description update dashboard widget filters
-   * @param dashboardId
-   * @param widgetId
-   * @param data
+   * @param {string} dashboardId
+   * @param {string} widgetId
+   * @param {TWidgetFiltersFormData} data
    * @returns updated widget
    */
   updateDashboardWidgetFilters = async (
diff --git a/web/store/estimate.store.ts b/web/store/estimate.store.ts
index beddd52aba6..636bb2597fc 100644
--- a/web/store/estimate.store.ts
+++ b/web/store/estimate.store.ts
@@ -1,11 +1,11 @@
-import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import set from "lodash/set";
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
 // services
-import { ProjectEstimateService } from "services/project";
+import { computedFn } from "mobx-utils";
+import { ProjectEstimateService } from "@/services/project";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { IEstimate, IEstimateFormData } from "@plane/types";
-import { computedFn } from "mobx-utils";
 
 export interface IEstimateStore {
   //Loaders
diff --git a/web/store/event-tracker.store.ts b/web/store/event-tracker.store.ts
index 744ad44fbab..3b262207800 100644
--- a/web/store/event-tracker.store.ts
+++ b/web/store/event-tracker.store.ts
@@ -1,7 +1,6 @@
 import { action, computed, makeObservable, observable } from "mobx";
 import posthog from "posthog-js";
 // stores
-import { RootStore } from "./root.store";
 import {
   GROUP_WORKSPACE,
   WORKSPACE_CREATED,
@@ -14,7 +13,8 @@ import {
   getProjectStateEventPayload,
   getWorkspaceEventPayload,
   getPageEventPayload,
-} from "constants/event-tracker";
+} from "@/constants/event-tracker";
+import { RootStore } from "./root.store";
 
 export interface IEventTrackerStore {
   // properties
diff --git a/web/store/global-view.store.ts b/web/store/global-view.store.ts
index 65aedadb5ab..c6d32678454 100644
--- a/web/store/global-view.store.ts
+++ b/web/store/global-view.store.ts
@@ -1,10 +1,10 @@
+import { set } from "lodash";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
-import { set } from "lodash";
 // services
-import { WorkspaceService } from "services/workspace.service";
+import { WorkspaceService } from "@/services/workspace.service";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { IWorkspaceView } from "@plane/types";
 
 export interface IGlobalViewStore {
diff --git a/web/store/inbox/inbox.store.ts b/web/store/inbox/inbox.store.ts
index 8d8f2bec546..5d90b6d4701 100644
--- a/web/store/inbox/inbox.store.ts
+++ b/web/store/inbox/inbox.store.ts
@@ -1,13 +1,13 @@
-import { observable, action, makeObservable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
+import set from "lodash/set";
 import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { observable, action, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // services
-import { InboxService } from "services/inbox/inbox.service";
+import { InboxService } from "@/services/inbox/inbox.service";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { TInboxDetailMap, TInboxDetailIdMap, TInbox } from "@plane/types";
 
 export interface IInbox {
diff --git a/web/store/inbox/inbox_filter.store.ts b/web/store/inbox/inbox_filter.store.ts
index c4566acbe26..603c75f9b58 100644
--- a/web/store/inbox/inbox_filter.store.ts
+++ b/web/store/inbox/inbox_filter.store.ts
@@ -1,10 +1,10 @@
-import { observable, action, makeObservable, runInAction, computed } from "mobx";
-import set from "lodash/set";
 import isEmpty from "lodash/isEmpty";
+import set from "lodash/set";
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
 // services
-import { InboxService } from "services/inbox.service";
+import { InboxService } from "@/services/inbox.service";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { TInboxIssueFilterOptions, TInboxIssueFilters, TInboxIssueQueryParams, TInbox } from "@plane/types";
 
 export interface IInboxFilter {
diff --git a/web/store/inbox/inbox_issue.store.ts b/web/store/inbox/inbox_issue.store.ts
index 4f980357fdb..6e5eb94f0b0 100644
--- a/web/store/inbox/inbox_issue.store.ts
+++ b/web/store/inbox/inbox_issue.store.ts
@@ -1,14 +1,14 @@
-import { observable, action, makeObservable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
-import uniq from "lodash/uniq";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { observable, action, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // services
-import { InboxIssueService } from "services/inbox/inbox-issue.service";
+import { InboxIssueService } from "@/services/inbox/inbox-issue.service";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import type {
   TInboxIssueDetailIdMap,
   TInboxIssueDetailMap,
diff --git a/web/store/inbox/root.store.ts b/web/store/inbox/root.store.ts
index b0706cca710..0628e28ab49 100644
--- a/web/store/inbox/root.store.ts
+++ b/web/store/inbox/root.store.ts
@@ -1,8 +1,8 @@
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { IInbox, Inbox } from "./inbox.store";
-import { IInboxIssue, InboxIssue } from "./inbox_issue.store";
 import { IInboxFilter, InboxFilter } from "./inbox_filter.store";
+import { IInboxIssue, InboxIssue } from "./inbox_issue.store";
 
 export interface IInboxRootStore {
   rootStore: RootStore;
diff --git a/web/store/issue/archived/filter.store.ts b/web/store/issue/archived/filter.store.ts
index 032928cda6a..dc14b01d7f1 100644
--- a/web/store/issue/archived/filter.store.ts
+++ b/web/store/issue/archived/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { IssueFiltersService } from "@/services/issue_filter.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { IssueFiltersService } from "services/issue_filter.service";
 
 export interface IArchivedIssuesFilter {
   // observables
diff --git a/web/store/issue/archived/issue.store.ts b/web/store/issue/archived/issue.store.ts
index a0b26eb8bce..7cb1b1b5466 100644
--- a/web/store/issue/archived/issue.store.ts
+++ b/web/store/issue/archived/issue.store.ts
@@ -1,13 +1,13 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
+import { IssueArchiveService } from "@/services/issue";
+import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueArchiveService } from "services/issue";
 // types
 import { IIssueRootStore } from "../root.store";
-import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
 
 export interface IArchivedIssues {
   // observable
@@ -17,7 +17,7 @@ export interface IArchivedIssues {
   // computed
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
   // actions
-  fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue>;
+  fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue[]>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   quickAddIssue: undefined;
diff --git a/web/store/issue/cycle/filter.store.ts b/web/store/issue/cycle/filter.store.ts
index 5d8c2a6b86c..65bfe28d935 100644
--- a/web/store/issue/cycle/filter.store.ts
+++ b/web/store/issue/cycle/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { IssueFiltersService } from "@/services/issue_filter.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { IssueFiltersService } from "services/issue_filter.service";
 
 export interface ICycleIssuesFilter {
   // observables
@@ -35,7 +35,7 @@ export interface ICycleIssuesFilter {
     projectId: string,
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    cycleId?: string | undefined
+    cycleId: string
   ) => Promise<void>;
 }
 
@@ -136,10 +136,9 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
     projectId: string,
     type: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    cycleId: string | undefined = undefined
+    cycleId: string
   ) => {
     try {
-      if (!cycleId) throw new Error("Cycle id is required");
       if (isEmpty(this.filters) || isEmpty(this.filters[cycleId]) || isEmpty(filters)) return;
 
       const _filters = {
diff --git a/web/store/issue/cycle/issue.store.ts b/web/store/issue/cycle/issue.store.ts
index 61b280da9ea..a5d7e0670df 100644
--- a/web/store/issue/cycle/issue.store.ts
+++ b/web/store/issue/cycle/issue.store.ts
@@ -1,17 +1,17 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
+import set from "lodash/set";
 import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
-import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueService } from "services/issue";
-import { CycleService } from "services/cycle.service";
+import { CycleService } from "@/services/cycle.service";
+import { IssueService } from "@/services/issue";
 // types
-import { IIssueRootStore } from "../root.store";
 import { TIssue, TSubGroupedIssues, TGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
+import { IssueHelperStore } from "../helpers/issue-helper.store";
+import { IIssueRootStore } from "../root.store";
 
 export const ACTIVE_CYCLE_ISSUES = "ACTIVE_CYCLE_ISSUES";
 
@@ -27,33 +27,23 @@ export interface ICycleIssues {
     workspaceSlug: string,
     projectId: string,
     loadType: TLoader,
-    cycleId?: string | undefined
+    cycleId: string
   ) => Promise<TIssue[] | undefined>;
   createIssue: (
     workspaceSlug: string,
     projectId: string,
     data: Partial<TIssue>,
-    cycleId?: string | undefined
+    cycleId: string
   ) => Promise<TIssue | undefined>;
   updateIssue: (
     workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    cycleId?: string | undefined
-  ) => Promise<void>;
-  removeIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    cycleId?: string | undefined
-  ) => Promise<void>;
-  archiveIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    cycleId?: string | undefined
+    cycleId: string
   ) => Promise<void>;
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string, cycleId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string, cycleId: string) => Promise<void>;
   quickAddIssue: (
     workspaceSlug: string,
     projectId: string,
@@ -67,7 +57,7 @@ export interface ICycleIssues {
     issueIds: string[],
     fetchAddedIssues?: boolean
   ) => Promise<void>;
-  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<TIssue>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
   transferIssuesFromCycle: (
     workspaceSlug: string,
     projectId: string,
@@ -156,11 +146,9 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     workspaceSlug: string,
     projectId: string,
     loadType: TLoader = "init-loader",
-    cycleId: string | undefined = undefined
+    cycleId: string
   ) => {
     try {
-      if (!cycleId) throw new Error("Cycle Id is required");
-
       this.loader = loadType;
 
       const params = this.rootIssueStore?.cycleIssuesFilter?.appliedFilters;
@@ -185,15 +173,8 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     }
   };
 
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<TIssue>,
-    cycleId: string | undefined = undefined
-  ) => {
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, cycleId: string) => {
     try {
-      if (!cycleId) throw new Error("Cycle Id is required");
-
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
       await this.addIssueToCycle(workspaceSlug, projectId, cycleId, [response.id], false);
       this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
@@ -209,11 +190,9 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    cycleId: string | undefined = undefined
+    cycleId: string
   ) => {
     try {
-      if (!cycleId) throw new Error("Cycle Id is required");
-
       await this.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
       this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
     } catch (error) {
@@ -222,15 +201,8 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     }
   };
 
-  removeIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    cycleId: string | undefined = undefined
-  ) => {
+  removeIssue = async (workspaceSlug: string, projectId: string, issueId: string, cycleId: string) => {
     try {
-      if (!cycleId) throw new Error("Cycle Id is required");
-
       await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
       this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
@@ -244,15 +216,8 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     }
   };
 
-  archiveIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    cycleId: string | undefined = undefined
-  ) => {
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string, cycleId: string) => {
     try {
-      if (!cycleId) throw new Error("Cycle Id is required");
-
       await this.rootIssueStore.projectIssues.archiveIssue(workspaceSlug, projectId, issueId);
       this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
@@ -290,7 +255,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
+      if (cycleId) this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
       throw error;
     }
   };
@@ -335,10 +300,8 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       this.rootStore.issues.updateIssue(issueId, { cycle_id: null });
 
-      const response = await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+      await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
       this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
-
-      return response;
     } catch (error) {
       throw error;
     }
diff --git a/web/store/issue/draft/filter.store.ts b/web/store/issue/draft/filter.store.ts
index cc58a775574..8e7e16b85d6 100644
--- a/web/store/issue/draft/filter.store.ts
+++ b/web/store/issue/draft/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { IssueFiltersService } from "@/services/issue_filter.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { IssueFiltersService } from "services/issue_filter.service";
 
 export interface IDraftIssuesFilter {
   // observables
diff --git a/web/store/issue/draft/issue.store.ts b/web/store/issue/draft/issue.store.ts
index a06213eb0cd..d755a4549bb 100644
--- a/web/store/issue/draft/issue.store.ts
+++ b/web/store/issue/draft/issue.store.ts
@@ -1,16 +1,16 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
-import uniq from "lodash/uniq";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
-import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueDraftService } from "services/issue/issue_draft.service";
+import { IssueDraftService } from "@/services/issue/issue_draft.service";
 // types
-import { IIssueRootStore } from "../root.store";
 import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
+import { IssueHelperStore } from "../helpers/issue-helper.store";
+import { IIssueRootStore } from "../root.store";
 
 export interface IDraftIssues {
   // observable
diff --git a/web/store/issue/helpers/issue-filter-helper.store.ts b/web/store/issue/helpers/issue-filter-helper.store.ts
index baac4a2ade7..8b31dfd3066 100644
--- a/web/store/issue/helpers/issue-filter-helper.store.ts
+++ b/web/store/issue/helpers/issue-filter-helper.store.ts
@@ -1,5 +1,9 @@
 import isEmpty from "lodash/isEmpty";
 // types
+// constants
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+// lib
+import { storage } from "@/lib/local-storage";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -10,10 +14,6 @@ import {
   TIssueParams,
   TStaticViewTypes,
 } from "@plane/types";
-// constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-// lib
-import { storage } from "lib/local-storage";
 
 interface ILocalStoreIssueFilters {
   key: EIssuesStoreType;
diff --git a/web/store/issue/helpers/issue-helper.store.ts b/web/store/issue/helpers/issue-helper.store.ts
index a267ac9c81a..8dafa2694c7 100644
--- a/web/store/issue/helpers/issue-helper.store.ts
+++ b/web/store/issue/helpers/issue-helper.store.ts
@@ -1,16 +1,17 @@
-import orderBy from "lodash/orderBy";
 import get from "lodash/get";
 import indexOf from "lodash/indexOf";
 import isEmpty from "lodash/isEmpty";
+import orderBy from "lodash/orderBy";
 import values from "lodash/values";
+// constants
+import { ISSUE_PRIORITIES } from "@/constants/issue";
+import { STATE_GROUPS } from "@/constants/state";
+// helpers
+import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
 import { TIssue, TIssueMap, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
+// store
 import { IIssueRootStore } from "../root.store";
-// constants
-import { ISSUE_PRIORITIES } from "constants/issue";
-import { STATE_GROUPS } from "constants/state";
-// helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 
 export type TIssueDisplayFilterOptions = Exclude<TIssueGroupByOptions, null> | "target_date";
 
@@ -62,35 +63,35 @@ export class IssueHelperStore implements TIssueHelperStore {
     issues: TIssueMap,
     isCalendarIssues: boolean = false
   ) => {
-    const _issues: { [group_id: string]: string[] } = {};
-    if (!groupBy) return _issues;
+    const currentIssues: { [group_id: string]: string[] } = {};
+    if (!groupBy) return currentIssues;
 
     this.issueDisplayFiltersDefaultData(groupBy).forEach((group) => {
-      _issues[group] = [];
+      currentIssues[group] = [];
     });
 
     const projectIssues = this.issuesSortWithOrderBy(issues, orderBy);
 
     for (const issue in projectIssues) {
-      const _issue = projectIssues[issue];
+      const currentIssue = projectIssues[issue];
       let groupArray = [];
 
       if (groupBy === "state_detail.group") {
-        const state_group =
-          this.rootStore?.stateDetails?.find((_state) => _state.id === _issue?.state_id)?.group || "None";
+        // if groupBy state_detail.group is coming from the project level the we are using stateDetails from root store else we are looping through the stateMap
+        const state_group = (this.rootStore?.stateMap || {})?.[currentIssue?.state_id]?.group || "None";
         groupArray = [state_group];
       } else {
-        const groupValue = get(_issue, ISSUE_FILTER_DEFAULT_DATA[groupBy]);
-        groupArray = groupValue !== undefined ? this.getGroupArray(groupValue, isCalendarIssues) : [];
+        const groupValue = get(currentIssue, ISSUE_FILTER_DEFAULT_DATA[groupBy]);
+        groupArray = groupValue !== undefined ? this.getGroupArray(groupValue, isCalendarIssues) : ["None"];
       }
 
       for (const group of groupArray) {
-        if (group && _issues[group]) _issues[group].push(_issue.id);
-        else if (group) _issues[group] = [_issue.id];
+        if (group && currentIssues[group]) currentIssues[group].push(currentIssue.id);
+        else if (group) currentIssues[group] = [currentIssue.id];
       }
     }
 
-    return _issues;
+    return currentIssues;
   };
 
   subGroupedIssues = (
@@ -99,45 +100,47 @@ export class IssueHelperStore implements TIssueHelperStore {
     orderBy: TIssueOrderByOptions,
     issues: TIssueMap
   ) => {
-    const _issues: { [sub_group_id: string]: { [group_id: string]: string[] } } = {};
-    if (!subGroupBy || !groupBy) return _issues;
+    const currentIssues: { [sub_group_id: string]: { [group_id: string]: string[] } } = {};
+    if (!subGroupBy || !groupBy) return currentIssues;
 
-    this.issueDisplayFiltersDefaultData(subGroupBy).forEach((sub_group: any) => {
+    this.issueDisplayFiltersDefaultData(subGroupBy).forEach((sub_group) => {
       const groupByIssues: { [group_id: string]: string[] } = {};
       this.issueDisplayFiltersDefaultData(groupBy).forEach((group) => {
         groupByIssues[group] = [];
       });
-      _issues[sub_group] = groupByIssues;
+      currentIssues[sub_group] = groupByIssues;
     });
 
     const projectIssues = this.issuesSortWithOrderBy(issues, orderBy);
 
     for (const issue in projectIssues) {
-      const _issue = projectIssues[issue];
+      const currentIssue = projectIssues[issue];
       let subGroupArray = [];
       let groupArray = [];
       if (subGroupBy === "state_detail.group" || groupBy === "state_detail.group") {
-        const state_group =
-          this.rootStore?.stateDetails?.find((_state) => _state.id === _issue?.state_id)?.group || "None";
+        const state_group = (this.rootStore?.stateMap || {})?.[currentIssue?.state_id]?.group || "None";
+
         subGroupArray = [state_group];
         groupArray = [state_group];
       } else {
-        const subGroupValue = get(_issue, ISSUE_FILTER_DEFAULT_DATA[subGroupBy]);
-        const groupValue = get(_issue, ISSUE_FILTER_DEFAULT_DATA[groupBy]);
-        subGroupArray = subGroupValue != undefined ? this.getGroupArray(subGroupValue) : [];
-        groupArray = groupValue != undefined ? this.getGroupArray(groupValue) : [];
+        const subGroupValue = get(currentIssue, ISSUE_FILTER_DEFAULT_DATA[subGroupBy]);
+        const groupValue = get(currentIssue, ISSUE_FILTER_DEFAULT_DATA[groupBy]);
+
+        subGroupArray = subGroupValue != undefined ? this.getGroupArray(subGroupValue) : ["None"];
+        groupArray = groupValue != undefined ? this.getGroupArray(groupValue) : ["None"];
       }
 
       for (const subGroup of subGroupArray) {
         for (const group of groupArray) {
-          if (subGroup && group && _issues?.[subGroup]?.[group]) _issues[subGroup][group].push(_issue.id);
-          else if (subGroup && group && _issues[subGroup]) _issues[subGroup][group] = [_issue.id];
-          else if (subGroup && group) _issues[subGroup] = { [group]: [_issue.id] };
+          if (subGroup && group && currentIssues?.[subGroup]?.[group])
+            currentIssues[subGroup][group].push(currentIssue.id);
+          else if (subGroup && group && currentIssues[subGroup]) currentIssues[subGroup][group] = [currentIssue.id];
+          else if (subGroup && group) currentIssues[subGroup] = { [group]: [currentIssue.id] };
         }
       }
     }
 
-    return _issues;
+    return currentIssues;
   };
 
   unGroupedIssues = (orderBy: TIssueOrderByOptions, issues: TIssueMap) =>
@@ -215,8 +218,8 @@ export class IssueHelperStore implements TIssueHelperStore {
         const moduleMap = this.rootStore?.moduleMap;
         if (!moduleMap) break;
         for (const dataId of dataIdsArray) {
-          const _module = moduleMap[dataId];
-          if (_module && _module.name) dataValues.push(_module.name.toLocaleLowerCase());
+          const currentModule = moduleMap[dataId];
+          if (currentModule && currentModule.name) dataValues.push(currentModule.name.toLocaleLowerCase());
         }
         break;
       case "cycle_id":
@@ -233,10 +236,10 @@ export class IssueHelperStore implements TIssueHelperStore {
   }
 
   /**
-   * This Method is mainly used to filter out empty values in the begining
+   * This Method is mainly used to filter out empty values in the beginning
    * @param key key of the value that is to be checked if empty
    * @param object any object in which the key's value is to be checked
-   * @returns 1 if emoty, 0 if not empty
+   * @returns 1 if empty, 0 if not empty
    */
   getSortOrderToFilterEmptyValues(key: string, object: any) {
     const value = object?.[key];
@@ -388,7 +391,7 @@ export class IssueHelperStore implements TIssueHelperStore {
   getGroupArray(value: boolean | number | string | string[] | null, isDate: boolean = false): string[] {
     if (!value || value === null || value === undefined) return ["None"];
     if (Array.isArray(value))
-      if (value.length) return value;
+      if (value && value.length) return value;
       else return ["None"];
     else if (typeof value === "boolean") return [value ? "True" : "False"];
     else if (typeof value === "number") return [value.toString()];
diff --git a/web/store/issue/issue-details/activity.store.ts b/web/store/issue/issue-details/activity.store.ts
index efa181c9532..562f8ef5ba2 100644
--- a/web/store/issue/issue-details/activity.store.ts
+++ b/web/store/issue/issue-details/activity.store.ts
@@ -1,14 +1,14 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
+import concat from "lodash/concat";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
-import update from "lodash/update";
-import concat from "lodash/concat";
 import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueActivityService } from "services/issue";
+import { IssueActivityService } from "@/services/issue";
 // types
-import { IIssueDetail } from "./root.store";
 import { TIssueActivityComment, TIssueActivity, TIssueActivityMap, TIssueActivityIdMap } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export type TActivityLoader = "fetch" | "mutate" | undefined;
 
diff --git a/web/store/issue/issue-details/attachment.store.ts b/web/store/issue/issue-details/attachment.store.ts
index 5341058c192..ff537ebfbfa 100644
--- a/web/store/issue/issue-details/attachment.store.ts
+++ b/web/store/issue/issue-details/attachment.store.ts
@@ -1,14 +1,14 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
-import uniq from "lodash/uniq";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueAttachmentService } from "services/issue";
+import { IssueAttachmentService } from "@/services/issue";
 // types
-import { IIssueDetail } from "./root.store";
 import { TIssueAttachment, TIssueAttachmentMap, TIssueAttachmentIdMap } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export interface IIssueAttachmentStoreActions {
   addAttachments: (issueId: string, attachments: TIssueAttachment[]) => void;
diff --git a/web/store/issue/issue-details/comment.store.ts b/web/store/issue/issue-details/comment.store.ts
index 4336971defb..b09f191c120 100644
--- a/web/store/issue/issue-details/comment.store.ts
+++ b/web/store/issue/issue-details/comment.store.ts
@@ -1,14 +1,14 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
-import uniq from "lodash/uniq";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueCommentService } from "services/issue";
+import { IssueCommentService } from "@/services/issue";
 // types
-import { IIssueDetail } from "./root.store";
 import { TIssueComment, TIssueCommentMap, TIssueCommentIdMap } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export type TCommentLoader = "fetch" | "create" | "update" | "delete" | "mutate" | undefined;
 
diff --git a/web/store/issue/issue-details/comment_reaction.store.ts b/web/store/issue/issue-details/comment_reaction.store.ts
index 59adeef621a..6230f393600 100644
--- a/web/store/issue/issue-details/comment_reaction.store.ts
+++ b/web/store/issue/issue-details/comment_reaction.store.ts
@@ -1,16 +1,16 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
 import find from "lodash/find";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import update from "lodash/update";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueReactionService } from "services/issue";
 // types
-import { IIssueDetail } from "./root.store";
-import { TIssueCommentReaction, TIssueCommentReactionIdMap, TIssueCommentReactionMap } from "@plane/types";
 // helpers
-import { groupReactions } from "helpers/emoji.helper";
+import { groupReactions } from "@/helpers/emoji.helper";
+import { IssueReactionService } from "@/services/issue";
+import { TIssueCommentReaction, TIssueCommentReactionIdMap, TIssueCommentReactionMap } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export interface IIssueCommentReactionStoreActions {
   // actions
diff --git a/web/store/issue/issue-details/issue.store.ts b/web/store/issue/issue-details/issue.store.ts
index f42c1337657..d7b4335d620 100644
--- a/web/store/issue/issue-details/issue.store.ts
+++ b/web/store/issue/issue-details/issue.store.ts
@@ -1,9 +1,9 @@
 import { makeObservable } from "mobx";
 // services
-import { IssueArchiveService, IssueDraftService, IssueService } from "services/issue";
+import { computedFn } from "mobx-utils";
+import { IssueArchiveService, IssueDraftService, IssueService } from "@/services/issue";
 // types
 import { TIssue } from "@plane/types";
-import { computedFn } from "mobx-utils";
 import { IIssueDetail } from "./root.store";
 
 export interface IIssueStoreActions {
@@ -18,7 +18,7 @@ export interface IIssueStoreActions {
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
-  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<TIssue>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
   addModulesToIssue: (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => Promise<any>;
   removeModulesFromIssue: (
     workspaceSlug: string,
diff --git a/web/store/issue/issue-details/link.store.ts b/web/store/issue/issue-details/link.store.ts
index 81d13438c0e..3c361beb9d8 100644
--- a/web/store/issue/issue-details/link.store.ts
+++ b/web/store/issue/issue-details/link.store.ts
@@ -1,10 +1,10 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueService } from "services/issue";
+import { IssueService } from "@/services/issue";
 // types
-import { IIssueDetail } from "./root.store";
 import { TIssueLink, TIssueLinkMap, TIssueLinkIdMap } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export interface IIssueLinkStoreActions {
   addLinks: (issueId: string, links: TIssueLink[]) => void;
diff --git a/web/store/issue/issue-details/reaction.store.ts b/web/store/issue/issue-details/reaction.store.ts
index 6282ac40e1f..9a7df80df8e 100644
--- a/web/store/issue/issue-details/reaction.store.ts
+++ b/web/store/issue/issue-details/reaction.store.ts
@@ -1,16 +1,16 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
 import find from "lodash/find";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import update from "lodash/update";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueReactionService } from "services/issue";
 // types
-import { IIssueDetail } from "./root.store";
-import { TIssueReaction, TIssueReactionMap, TIssueReactionIdMap } from "@plane/types";
 // helpers
-import { groupReactions } from "helpers/emoji.helper";
+import { groupReactions } from "@/helpers/emoji.helper";
+import { IssueReactionService } from "@/services/issue";
+import { TIssueReaction, TIssueReactionMap, TIssueReactionIdMap } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export interface IIssueReactionStoreActions {
   // actions
@@ -84,7 +84,7 @@ export class IssueReactionStore implements IIssueReactionStore {
       if (reactions?.[reaction])
         reactions?.[reaction].map((reactionId) => {
           const currentReaction = this.getReactionById(reactionId);
-          if (currentReaction && currentReaction.actor_id === userId) _userReactions.push(currentReaction);
+          if (currentReaction && currentReaction.actor === userId) _userReactions.push(currentReaction);
         });
     });
 
@@ -151,7 +151,7 @@ export class IssueReactionStore implements IIssueReactionStore {
   ) => {
     try {
       const userReactions = this.reactionsByUser(issueId, userId);
-      const currentReaction = find(userReactions, { actor_id: userId, reaction: reaction });
+      const currentReaction = find(userReactions, { actor: userId, reaction: reaction });
 
       if (currentReaction && currentReaction.id) {
         runInAction(() => {
diff --git a/web/store/issue/issue-details/relation.store.ts b/web/store/issue/issue-details/relation.store.ts
index da729540ed8..ec79cd74edb 100644
--- a/web/store/issue/issue-details/relation.store.ts
+++ b/web/store/issue/issue-details/relation.store.ts
@@ -1,10 +1,10 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // services
-import { IssueRelationService } from "services/issue";
+import { IssueRelationService } from "@/services/issue";
 // types
-import { IIssueDetail } from "./root.store";
 import { TIssueRelationIdMap, TIssueRelationMap, TIssueRelationTypes, TIssueRelation, TIssue } from "@plane/types";
+import { IIssueDetail } from "./root.store";
 
 export interface IIssueRelationStoreActions {
   // actions
diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts
index db5dab307f4..a9672655bb2 100644
--- a/web/store/issue/issue-details/root.store.ts
+++ b/web/store/issue/issue-details/root.store.ts
@@ -1,20 +1,5 @@
 import { action, computed, makeObservable, observable } from "mobx";
 // types
-import { IIssueRootStore } from "../root.store";
-import { IIssueStore, IssueStore, IIssueStoreActions } from "./issue.store";
-import { IIssueReactionStore, IssueReactionStore, IIssueReactionStoreActions } from "./reaction.store";
-import { IIssueLinkStore, IssueLinkStore, IIssueLinkStoreActions } from "./link.store";
-import { IIssueSubscriptionStore, IssueSubscriptionStore, IIssueSubscriptionStoreActions } from "./subscription.store";
-import { IIssueAttachmentStore, IssueAttachmentStore, IIssueAttachmentStoreActions } from "./attachment.store";
-import { IIssueSubIssuesStore, IssueSubIssuesStore, IIssueSubIssuesStoreActions } from "./sub_issues.store";
-import { IIssueRelationStore, IssueRelationStore, IIssueRelationStoreActions } from "./relation.store";
-import { IIssueActivityStore, IssueActivityStore, IIssueActivityStoreActions, TActivityLoader } from "./activity.store";
-import { IIssueCommentStore, IssueCommentStore, IIssueCommentStoreActions, TCommentLoader } from "./comment.store";
-import {
-  IIssueCommentReactionStore,
-  IssueCommentReactionStore,
-  IIssueCommentReactionStoreActions,
-} from "./comment_reaction.store";
 import {
   TIssue,
   TIssueAttachment,
@@ -24,6 +9,21 @@ import {
   TIssueReaction,
   TIssueRelationTypes,
 } from "@plane/types";
+import { IIssueRootStore } from "../root.store";
+import { IIssueActivityStore, IssueActivityStore, IIssueActivityStoreActions, TActivityLoader } from "./activity.store";
+import { IIssueAttachmentStore, IssueAttachmentStore, IIssueAttachmentStoreActions } from "./attachment.store";
+import { IIssueCommentStore, IssueCommentStore, IIssueCommentStoreActions, TCommentLoader } from "./comment.store";
+import {
+  IIssueCommentReactionStore,
+  IssueCommentReactionStore,
+  IIssueCommentReactionStoreActions,
+} from "./comment_reaction.store";
+import { IIssueStore, IssueStore, IIssueStoreActions } from "./issue.store";
+import { IIssueLinkStore, IssueLinkStore, IIssueLinkStoreActions } from "./link.store";
+import { IIssueReactionStore, IssueReactionStore, IIssueReactionStoreActions } from "./reaction.store";
+import { IIssueRelationStore, IssueRelationStore, IIssueRelationStoreActions } from "./relation.store";
+import { IIssueSubIssuesStore, IssueSubIssuesStore, IIssueSubIssuesStoreActions } from "./sub_issues.store";
+import { IIssueSubscriptionStore, IssueSubscriptionStore, IIssueSubscriptionStoreActions } from "./subscription.store";
 
 export type TPeekIssue = {
   workspaceSlug: string;
@@ -44,20 +44,26 @@ export interface IIssueDetail
     IIssueCommentReactionStoreActions {
   // observables
   peekIssue: TPeekIssue | undefined;
+  isCreateIssueModalOpen: boolean;
   isIssueLinkModalOpen: boolean;
   isParentIssueModalOpen: boolean;
-  isDeleteIssueModalOpen: boolean;
+  isDeleteIssueModalOpen: string | null;
   isArchiveIssueModalOpen: boolean;
   isRelationModalOpen: TIssueRelationTypes | null;
+  isSubIssuesModalOpen: boolean;
+  isDeleteAttachmentModalOpen: boolean;
   // computed
   isAnyModalOpen: boolean;
   // actions
   setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
+  toggleCreateIssueModal: (value: boolean) => void;
   toggleIssueLinkModal: (value: boolean) => void;
   toggleParentIssueModal: (value: boolean) => void;
-  toggleDeleteIssueModal: (value: boolean) => void;
+  toggleDeleteIssueModal: (issueId: string | null) => void;
   toggleArchiveIssueModal: (value: boolean) => void;
-  toggleRelationModal: (value: TIssueRelationTypes | null) => void;
+  toggleRelationModal: (relationType: TIssueRelationTypes | null) => void;
+  toggleSubIssuesModal: (value: boolean) => void;
+  toggleDeleteAttachmentModal: (value: boolean) => void;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -75,11 +81,14 @@ export interface IIssueDetail
 export class IssueDetail implements IIssueDetail {
   // observables
   peekIssue: TPeekIssue | undefined = undefined;
+  isCreateIssueModalOpen: boolean = false;
   isIssueLinkModalOpen: boolean = false;
   isParentIssueModalOpen: boolean = false;
-  isDeleteIssueModalOpen: boolean = false;
+  isDeleteIssueModalOpen: string | null = null;
   isArchiveIssueModalOpen: boolean = false;
   isRelationModalOpen: TIssueRelationTypes | null = null;
+  isSubIssuesModalOpen: boolean = false;
+  isDeleteAttachmentModalOpen: boolean = false;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -97,20 +106,26 @@ export class IssueDetail implements IIssueDetail {
     makeObservable(this, {
       // observables
       peekIssue: observable,
+      isCreateIssueModalOpen: observable,
       isIssueLinkModalOpen: observable.ref,
       isParentIssueModalOpen: observable.ref,
       isDeleteIssueModalOpen: observable.ref,
       isArchiveIssueModalOpen: observable.ref,
       isRelationModalOpen: observable.ref,
+      isSubIssuesModalOpen: observable.ref,
+      isDeleteAttachmentModalOpen: observable.ref,
       // computed
       isAnyModalOpen: computed,
       // action
       setPeekIssue: action,
+      toggleCreateIssueModal: action,
       toggleIssueLinkModal: action,
       toggleParentIssueModal: action,
       toggleDeleteIssueModal: action,
       toggleArchiveIssueModal: action,
       toggleRelationModal: action,
+      toggleSubIssuesModal: action,
+      toggleDeleteAttachmentModal: action,
     });
 
     // store
@@ -130,21 +145,27 @@ export class IssueDetail implements IIssueDetail {
   // computed
   get isAnyModalOpen() {
     return (
+      this.isCreateIssueModalOpen ||
       this.isIssueLinkModalOpen ||
       this.isParentIssueModalOpen ||
-      this.isDeleteIssueModalOpen ||
+      !!this.isDeleteIssueModalOpen ||
       this.isArchiveIssueModalOpen ||
-      Boolean(this.isRelationModalOpen)
+      !!this.isRelationModalOpen ||
+      this.isSubIssuesModalOpen ||
+      this.isDeleteAttachmentModalOpen
     );
   }
 
   // actions
   setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue);
+  toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);
   toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
   toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
-  toggleDeleteIssueModal = (value: boolean) => (this.isDeleteIssueModalOpen = value);
+  toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId);
   toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
-  toggleRelationModal = (value: TIssueRelationTypes | null) => (this.isRelationModalOpen = value);
+  toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType);
+  toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value);
+  toggleDeleteAttachmentModal = (value: boolean) => (this.isDeleteAttachmentModalOpen = value);
 
   // issue
   fetchIssue = async (
diff --git a/web/store/issue/issue-details/sub_issues.store.ts b/web/store/issue/issue-details/sub_issues.store.ts
index cfa1be12e1a..f4bd20772fd 100644
--- a/web/store/issue/issue-details/sub_issues.store.ts
+++ b/web/store/issue/issue-details/sub_issues.store.ts
@@ -1,12 +1,10 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
-import set from "lodash/set";
 import concat from "lodash/concat";
-import update from "lodash/update";
 import pull from "lodash/pull";
-// services
-import { IssueService } from "services/issue";
+import set from "lodash/set";
+import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // types
-import { IIssueDetail } from "./root.store";
 import {
   TIssue,
   TIssueSubIssues,
@@ -14,6 +12,10 @@ import {
   TIssueSubIssuesIdMap,
   TSubIssuesStateDistribution,
 } from "@plane/types";
+// services
+import { IssueService } from "@/services/issue";
+// store
+import { IIssueDetail } from "./root.store";
 
 export interface IIssueSubIssuesStoreActions {
   fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<TIssueSubIssues>;
@@ -48,6 +50,7 @@ export interface IIssueSubIssuesStore extends IIssueSubIssuesStoreActions {
   subIssuesByIssueId: (issueId: string) => string[] | undefined;
   subIssueHelpersByIssueId: (issueId: string) => TSubIssueHelpers;
   // actions
+  fetchOtherProjectProperties: (workspaceSlug: string, projectIds: string[]) => Promise<void>;
   setSubIssueHelpers: (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => void;
 }
 
@@ -74,6 +77,7 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       updateSubIssue: action,
       removeSubIssue: action,
       deleteSubIssue: action,
+      fetchOtherProjectProperties: action,
     });
     // root store
     this.rootIssueDetailStore = rootStore;
@@ -116,6 +120,12 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
 
       this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
 
+      // fetch other issues states and members when sub-issues are from different project
+      if (subIssues && subIssues.length > 0) {
+        const otherProjectIds = uniq(subIssues.map((issue) => issue.project_id).filter((id) => id !== projectId));
+        this.fetchOtherProjectProperties(workspaceSlug, otherProjectIds);
+      }
+
       runInAction(() => {
         set(this.subIssuesStateDistribution, parentIssueId, subIssuesStateDistribution);
         set(
@@ -140,6 +150,12 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       const subIssuesStateDistribution = response?.state_distribution;
       const subIssues = response.sub_issues as TIssue[];
 
+      // fetch other issues states and members when sub-issues are from different project
+      if (subIssues && subIssues.length > 0) {
+        const otherProjectIds = uniq(subIssues.map((issue) => issue.project_id).filter((id) => id !== projectId));
+        this.fetchOtherProjectProperties(workspaceSlug, otherProjectIds);
+      }
+
       runInAction(() => {
         Object.keys(subIssuesStateDistribution).forEach((key) => {
           const stateGroup = key as keyof TSubIssuesStateDistribution;
@@ -292,4 +308,30 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       throw error;
     }
   };
+
+  fetchOtherProjectProperties = async (workspaceSlug: string, projectIds: string[]) => {
+    try {
+      if (projectIds.length > 0) {
+        for (const projectId of projectIds) {
+          // fetching other project states
+          this.rootIssueDetailStore.rootIssueStore.rootStore.state.fetchProjectStates(workspaceSlug, projectId);
+          // fetching other project members
+          this.rootIssueDetailStore.rootIssueStore.rootStore.memberRoot.project.fetchProjectMembers(
+            workspaceSlug,
+            projectId
+          );
+          // fetching other project labels
+          this.rootIssueDetailStore.rootIssueStore.rootStore.label.fetchProjectLabels(workspaceSlug, projectId);
+          // fetching other project cycles
+          this.rootIssueDetailStore.rootIssueStore.rootStore.cycle.fetchAllCycles(workspaceSlug, projectId);
+          // fetching other project modules
+          this.rootIssueDetailStore.rootIssueStore.rootStore.module.fetchModules(workspaceSlug, projectId);
+          // fetching other project estimates
+          this.rootIssueDetailStore.rootIssueStore.rootStore.estimate.fetchProjectEstimates(workspaceSlug, projectId);
+        }
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
 }
diff --git a/web/store/issue/issue-details/subscription.store.ts b/web/store/issue/issue-details/subscription.store.ts
index 276c952f406..418842a0950 100644
--- a/web/store/issue/issue-details/subscription.store.ts
+++ b/web/store/issue/issue-details/subscription.store.ts
@@ -1,7 +1,7 @@
-import { action, makeObservable, observable, runInAction } from "mobx";
 import set from "lodash/set";
+import { action, makeObservable, observable, runInAction } from "mobx";
 // services
-import { NotificationService } from "services/notification.service";
+import { NotificationService } from "@/services/notification.service";
 // types
 import { IIssueDetail } from "./root.store";
 
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
index cbda505ff2a..b6611ef4946 100644
--- a/web/store/issue/issue.store.ts
+++ b/web/store/issue/issue.store.ts
@@ -1,12 +1,12 @@
-import set from "lodash/set";
 import isEmpty from "lodash/isEmpty";
+import set from "lodash/set";
 // store
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
+import { IssueService } from "@/services/issue";
 import { TIssue } from "@plane/types";
 //services
-import { IssueService } from "services/issue";
 
 export type IIssueStore = {
   // observables
diff --git a/web/store/issue/issue_calendar_view.store.ts b/web/store/issue/issue_calendar_view.store.ts
index ac4a608098f..08c7efb4f7e 100644
--- a/web/store/issue/issue_calendar_view.store.ts
+++ b/web/store/issue/issue_calendar_view.store.ts
@@ -1,10 +1,10 @@
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 
 // helpers
-import { generateCalendarData } from "helpers/calendar.helper";
+import { ICalendarPayload, ICalendarWeek } from "@/components/issues";
+import { generateCalendarData } from "@/helpers/calendar.helper";
 // types
-import { ICalendarPayload, ICalendarWeek } from "components/issues";
-import { getWeekNumberOfDate } from "helpers/date-time.helper";
+import { getWeekNumberOfDate } from "@/helpers/date-time.helper";
 
 export interface ICalendarStore {
   calendarFilters: {
diff --git a/web/store/issue/issue_gantt_view.store.ts b/web/store/issue/issue_gantt_view.store.ts
index b087554dd5d..974c78b7297 100644
--- a/web/store/issue/issue_gantt_view.store.ts
+++ b/web/store/issue/issue_gantt_view.store.ts
@@ -1,9 +1,9 @@
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // helpers
-import { currentViewDataWithView } from "components/gantt-chart/data";
+import { ChartDataType, TGanttViews } from "@/components/gantt-chart";
+import { currentViewDataWithView } from "@/components/gantt-chart/data";
 // types
-import { ChartDataType, TGanttViews } from "components/gantt-chart";
 
 export interface IGanttStore {
   // observables
diff --git a/web/store/issue/module/filter.store.ts b/web/store/issue/module/filter.store.ts
index c353059efa6..9a3891002b8 100644
--- a/web/store/issue/module/filter.store.ts
+++ b/web/store/issue/module/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { IssueFiltersService } from "@/services/issue_filter.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { IssueFiltersService } from "services/issue_filter.service";
 
 export interface IModuleIssuesFilter {
   // observables
@@ -35,7 +35,7 @@ export interface IModuleIssuesFilter {
     projectId: string,
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    moduleId?: string | undefined
+    moduleId: string
   ) => Promise<void>;
 }
 
@@ -136,10 +136,9 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
     projectId: string,
     type: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    moduleId: string | undefined = undefined
+    moduleId: string
   ) => {
     try {
-      if (!moduleId) throw new Error("Module id is required");
       if (isEmpty(this.filters) || isEmpty(this.filters[moduleId]) || isEmpty(filters)) return;
 
       const _filters = {
diff --git a/web/store/issue/module/issue.store.ts b/web/store/issue/module/issue.store.ts
index 9e6ad3f49f4..e1af2c256b0 100644
--- a/web/store/issue/module/issue.store.ts
+++ b/web/store/issue/module/issue.store.ts
@@ -1,17 +1,17 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
-import update from "lodash/update";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
+import set from "lodash/set";
 import uniq from "lodash/uniq";
+import update from "lodash/update";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
-import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueService } from "services/issue";
-import { ModuleService } from "services/module.service";
+import { IssueService } from "@/services/issue";
+import { ModuleService } from "@/services/module.service";
 // types
-import { IIssueRootStore } from "../root.store";
 import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
+import { IssueHelperStore } from "../helpers/issue-helper.store";
+import { IIssueRootStore } from "../root.store";
 
 export interface IModuleIssues {
   // observable
@@ -25,33 +25,23 @@ export interface IModuleIssues {
     workspaceSlug: string,
     projectId: string,
     loadType: TLoader,
-    moduleId?: string | undefined
+    moduleId: string
   ) => Promise<TIssue[] | undefined>;
   createIssue: (
     workspaceSlug: string,
     projectId: string,
     data: Partial<TIssue>,
-    moduleId?: string | undefined
+    moduleId: string
   ) => Promise<TIssue | undefined>;
   updateIssue: (
     workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    moduleId?: string | undefined
-  ) => Promise<void>;
-  removeIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    moduleId?: string | undefined
-  ) => Promise<void>;
-  archiveIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    moduleId?: string | undefined
+    moduleId: string
   ) => Promise<void>;
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string, moduleId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string, moduleId: string) => Promise<void>;
   quickAddIssue: (
     workspaceSlug: string,
     projectId: string,
@@ -160,11 +150,9 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     workspaceSlug: string,
     projectId: string,
     loadType: TLoader = "init-loader",
-    moduleId: string | undefined = undefined
+    moduleId: string
   ) => {
     try {
-      if (!moduleId) throw new Error("Module Id is required");
-
       this.loader = loadType;
 
       const params = this.rootIssueStore?.moduleIssuesFilter?.appliedFilters;
@@ -190,15 +178,8 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     }
   };
 
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<TIssue>,
-    moduleId: string | undefined = undefined
-  ) => {
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, moduleId: string) => {
     try {
-      if (!moduleId) throw new Error("Module Id is required");
-
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
       await this.addIssuesToModule(workspaceSlug, projectId, moduleId, [response.id], false);
       this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
@@ -214,11 +195,9 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    moduleId: string | undefined = undefined
+    moduleId: string
   ) => {
     try {
-      if (!moduleId) throw new Error("Module Id is required");
-
       await this.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
       this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
     } catch (error) {
@@ -227,15 +206,8 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     }
   };
 
-  removeIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    moduleId: string | undefined = undefined
-  ) => {
+  removeIssue = async (workspaceSlug: string, projectId: string, issueId: string, moduleId: string) => {
     try {
-      if (!moduleId) throw new Error("Module Id is required");
-
       await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
       this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
@@ -249,15 +221,8 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     }
   };
 
-  archiveIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    moduleId: string | undefined = undefined
-  ) => {
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string, moduleId: string) => {
     try {
-      if (!moduleId) throw new Error("Module Id is required");
-
       await this.rootIssueStore.projectIssues.archiveIssue(workspaceSlug, projectId, issueId);
       this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
diff --git a/web/store/issue/profile/filter.store.ts b/web/store/issue/profile/filter.store.ts
index 658980082b0..08b247006b0 100644
--- a/web/store/issue/profile/filter.store.ts
+++ b/web/store/issue/profile/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { IssueFiltersService } from "@/services/issue_filter.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { IssueFiltersService } from "services/issue_filter.service";
 
 export interface IProfileIssuesFilter {
   // observables
@@ -36,7 +36,7 @@ export interface IProfileIssuesFilter {
     projectId: string | undefined,
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    userId?: string | undefined
+    userId: string
   ) => Promise<void>;
 }
 
@@ -125,11 +125,9 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
     projectId: string | undefined,
     type: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    userId: string | undefined = undefined
+    userId: string
   ) => {
     try {
-      if (!userId) throw new Error("user id is required");
-
       if (isEmpty(this.filters) || isEmpty(this.filters[userId]) || isEmpty(filters)) return;
 
       const _filters = {
diff --git a/web/store/issue/profile/issue.store.ts b/web/store/issue/profile/issue.store.ts
index c39b33a80d1..6da65634211 100644
--- a/web/store/issue/profile/issue.store.ts
+++ b/web/store/issue/profile/issue.store.ts
@@ -1,13 +1,13 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
+import { UserService } from "@/services/user.service";
+import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { UserService } from "services/user.service";
 // types
 import { IIssueRootStore } from "../root.store";
-import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
 
 interface IProfileIssueTabTypes {
   [key: string]: string[];
@@ -27,34 +27,24 @@ export interface IProfileIssues {
     workspaceSlug: string,
     projectId: string | undefined,
     loadType: TLoader,
-    userId?: string | undefined,
+    userId: string,
     view?: "assigned" | "created" | "subscribed"
   ) => Promise<TIssue[]>;
   createIssue: (
     workspaceSlug: string,
     projectId: string,
     data: Partial<TIssue>,
-    userId?: string | undefined
+    userId: string
   ) => Promise<TIssue | undefined>;
   updateIssue: (
     workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    userId?: string | undefined
-  ) => Promise<void>;
-  removeIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    userId?: string | undefined
-  ) => Promise<void>;
-  archiveIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    userId?: string | undefined
+    userId: string
   ) => Promise<void>;
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string, userId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string, userId: string) => Promise<void>;
   quickAddIssue: undefined;
 }
 
@@ -150,15 +140,14 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
     workspaceSlug: string,
     projectId: string | undefined,
     loadType: TLoader = "init-loader",
-    userId?: string | undefined,
+    userId: string,
     view?: "assigned" | "created" | "subscribed"
   ) => {
     try {
-      if (!userId) throw new Error("user id is required");
-      if (!view) throw new Error("current tab view is required");
-
       this.loader = loadType;
-      this.currentView = view;
+      if (view) this.currentView = view;
+
+      if (!this.currentView) throw new Error("current tab view is required");
 
       const uniqueViewId = `${workspaceSlug}_${view}`;
 
@@ -193,15 +182,8 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
     }
   };
 
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<TIssue>,
-    userId: string | undefined = undefined
-  ) => {
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, userId: string) => {
     try {
-      if (!userId) throw new Error("user id is required");
-
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
 
       const uniqueViewId = `${workspaceSlug}_${this.currentView}`;
@@ -223,11 +205,9 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    userId: string | undefined = undefined
+    userId: string
   ) => {
     try {
-      if (!userId) throw new Error("user id is required");
-
       this.rootStore.issues.updateIssue(issueId, data);
       await this.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, data.id as keyof TIssue, data);
     } catch (error) {
@@ -258,13 +238,7 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
     }
   };
 
-  archiveIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    userId: string | undefined = undefined
-  ) => {
-    if (!userId) return;
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string, userId: string) => {
     try {
       await this.rootIssueStore.projectIssues.archiveIssue(workspaceSlug, projectId, issueId);
 
diff --git a/web/store/issue/project-views/filter.store.ts b/web/store/issue/project-views/filter.store.ts
index c7c8988b167..6fbe94443e4 100644
--- a/web/store/issue/project-views/filter.store.ts
+++ b/web/store/issue/project-views/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { ViewService } from "@/services/view.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { ViewService } from "services/view.service";
 
 export interface IProjectViewIssuesFilter {
   // observables
@@ -35,7 +35,7 @@ export interface IProjectViewIssuesFilter {
     projectId: string,
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<void>;
 }
 
@@ -134,11 +134,9 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
     projectId: string,
     type: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    viewId: string | undefined = undefined
+    viewId: string
   ) => {
     try {
-      if (!viewId) throw new Error("View id is required");
-
       if (isEmpty(this.filters) || isEmpty(this.filters[viewId]) || isEmpty(filters)) return;
 
       const _filters = {
diff --git a/web/store/issue/project-views/issue.store.ts b/web/store/issue/project-views/issue.store.ts
index b85465ec81f..4fc365daabd 100644
--- a/web/store/issue/project-views/issue.store.ts
+++ b/web/store/issue/project-views/issue.store.ts
@@ -1,13 +1,13 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
+import { IssueService } from "@/services/issue/issue.service";
+import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueService } from "services/issue/issue.service";
 // types
 import { IIssueRootStore } from "../root.store";
-import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
 
 export interface IProjectViewIssues {
   // observable
@@ -21,33 +21,23 @@ export interface IProjectViewIssues {
     workspaceSlug: string,
     projectId: string,
     loadType: TLoader,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<TIssue[] | undefined>;
   createIssue: (
     workspaceSlug: string,
     projectId: string,
     data: Partial<TIssue>,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<TIssue | undefined>;
   updateIssue: (
     workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    viewId?: string | undefined
-  ) => Promise<void>;
-  removeIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    viewId?: string | undefined
-  ) => Promise<void>;
-  archiveIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<void>;
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string, viewId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string, viewId: string) => Promise<void>;
   quickAddIssue: (
     workspaceSlug: string,
     projectId: string,
@@ -124,15 +114,8 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
     return issues;
   }
 
-  fetchIssues = async (
-    workspaceSlug: string,
-    projectId: string,
-    loadType: TLoader = "init-loader",
-    viewId: string | undefined = undefined
-  ) => {
+  fetchIssues = async (workspaceSlug: string, projectId: string, loadType: TLoader = "init-loader", viewId: string) => {
     try {
-      if (!viewId) throw new Error("View Id is required");
-
       this.loader = loadType;
 
       const params = this.rootIssueStore?.projectViewIssuesFilter?.appliedFilters;
@@ -157,15 +140,8 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
     }
   };
 
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<TIssue>,
-    viewId: string | undefined = undefined
-  ) => {
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, viewId: string) => {
     try {
-      if (!viewId) throw new Error("View Id is required");
-
       const response = await this.rootIssueStore.projectIssues.createIssue(workspaceSlug, projectId, data);
 
       runInAction(() => {
@@ -174,7 +150,7 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
+      this.fetchIssues(workspaceSlug, projectId, "mutation", viewId);
       throw error;
     }
   };
@@ -184,27 +160,18 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    viewId: string | undefined = undefined
+    viewId: string
   ) => {
     try {
-      if (!viewId) throw new Error("View Id is required");
-
       await this.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
+      this.fetchIssues(workspaceSlug, projectId, "mutation", viewId);
       throw error;
     }
   };
 
-  removeIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    viewId: string | undefined = undefined
-  ) => {
+  removeIssue = async (workspaceSlug: string, projectId: string, issueId: string, viewId: string) => {
     try {
-      if (!viewId) throw new Error("View Id is required");
-
       await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
 
       const issueIndex = this.issues[viewId].findIndex((_issueId) => _issueId === issueId);
@@ -213,27 +180,20 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
           this.issues[viewId].splice(issueIndex, 1);
         });
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
+      this.fetchIssues(workspaceSlug, projectId, "mutation", viewId);
       throw error;
     }
   };
 
-  archiveIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    viewId: string | undefined = undefined
-  ) => {
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string, viewId: string) => {
     try {
-      if (!viewId) throw new Error("View Id is required");
-
       await this.rootIssueStore.projectIssues.archiveIssue(workspaceSlug, projectId, issueId);
 
       runInAction(() => {
         pull(this.issues[viewId], issueId);
       });
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
+      this.fetchIssues(workspaceSlug, projectId, "mutation", viewId);
       throw error;
     }
   };
@@ -263,7 +223,7 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation");
+      if (viewId) this.fetchIssues(workspaceSlug, projectId, "mutation", viewId);
       throw error;
     }
   };
diff --git a/web/store/issue/project/filter.store.ts b/web/store/issue/project/filter.store.ts
index f18654cde56..707f8e7057d 100644
--- a/web/store/issue/project/filter.store.ts
+++ b/web/store/issue/project/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { IssueFiltersService } from "@/services/issue_filter.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -17,10 +15,12 @@ import {
   IIssueFilters,
   TIssueParams,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { IssueFiltersService } from "services/issue_filter.service";
 
 export interface IProjectIssuesFilter {
   // observables
@@ -189,7 +189,6 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
             updatedDisplayFilters.group_by = "state";
           }
 
-
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
               set(
diff --git a/web/store/issue/project/issue.store.ts b/web/store/issue/project/issue.store.ts
index f3ee9478370..5c329749aa3 100644
--- a/web/store/issue/project/issue.store.ts
+++ b/web/store/issue/project/issue.store.ts
@@ -1,15 +1,15 @@
-import { action, makeObservable, observable, runInAction, computed } from "mobx";
+import concat from "lodash/concat";
+import pull from "lodash/pull";
 import set from "lodash/set";
 import update from "lodash/update";
-import pull from "lodash/pull";
-import concat from "lodash/concat";
+import { action, makeObservable, observable, runInAction, computed } from "mobx";
+// types
+import { TIssue, TGroupedIssues, TSubGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
 // base class
+import { IssueService, IssueArchiveService } from "@/services/issue";
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueService, IssueArchiveService } from "services/issue";
-// types
 import { IIssueRootStore } from "../root.store";
-import { TIssue, TGroupedIssues, TSubGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
 
 export interface IProjectIssues {
   // observable
@@ -117,6 +117,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       });
 
       this.rootStore.issues.addIssue(response);
+      this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
 
       return response;
     } catch (error) {
@@ -137,6 +138,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       });
 
       this.rootStore.issues.addIssue([response]);
+      this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
 
       return response;
     } catch (error) {
@@ -164,6 +166,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       });
 
       this.rootStore.issues.removeIssue(issueId);
+      this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
     } catch (error) {
       throw error;
     }
@@ -179,6 +182,8 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
         });
         pull(this.issues[projectId], issueId);
       });
+
+      this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
     } catch (error) {
       throw error;
     }
@@ -216,6 +221,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       });
 
       const response = await this.issueService.bulkDeleteIssues(workspaceSlug, projectId, { issue_ids: issueIds });
+      this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
 
       return response;
     } catch (error) {
diff --git a/web/store/issue/root.store.ts b/web/store/issue/root.store.ts
index def91d200e9..dc7c94f53c4 100644
--- a/web/store/issue/root.store.ts
+++ b/web/store/issue/root.store.ts
@@ -1,28 +1,28 @@
-import { autorun, makeObservable, observable } from "mobx";
 import isEmpty from "lodash/isEmpty";
+import { autorun, makeObservable, observable } from "mobx";
 // root store
+import { IWorkspaceMembership } from "@/store/member/workspace-member.store";
+import { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite } from "@plane/types";
 import { RootStore } from "../root.store";
 import { IStateStore, StateStore } from "../state.store";
 // issues data store
-import { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite } from "@plane/types";
-import { IIssueStore, IssueStore } from "./issue.store";
+import { IArchivedIssuesFilter, ArchivedIssuesFilter, IArchivedIssues, ArchivedIssues } from "./archived";
+import { ICycleIssuesFilter, CycleIssuesFilter, ICycleIssues, CycleIssues } from "./cycle";
+import { IDraftIssuesFilter, DraftIssuesFilter, IDraftIssues, DraftIssues } from "./draft";
 import { IIssueDetail, IssueDetail } from "./issue-details/root.store";
-import { IWorkspaceIssuesFilter, WorkspaceIssuesFilter, IWorkspaceIssues, WorkspaceIssues } from "./workspace";
+import { IIssueStore, IssueStore } from "./issue.store";
+import { ICalendarStore, CalendarStore } from "./issue_calendar_view.store";
+import { IIssueKanBanViewStore, IssueKanBanViewStore } from "./issue_kanban_view.store";
+import { IModuleIssuesFilter, ModuleIssuesFilter, IModuleIssues, ModuleIssues } from "./module";
 import { IProfileIssuesFilter, ProfileIssuesFilter, IProfileIssues, ProfileIssues } from "./profile";
 import { IProjectIssuesFilter, ProjectIssuesFilter, IProjectIssues, ProjectIssues } from "./project";
-import { ICycleIssuesFilter, CycleIssuesFilter, ICycleIssues, CycleIssues } from "./cycle";
-import { IModuleIssuesFilter, ModuleIssuesFilter, IModuleIssues, ModuleIssues } from "./module";
 import {
   IProjectViewIssuesFilter,
   ProjectViewIssuesFilter,
   IProjectViewIssues,
   ProjectViewIssues,
 } from "./project-views";
-import { IArchivedIssuesFilter, ArchivedIssuesFilter, IArchivedIssues, ArchivedIssues } from "./archived";
-import { IDraftIssuesFilter, DraftIssuesFilter, IDraftIssues, DraftIssues } from "./draft";
-import { IIssueKanBanViewStore, IssueKanBanViewStore } from "./issue_kanban_view.store";
-import { ICalendarStore, CalendarStore } from "./issue_calendar_view.store";
-import { IWorkspaceMembership } from "store/member/workspace-member.store";
+import { IWorkspaceIssuesFilter, WorkspaceIssuesFilter, IWorkspaceIssues, WorkspaceIssues } from "./workspace";
 
 export interface IIssueRootStore {
   currentUserId: string | undefined;
@@ -35,6 +35,7 @@ export interface IIssueRootStore {
   userId: string | undefined; // user profile detail Id
   stateMap: Record<string, IState> | undefined;
   stateDetails: IState[] | undefined;
+  workspaceStateDetails: IState[] | undefined;
   labelMap: Record<string, IIssueLabel> | undefined;
   workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined;
   memberMap: Record<string, IUserLite> | undefined;
@@ -89,6 +90,7 @@ export class IssueRootStore implements IIssueRootStore {
   userId: string | undefined = undefined;
   stateMap: Record<string, IState> | undefined = undefined;
   stateDetails: IState[] | undefined = undefined;
+  workspaceStateDetails: IState[] | undefined = undefined;
   labelMap: Record<string, IIssueLabel> | undefined = undefined;
   workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined = undefined;
   memberMap: Record<string, IUserLite> | undefined = undefined;
@@ -142,6 +144,7 @@ export class IssueRootStore implements IIssueRootStore {
       globalViewId: observable.ref,
       stateMap: observable,
       stateDetails: observable,
+      workspaceStateDetails: observable,
       labelMap: observable,
       memberMap: observable,
       workSpaceMemberRolesMap: observable,
@@ -163,6 +166,7 @@ export class IssueRootStore implements IIssueRootStore {
       if (rootStore.app.router.userId) this.userId = rootStore.app.router.userId;
       if (!isEmpty(rootStore?.state?.stateMap)) this.stateMap = rootStore?.state?.stateMap;
       if (!isEmpty(rootStore?.state?.projectStates)) this.stateDetails = rootStore?.state?.projectStates;
+      if (!isEmpty(rootStore?.state?.workspaceStates)) this.workspaceStateDetails = rootStore?.state?.workspaceStates;
       if (!isEmpty(rootStore?.label?.labelMap)) this.labelMap = rootStore?.label?.labelMap;
       if (!isEmpty(rootStore?.memberRoot?.workspace?.workspaceMemberMap))
         this.workSpaceMemberRolesMap = rootStore?.memberRoot?.workspace?.memberMap || undefined;
diff --git a/web/store/issue/workspace/filter.store.ts b/web/store/issue/workspace/filter.store.ts
index 76b861f4be7..101c3f0c74e 100644
--- a/web/store/issue/workspace/filter.store.ts
+++ b/web/store/issue/workspace/filter.store.ts
@@ -1,14 +1,12 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import isArray from "lodash/isArray";
 import isEmpty from "lodash/isEmpty";
-import set from "lodash/set";
 import pickBy from "lodash/pickBy";
-import isArray from "lodash/isArray";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
-import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
-// helpers
-import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
-// types
-import { IIssueRootStore } from "../root.store";
+import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
+import { WorkspaceService } from "@/services/workspace.service";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -18,10 +16,12 @@ import {
   TIssueParams,
   TStaticViewTypes,
 } from "@plane/types";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import { IIssueRootStore } from "../root.store";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 // services
-import { WorkspaceService } from "services/workspace.service";
 
 type TWorkspaceFilters = "all-issues" | "assigned" | "created" | "subscribed" | string;
 export interface IWorkspaceIssuesFilter {
@@ -37,7 +37,7 @@ export interface IWorkspaceIssuesFilter {
     projectId: string | undefined,
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<void>;
   //helper action
   getIssueFilters: (viewId: string | undefined) => IIssueFilters | undefined;
@@ -156,10 +156,9 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
     projectId: string | undefined,
     type: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters,
-    viewId: string | undefined = undefined
+    viewId: string
   ) => {
     try {
-      if (!viewId) throw new Error("View id is required");
       const issueFilters = this.getIssueFilters(viewId);
 
       if (!issueFilters || isEmpty(filters)) return;
diff --git a/web/store/issue/workspace/issue.store.ts b/web/store/issue/workspace/issue.store.ts
index b7fe43b3007..ad77ec0617b 100644
--- a/web/store/issue/workspace/issue.store.ts
+++ b/web/store/issue/workspace/issue.store.ts
@@ -1,14 +1,14 @@
-import { action, observable, makeObservable, computed, runInAction } from "mobx";
-import set from "lodash/set";
 import pull from "lodash/pull";
+import set from "lodash/set";
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // base class
+import { IssueService, IssueArchiveService } from "@/services/issue";
+import { WorkspaceService } from "@/services/workspace.service";
+import { TIssue, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { WorkspaceService } from "services/workspace.service";
-import { IssueService, IssueArchiveService } from "services/issue";
 // types
 import { IIssueRootStore } from "../root.store";
-import { TIssue, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
 
 export interface IWorkspaceIssues {
   // observable
@@ -23,27 +23,23 @@ export interface IWorkspaceIssues {
     workspaceSlug: string,
     projectId: string,
     data: Partial<TIssue>,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<TIssue | undefined>;
   updateIssue: (
     workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    viewId?: string | undefined
-  ) => Promise<void>;
-  removeIssue: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    viewId?: string | undefined
+    viewId: string
   ) => Promise<void>;
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string, viewId: string) => Promise<void>;
   archiveIssue: (
     workspaceSlug: string,
     projectId: string,
     issueId: string,
     viewId?: string | undefined
   ) => Promise<void>;
+  quickAddIssue: undefined;
 }
 
 export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssues {
@@ -61,6 +57,8 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
   issueService;
   issueArchiveService;
 
+  quickAddIssue = undefined;
+
   constructor(_rootStore: IIssueRootStore) {
     super(_rootStore);
 
@@ -139,15 +137,8 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
     }
   };
 
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<TIssue>,
-    viewId: string | undefined = undefined
-  ) => {
+  createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, viewId: string) => {
     try {
-      if (!viewId) throw new Error("View id is required");
-
       const uniqueViewId = `${workspaceSlug}_${viewId}`;
 
       const response = await this.issueService.createIssue(workspaceSlug, projectId, data);
@@ -169,11 +160,9 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
     projectId: string,
     issueId: string,
     data: Partial<TIssue>,
-    viewId: string | undefined = undefined
+    viewId: string
   ) => {
     try {
-      if (!viewId) throw new Error("View id is required");
-
       this.rootStore.issues.updateIssue(issueId, data);
       await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
     } catch (error) {
@@ -182,15 +171,8 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
     }
   };
 
-  removeIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    viewId: string | undefined = undefined
-  ) => {
+  removeIssue = async (workspaceSlug: string, projectId: string, issueId: string, viewId: string) => {
     try {
-      if (!viewId) throw new Error("View id is required");
-
       const uniqueViewId = `${workspaceSlug}_${viewId}`;
 
       await this.issueService.deleteIssue(workspaceSlug, projectId, issueId);
diff --git a/web/store/label.store.ts b/web/store/label.store.ts
index 769ef16a9a3..b91b9db1505 100644
--- a/web/store/label.store.ts
+++ b/web/store/label.store.ts
@@ -1,13 +1,13 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // services
-import { IssueLabelService } from "services/issue";
+import { buildTree } from "@/helpers/array.helper";
+import { IssueLabelService } from "@/services/issue";
 // helpers
-import { buildTree } from "helpers/array.helper";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { IIssueLabel, IIssueLabelTree } from "@plane/types";
 
 export interface ILabelStore {
diff --git a/web/store/member/index.ts b/web/store/member/index.ts
index a7eba3971d5..65b35f76a36 100644
--- a/web/store/member/index.ts
+++ b/web/store/member/index.ts
@@ -1,9 +1,9 @@
 import { action, makeObservable, observable } from "mobx";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 import { IUserLite } from "@plane/types";
-import { IWorkspaceMemberStore, WorkspaceMemberStore } from "./workspace-member.store";
 import { IProjectMemberStore, ProjectMemberStore } from "./project-member.store";
+import { IWorkspaceMemberStore, WorkspaceMemberStore } from "./workspace-member.store";
 
 export interface IMemberRootStore {
   // observables
diff --git a/web/store/member/project-member.store.ts b/web/store/member/project-member.store.ts
index 71e2e2dcdd0..02a00375a2e 100644
--- a/web/store/member/project-member.store.ts
+++ b/web/store/member/project-member.store.ts
@@ -1,17 +1,17 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // services
-import { ProjectMemberService } from "services/project";
+import { EUserProjectRoles } from "@/constants/project";
+import { ProjectMemberService } from "@/services/project";
 // types
-import { RootStore } from "store/root.store";
+import { IRouterStore } from "@/store/application/router.store";
+import { RootStore } from "@/store/root.store";
+import { IUserRootStore } from "@/store/user";
 import { IProjectBulkAddFormData, IProjectMember, IProjectMembership, IUserLite } from "@plane/types";
 // constants
-import { EUserProjectRoles } from "constants/project";
 import { IMemberRootStore } from ".";
-import { IRouterStore } from "store/application/router.store";
-import { IUserRootStore } from "store/user";
 
 interface IProjectMemberDetails {
   id: string;
diff --git a/web/store/member/workspace-member.store.ts b/web/store/member/workspace-member.store.ts
index 4a696bfd289..24e5061d600 100644
--- a/web/store/member/workspace-member.store.ts
+++ b/web/store/member/workspace-member.store.ts
@@ -1,17 +1,17 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // services
-import { WorkspaceService } from "services/workspace.service";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+import { WorkspaceService } from "@/services/workspace.service";
 // types
-import { RootStore } from "store/root.store";
+import { IRouterStore } from "@/store/application/router.store";
+import { RootStore } from "@/store/root.store";
+import { IUserRootStore } from "@/store/user";
 import { IWorkspaceBulkInviteFormData, IWorkspaceMember, IWorkspaceMemberInvitation } from "@plane/types";
 // constants
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { IRouterStore } from "store/application/router.store";
 import { IMemberRootStore } from ".";
-import { IUserRootStore } from "store/user";
 
 export interface IWorkspaceMembership {
   id: string;
@@ -127,9 +127,8 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
     const searchedWorkspaceMemberIds = workspaceMemberIds?.filter((userId) => {
       const memberDetails = this.getWorkspaceMemberDetails(userId);
       if (!memberDetails) return false;
-      const memberSearchQuery = `${memberDetails.member.first_name} ${memberDetails.member.last_name} ${
-        memberDetails.member.display_name
-      } ${memberDetails.member.email ?? ""}`;
+      const memberSearchQuery = `${memberDetails.member.first_name} ${memberDetails.member.last_name} ${memberDetails
+        .member?.display_name} ${memberDetails.member.email ?? ""}`;
       return memberSearchQuery.toLowerCase()?.includes(searchQuery.toLowerCase());
     });
     return searchedWorkspaceMemberIds;
diff --git a/web/store/mention.store.ts b/web/store/mention.store.ts
index 872efeb4122..d523a9d55b8 100644
--- a/web/store/mention.store.ts
+++ b/web/store/mention.store.ts
@@ -1,8 +1,8 @@
+import { IMentionHighlight, IMentionSuggestion } from "@plane/lite-text-editor";
 import { computed, makeObservable } from "mobx";
 // editor
-import { IMentionHighlight, IMentionSuggestion } from "@plane/lite-text-editor";
 // types
-import { RootStore } from "store/root.store";
+import { RootStore } from "@/store/root.store";
 
 export interface IMentionStore {
   // computed
diff --git a/web/store/module.store.ts b/web/store/module.store.ts
index 2b4522cd09a..1a2896aa25a 100644
--- a/web/store/module.store.ts
+++ b/web/store/module.store.ts
@@ -1,13 +1,17 @@
-import { action, computed, observable, makeObservable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
-// services
-import { ProjectService } from "services/project";
-import { ModuleService } from "services/module.service";
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // types
 import { IModule, ILinkDetails } from "@plane/types";
-import { RootStore } from "store/root.store";
+// helpers
+import { orderModules, shouldFilterModule } from "@/helpers/module.helper";
+// services
+import { ModuleService } from "@/services/module.service";
+import { ModuleArchiveService } from "@/services/module_archive.service";
+import { ProjectService } from "@/services/project";
+// store
+import { RootStore } from "@/store/root.store";
 
 export interface IModuleStore {
   //Loaders
@@ -17,7 +21,10 @@ export interface IModuleStore {
   moduleMap: Record<string, IModule>;
   // computed
   projectModuleIds: string[] | null;
+  projectArchivedModuleIds: string[] | null;
   // computed actions
+  getFilteredModuleIds: (projectId: string) => string[] | null;
+  getFilteredArchivedModuleIds: (projectId: string) => string[] | null;
   getModuleById: (moduleId: string) => IModule | null;
   getModuleNameById: (moduleId: string) => string;
   getProjectModuleIds: (projectId: string) => string[] | null;
@@ -25,6 +32,7 @@ export interface IModuleStore {
   // fetch
   fetchWorkspaceModules: (workspaceSlug: string) => Promise<IModule[]>;
   fetchModules: (workspaceSlug: string, projectId: string) => Promise<undefined | IModule[]>;
+  fetchArchivedModules: (workspaceSlug: string, projectId: string) => Promise<undefined | IModule[]>;
   fetchModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
   // crud
   createModule: (workspaceSlug: string, projectId: string, data: Partial<IModule>) => Promise<IModule>;
@@ -52,6 +60,9 @@ export interface IModuleStore {
   // favorites
   addModuleToFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
   removeModuleFromFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  // archive
+  archiveModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  restoreModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
 }
 
 export class ModulesStore implements IModuleStore {
@@ -65,6 +76,7 @@ export class ModulesStore implements IModuleStore {
   // services
   projectService;
   moduleService;
+  moduleArchiveService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
@@ -74,9 +86,11 @@ export class ModulesStore implements IModuleStore {
       fetchedMap: observable,
       // computed
       projectModuleIds: computed,
+      projectArchivedModuleIds: computed,
       // actions
       fetchWorkspaceModules: action,
       fetchModules: action,
+      fetchArchivedModules: action,
       fetchModuleDetails: action,
       createModule: action,
       updateModuleDetails: action,
@@ -86,6 +100,8 @@ export class ModulesStore implements IModuleStore {
       deleteModuleLink: action,
       addModuleToFavorites: action,
       removeModuleFromFavorites: action,
+      archiveModule: action,
+      restoreModule: action,
     });
 
     this.rootStore = _rootStore;
@@ -93,6 +109,7 @@ export class ModulesStore implements IModuleStore {
     // services
     this.projectService = new ProjectService();
     this.moduleService = new ModuleService();
+    this.moduleArchiveService = new ModuleArchiveService();
   }
 
   // computed
@@ -102,12 +119,69 @@ export class ModulesStore implements IModuleStore {
   get projectModuleIds() {
     const projectId = this.rootStore.app.router.projectId;
     if (!projectId || !this.fetchedMap[projectId]) return null;
-    let projectModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId);
+    let projectModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId && !m?.archived_at);
     projectModules = sortBy(projectModules, [(m) => m.sort_order]);
     const projectModuleIds = projectModules.map((m) => m.id);
     return projectModuleIds || null;
   }
 
+  /**
+   * get all archived module ids for the current project
+   */
+  get projectArchivedModuleIds() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let archivedModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId && !!m?.archived_at);
+    archivedModules = sortBy(archivedModules, [(m) => m.sort_order]);
+    const projectModuleIds = archivedModules.map((m) => m.id);
+    return projectModuleIds || null;
+  }
+
+  /**
+   * @description returns filtered module ids based on display filters and filters
+   * @param {TModuleDisplayFilters} displayFilters
+   * @param {TModuleFilters} filters
+   * @returns {string[] | null}
+   */
+  getFilteredModuleIds = computedFn((projectId: string) => {
+    const displayFilters = this.rootStore.moduleFilter.getDisplayFiltersByProjectId(projectId);
+    const filters = this.rootStore.moduleFilter.getFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.moduleFilter.searchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let modules = Object.values(this.moduleMap ?? {}).filter(
+      (m) =>
+        m.project_id === projectId &&
+        !m.archived_at &&
+        m.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterModule(m, displayFilters ?? {}, filters ?? {})
+    );
+    modules = orderModules(modules, displayFilters?.order_by);
+    const moduleIds = modules.map((m) => m.id);
+    return moduleIds;
+  });
+
+  /**
+   * @description returns filtered archived module ids based on display filters and filters
+   * @param {string} projectId
+   * @returns {string[] | null}
+   */
+  getFilteredArchivedModuleIds = computedFn((projectId: string) => {
+    const displayFilters = this.rootStore.moduleFilter.getDisplayFiltersByProjectId(projectId);
+    const filters = this.rootStore.moduleFilter.getArchivedFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.moduleFilter.archivedModulesSearchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let modules = Object.values(this.moduleMap ?? {}).filter(
+      (m) =>
+        m.project_id === projectId &&
+        !!m.archived_at &&
+        m.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterModule(m, displayFilters ?? {}, filters ?? {})
+    );
+    modules = orderModules(modules, displayFilters?.order_by);
+    const moduleIds = modules.map((m) => m.id);
+    return moduleIds;
+  });
+
   /**
    * @description get module by id
    * @param moduleId
@@ -129,7 +203,7 @@ export class ModulesStore implements IModuleStore {
   getProjectModuleIds = computedFn((projectId: string) => {
     if (!this.fetchedMap[projectId]) return null;
 
-    let projectModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId);
+    let projectModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId && !m.archived_at);
     projectModules = sortBy(projectModules, [(m) => m.sort_order]);
     const projectModuleIds = projectModules.map((m) => m.id);
     return projectModuleIds;
@@ -175,6 +249,31 @@ export class ModulesStore implements IModuleStore {
     }
   };
 
+  /**
+   * @description fetch all archived modules
+   * @param workspaceSlug
+   * @param projectId
+   * @returns IModule[]
+   */
+  fetchArchivedModules = async (workspaceSlug: string, projectId: string) => {
+    this.loader = true;
+    return await this.moduleArchiveService
+      .getArchivedModules(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          response.forEach((module) => {
+            set(this.moduleMap, [module.id], { ...this.moduleMap[module.id], ...module });
+          });
+          this.loader = false;
+        });
+        return response;
+      })
+      .catch(() => {
+        this.loader = false;
+        return undefined;
+      });
+  };
+
   /**
    * @description fetch module details
    * @param workspaceSlug
@@ -361,4 +460,48 @@ export class ModulesStore implements IModuleStore {
       });
     }
   };
+
+  /**
+   * @description archives a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns
+   */
+  archiveModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    const moduleDetails = this.getModuleById(moduleId);
+    if (moduleDetails?.archived_at) return;
+    await this.moduleArchiveService
+      .archiveModule(workspaceSlug, projectId, moduleId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.moduleMap, [moduleId, "archived_at"], response.archived_at);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to archive module in module store", error);
+      });
+  };
+
+  /**
+   * @description restores a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns
+   */
+  restoreModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    const moduleDetails = this.getModuleById(moduleId);
+    if (!moduleDetails?.archived_at) return;
+    await this.moduleArchiveService
+      .restoreModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        runInAction(() => {
+          set(this.moduleMap, [moduleId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to restore module in module store", error);
+      });
+  };
 }
diff --git a/web/store/module_filter.store.ts b/web/store/module_filter.store.ts
new file mode 100644
index 00000000000..5b46e17321c
--- /dev/null
+++ b/web/store/module_filter.store.ts
@@ -0,0 +1,181 @@
+import set from "lodash/set";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import { TModuleDisplayFilters, TModuleFilters, TModuleFiltersByState } from "@plane/types";
+// store
+import { RootStore } from "@/store/root.store";
+
+export interface IModuleFilterStore {
+  // observables
+  displayFilters: Record<string, TModuleDisplayFilters>;
+  filters: Record<string, TModuleFiltersByState>;
+  searchQuery: string;
+  archivedModulesSearchQuery: string;
+  // computed
+  currentProjectDisplayFilters: TModuleDisplayFilters | undefined;
+  currentProjectFilters: TModuleFilters | undefined;
+  currentProjectArchivedFilters: TModuleFilters | undefined;
+  // computed functions
+  getDisplayFiltersByProjectId: (projectId: string) => TModuleDisplayFilters | undefined;
+  getFiltersByProjectId: (projectId: string) => TModuleFilters | undefined;
+  getArchivedFiltersByProjectId: (projectId: string) => TModuleFilters | undefined;
+  // actions
+  updateDisplayFilters: (projectId: string, displayFilters: TModuleDisplayFilters) => void;
+  updateFilters: (projectId: string, filters: TModuleFilters, state?: keyof TModuleFiltersByState) => void;
+  updateSearchQuery: (query: string) => void;
+  updateArchivedModulesSearchQuery: (query: string) => void;
+  clearAllFilters: (projectId: string, state?: keyof TModuleFiltersByState) => void;
+}
+
+export class ModuleFilterStore implements IModuleFilterStore {
+  // observables
+  displayFilters: Record<string, TModuleDisplayFilters> = {};
+  filters: Record<string, TModuleFiltersByState> = {};
+  searchQuery: string = "";
+  archivedModulesSearchQuery: string = "";
+  // root store
+  rootStore: RootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      archivedModulesSearchQuery: observable.ref,
+      // computed
+      currentProjectDisplayFilters: computed,
+      currentProjectFilters: computed,
+      currentProjectArchivedFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      updateArchivedModulesSearchQuery: action,
+      clearAllFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // initialize display filters of the current project
+    reaction(
+      () => this.rootStore.app.router.projectId,
+      (projectId) => {
+        if (!projectId) return;
+        this.initProjectModuleFilters(projectId);
+      }
+    );
+  }
+
+  /**
+   * @description get display filters of the current project
+   */
+  get currentProjectDisplayFilters() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId) return;
+    return this.displayFilters[projectId];
+  }
+
+  /**
+   * @description get filters of the current project
+   */
+  get currentProjectFilters() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId]?.default ?? {};
+  }
+
+  /**
+   * @description get archived filters of the current project
+   */
+  get currentProjectArchivedFilters() {
+    const projectId = this.rootStore.app.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId].archived;
+  }
+
+  /**
+   * @description get display filters of a project by projectId
+   * @param {string} projectId
+   */
+  getDisplayFiltersByProjectId = computedFn((projectId: string) => this.displayFilters[projectId]);
+
+  /**
+   * @description get filters of a project by projectId
+   * @param {string} projectId
+   */
+  getFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId]?.default ?? {});
+
+  /**
+   * @description get archived filters of a project by projectId
+   * @param {string} projectId
+   */
+  getArchivedFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId].archived);
+
+  /**
+   * @description initialize display filters and filters of a project
+   * @param {string} projectId
+   */
+  initProjectModuleFilters = (projectId: string) => {
+    const displayFilters = this.getDisplayFiltersByProjectId(projectId);
+    runInAction(() => {
+      this.displayFilters[projectId] = {
+        favorites: displayFilters?.favorites || false,
+        layout: displayFilters?.layout || "list",
+        order_by: displayFilters?.order_by || "name",
+      };
+      this.filters[projectId] = this.filters[projectId] ?? {
+        default: {},
+        archived: {},
+      };
+    });
+  };
+
+  /**
+   * @description update display filters of a project
+   * @param {string} projectId
+   * @param {TModuleDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (projectId: string, displayFilters: TModuleDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [projectId, key], displayFilters[key as keyof TModuleDisplayFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update filters of a project
+   * @param {string} projectId
+   * @param {TModuleFilters} filters
+   */
+  updateFilters = (projectId: string, filters: TModuleFilters, state: keyof TModuleFiltersByState = "default") => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [projectId, state, key], filters[key as keyof TModuleFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
+  /**
+   * @description update archived search query
+   * @param {string} query
+   */
+  updateArchivedModulesSearchQuery = (query: string) => (this.archivedModulesSearchQuery = query);
+
+  /**
+   * @description clear all filters of a project
+   * @param {string} projectId
+   */
+  clearAllFilters = (projectId: string, state: keyof TModuleFiltersByState = "default") => {
+    runInAction(() => {
+      this.filters[projectId][state] = {};
+    });
+  };
+}
diff --git a/web/store/page.store.ts b/web/store/page.store.ts
index fa5970e49ae..60b8e3c6910 100644
--- a/web/store/page.store.ts
+++ b/web/store/page.store.ts
@@ -1,7 +1,7 @@
 import { action, makeObservable, observable, reaction, runInAction } from "mobx";
 
+import { PageService } from "@/services/page.service";
 import { IIssueLabel, IPage } from "@plane/types";
-import { PageService } from "services/page.service";
 
 import { RootStore } from "./root.store";
 
@@ -10,7 +10,7 @@ export interface IPageStore {
   access: number;
   archived_at: string | null;
   color: string;
-  created_at: Date;
+  created_at: string | null;
   created_by: string;
   description: string;
   description_html: string;
@@ -23,7 +23,7 @@ export interface IPageStore {
   name: string;
   owned_by: string;
   project: string;
-  updated_at: Date;
+  updated_at: string | null;
   updated_by: string;
   workspace: string;
 
@@ -35,7 +35,7 @@ export interface IPageStore {
   addToFavorites: () => Promise<void>;
   removeFromFavorites: () => Promise<void>;
   updateName: (name: string) => Promise<void>;
-  updateDescription: (description: string) => Promise<void>;
+  updateDescription: (description: string) => void;
 
   // Reactions
   disposers: Array<() => void>;
@@ -52,7 +52,7 @@ export class PageStore implements IPageStore {
   isSubmitting: "submitting" | "submitted" | "saved" = "saved";
   archived_at: string | null;
   color: string;
-  created_at: Date;
+  created_at: string | null;
   created_by: string;
   description: string;
   description_html = "";
@@ -64,7 +64,7 @@ export class PageStore implements IPageStore {
   name = "";
   owned_by: string;
   project: string;
-  updated_at: Date;
+  updated_at: string | null;
   updated_by: string;
   workspace: string;
   oldName = "";
@@ -89,14 +89,14 @@ export class PageStore implements IPageStore {
       addToFavorites: action,
       removeFromFavorites: action,
       updateName: action,
-      updateDescription: action,
+      updateDescription: action.bound,
       setIsSubmitting: action,
       cleanup: action,
     });
     this.created_by = page?.created_by || "";
-    this.created_at = page?.created_at || new Date();
+    this.created_at = page?.created_at ?? "";
     this.color = page?.color || "";
-    this.archived_at = page?.archived_at || null;
+    this.archived_at = page?.archived_at ?? null;
     this.name = page?.name || "";
     this.description = page?.description || "";
     this.description_stripped = page?.description_stripped || "";
@@ -104,7 +104,7 @@ export class PageStore implements IPageStore {
     this.access = page?.access || 0;
     this.workspace = page?.workspace || "";
     this.updated_by = page?.updated_by || "";
-    this.updated_at = page?.updated_at || new Date();
+    this.updated_at = page?.updated_at ?? "";
     this.project = page?.project || "";
     this.owned_by = page?.owned_by || "";
     this.labels = page?.labels || [];
@@ -166,7 +166,7 @@ export class PageStore implements IPageStore {
     this.name = name;
   });
 
-  updateDescription = action("updateDescription", async (description_html: string) => {
+  updateDescription = action("updateDescription", (description_html: string) => {
     const { projectId, workspaceSlug } = this.rootStore.app.router;
     if (!projectId || !workspaceSlug) return;
 
diff --git a/web/store/project-page.store.ts b/web/store/project-page.store.ts
index 072605bc34f..0e451602d6f 100644
--- a/web/store/project-page.store.ts
+++ b/web/store/project-page.store.ts
@@ -1,13 +1,15 @@
-import { makeObservable, observable, runInAction, action, computed } from "mobx";
+import { isThisWeek, isToday, isYesterday } from "date-fns";
 import { set } from "lodash";
+import { makeObservable, observable, runInAction, action, computed } from "mobx";
 // services
-import { PageService } from "services/page.service";
+import { PageService } from "@/services/page.service";
 // store
-import { PageStore, IPageStore } from "store/page.store";
+import { PageStore, IPageStore } from "@/store/page.store";
 // types
 import { IPage, IRecentPages } from "@plane/types";
 import { RootStore } from "./root.store";
-import { isThisWeek, isToday, isYesterday } from "date-fns";
+//helpers
+import { getDate } from "helpers/date-time.helper";
 
 export interface IProjectPageStore {
   loader: boolean;
@@ -73,8 +75,8 @@ export class ProjectPageStore implements IProjectPageStore {
 
     const allProjectIds = Object.keys(this.projectPageMap[projectId]);
     return allProjectIds.sort((a, b) => {
-      const dateA = new Date(this.projectPageMap[projectId][a].created_at).getTime();
-      const dateB = new Date(this.projectPageMap[projectId][b].created_at).getTime();
+      const dateA = getDate(this.projectPageMap[projectId]?.[a]?.created_at)?.getTime() ?? 0;
+      const dateB = getDate(this.projectPageMap[projectId]?.[b]?.created_at)?.getTime() ?? 0;
       return dateB - dateA;
     });
   }
@@ -84,8 +86,8 @@ export class ProjectPageStore implements IProjectPageStore {
     if (!projectId || !this.projectArchivedPageMap[projectId]) return [];
     const archivedPages = Object.keys(this.projectArchivedPageMap[projectId]);
     return archivedPages.sort((a, b) => {
-      const dateA = new Date(this.projectArchivedPageMap[projectId][a].created_at).getTime();
-      const dateB = new Date(this.projectArchivedPageMap[projectId][b].created_at).getTime();
+      const dateA = getDate(this.projectArchivedPageMap[projectId]?.[a]?.created_at)?.getTime() ?? 0;
+      const dateB = getDate(this.projectArchivedPageMap[projectId]?.[b]?.created_at)?.getTime() ?? 0;
       return dateB - dateA;
     });
   }
@@ -126,26 +128,24 @@ export class ProjectPageStore implements IProjectPageStore {
     const projectId = this.rootStore.app.router.projectId;
     if (!this.projectPageIds || !projectId) return;
 
-    const today: string[] = this.projectPageIds.filter((page) =>
-      isToday(new Date(this.projectPageMap[projectId][page].updated_at))
-    );
+    const today: string[] = this.projectPageIds.filter((page) => {
+      const updatedAt = getDate(this.projectPageMap[projectId]?.[page]?.updated_at);
+      return updatedAt && isToday(updatedAt);
+    });
 
-    const yesterday: string[] = this.projectPageIds.filter((page) =>
-      isYesterday(new Date(this.projectPageMap[projectId][page].updated_at))
-    );
+    const yesterday: string[] = this.projectPageIds.filter((page) => {
+      const updatedAt = getDate(this.projectPageMap[projectId]?.[page]?.updated_at);
+      return updatedAt && isYesterday(updatedAt);
+    });
 
     const this_week: string[] = this.projectPageIds.filter((page) => {
-      const pageUpdatedAt = this.projectPageMap[projectId][page].updated_at;
-      return (
-        isThisWeek(new Date(pageUpdatedAt)) &&
-        !isToday(new Date(pageUpdatedAt)) &&
-        !isYesterday(new Date(pageUpdatedAt))
-      );
+      const pageUpdatedAt = getDate(this.projectPageMap[projectId]?.[page]?.updated_at);
+      return pageUpdatedAt && isThisWeek(pageUpdatedAt) && !isToday(pageUpdatedAt) && !isYesterday(pageUpdatedAt);
     });
 
     const older: string[] = this.projectPageIds.filter((page) => {
-      const pageUpdatedAt = this.projectPageMap[projectId][page].updated_at;
-      return !isThisWeek(new Date(pageUpdatedAt)) && !isYesterday(new Date(pageUpdatedAt));
+      const pageUpdatedAt = getDate(this.projectPageMap[projectId]?.[page]?.updated_at);
+      return pageUpdatedAt && !isThisWeek(pageUpdatedAt) && !isYesterday(pageUpdatedAt);
     });
 
     return { today, yesterday, this_week, older };
diff --git a/web/store/project-view.store.ts b/web/store/project-view.store.ts
index dd5c4a034ac..5520ca870dd 100644
--- a/web/store/project-view.store.ts
+++ b/web/store/project-view.store.ts
@@ -2,8 +2,8 @@ import { set } from "lodash";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
 // services
-import { ViewService } from "services/view.service";
-import { RootStore } from "store/root.store";
+import { ViewService } from "@/services/view.service";
+import { RootStore } from "@/store/root.store";
 // types
 import { IProjectView } from "@plane/types";
 
diff --git a/web/store/project/index.ts b/web/store/project/index.ts
index 696b3c802aa..77102b11564 100644
--- a/web/store/project/index.ts
+++ b/web/store/project/index.ts
@@ -1,18 +1,22 @@
-import { IProjectStore, ProjectStore } from "./project.store";
+import { RootStore } from "@/store/root.store";
 import { IProjectPublishStore, ProjectPublishStore } from "./project-publish.store";
-import { RootStore } from "store/root.store";
+import { IProjectStore, ProjectStore } from "./project.store";
+import { IProjectFilterStore, ProjectFilterStore } from "./project_filter.store";
 
 export interface IProjectRootStore {
   project: IProjectStore;
+  projectFilter: IProjectFilterStore;
   publish: IProjectPublishStore;
 }
 
 export class ProjectRootStore {
   project: IProjectStore;
+  projectFilter: IProjectFilterStore;
   publish: IProjectPublishStore;
 
   constructor(_root: RootStore) {
     this.project = new ProjectStore(_root);
+    this.projectFilter = new ProjectFilterStore(_root);
     this.publish = new ProjectPublishStore(this);
   }
 }
diff --git a/web/store/project/project-publish.store.ts b/web/store/project/project-publish.store.ts
index 3a94b861147..230090d98f2 100644
--- a/web/store/project/project-publish.store.ts
+++ b/web/store/project/project-publish.store.ts
@@ -1,9 +1,9 @@
-import { observable, action, makeObservable, runInAction } from "mobx";
 import set from "lodash/set";
+import { observable, action, makeObservable, runInAction } from "mobx";
 // types
+import { ProjectPublishService } from "@/services/project";
 import { ProjectRootStore } from "./";
 // services
-import { ProjectPublishService } from "services/project";
 
 export type TProjectPublishViews = "list" | "gantt" | "kanban" | "calendar" | "spreadsheet";
 
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
index 176c3a3649f..a12039ba67e 100644
--- a/web/store/project/project.store.ts
+++ b/web/store/project/project.store.ts
@@ -1,47 +1,52 @@
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // types
-import { RootStore } from "../root.store";
 import { IProject } from "@plane/types";
+// helpers
+import { orderProjects, shouldFilterProject } from "@/helpers/project.helper";
 // services
-import { IssueLabelService, IssueService } from "services/issue";
-import { ProjectService, ProjectStateService } from "services/project";
-import { cloneDeep, update } from "lodash";
+import { IssueLabelService, IssueService } from "@/services/issue";
+import { ProjectService, ProjectStateService, ProjectArchiveService } from "@/services/project";
+// store
+import { RootStore } from "../root.store";
+
 export interface IProjectStore {
   // observables
-  searchQuery: string;
   projectMap: {
     [projectId: string]: IProject; // projectId: project Info
   };
   // computed
-  searchedProjects: string[];
-  workspaceProjectIds: string[] | null;
+  filteredProjectIds: string[] | undefined;
+  workspaceProjectIds: string[] | undefined;
+  archivedProjectIds: string[] | undefined;
+  totalProjectIds: string[] | undefined;
   joinedProjectIds: string[];
   favoriteProjectIds: string[];
   currentProjectDetails: IProject | undefined;
   // actions
-  setSearchQuery: (query: string) => void;
   getProjectById: (projectId: string) => IProject | null;
   getProjectIdentifierById: (projectId: string) => string;
   // fetch actions
   fetchProjects: (workspaceSlug: string) => Promise<IProject[]>;
-  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<IProject>;
   // favorites actions
   addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
   // project-view action
   updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
   // CRUD actions
-  createProject: (workspaceSlug: string, data: any) => Promise<any>;
-  updateProject: (workspaceSlug: string, projectId: string, data: Partial<IProject>) => Promise<any>;
+  createProject: (workspaceSlug: string, data: Partial<IProject>) => Promise<IProject>;
+  updateProject: (workspaceSlug: string, projectId: string, data: Partial<IProject>) => Promise<IProject>;
   deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  // archive actions
+  archiveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  restoreProject: (workspaceSlug: string, projectId: string) => Promise<void>;
 }
 
 export class ProjectStore implements IProjectStore {
   // observables
-  searchQuery: string = "";
   projectMap: {
     [projectId: string]: IProject; // projectId: project Info
   } = {};
@@ -49,6 +54,7 @@ export class ProjectStore implements IProjectStore {
   rootStore: RootStore;
   // service
   projectService;
+  projectArchiveService;
   issueLabelService;
   issueService;
   stateService;
@@ -56,16 +62,15 @@ export class ProjectStore implements IProjectStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
-      searchQuery: observable.ref,
       projectMap: observable,
       // computed
-      searchedProjects: computed,
+      filteredProjectIds: computed,
       workspaceProjectIds: computed,
+      archivedProjectIds: computed,
+      totalProjectIds: computed,
       currentProjectDetails: computed,
       joinedProjectIds: computed,
       favoriteProjectIds: computed,
-      // actions
-      setSearchQuery: action.bound,
       // fetch actions
       fetchProjects: action,
       fetchProjectDetails: action,
@@ -82,23 +87,31 @@ export class ProjectStore implements IProjectStore {
     this.rootStore = _rootStore;
     // services
     this.projectService = new ProjectService();
+    this.projectArchiveService = new ProjectArchiveService();
     this.issueService = new IssueService();
     this.issueLabelService = new IssueLabelService();
     this.stateService = new ProjectStateService();
   }
 
   /**
-   * Returns searched projects based on search query
+   * @description returns filtered projects based on filters and search query
    */
-  get searchedProjects() {
+  get filteredProjectIds() {
     const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
-    if (!workspaceDetails) return [];
-    const workspaceProjects = Object.values(this.projectMap).filter(
+    const {
+      currentWorkspaceDisplayFilters: displayFilters,
+      currentWorkspaceFilters: filters,
+      searchQuery,
+    } = this.rootStore.projectRoot.projectFilter;
+    if (!workspaceDetails || !displayFilters || !filters) return;
+    let workspaceProjects = Object.values(this.projectMap).filter(
       (p) =>
         p.workspace === workspaceDetails.id &&
-        (p.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
-          p.identifier.toLowerCase().includes(this.searchQuery.toLowerCase()))
+        (p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          p.identifier.toLowerCase().includes(searchQuery.toLowerCase())) &&
+        shouldFilterProject(p, displayFilters, filters)
     );
+    workspaceProjects = orderProjects(workspaceProjects, displayFilters.order_by);
     return workspaceProjects.map((p) => p.id);
   }
 
@@ -107,12 +120,43 @@ export class ProjectStore implements IProjectStore {
    */
   get workspaceProjectIds() {
     const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
-    if (!workspaceDetails) return null;
-    const workspaceProjects = Object.values(this.projectMap).filter((p) => p.workspace === workspaceDetails.id);
+    if (!workspaceDetails) return;
+    const workspaceProjects = Object.values(this.projectMap).filter(
+      (p) => p.workspace === workspaceDetails.id && !p.archived_at
+    );
     const projectIds = workspaceProjects.map((p) => p.id);
     return projectIds ?? null;
   }
 
+  /**
+   * Returns archived project IDs belong to current workspace.
+   */
+  get archivedProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return;
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "archived_at");
+
+    const projectIds = projects
+      .filter((project) => project.workspace === currentWorkspace.id && !!project.archived_at)
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  /**
+   * Returns total project IDs belong to the current workspace
+   */
+  // workspaceProjectIds + archivedProjectIds
+  get totalProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return;
+
+    const workspaceProjects = this.workspaceProjectIds ?? [];
+    const archivedProjects = this.archivedProjectIds ?? [];
+    return [...workspaceProjects, ...archivedProjects];
+  }
+
   /**
    * Returns current project details
    */
@@ -132,7 +176,7 @@ export class ProjectStore implements IProjectStore {
     projects = sortBy(projects, "sort_order");
 
     const projectIds = projects
-      .filter((project) => project.workspace === currentWorkspace.id && project.is_member)
+      .filter((project) => project.workspace === currentWorkspace.id && project.is_member && !project.archived_at)
       .map((project) => project.id);
     return projectIds;
   }
@@ -148,19 +192,14 @@ export class ProjectStore implements IProjectStore {
     projects = sortBy(projects, "created_at");
 
     const projectIds = projects
-      .filter((project) => project.workspace === currentWorkspace.id && project.is_member && project.is_favorite)
+      .filter(
+        (project) =>
+          project.workspace === currentWorkspace.id && project.is_member && project.is_favorite && !project.archived_at
+      )
       .map((project) => project.id);
     return projectIds;
   }
 
-  /**
-   * Sets search query
-   * @param query
-   */
-  setSearchQuery = (query: string) => {
-    this.searchQuery = query;
-  };
-
   /**
    * get Workspace projects using workspace slug
    * @param workspaceSlug
@@ -355,4 +394,48 @@ export class ProjectStore implements IProjectStore {
       this.fetchProjects(workspaceSlug);
     }
   };
+
+  /**
+   * Archives a project from specific workspace and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  archiveProject = async (workspaceSlug: string, projectId: string) => {
+    await this.projectArchiveService
+      .archiveProject(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.projectMap, [projectId, "archived_at"], response.archived_at);
+        });
+      })
+      .catch((error) => {
+        console.log("Failed to archive project from project store");
+        this.fetchProjects(workspaceSlug);
+        this.fetchProjectDetails(workspaceSlug, projectId);
+        throw error;
+      });
+  };
+
+  /**
+   * Restores a project from specific workspace and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  restoreProject = async (workspaceSlug: string, projectId: string) => {
+    await this.projectArchiveService
+      .restoreProject(workspaceSlug, projectId)
+      .then(() => {
+        runInAction(() => {
+          set(this.projectMap, [projectId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.log("Failed to restore project from project store");
+        this.fetchProjects(workspaceSlug);
+        this.fetchProjectDetails(workspaceSlug, projectId);
+        throw error;
+      });
+  };
 }
diff --git a/web/store/project/project_filter.store.ts b/web/store/project/project_filter.store.ts
new file mode 100644
index 00000000000..94d5f70736c
--- /dev/null
+++ b/web/store/project/project_filter.store.ts
@@ -0,0 +1,179 @@
+import set from "lodash/set";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import { TProjectDisplayFilters, TProjectFilters, TProjectAppliedDisplayFilterKeys } from "@plane/types";
+// store
+import { RootStore } from "@/store/root.store";
+
+export interface IProjectFilterStore {
+  // observables
+  displayFilters: Record<string, TProjectDisplayFilters>;
+  filters: Record<string, TProjectFilters>;
+  searchQuery: string;
+  // computed
+  currentWorkspaceDisplayFilters: TProjectDisplayFilters | undefined;
+  currentWorkspaceAppliedDisplayFilters: TProjectAppliedDisplayFilterKeys[] | undefined;
+  currentWorkspaceFilters: TProjectFilters | undefined;
+  // computed functions
+  getDisplayFiltersByWorkspaceSlug: (workspaceSlug: string) => TProjectDisplayFilters | undefined;
+  getFiltersByWorkspaceSlug: (workspaceSlug: string) => TProjectFilters | undefined;
+  // actions
+  updateDisplayFilters: (workspaceSlug: string, displayFilters: TProjectDisplayFilters) => void;
+  updateFilters: (workspaceSlug: string, filters: TProjectFilters) => void;
+  updateSearchQuery: (query: string) => void;
+  clearAllFilters: (workspaceSlug: string) => void;
+  clearAllAppliedDisplayFilters: (workspaceSlug: string) => void;
+}
+
+export class ProjectFilterStore implements IProjectFilterStore {
+  // observables
+  displayFilters: Record<string, TProjectDisplayFilters> = {};
+  filters: Record<string, TProjectFilters> = {};
+  searchQuery: string = "";
+  // root store
+  rootStore: RootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      // computed
+      currentWorkspaceDisplayFilters: computed,
+      currentWorkspaceAppliedDisplayFilters: computed,
+      currentWorkspaceFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      clearAllFilters: action,
+      clearAllAppliedDisplayFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // initialize display filters of the current workspace
+    reaction(
+      () => this.rootStore.app.router.workspaceSlug,
+      (workspaceSlug) => {
+        if (!workspaceSlug) return;
+        this.initWorkspaceFilters(workspaceSlug);
+      }
+    );
+  }
+
+  /**
+   * @description get display filters of the current workspace
+   */
+  get currentWorkspaceDisplayFilters() {
+    const workspaceSlug = this.rootStore.app.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    return this.displayFilters[workspaceSlug];
+  }
+
+  /**
+   * @description get project state applied display filter of the current workspace
+   * @returns {TProjectAppliedDisplayFilterKeys[] | undefined} // An array of keys of applied display filters
+   */
+  // TODO: Figure out a better approach for this
+  get currentWorkspaceAppliedDisplayFilters() {
+    const workspaceSlug = this.rootStore.app.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    const displayFilters = this.displayFilters[workspaceSlug];
+    return Object.keys(displayFilters).filter(
+      (key): key is TProjectAppliedDisplayFilterKeys =>
+        ["my_projects", "archived_projects"].includes(key) && !!displayFilters[key as keyof TProjectDisplayFilters]
+    );
+  }
+
+  /**
+   * @description get filters of the current workspace
+   */
+  get currentWorkspaceFilters() {
+    const workspaceSlug = this.rootStore.app.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    return this.filters[workspaceSlug];
+  }
+
+  /**
+   * @description get display filters of a workspace by workspaceSlug
+   * @param {string} workspaceSlug
+   */
+  getDisplayFiltersByWorkspaceSlug = computedFn((workspaceSlug: string) => this.displayFilters[workspaceSlug]);
+
+  /**
+   * @description get filters of a workspace by workspaceSlug
+   * @param {string} workspaceSlug
+   */
+  getFiltersByWorkspaceSlug = computedFn((workspaceSlug: string) => this.filters[workspaceSlug]);
+
+  /**
+   * @description initialize display filters and filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  initWorkspaceFilters = (workspaceSlug: string) => {
+    const displayFilters = this.getDisplayFiltersByWorkspaceSlug(workspaceSlug);
+    runInAction(() => {
+      this.displayFilters[workspaceSlug] = {
+        order_by: displayFilters?.order_by || "created_at",
+      };
+      this.filters[workspaceSlug] = this.filters[workspaceSlug] ?? {};
+    });
+  };
+
+  /**
+   * @description update display filters of a workspace
+   * @param {string} workspaceSlug
+   * @param {TProjectDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (workspaceSlug: string, displayFilters: TProjectDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [workspaceSlug, key], displayFilters[key as keyof TProjectDisplayFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update filters of a workspace
+   * @param {string} workspaceSlug
+   * @param {TProjectFilters} filters
+   */
+  updateFilters = (workspaceSlug: string, filters: TProjectFilters) => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [workspaceSlug, key], filters[key as keyof TProjectFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
+  /**
+   * @description clear all filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  clearAllFilters = (workspaceSlug: string) => {
+    runInAction(() => {
+      this.filters[workspaceSlug] = {};
+    });
+  };
+
+  /**
+   * @description clear project display filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  clearAllAppliedDisplayFilters = (workspaceSlug: string) => {
+    runInAction(() => {
+      if (!this.currentWorkspaceAppliedDisplayFilters) return;
+      this.currentWorkspaceAppliedDisplayFilters.forEach((key) => {
+        set(this.displayFilters, [workspaceSlug, key], false);
+      });
+    });
+  };
+}
diff --git a/web/store/root.store.ts b/web/store/root.store.ts
index 3e07332499b..5dc3c25749f 100644
--- a/web/store/root.store.ts
+++ b/web/store/root.store.ts
@@ -1,23 +1,25 @@
 import { enableStaticRendering } from "mobx-react-lite";
 // root stores
 import { AppRootStore, IAppRootStore } from "./application";
+import { CycleStore, ICycleStore } from "./cycle.store";
+import { DashboardStore, IDashboardStore } from "./dashboard.store";
+import { IEstimateStore, EstimateStore } from "./estimate.store";
 import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
+import { GlobalViewStore, IGlobalViewStore } from "./global-view.store";
+import { IInboxRootStore, InboxRootStore } from "./inbox/root.store";
+import { IssueRootStore, IIssueRootStore } from "./issue/root.store";
+import { ILabelStore, LabelStore } from "./label.store";
+import { IMemberRootStore, MemberRootStore } from "./member";
+import { IMentionStore, MentionStore } from "./mention.store";
+import { IModuleStore, ModulesStore } from "./module.store";
 import { IProjectRootStore, ProjectRootStore } from "./project";
-import { CycleStore, ICycleStore } from "./cycle.store";
 import { IProjectViewStore, ProjectViewStore } from "./project-view.store";
-import { IModuleStore, ModulesStore } from "./module.store";
+import { IStateStore, StateStore } from "./state.store";
 import { IUserRootStore, UserRootStore } from "./user";
 import { IWorkspaceRootStore, WorkspaceRootStore } from "./workspace";
-import { IssueRootStore, IIssueRootStore } from "./issue/root.store";
-import { IInboxRootStore, InboxRootStore } from "./inbox/root.store";
-import { IStateStore, StateStore } from "./state.store";
-import { IMemberRootStore, MemberRootStore } from "./member";
-import { IEstimateStore, EstimateStore } from "./estimate.store";
-import { GlobalViewStore, IGlobalViewStore } from "./global-view.store";
-import { IMentionStore, MentionStore } from "./mention.store";
-import { DashboardStore, IDashboardStore } from "./dashboard.store";
 import { IProjectPageStore, ProjectPageStore } from "./project-page.store";
-import { ILabelStore, LabelStore } from "./label.store";
+import { CycleFilterStore, ICycleFilterStore } from "./cycle_filter.store";
+import { IModuleFilterStore, ModuleFilterStore } from "./module_filter.store";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -29,7 +31,9 @@ export class RootStore {
   projectRoot: IProjectRootStore;
   memberRoot: IMemberRootStore;
   cycle: ICycleStore;
+  cycleFilter: ICycleFilterStore;
   module: IModuleStore;
+  moduleFilter: IModuleFilterStore;
   projectView: IProjectViewStore;
   globalView: IGlobalViewStore;
   issue: IIssueRootStore;
@@ -50,7 +54,9 @@ export class RootStore {
     this.memberRoot = new MemberRootStore(this);
     // independent stores
     this.cycle = new CycleStore(this);
+    this.cycleFilter = new CycleFilterStore(this);
     this.module = new ModulesStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
     this.projectView = new ProjectViewStore(this);
     this.globalView = new GlobalViewStore(this);
     this.issue = new IssueRootStore(this);
@@ -59,8 +65,8 @@ export class RootStore {
     this.label = new LabelStore(this);
     this.estimate = new EstimateStore(this);
     this.mention = new MentionStore(this);
-    this.projectPages = new ProjectPageStore(this);
     this.dashboard = new DashboardStore(this);
+    this.projectPages = new ProjectPageStore(this);
   }
 
   resetOnSignout() {
@@ -69,7 +75,9 @@ export class RootStore {
     this.memberRoot = new MemberRootStore(this);
     // independent stores
     this.cycle = new CycleStore(this);
+    this.cycleFilter = new CycleFilterStore(this);
     this.module = new ModulesStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
     this.projectView = new ProjectViewStore(this);
     this.globalView = new GlobalViewStore(this);
     this.issue = new IssueRootStore(this);
@@ -78,7 +86,7 @@ export class RootStore {
     this.label = new LabelStore(this);
     this.estimate = new EstimateStore(this);
     this.mention = new MentionStore(this);
-    this.projectPages = new ProjectPageStore(this);
     this.dashboard = new DashboardStore(this);
+    this.projectPages = new ProjectPageStore(this);
   }
 }
diff --git a/web/store/state.store.ts b/web/store/state.store.ts
index 783a82ee27c..6c5628e9370 100644
--- a/web/store/state.store.ts
+++ b/web/store/state.store.ts
@@ -1,15 +1,15 @@
-import { makeObservable, observable, computed, action, runInAction } from "mobx";
-import { computedFn } from "mobx-utils";
 import groupBy from "lodash/groupBy";
 import set from "lodash/set";
+import { makeObservable, observable, computed, action, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import { IState } from "@plane/types";
 // store
+import { sortStates } from "@/helpers/state.helper";
+import { ProjectStateService } from "@/services/project";
 import { RootStore } from "./root.store";
 // types
-import { IState } from "@plane/types";
 // services
-import { ProjectStateService } from "services/project";
 // helpers
-import { sortStates } from "helpers/state.helper";
 
 export interface IStateStore {
   //Loaders
@@ -17,6 +17,7 @@ export interface IStateStore {
   // observables
   stateMap: Record<string, IState>;
   // computed
+  workspaceStates: IState[] | undefined;
   projectStates: IState[] | undefined;
   groupedProjectStates: Record<string, IState[]> | undefined;
   // computed actions
@@ -73,13 +74,22 @@ export class StateStore implements IStateStore {
     this.router = _rootStore.app.router;
   }
 
+  /**
+   * Returns the stateMap belongs to a specific workspace
+   */
+  get workspaceStates() {
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!workspaceSlug || !this.fetchedMap[workspaceSlug]) return;
+    return sortStates(Object.values(this.stateMap));
+  }
+
   /**
    * Returns the stateMap belongs to a specific project
    */
   get projectStates() {
     const projectId = this.router.projectId;
-    const worksapceSlug = this.router.workspaceSlug || "";
-    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
     return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   }
 
@@ -106,8 +116,8 @@ export class StateStore implements IStateStore {
    * @returns IState[]
    */
   getProjectStates = computedFn((projectId: string) => {
-    const worksapceSlug = this.router.workspaceSlug || "";
-    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
     return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   });
 
diff --git a/web/store/user/index.ts b/web/store/user/index.ts
index 15f9e57728e..1a7a8778f9b 100644
--- a/web/store/user/index.ts
+++ b/web/store/user/index.ts
@@ -1,9 +1,9 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
-// services
-import { UserService } from "services/user.service";
-import { AuthService } from "services/auth.service";
 // interfaces
 import { IUser, IUserSettings } from "@plane/types";
+// services
+import { AuthService } from "@/services/auth.service";
+import { UserService } from "@/services/user.service";
 // store
 import { RootStore } from "../root.store";
 import { IUserMembershipStore, UserMembershipStore } from "./user-membership.store";
@@ -22,7 +22,6 @@ export interface IUserRootStore {
   fetchCurrentUser: () => Promise<IUser>;
   fetchCurrentUserInstanceAdminStatus: () => Promise<boolean>;
   fetchCurrentUserSettings: () => Promise<IUserSettings>;
-  fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise<any>;
   // crud actions
   updateUserOnBoard: () => Promise<void>;
   updateTourCompleted: () => Promise<void>;
@@ -68,7 +67,6 @@ export class UserRootStore implements IUserRootStore {
       fetchCurrentUser: action,
       fetchCurrentUserInstanceAdminStatus: action,
       fetchCurrentUserSettings: action,
-      fetchUserDashboardInfo: action,
       updateUserOnBoard: action,
       updateTourCompleted: action,
       updateCurrentUser: action,
@@ -130,22 +128,6 @@ export class UserRootStore implements IUserRootStore {
       return response;
     });
 
-  /**
-   * Fetches the current user dashboard info
-   * @returns Promise<IUserWorkspaceDashboard>
-   */
-  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;
-    }
-  };
-
   /**
    * Updates the user onboarding status
    * @returns Promise<void>
diff --git a/web/store/user/user-membership.store.ts b/web/store/user/user-membership.store.ts
index b8bdbfac505..407157d20d0 100644
--- a/web/store/user/user-membership.store.ts
+++ b/web/store/user/user-membership.store.ts
@@ -1,15 +1,16 @@
-import { action, observable, runInAction, makeObservable, computed } from "mobx";
 import { set } from "lodash";
-// services
-import { ProjectMemberService } from "services/project";
-import { UserService } from "services/user.service";
-import { WorkspaceService } from "services/workspace.service";
-// interfaces
+import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// types
 import { IWorkspaceMemberMe, IProjectMember, IUserProjectsRole } from "@plane/types";
-import { RootStore } from "../root.store";
 // constants
-import { EUserProjectRoles } from "constants/project";
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { EUserProjectRoles } from "@/constants/project";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// services
+import { ProjectMemberService } from "@/services/project";
+import { UserService } from "@/services/user.service";
+import { WorkspaceService } from "@/services/workspace.service";
+// store
+import { RootStore } from "../root.store";
 
 export interface IUserMembershipStore {
   // observables
@@ -61,6 +62,7 @@ export class UserMembershipStore implements IUserMembershipStore {
   workspaceProjectsRole: { [workspaceSlug: string]: IUserProjectsRole } = {};
   // stores
   router;
+  store;
   // services
   userService;
   workspaceService;
@@ -91,6 +93,7 @@ export class UserMembershipStore implements IUserMembershipStore {
       fetchUserWorkspaceProjectsRole: action,
     });
     this.router = _rootStore.app.router;
+    this.store = _rootStore;
     // services
     this.userService = new UserService();
     this.workspaceService = new WorkspaceService();
@@ -193,13 +196,16 @@ export class UserMembershipStore implements IUserMembershipStore {
    * @param workspaceSlug
    * @returns Promise<void>
    */
-  leaveWorkspace = async (workspaceSlug: string) =>
+  leaveWorkspace = async (workspaceSlug: string) => {
+    const currentWorksSpace = this.store.workspaceRoot?.currentWorkspace;
     await this.userService.leaveWorkspace(workspaceSlug).then(() => {
       runInAction(() => {
+        if (currentWorksSpace) delete this.store.workspaceRoot?.workspaces?.[currentWorksSpace?.id];
         delete this.workspaceMemberInfo[workspaceSlug];
         delete this.hasPermissionToWorkspace[workspaceSlug];
       });
     });
+  };
 
   /**
    * Joins a project
diff --git a/web/store/workspace/api-token.store.ts b/web/store/workspace/api-token.store.ts
index f0772933dff..8cc25034e6d 100644
--- a/web/store/workspace/api-token.store.ts
+++ b/web/store/workspace/api-token.store.ts
@@ -1,10 +1,10 @@
 // mobx
 import { action, observable, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-import { APITokenService } from "services/api_token.service";
+import { APITokenService } from "@/services/api_token.service";
+import { IApiToken } from "@plane/types";
 import { RootStore } from "../root.store";
 // types
-import { IApiToken } from "@plane/types";
 
 export interface IApiTokenStore {
   // observables
diff --git a/web/store/workspace/index.ts b/web/store/workspace/index.ts
index 4020aaef711..096e11f0dd6 100644
--- a/web/store/workspace/index.ts
+++ b/web/store/workspace/index.ts
@@ -1,13 +1,13 @@
+import set from "lodash/set";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { WorkspaceService } from "@/services/workspace.service";
+import { IWorkspace } from "@plane/types";
 import { RootStore } from "../root.store";
-import set from "lodash/set";
 // types
-import { IWorkspace } from "@plane/types";
 // services
-import { WorkspaceService } from "services/workspace.service";
 // sub-stores
-import { IWebhookStore, WebhookStore } from "./webhook.store";
 import { ApiTokenStore, IApiTokenStore } from "./api-token.store";
+import { IWebhookStore, WebhookStore } from "./webhook.store";
 
 export interface IWorkspaceRootStore {
   // observables
diff --git a/web/store/workspace/webhook.store.ts b/web/store/workspace/webhook.store.ts
index 5657f341e17..f93f676acb9 100644
--- a/web/store/workspace/webhook.store.ts
+++ b/web/store/workspace/webhook.store.ts
@@ -1,8 +1,8 @@
 // mobx
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
+import { WebhookService } from "@/services/webhook.service";
 import { IWebhook } from "@plane/types";
-import { WebhookService } from "services/webhook.service";
 import { RootStore } from "../root.store";
 
 export interface IWebhookStore {
diff --git a/web/styles/emoji.css b/web/styles/emoji.css
new file mode 100644
index 00000000000..2fe3ddab320
--- /dev/null
+++ b/web/styles/emoji.css
@@ -0,0 +1,52 @@
+.EmojiPickerReact {
+  --epr-category-navigation-button-size: 1.25rem !important;
+  --epr-category-label-height: 1.5rem !important;
+  --epr-emoji-size: 1.25rem !important;
+  --epr-picker-border-radius: 0.25rem !important;
+  --epr-horizontal-padding: 0.5rem !important;
+  --epr-emoji-padding: 0.5rem !important;
+  background-color: rgba(var(--color-background-100)) !important;
+}
+
+.epr-main {
+  border: none !important;
+  border-radius: 0 !important;
+}
+
+.epr-emoji-category-label {
+  font-size: 0.7875rem !important;
+  color: rgba(var(--color-text-300)) !important;
+  background-color: rgba(var(--color-background-100), 0.8) !important;
+}
+
+.epr-category-nav,
+.epr-header-overlay {
+  padding: 0.5rem !important;
+}
+
+button.epr-emoji:hover > *,
+button.epr-emoji:focus > * {
+  background-color: rgba(var(--color-background-80)) !important;
+}
+
+input.epr-search {
+  font-size: 0.7875rem !important;
+  height: 2rem !important;
+  background: transparent !important;
+  border-color: rgba(var(--color-border-200)) !important;
+  border-radius: 0.25rem !important;
+}
+
+input.epr-search::placeholder {
+  color: rgba(var(--color-text-400)) !important;
+}
+
+button.epr-btn-clear-search:hover {
+  background-color: rgba(var(--color-background-80)) !important;
+  color: rgba(var(--color-text-300)) !important;
+}
+
+.epr-emoji-variation-picker {
+  background-color: rgba(var(--color-background-100)) !important;
+  border-color: rgba(var(--color-border-200)) !important;
+}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index e4de1a3da81..5b24abc080f 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -149,6 +149,27 @@
     --color-onboarding-border-300: 229, 229, 229, 0.5;
 
     --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 62, 155, 79;
+    --color-toast-error-text: 220, 62, 66;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 51, 88, 212;
+    --color-toast-loading-text: 28, 32, 36;
+    --color-toast-secondary-text: 128, 131, 141;
+    --color-toast-tertiary-text: 96, 100, 108;
+
+    --color-toast-success-background: 253, 253, 254;
+    --color-toast-error-background: 255, 252, 252;
+    --color-toast-warning-background: 254, 253, 251;
+    --color-toast-info-background: 253, 253, 254;
+    --color-toast-loading-background: 253, 253, 254;
+
+    --color-toast-success-border: 218, 241, 219;
+    --color-toast-error-border: 255, 219, 220;
+    --color-toast-warning-border: 255, 247, 194;
+    --color-toast-info-border: 210, 222, 255;
+    --color-toast-loading-border: 224, 225, 230;
   }
 
   [data-theme="light-contrast"] {
@@ -217,6 +238,27 @@
     --color-onboarding-border-300: 34, 35, 38, 0.5;
 
     --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 178, 221, 181;
+    --color-toast-error-text: 206, 44, 49;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 141, 164, 239;
+    --color-toast-loading-text: 255, 255, 255;
+    --color-toast-secondary-text: 185, 187, 198;
+    --color-toast-tertiary-text: 139, 141, 152;
+
+    --color-toast-success-background: 46, 46, 46;
+    --color-toast-error-background: 46, 46, 46;
+    --color-toast-warning-background: 46, 46, 46;
+    --color-toast-info-background: 46, 46, 46;
+    --color-toast-loading-background: 46, 46, 46;
+
+    --color-toast-success-border: 42, 126, 59;
+    --color-toast-error-border: 100, 23, 35;
+    --color-toast-warning-border: 79, 52, 34;
+    --color-toast-info-border: 58, 91, 199;
+    --color-toast-loading-border: 96, 100, 108;
   }
 
   [data-theme="dark-contrast"] {
@@ -560,6 +602,9 @@ div.web-view-spinner div.bar12 {
 .horizontal-scrollbar::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
+  margin-top: 44px;
+}
 
 /* scrollbar sm size */
 .scrollbar-sm::-webkit-scrollbar {
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 2120413dcb3..8fcf13199f4 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -5,6 +5,9 @@
   "compilerOptions": {
     "baseUrl": ".",
     "jsx": "preserve",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "paths": {
+      "@/*": ["*"]
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index f413d1a44f1..88f5d4e5533 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,13 +29,6 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@babel/code-frame@7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
@@ -269,7 +262,7 @@
     "@babel/traverse" "^7.23.6"
     "@babel/types" "^7.23.6"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.23.4":
+"@babel/highlight@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
   integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
@@ -1288,37 +1281,7 @@
   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"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
-  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
-    globals "^13.9.0"
-    ignore "^4.0.6"
-    import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
-    minimatch "^3.0.4"
-    strip-json-comments "^3.1.1"
-
-"@eslint/eslintrc@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
-  integrity sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.3.2"
-    espree "^9.4.0"
-    globals "^13.19.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
-    minimatch "^3.1.2"
-    strip-json-comments "^3.1.1"
-
-"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.4":
+"@eslint/eslintrc@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
   integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
@@ -1333,15 +1296,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@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==
-
-"@eslint/js@8.56.0":
-  version "8.56.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
-  integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
 "@floating-ui/core@^1.4.2":
   version "1.5.2"
@@ -1399,38 +1357,24 @@
     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==
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^2.0.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
-"@humanwhocodes/config-array@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
-  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
-  dependencies:
-    "@humanwhocodes/object-schema" "^1.2.0"
-    debug "^4.1.1"
-    minimatch "^3.0.4"
-
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@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==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
+  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
@@ -1591,33 +1535,12 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.4.tgz#d5cda0c4a862d70ae760e58c0cd96a8899a2e49a"
   integrity sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ==
 
-"@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"
-  integrity sha512-XOi0WzJhGH3Lk51SkSu9eZxF+IY1ZZhWcJTIGBycAbWU877IQa6+6KxMATWCOs7c+bmp6Sd8KywXJaDRxzu0JA==
+"@next/eslint-plugin-next@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.0.tgz#29b041233fac7417e22eefa4146432d5cd910820"
+  integrity sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==
   dependencies:
-    glob "7.1.7"
-
-"@next/eslint-plugin-next@13.0.0":
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.0.tgz#cf3d799b21671554c1f5889c01d2513afb9973cd"
-  integrity sha512-z+gnX4Zizatqatc6f4CQrcC9oN8Us3Vrq/OLyc98h7K/eWctrnV91zFZodmJHUjx0cITY8uYM7LXD7IdYkg3kg==
-  dependencies:
-    glob "7.1.7"
-
-"@next/eslint-plugin-next@13.2.1":
-  version "13.2.1"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.2.1.tgz#58dea4d53c0adfc59c10195f51eb8d3575fce414"
-  integrity sha512-r0i5rcO6SMAZtqiGarUVMr3k256X0R0j6pEkKg4PxqUW+hG0qgMxRVAJsuoRG5OBFkCOlSfWZJ0mP9fQdCcyNg==
-  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"
+    glob "10.3.10"
 
 "@next/swc-darwin-arm64@14.0.4":
   version "14.0.4"
@@ -1766,19 +1689,6 @@
     "@react-spring/web" "9.4.5"
     d3-shape "^1.3.5"
 
-"@nivo/marimekko@0.80.0":
-  version "0.80.0"
-  resolved "https://registry.yarnpkg.com/@nivo/marimekko/-/marimekko-0.80.0.tgz#1eda4207935b3776bd1d7d729dc39a0e42bb1b86"
-  integrity sha512-0u20SryNtbOQhtvhZsbxmgnF7o8Yc2rjDQ/gCYPTXtxeooWCuhSaRZbDCnCeyKQY3B62D7z2mu4Js4KlTEftjA==
-  dependencies:
-    "@nivo/axes" "0.80.0"
-    "@nivo/colors" "0.80.0"
-    "@nivo/legends" "0.80.0"
-    "@nivo/scales" "0.80.0"
-    "@react-spring/web" "9.4.5"
-    d3-shape "^1.3.5"
-    lodash "^4.17.21"
-
 "@nivo/pie@0.80.0":
   version "0.80.0"
   resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.80.0.tgz#04b35839bf5a2b661fa4e5b677ae76b3c028471e"
@@ -2212,10 +2122,10 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.1.tgz#d146db7a5949e10837b323ce933ed882ac878262"
   integrity sha512-PyJsSsafjmIhVgaI1Zdj7m8BB8mMckFah/xbpplObyHfiXzKcI5UOUXRyOdHW7nz4DpMCuzLnF7v5IWHenCwYA==
 
-"@rushstack/eslint-patch@^1.1.3":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz#9ab8f811930d7af3e3d549183a50884f9eb83f36"
-  integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==
+"@rushstack/eslint-patch@^1.3.3":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz#2d4260033e199b3032a08b41348ac10de21c47e9"
+  integrity sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==
 
 "@scena/dragscroll@^1.4.0":
   version "1.4.0"
@@ -2239,35 +2149,46 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/feedback@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-7.91.0.tgz#be09e5aec2959fcf503e2cf78496d5e2d263bc5a"
-  integrity sha512-SJKTSaz68F5YIwF79EttBm915M2LnacgZMYRnRumyTmMKnebGhYQLwWbZdpaDvOa1U18dgRajDX8Qed/8A3tXw==
-  dependencies:
-    "@sentry/core" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
-
-"@sentry-internal/tracing@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.91.0.tgz#fbb6e1e3383e1eeee08633384e004da73ac1c37d"
-  integrity sha512-JH5y6gs6BS0its7WF2DhySu7nkhPDfZcdpAXldxzIlJpqFkuwQKLU5nkYJpiIyZz1NHYYtW5aum2bV2oCOdDRA==
-  dependencies:
-    "@sentry/core" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
-
-"@sentry/browser@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.91.0.tgz#de3b9ae3ca7716a35cfabc97ac376944a67e6e34"
-  integrity sha512-lJv3x/xekzC/biiyAsVCioq2XnKNOZhI6jY3ZzLJZClYV8eKRi7D3KCsHRvMiCdGak1d/6sVp8F4NYY+YiWy1Q==
-  dependencies:
-    "@sentry-internal/feedback" "7.91.0"
-    "@sentry-internal/tracing" "7.91.0"
-    "@sentry/core" "7.91.0"
-    "@sentry/replay" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
+"@sentry-internal/feedback@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-7.108.0.tgz#7033352abd304f1383ec47640e056a0dfd5132b7"
+  integrity sha512-8JcgZEnk1uWrXJhsd3iRvFtEiVeaWOEhN0NZwhwQXHfvODqep6JtrkY1yCIyxbpA37aZmrPc2JhyotRERGfUjg==
+  dependencies:
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
+
+"@sentry-internal/replay-canvas@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-7.108.0.tgz#641133c19c0e1c423617b8d791f53d6cd0b0a862"
+  integrity sha512-R5tvjGqWUV5vSk0N1eBgVW7wIADinrkfDEBZ9FyKP2mXHBobsyNGt30heJDEqYmVqluRqjU2NuIRapsnnrpGnA==
+  dependencies:
+    "@sentry/core" "7.108.0"
+    "@sentry/replay" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
+
+"@sentry-internal/tracing@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.108.0.tgz#d1e660701fb860cfae72b6ebfa8fb267533421fa"
+  integrity sha512-zuK5XsTsb+U+hgn3SPetYDAogrXsM16U/LLoMW7+TlC6UjlHGYQvmX3o+M2vntejoU1QZS8m1bCAZSMWEypAEw==
+  dependencies:
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
+
+"@sentry/browser@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.108.0.tgz#b95810bb6572b63781f253615896f5afb1a3a5c0"
+  integrity sha512-FNpzsdTvGvdHJMUelqEouUXMZU7jC+dpN7CdT6IoHVVFEkoAgrjMVUhXZoQ/dmCkdKWHmFSQhJ8Fm6V+e9Aq0A==
+  dependencies:
+    "@sentry-internal/feedback" "7.108.0"
+    "@sentry-internal/replay-canvas" "7.108.0"
+    "@sentry-internal/tracing" "7.108.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/replay" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
 
 "@sentry/cli@^1.77.1":
   version "1.77.1"
@@ -2281,95 +2202,95 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
 
-"@sentry/core@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.91.0.tgz#229334d7f03dd5d90a17495e61ce4215ab730b2a"
-  integrity sha512-tu+gYq4JrTdrR+YSh5IVHF0fJi/Pi9y0HZ5H9HnYy+UMcXIotxf6hIEaC6ZKGeLWkGXffz2gKpQLe/g6vy/lPA==
+"@sentry/core@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.108.0.tgz#a27e8d6f85f59c5730ce86071474f15ac899fde0"
+  integrity sha512-I/VNZCFgLASxHZaD0EtxZRM34WG9w2gozqgrKGNMzAymwmQ3K9g/1qmBy4e6iS3YRptb7J5UhQkZQHrcwBbjWQ==
   dependencies:
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
 
-"@sentry/integrations@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.91.0.tgz#b0496c9e404783bc433b1d2464d8f9aa180ebc8e"
-  integrity sha512-LGRfb+WfG3FaWHtDnJIhtupweat0imCQr2z/5SSbQKzqxHhtlaEU+9IExBmBdzq90n4lRBaVQHA3zGuU02uOhg==
+"@sentry/integrations@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.108.0.tgz#307c61966208f2a126c1a93e712277c8f86a3d3c"
+  integrity sha512-b/WbK1f3x2rQ4aJJSA4VSwpBXrXFm1Nzrca3Y9qW0MI1wjZEYsDDrh9m6ulLdVBl4YDc2VqYp1COwU/NjuHlog==
   dependencies:
-    "@sentry/core" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
     localforage "^1.8.1"
 
-"@sentry/nextjs@^7.85.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.91.0.tgz#42eb3af10ff230e8a3fe9f0e50cdbac94b7d290e"
-  integrity sha512-wE83+OTEH4yYnDrhMw9eVEARSfZc6xY5qJb9xyYm5rW3+gVjNQZQaUY+wkM61Xdo0T35BN+7U4T88HbwzGeMqA==
+"@sentry/nextjs@^7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.108.0.tgz#31d903d75bbf4b4530046360daff4d51dcf62f53"
+  integrity sha512-etBrMSLRbNAzozetBeL6D+lR9lRAyHmV7NUBGCX9lQvgmcdxkQa15EX8pIKjsMejZ8xAZNsqYVIByIs67A77rg==
   dependencies:
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "7.91.0"
-    "@sentry/integrations" "7.91.0"
-    "@sentry/node" "7.91.0"
-    "@sentry/react" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
-    "@sentry/vercel-edge" "7.91.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/integrations" "7.108.0"
+    "@sentry/node" "7.108.0"
+    "@sentry/react" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
+    "@sentry/vercel-edge" "7.108.0"
     "@sentry/webpack-plugin" "1.21.0"
     chalk "3.0.0"
     resolve "1.22.8"
     rollup "2.78.0"
     stacktrace-parser "^0.1.10"
 
-"@sentry/node@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.91.0.tgz#26bf13c3daf988f9725afd1a3cc38ba2ff90d62a"
-  integrity sha512-hTIfSQxD7L+AKIqyjoq8CWBRkEQrrMZmA3GSZgPI5JFWBHgO0HBo5TH/8TU81oEJh6kqqHAl2ObMhmcnaFqlzg==
-  dependencies:
-    "@sentry-internal/tracing" "7.91.0"
-    "@sentry/core" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
-    https-proxy-agent "^5.0.0"
-
-"@sentry/react@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.91.0.tgz#620e6ce9452af025d2cc1b2eca3dd1dd730dc439"
-  integrity sha512-7JH2rWaX3WKHHvBcZQ4f/KnkYIXTf7hMojRFncUwPocdtDlhJw/JUvjAYNpEysixXIgsMes3B32lmtZjGjRhwQ==
-  dependencies:
-    "@sentry/browser" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
+"@sentry/node@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.108.0.tgz#ed113dc1d39aaae32f7e9f681dcea41cf28eb5f1"
+  integrity sha512-pMxc9txnDDkU4Z8k2Uw/DPSLPehNtWV3mjJ3+my0AMORGYrXLkJI93tddlE5z/7k+GEJdj1HsOLgxUN0OU+HGA==
+  dependencies:
+    "@sentry-internal/tracing" "7.108.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
+
+"@sentry/react@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.108.0.tgz#26a50324f6d7a9576f3753c099e7bcd8def94f3c"
+  integrity sha512-C60arh5/gtO42eMU9l34aWlKDLZUO+1j1goaEf/XRSwUcyJS9tbJrs+mT4nbKxUsEG714It2gRbfSEvh1eXmCg==
+  dependencies:
+    "@sentry/browser" "7.108.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
     hoist-non-react-statics "^3.3.2"
 
-"@sentry/replay@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.91.0.tgz#95077868aee3c3cc670affe13156434f858e1755"
-  integrity sha512-XwbesnLLNtaVXKtDoyBB96GxJuhGi9zy3a662Ba/McmumCnkXrMQYpQPh08U7MgkTyDRgjDwm7PXDhiKpcb03g==
+"@sentry/replay@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.108.0.tgz#baa679bd19b4e3729e607d3f84cff5048aeb3415"
+  integrity sha512-jo8fDOzcZJclP1+4n9jUtVxTlBFT9hXwxhAMrhrt70FV/nfmCtYQMD3bzIj79nwbhUtFP6pN39JH1o7Xqt1hxQ==
   dependencies:
-    "@sentry-internal/tracing" "7.91.0"
-    "@sentry/core" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
+    "@sentry-internal/tracing" "7.108.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
 
-"@sentry/types@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.91.0.tgz#5b68954e08986fecb0d4bef168df58eef62c32c7"
-  integrity sha512-bcQnb7J3P3equbCUc+sPuHog2Y47yGD2sCkzmnZBjvBT0Z1B4f36fI/5WjyZhTjLSiOdg3F2otwvikbMjmBDew==
+"@sentry/types@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.108.0.tgz#5ceb959c4dabe511fc441fec8c2465f2d624900f"
+  integrity sha512-bKtHITmBN3kqtqE5eVvL8mY8znM05vEodENwRpcm6TSrrBjC2RnwNWVwGstYDdHpNfFuKwC8mLY9bgMJcENo8g==
 
-"@sentry/utils@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.91.0.tgz#3b1a94c053c885877908cd3e1365e3d23e21a73f"
-  integrity sha512-fvxjrEbk6T6Otu++Ax9ntlQ0sGRiwSC179w68aC3u26Wr30FAIRKqHTCCdc2jyWk7Gd9uWRT/cq+g8NG/8BfSg==
+"@sentry/utils@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.108.0.tgz#0231042956aed2ef35809891592238530349dfd9"
+  integrity sha512-a45yEFD5qtgZaIFRAcFkG8C8lnDzn6t4LfLXuV4OafGAy/3ZAN3XN8wDnrruHkiUezSSANGsLg3bXaLW/JLvJw==
   dependencies:
-    "@sentry/types" "7.91.0"
+    "@sentry/types" "7.108.0"
 
-"@sentry/vercel-edge@7.91.0":
-  version "7.91.0"
-  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-7.91.0.tgz#df67ee39d10570b71eccf831a181c064974d62b1"
-  integrity sha512-CounqhXPwFh67zf6L/q4ACBHHqknT6YY9LdgIAnUd0GGgHzrJPyKcthvh8Je4lNdpo5LFg2gnR+6g6JS8DDYDQ==
+"@sentry/vercel-edge@7.108.0":
+  version "7.108.0"
+  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-7.108.0.tgz#c5ca35094bc46029ec5a72f7ee09fd3705582baa"
+  integrity sha512-dUuUEswaVIzsJnzTfaJxrvkfOowrlJxxHo2AybPDym2rob7CdaLdDJIYJa83X7QeAKMkTgLny/gYSQYC0E4UyA==
   dependencies:
-    "@sentry-internal/tracing" "7.91.0"
-    "@sentry/core" "7.91.0"
-    "@sentry/types" "7.91.0"
-    "@sentry/utils" "7.91.0"
+    "@sentry-internal/tracing" "7.108.0"
+    "@sentry/core" "7.108.0"
+    "@sentry/types" "7.108.0"
+    "@sentry/utils" "7.108.0"
 
 "@sentry/webpack-plugin@1.21.0":
   version "1.21.0"
@@ -2896,16 +2817,16 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/eslint-plugin@^6.13.2":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.16.0.tgz#cc29fbd208ea976de3db7feb07755bba0ce8d8bc"
-  integrity sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==
+"@typescript-eslint/eslint-plugin@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz#dd71fc5c7ecec745ca26ece506d84d203a205c0e"
+  integrity sha512-zioDz623d0RHNhvx0eesUmGfIjzrk18nSBC8xewepKXbBvN/7c1qImV7Hg8TI1URTxKax7/zxfxj3Uph8Chcuw==
   dependencies:
     "@eslint-community/regexpp" "^4.5.1"
-    "@typescript-eslint/scope-manager" "6.16.0"
-    "@typescript-eslint/type-utils" "6.16.0"
-    "@typescript-eslint/utils" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/type-utils" "7.1.1"
+    "@typescript-eslint/utils" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
     debug "^4.3.4"
     graphemer "^1.4.0"
     ignore "^5.2.4"
@@ -2913,14 +2834,26 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^5.21.0", "@typescript-eslint/parser@^5.42.0", "@typescript-eslint/parser@^5.48.2":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
-  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+  integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/parser@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.1.1.tgz#6a9d0a5c9ccdf5dbd3cb8c949728c64e24e07d1f"
+  integrity sha512-ZWUFyL0z04R1nAEgr9e79YtV5LbafdOtN7yapNbn1ansMyaegl2D4bL7vHoJ4HPSc4CaLwuCVas8CVuneKzplQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.62.0":
@@ -2931,13 +2864,21 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz#f3e9a00fbc1d0701356359cd56489c54d9e37168"
-  integrity sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==
+"@typescript-eslint/scope-manager@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
   dependencies:
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+
+"@typescript-eslint/scope-manager@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.1.1.tgz#9e301803ff8e21a74f50c6f89a4baccad9a48f93"
+  integrity sha512-cirZpA8bJMRb4WZ+rO6+mnOJrGFDd38WoXCEI57+CYBqta8Yc8aJym2i7vyqLL1vVYljgw0X27axkUXz32T8TA==
+  dependencies:
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
 
 "@typescript-eslint/type-utils@5.62.0":
   version "5.62.0"
@@ -2949,13 +2890,13 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.16.0.tgz#5f21c3e49e540ad132dc87fc99af463c184d5ed1"
-  integrity sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==
+"@typescript-eslint/type-utils@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.1.1.tgz#aee820d5bedd39b83c18585a526cc520ddb7a226"
+  integrity sha512-5r4RKze6XHEEhlZnJtR3GYeCh1IueUHdbrukV2KSlLXaTjuSfeVF8mZUVPLovidCuZfbVjfhi4c0DNSa/Rdg5g==
   dependencies:
-    "@typescript-eslint/typescript-estree" "6.16.0"
-    "@typescript-eslint/utils" "6.16.0"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/utils" "7.1.1"
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
@@ -2964,10 +2905,15 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.16.0.tgz#a3abe0045737d44d8234708d5ed8fef5d59dc91e"
-  integrity sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==
+"@typescript-eslint/types@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
+"@typescript-eslint/types@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.1.1.tgz#ca33ba7cf58224fb46a84fea62593c2c53cd795f"
+  integrity sha512-KhewzrlRMrgeKm1U9bh2z5aoL4s7K3tK5DwHDn8MHv0yQfWFz/0ZR6trrIHHa5CsF83j/GgHqzdbzCXJ3crx0Q==
 
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
@@ -2982,13 +2928,27 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz#d6e0578e4f593045f0df06c4b3a22bd6f13f2d03"
-  integrity sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==
+"@typescript-eslint/typescript-estree@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/typescript-estree@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.1.tgz#09c54af0151a1b05d0875c0fc7fe2ec7a2476ece"
+  integrity sha512-9ZOncVSfr+sMXVxxca2OJOPagRwT0u/UHikM2Rd6L/aB+kL/QAuTnsv6MeXtjzCJYb8PzrXarypSGIPx3Jemxw==
   dependencies:
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/visitor-keys" "6.16.0"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -3010,17 +2970,17 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/utils@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.16.0.tgz#1c291492d34670f9210d2b7fcf6b402bea3134ae"
-  integrity sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==
+"@typescript-eslint/utils@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.1.1.tgz#bdeeb789eee4af5d3fb5400a69566d4dbf97ff3b"
+  integrity sha512-thOXM89xA03xAE0lW7alstvnyoBUbBX38YtY+zAUcpRPcq9EIhXPuJ0YTv948MbzmKh6e1AUszn5cBFK49Umqg==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     "@types/json-schema" "^7.0.12"
     "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "6.16.0"
-    "@typescript-eslint/types" "6.16.0"
-    "@typescript-eslint/typescript-estree" "6.16.0"
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.1.1"
     semver "^7.5.4"
 
 "@typescript-eslint/visitor-keys@5.62.0":
@@ -3031,12 +2991,20 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@6.16.0":
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz#d50da18a05d91318ed3e7e8889bda0edc35f3a10"
-  integrity sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==
+"@typescript-eslint/visitor-keys@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
   dependencies:
-    "@typescript-eslint/types" "6.16.0"
+    "@typescript-eslint/types" "6.21.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@typescript-eslint/visitor-keys@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.1.tgz#e6538a58c9b157f03bcbb29e3b6a92fe39a6ab0d"
+  integrity sha512-yTdHDQxY7cSoCcAtiBzVzxleJhkGB9NncSIyMYe2+OGON1ZsP9zOPws/Pqgopa65jvknOjlk/w7ulPlZ78PiLQ==
+  dependencies:
+    "@typescript-eslint/types" "7.1.1"
     eslint-visitor-keys "^3.4.1"
 
 "@ungap/structured-clone@^1.2.0":
@@ -3044,16 +3012,11 @@
   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:
+acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^7.4.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
 acorn@^8.8.2, acorn@^8.9.0:
   version "8.11.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
@@ -3071,7 +3034,7 @@ ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3081,7 +3044,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.1, ajv@^8.6.0:
+ajv@^8.6.0:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -3091,11 +3054,6 @@ ajv@^8.0.1, ajv@^8.6.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-ansi-colors@^4.1.1:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
-  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -3143,13 +3101,6 @@ arg@^5.0.2:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -3177,7 +3128,7 @@ 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, array-includes@^3.1.7:
+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==
@@ -3226,7 +3177,7 @@ array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.0, array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
+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==
@@ -3265,11 +3216,6 @@ ast-types-flow@^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"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
-  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
-
 async@^3.2.3:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
@@ -3922,7 +3868,7 @@ 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.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4089,10 +4035,10 @@ dom4@^2.1.5:
   resolved "https://registry.yarnpkg.com/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
   integrity sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA==
 
-dompurify@^3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.9.tgz#b3f362f24b99f53498c75d43ecbd784b0b3ad65e"
-  integrity sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==
+dompurify@^3.0.11:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.11.tgz#c163f5816eaac6aeef35dae2b77fca0504564efe"
+  integrity sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg==
 
 dot-case@^3.0.4:
   version "3.0.4"
@@ -4129,6 +4075,11 @@ electron-to-chromium@^1.4.601:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz#4bddbc2c76e1e9dbf449ecd5da3d8119826ea4fb"
   integrity sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==
 
+emoji-picker-react@^4.5.16:
+  version "4.5.16"
+  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-4.5.16.tgz#12111f89a7fd2bd74965337d53806f4153d65dc6"
+  integrity sha512-RXaOH1EapmqbtRSMaHnwJWMfA6kiPipg/gN4cFOQRQKvrTQIA3K5+yUyzFuq8O7umIEtXUi1C1tf2dPvyyn44Q==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -4159,14 +4110,6 @@ enhanced-resolve@^5.12.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@^2.3.5:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
-  integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
-  dependencies:
-    ansi-colors "^4.1.1"
-    strip-ansi "^6.0.1"
-
 entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -4445,77 +4388,32 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-next@12.2.2:
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-12.2.2.tgz#4bb996026e118071849bc4011283a160ad5bde46"
-  integrity sha512-oJhWBLC4wDYYUFv/5APbjHUFd0QRFCojMdj/QnMoOEktmeTvwnnoA8F8uaXs0fQgsaTK0tbUxBRv9/Y4/rpxOA==
+eslint-config-next@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.1.0.tgz#7e309d426b8afacaba3b32fdbb02ba220b6d0a97"
+  integrity sha512-SBX2ed7DoRFXC6CQSLc/SbLY9Ut6HxNB2wPTcoIWjUMd7aF7O/SIE7111L8FdZ9TXsNV4pulUDnfthpyPtbFUg==
   dependencies:
-    "@next/eslint-plugin-next" "12.2.2"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.21.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^2.7.1"
-    eslint-plugin-import "^2.26.0"
-    eslint-plugin-jsx-a11y "^6.5.1"
-    eslint-plugin-react "^7.29.4"
-    eslint-plugin-react-hooks "^4.5.0"
-
-eslint-config-next@13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.0.0.tgz#d533ee1dbd6576fd3759ba4db4d5a6c4e039c242"
-  integrity sha512-y2nqWS2tycWySdVhb+rhp6CuDmDazGySqkzzQZf3UTyfHyC7og1m5m/AtMFwCo5mtvDqvw1BENin52kV9733lg==
-  dependencies:
-    "@next/eslint-plugin-next" "13.0.0"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.21.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-import-resolver-typescript "^2.7.1"
-    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-next@13.2.1:
-  version "13.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.2.1.tgz#644fb3496b832bc1e32f2c57cce1ec3eeb7bb7a1"
-  integrity sha512-2GAx7EjSiCzJN6H2L/v1kbYrNiwQxzkyjy6eWSjuhAKt+P6d3nVNHGy9mON8ZcYd72w/M8kyMjm4UB9cvijgrw==
-  dependencies:
-    "@next/eslint-plugin-next" "13.2.1"
-    "@rushstack/eslint-patch" "^1.1.3"
-    "@typescript-eslint/parser" "^5.42.0"
+    "@next/eslint-plugin-next" "14.1.0"
+    "@rushstack/eslint-patch" "^1.3.3"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.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-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-plugin-import "^2.28.1"
+    eslint-plugin-jsx-a11y "^6.7.1"
+    eslint-plugin-react "^7.33.2"
+    eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
 
-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-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
 
-eslint-config-turbo@latest:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.11.2.tgz#8e6c456f58e88ecc9adface9c5e03fa782e8bba5"
-  integrity sha512-vqbyCH6kCHFoIAWUmGL61c0BfUQNz0XAl2RzAnEkSQ+PLXvEvuV2HsvL51UOzyyElfJlzZuh9T4BvUqb5KR9Eg==
+eslint-config-turbo@^1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.12.4.tgz#b911aced2228e98176dbebe0f1ebef345a253400"
+  integrity sha512-5hqEaV6PNmAYLL4RTmq74OcCt8pgzOLnfDVPG/7PUXpQ0Mpz0gr926oCSFukywKKXjdum3VHD84S7Z9A/DqTAw==
   dependencies:
-    eslint-plugin-turbo "1.11.2"
+    eslint-plugin-turbo "1.12.4"
 
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
@@ -4526,17 +4424,6 @@ eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
     is-core-module "^2.13.0"
     resolve "^1.22.4"
 
-eslint-import-resolver-typescript@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
-  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
-  dependencies:
-    debug "^4.3.4"
-    glob "^7.2.0"
-    is-glob "^4.0.3"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
-
 eslint-import-resolver-typescript@^3.5.2:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
@@ -4557,7 +4444,7 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@^2.26.0:
+eslint-plugin-import@^2.28.1, eslint-plugin-import@^2.29.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
   integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
@@ -4580,7 +4467,7 @@ eslint-plugin-import@^2.26.0:
     semver "^6.3.1"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-jsx-a11y@^6.5.1:
+eslint-plugin-jsx-a11y@^6.7.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==
@@ -4602,32 +4489,12 @@ eslint-plugin-jsx-a11y@^6.5.1:
     object.entries "^1.1.7"
     object.fromentries "^2.0.7"
 
-eslint-plugin-react-hooks@^4.5.0:
+"eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@7.31.8:
-  version "7.31.8"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz#3a4f80c10be1bcbc8197be9e8b641b2a3ef219bf"
-  integrity sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==
-  dependencies:
-    array-includes "^3.1.5"
-    array.prototype.flatmap "^1.3.0"
-    doctrine "^2.1.0"
-    estraverse "^5.3.0"
-    jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.1.2"
-    object.entries "^1.1.5"
-    object.fromentries "^2.0.5"
-    object.hasown "^1.1.1"
-    object.values "^1.1.5"
-    prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
-    semver "^6.3.0"
-    string.prototype.matchall "^4.0.7"
-
-eslint-plugin-react@^7.29.4, eslint-plugin-react@^7.31.7:
+eslint-plugin-react@^7.33.2:
   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==
@@ -4649,10 +4516,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.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.11.2.tgz#7bb450cced51d35369a678114c2ee9882937adc5"
-  integrity sha512-U6DX+WvgGFiwEAqtOjm4Ejd9O4jsw8jlFNkQi0ywxbMnbiTie+exF4Z0F/B1ajtjjeZkBkgRnlU+UkoraBN+bw==
+eslint-plugin-turbo@1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.12.4.tgz#f29ddd89cb853db5dd4332db39ec2d85c713041e"
+  integrity sha512-3AGmXvH7E4i/XTWqBrcgu+G7YKZJV/8FrEn79kTd50ilNsv+U3nS2IlcCrQB6Xm2m9avGD9cadLzKDR1/UF2+g==
   dependencies:
     dotenv "16.0.3"
 
@@ -4664,7 +4531,7 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1, eslint-scope@^7.2.2:
+eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
   integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
@@ -4672,182 +4539,21 @@ eslint-scope@^7.1.1, eslint-scope@^7.2.2:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
 eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@8.34.0:
-  version "8.34.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.34.0.tgz#fe0ab0ef478104c1f9ebc5537e303d25a8fb22d6"
-  integrity sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==
-  dependencies:
-    "@eslint/eslintrc" "^1.4.1"
-    "@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-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
-    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"
-    regexpp "^3.2.0"
-    strip-ansi "^6.0.1"
-    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"
-  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
-  dependencies:
-    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.3"
-    "@humanwhocodes/config-array" "^0.5.0"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
-    esquery "^1.4.0"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.1.2"
-    globals "^13.6.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    js-yaml "^3.13.1"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^6.0.9"
-    text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
-
-eslint@^8.31.0:
-  version "8.56.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.56.0.tgz#4957ce8da409dc0809f99ab07a1b94832ab74b15"
-  integrity sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==
+eslint@^8.57.0:
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
     "@eslint/eslintrc" "^2.1.4"
-    "@eslint/js" "8.56.0"
-    "@humanwhocodes/config-array" "^0.11.13"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
     "@ungap/structured-clone" "^1.2.0"
@@ -4882,16 +4588,7 @@ eslint@^8.31.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-espree@^7.3.0, espree@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
-  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
-  dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
-
-espree@^9.4.0, espree@^9.5.0, espree@^9.6.0, espree@^9.6.1:
+espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
@@ -4900,12 +4597,7 @@ espree@^9.4.0, espree@^9.5.0, espree@^9.6.0, espree@^9.6.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.4.1"
 
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
-esquery@^1.4.0, esquery@^1.4.2:
+esquery@^1.4.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
@@ -5092,9 +4784,9 @@ flatted@^3.2.9:
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
 follow-redirects@^1.15.0:
-  version "1.15.4"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
-  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
+  version "1.15.6"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -5175,11 +4867,6 @@ function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
     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.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
@@ -5262,19 +4949,7 @@ glob-to-regexp@^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.7:
-  version "7.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^10.3.10:
+glob@10.3.10, glob@^10.3.10:
   version "10.3.10"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
   integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
@@ -5285,7 +4960,7 @@ glob@^10.3.10:
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
 
-glob@^7.0.3, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
+glob@^7.0.3, glob@^7.1.3, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -5313,7 +4988,7 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0, globals@^13.6.0, globals@^13.9.0:
+globals@^13.19.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
@@ -5362,11 +5037,6 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^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==
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
-
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
@@ -5476,11 +5146,6 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
@@ -5491,7 +5156,7 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -5890,24 +5555,11 @@ js-cookie@^3.0.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
   integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
-js-sdsl@^4.1.4:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.2.tgz#2e3c031b1f47d3aca8b775532e3ebb0818e7f847"
-  integrity sha512-dwXFwByc/ajSV6m5bcKAPwe4yDDF6D614pxmIi5odytzxRlwqF6nwoiCek80Ixc7Cvma5awClxrzFtxCQvcM8w==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
-  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -6156,11 +5808,6 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash.truncate@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
-  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
-
 lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -6590,7 +6237,7 @@ minimatch@9.0.3, minimatch@^9.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -6832,7 +6479,7 @@ 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, object.entries@^1.1.7:
+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==
@@ -6841,7 +6488,7 @@ object.entries@^1.1.5, object.entries@^1.1.6, object.entries@^1.1.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-object.fromentries@^2.0.5, object.fromentries@^2.0.6, object.fromentries@^2.0.7:
+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==
@@ -6860,7 +6507,7 @@ object.groupby@^1.0.1:
     es-abstract "^1.22.1"
     get-intrinsic "^1.2.1"
 
-object.hasown@^1.1.1, object.hasown@^1.1.2:
+object.hasown@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
   integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
@@ -6882,7 +6529,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.5, object.values@^1.1.6, object.values@^1.1.7:
+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==
@@ -6905,7 +6552,7 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
-optionator@^0.9.1, optionator@^0.9.3:
+optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
   integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
@@ -7234,7 +6881,7 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-progress@^2.0.0, progress@^2.0.3:
+progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -7737,11 +7384,6 @@ regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
     define-properties "^1.2.0"
     set-function-name "^2.0.0"
 
-regexpp@^3.1.0, regexpp@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
-  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
-
 regexpu-core@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
@@ -7800,7 +7442,7 @@ resolve-pkg-maps@^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.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:
+resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.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==
@@ -7809,7 +7451,7 @@ resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
+resolve@^2.0.0-next.4:
   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==
@@ -7965,12 +7607,12 @@ selecto@~1.26.3:
     keycon "^1.2.0"
     overlap-area "^1.1.0"
 
-semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+semver@^6.0.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.2.1, semver@^7.3.5, semver@^7.3.7, semver@^7.5.4:
+semver@^7.3.5, semver@^7.3.7, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -8090,15 +7732,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
-  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
-  dependencies:
-    ansi-styles "^4.0.0"
-    astral-regex "^2.0.0"
-    is-fullwidth-code-point "^3.0.0"
-
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
@@ -8107,6 +7740,11 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+sonner@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.4.2.tgz#92740c293e9d911de726080995bd8a0cc677ccd1"
+  integrity sha512-x3Kfzfhb56V/ErvUnH5dZcsu6QkZpyIlRAogO4vAbN+AkBsA/8CFqOV+5djqbE5pQCpejtO4JBWL1zRj2sO/Vg==
+
 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"
@@ -8152,11 +7790,6 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
   integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
 
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
-
 stacktrace-parser@^0.1.10:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"
@@ -8177,7 +7810,8 @@ streamx@^2.15.0:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8195,7 +7829,7 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7, string.prototype.matchall@^4.0.8:
+string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.8:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
   integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
@@ -8254,6 +7888,7 @@ stringify-object@^3.3.0:
     is-regexp "^1.0.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8282,7 +7917,7 @@ strip-final-newline@^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:
+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"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -8363,17 +7998,6 @@ tabbable@^6.0.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
-table@^6.0.9:
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
-  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
-  dependencies:
-    ajv "^8.0.1"
-    lodash.truncate "^4.4.2"
-    slice-ansi "^4.0.0"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-
 tailwind-merge@^1.14.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
@@ -8540,10 +8164,10 @@ tippy.js@^6.3.1, tippy.js@^6.3.7:
   dependencies:
     "@popperjs/core" "^2.9.0"
 
-tiptap-markdown@^0.8.2:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.8.tgz#1e25f40b726239dff84b99a53eb1bdf4af0a02f9"
-  integrity sha512-I2w/IpvCZ1BoR3nQzG0wRK3uGmDv+Ohyr++G24Ma6RzoDYd0TVGXZp0BOODX5Jj4c6heVY8eksahSeAwJMZBeg==
+tiptap-markdown@^0.8.9:
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.9.tgz#e13f3ae9a1b1649f8c28bb3cae4516a53da7492c"
+  integrity sha512-TykSDcsb94VFCzPbSSTfB6Kh2HJi7x4B9J3Jm9uSOAMPy8App1YfrLW/rEJLajTxwMVhWBdOo4nidComSlLQsQ==
   dependencies:
     "@types/markdown-it" "^12.2.3"
     markdown-it "^13.0.1"
@@ -8599,7 +8223,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tsconfig-paths@^3.14.1, tsconfig-paths@^3.15.0:
+tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
   integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
@@ -8796,11 +8420,16 @@ typescript@4.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
-typescript@4.9.5, typescript@^4.7.4:
+typescript@4.9.5:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typescript@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
@@ -9001,11 +8630,6 @@ uvu@^0.5.0:
     kleur "^4.0.3"
     sade "^1.7.3"
 
-v8-compile-cache@^2.0.3:
-  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"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"