diff --git a/.github/ISSUE_TEMPLATE/--bug-report.yaml b/.github/ISSUE_TEMPLATE/--bug-report.yaml
index 5d19be11c..3adaa4230 100644
--- a/.github/ISSUE_TEMPLATE/--bug-report.yaml
+++ b/.github/ISSUE_TEMPLATE/--bug-report.yaml
@@ -2,7 +2,7 @@ name: Bug report
 description: Create a bug report to help us improve Plane
 title: "[bug]: "
 labels: [🐛bug]
-assignees: [srinivaspendem, pushya-plane]
+assignees: [srinivaspendem, pushya22]
 body:
 - type: markdown
   attributes:
@@ -45,7 +45,7 @@ body:
       - Deploy preview
   validations:
     required: true
-  type: dropdown
+- type: dropdown
   id: browser
   attributes:
     label: Browser
diff --git a/.github/ISSUE_TEMPLATE/--feature-request.yaml b/.github/ISSUE_TEMPLATE/--feature-request.yaml
index 941fbef87..ff9cdd238 100644
--- a/.github/ISSUE_TEMPLATE/--feature-request.yaml
+++ b/.github/ISSUE_TEMPLATE/--feature-request.yaml
@@ -2,7 +2,7 @@ name: Feature request
 description: Suggest a feature to improve Plane
 title: "[feature]: "
 labels: [✨feature]
-assignees: [srinivaspendem, pushya-plane]
+assignees: [srinivaspendem, pushya22]
 body:
 - type: markdown
   attributes:
diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index 0d3f97068..44bae0efa 100644
--- a/.github/workflows/build-branch.yml
+++ b/.github/workflows/build-branch.yml
@@ -23,6 +23,10 @@ jobs:
       gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
       gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
       gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
+      build_frontend: ${{ steps.changed_files.outputs.frontend_any_changed }}
+      build_space: ${{ steps.changed_files.outputs.space_any_changed }}
+      build_backend: ${{ steps.changed_files.outputs.backend_any_changed }}
+      build_proxy: ${{ steps.changed_files.outputs.proxy_any_changed }}
 
     steps:
       - id: set_env_variables
@@ -41,7 +45,36 @@ jobs:
           fi
           echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
 
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
+
+      - name: Get changed files
+        id: changed_files
+        uses: tj-actions/changed-files@v42
+        with:
+          files_yaml: |
+            frontend:
+              - web/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+            space:
+              - space/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+            backend:
+              - apiserver/**
+            proxy:
+              - 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' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -55,9 +88,9 @@ jobs:
       - name: Set Frontend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest
           else
             TAG=${{ env.FRONTEND_TAG }}
           fi
@@ -77,7 +110,7 @@ jobs:
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4
 
       - name: Build and Push Frontend to Docker Container Registry
         uses: docker/build-push-action@v5.1.0
@@ -93,6 +126,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' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -106,9 +140,9 @@ jobs:
       - name: Set Space Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
           else
             TAG=${{ env.SPACE_TAG }}
           fi
@@ -128,7 +162,7 @@ jobs:
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4
 
       - name: Build and Push Space to Docker Hub
         uses: docker/build-push-action@v5.1.0
@@ -144,6 +178,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' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -157,9 +192,9 @@ jobs:
       - name: Set Backend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
@@ -179,7 +214,7 @@ jobs:
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4
 
       - name: Build and Push Backend to Docker Hub
         uses: docker/build-push-action@v5.1.0
@@ -194,8 +229,8 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           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' }}
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
@@ -209,9 +244,9 @@ jobs:
       - name: Set Proxy Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest
           else
             TAG=${{ env.PROXY_TAG }}
           fi
@@ -231,7 +266,7 @@ jobs:
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4
 
       - name: Build and Push Plane-Proxy to Docker Hub
         uses: docker/build-push-action@v5.1.0
diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index 47a85f3ba..8644f04f0 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -2,7 +2,7 @@ name: Create Sync Action
 
 on:
   workflow_dispatch:
-  push: 
+  push:
     branches:
       - preview
 
@@ -17,7 +17,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4.1.1 
+        uses: actions/checkout@v4.1.1
         with:
           persist-credentials: false
           fetch-depth: 0
@@ -31,14 +31,25 @@ jobs:
           sudo apt update
           sudo apt install gh -y
 
-      - name: Push Changes to Target Repo
+      - name: Push Changes to Target Repo A
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
-          TARGET_REPO="${{ secrets.SYNC_TARGET_REPO_NAME }}"
-          TARGET_BRANCH="${{ secrets.SYNC_TARGET_BRANCH_NAME }}"
+          TARGET_REPO="${{ secrets.TARGET_REPO_A }}"
+          TARGET_BRANCH="${{ secrets.TARGET_REPO_A_BRANCH_NAME }}"
           SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
 
           git checkout $SOURCE_BRANCH
-          git remote add target-origin "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
-          git push target-origin $SOURCE_BRANCH:$TARGET_BRANCH
+          git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+          git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH
+
+      - name: Push Changes to Target Repo B
+        env:
+          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        run: |
+          TARGET_REPO="${{ secrets.TARGET_REPO_B }}"
+          TARGET_BRANCH="${{ secrets.TARGET_REPO_B_BRANCH_NAME }}"
+          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
+
+          git remote add target-origin-b "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+          git push target-origin-b $SOURCE_BRANCH:$TARGET_BRANCH
diff --git a/apiserver/package.json b/apiserver/package.json
index fb4f8441d..060944406 100644
--- a/apiserver/package.json
+++ b/apiserver/package.json
@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.15.1"
+  "version": "0.16.0"
 }
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index 6f66c373e..84931f46b 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -45,7 +45,10 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
         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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .select_related("owned_by")
@@ -390,7 +393,10 @@ class CycleIssueAPIEndpoint(WebhookMixin, BaseAPIView):
             )
             .filter(workspace__slug=self.kwargs.get("slug"))
             .filter(project_id=self.kwargs.get("project_id"))
-            .filter(project__project_projectmember__member=self.request.user)
+            .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")
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 50269fe07..0905ae1f7 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -352,7 +352,10 @@ class LabelAPIEndpoint(BaseAPIView):
         return (
             Label.objects.filter(workspace__slug=self.kwargs.get("slug"))
             .filter(project_id=self.kwargs.get("project_id"))
-            .filter(project__project_projectmember__member=self.request.user)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .select_related("parent")
@@ -481,7 +484,10 @@ class IssueLinkAPIEndpoint(BaseAPIView):
             IssueLink.objects.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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by(self.kwargs.get("order_by", "-created_at"))
             .distinct()
         )
@@ -607,11 +613,11 @@ class IssueCommentAPIEndpoint(WebhookMixin, BaseAPIView):
             )
             .filter(project_id=self.kwargs.get("project_id"))
             .filter(issue_id=self.kwargs.get("issue_id"))
-            .filter(project__project_projectmember__member=self.request.user)
-            .select_related("project")
-            .select_related("workspace")
-            .select_related("issue")
-            .select_related("actor")
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
+            .select_related("workspace", "project", "issue", "actor")
             .annotate(
                 is_member=Exists(
                     ProjectMember.objects.filter(
@@ -784,6 +790,7 @@ class IssueActivityAPIEndpoint(BaseAPIView):
             .filter(
                 ~Q(field__in=["comment", "vote", "reaction", "draft"]),
                 project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=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 d509a53c7..2e5bb85e2 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -273,7 +273,10 @@ class ModuleIssueAPIEndpoint(WebhookMixin, BaseAPIView):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .select_related("module")
diff --git a/apiserver/plane/api/views/state.py b/apiserver/plane/api/views/state.py
index dedc15ccd..ec10f9bab 100644
--- a/apiserver/plane/api/views/state.py
+++ b/apiserver/plane/api/views/state.py
@@ -24,7 +24,10 @@ class StateAPIEndpoint(BaseAPIView):
         return (
             State.objects.filter(workspace__slug=self.kwargs.get("slug"))
             .filter(project_id=self.kwargs.get("project_id"))
-            .filter(project__project_projectmember__member=self.request.user)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .filter(~Q(name="Triage"))
             .select_related("project")
             .select_related("workspace")
diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index 8d4304f92..411c5b73f 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -601,15 +601,15 @@ class IssueSerializer(DynamicBaseSerializer):
     # ids
     cycle_id = serializers.PrimaryKeyRelatedField(read_only=True)
     module_ids = serializers.ListField(
-        child=serializers.UUIDField(), required=False, allow_null=True
+        child=serializers.UUIDField(), required=False,
     )
 
     # Many to many
     label_ids = serializers.ListField(
-        child=serializers.UUIDField(), required=False, allow_null=True
+        child=serializers.UUIDField(), required=False,
     )
     assignee_ids = serializers.ListField(
-        child=serializers.UUIDField(), required=False, allow_null=True
+        child=serializers.UUIDField(), required=False,
     )
 
     # Count items
diff --git a/apiserver/plane/app/urls/issue.py b/apiserver/plane/app/urls/issue.py
index 7d661b49e..4ee70450b 100644
--- a/apiserver/plane/app/urls/issue.py
+++ b/apiserver/plane/app/urls/issue.py
@@ -259,23 +259,15 @@ urlpatterns = [
         name="project-issue-archive",
     ),
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/",
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/archive/",
         IssueArchiveViewSet.as_view(
             {
                 "get": "retrieve",
-                "delete": "destroy",
+                "post": "archive",
+                "delete": "unarchive",
             }
         ),
-        name="project-issue-archive",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/unarchive/<uuid:pk>/",
-        IssueArchiveViewSet.as_view(
-            {
-                "post": "unarchive",
-            }
-        ),
-        name="project-issue-archive",
+        name="project-issue-archive-unarchive",
     ),
     ## End Issue Archives
     ## Issue Relation
diff --git a/apiserver/plane/app/views/config.py b/apiserver/plane/app/views/config.py
index 29b4bbf8b..b2a27252c 100644
--- a/apiserver/plane/app/views/config.py
+++ b/apiserver/plane/app/views/config.py
@@ -66,15 +66,15 @@ class ConfigurationEndpoint(BaseAPIView):
                 },
                 {
                     "key": "SLACK_CLIENT_ID",
-                    "default": os.environ.get("SLACK_CLIENT_ID", "1"),
+                    "default": os.environ.get("SLACK_CLIENT_ID", None),
                 },
                 {
                     "key": "POSTHOG_API_KEY",
-                    "default": os.environ.get("POSTHOG_API_KEY", "1"),
+                    "default": os.environ.get("POSTHOG_API_KEY", None),
                 },
                 {
                     "key": "POSTHOG_HOST",
-                    "default": os.environ.get("POSTHOG_HOST", "1"),
+                    "default": os.environ.get("POSTHOG_HOST", None),
                 },
                 {
                     "key": "UNSPLASH_ACCESS_KEY",
@@ -181,11 +181,11 @@ class MobileConfigurationEndpoint(BaseAPIView):
                 },
                 {
                     "key": "POSTHOG_API_KEY",
-                    "default": os.environ.get("POSTHOG_API_KEY", "1"),
+                    "default": os.environ.get("POSTHOG_API_KEY", None),
                 },
                 {
                     "key": "POSTHOG_HOST",
-                    "default": os.environ.get("POSTHOG_HOST", "1"),
+                    "default": os.environ.get("POSTHOG_HOST", None),
                 },
                 {
                     "key": "UNSPLASH_ACCESS_KEY",
diff --git a/apiserver/plane/app/views/cycle.py b/apiserver/plane/app/views/cycle.py
index 866396655..85e1e9f2e 100644
--- a/apiserver/plane/app/views/cycle.py
+++ b/apiserver/plane/app/views/cycle.py
@@ -85,7 +85,10 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project", "workspace", "owned_by")
             .prefetch_related(
                 Prefetch(
@@ -689,7 +692,10 @@ class CycleIssueViewSet(WebhookMixin, BaseViewSet):
             )
             .filter(workspace__slug=self.kwargs.get("slug"))
             .filter(project_id=self.kwargs.get("project_id"))
-            .filter(project__project_projectmember__member=self.request.user)
+            .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")
diff --git a/apiserver/plane/app/views/dashboard.py b/apiserver/plane/app/views/dashboard.py
index 21fe422f9..62ce0d910 100644
--- a/apiserver/plane/app/views/dashboard.py
+++ b/apiserver/plane/app/views/dashboard.py
@@ -58,6 +58,7 @@ def dashboard_overview_stats(self, request, slug):
 
     pending_issues_count = Issue.issue_objects.filter(
         ~Q(state__group__in=["completed", "cancelled"]),
+        target_date__lt=timezone.now().date(),
         project__project_projectmember__is_active=True,
         project__project_projectmember__member=request.user,
         workspace__slug=slug,
diff --git a/apiserver/plane/app/views/inbox.py b/apiserver/plane/app/views/inbox.py
index 85e2f38b2..ed32a14fe 100644
--- a/apiserver/plane/app/views/inbox.py
+++ b/apiserver/plane/app/views/inbox.py
@@ -33,6 +33,7 @@ from plane.app.serializers import (
     IssueSerializer,
     InboxSerializer,
     InboxIssueSerializer,
+    IssueDetailSerializer,
 )
 from plane.utils.issue_filters import issue_filters
 from plane.bgtasks.issue_activites_task import issue_activity
@@ -296,11 +297,7 @@ class InboxIssueViewSet(BaseViewSet):
         issue_data = request.data.pop("issue", False)
 
         if bool(issue_data):
-            issue = Issue.objects.get(
-                pk=inbox_issue.issue_id,
-                workspace__slug=slug,
-                project_id=project_id,
-            )
+            issue = self.get_queryset().filter(pk=inbox_issue.issue_id).first()
             # Only allow guests and viewers to edit name and description
             if project_member.role <= 10:
                 # viewers and guests since only viewers and guests
@@ -430,11 +427,10 @@ class InboxIssueViewSet(BaseViewSet):
                 )
             )
         ).first()
-
         if issue is None:
             return Response({"error": "Requested object was not found"}, status=status.HTTP_404_NOT_FOUND)
         
-        serializer = IssueSerializer(issue)
+        serializer = IssueDetailSerializer(issue)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, inbox_id, issue_id):
diff --git a/apiserver/plane/app/views/integration/slack.py b/apiserver/plane/app/views/integration/slack.py
index 410e6b332..c22ee3e52 100644
--- a/apiserver/plane/app/views/integration/slack.py
+++ b/apiserver/plane/app/views/integration/slack.py
@@ -36,7 +36,10 @@ class SlackProjectSyncViewSet(BaseViewSet):
                 workspace__slug=self.kwargs.get("slug"),
                 project_id=self.kwargs.get("project_id"),
             )
-            .filter(project__project_projectmember__member=self.request.user)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
         )
 
     def create(self, request, slug, project_id, workspace_integration_id):
diff --git a/apiserver/plane/app/views/issue.py b/apiserver/plane/app/views/issue.py
index 9f95c9b43..14e0b6a9a 100644
--- a/apiserver/plane/app/views/issue.py
+++ b/apiserver/plane/app/views/issue.py
@@ -572,12 +572,18 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     def partial_update(self, request, slug, project_id, pk=None):
-        issue = Issue.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
+        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
@@ -767,7 +773,10 @@ class WorkSpaceIssuesEndpoint(BaseAPIView):
     def get(self, request, slug):
         issues = (
             Issue.issue_objects.filter(workspace__slug=slug)
-            .filter(project__project_projectmember__member=self.request.user)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by("-created_at")
         )
         serializer = IssueSerializer(issues, many=True)
@@ -790,6 +799,7 @@ class IssueActivityEndpoint(BaseAPIView):
             .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)
@@ -799,6 +809,7 @@ class IssueActivityEndpoint(BaseAPIView):
             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)
@@ -850,7 +861,10 @@ class IssueCommentViewSet(WebhookMixin, BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .select_related("issue")
@@ -1012,7 +1026,10 @@ class LabelViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .select_related("parent")
@@ -1225,7 +1242,10 @@ class IssueLinkViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by("-created_at")
             .distinct()
         )
@@ -1627,6 +1647,36 @@ class IssueArchiveViewSet(BaseViewSet):
         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,
@@ -1650,7 +1700,7 @@ class IssueArchiveViewSet(BaseViewSet):
         issue.archived_at = None
         issue.save()
 
-        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class IssueSubscriberViewSet(BaseViewSet):
@@ -1686,7 +1736,10 @@ class IssueSubscriberViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by("-created_at")
             .distinct()
         )
@@ -1770,7 +1823,10 @@ class IssueReactionViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by("-created_at")
             .distinct()
         )
@@ -1839,7 +1895,10 @@ class CommentReactionViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by("-created_at")
             .distinct()
         )
@@ -1909,7 +1968,10 @@ class IssueRelationViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .select_related("issue")
@@ -2296,20 +2358,18 @@ class IssueDraftViewSet(BaseViewSet):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, slug, project_id, pk):
-        issue = Issue.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
-        serializer = IssueSerializer(issue, data=request.data, partial=True)
+        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():
-            if request.data.get(
-                "is_draft"
-            ) is not None and not request.data.get("is_draft"):
-                serializer.save(
-                    created_at=timezone.now(), updated_at=timezone.now()
-                )
-            else:
-                serializer.save()
+            serializer.save()
             issue_activity.delay(
                 type="issue_draft.activity.updated",
                 requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
diff --git a/apiserver/plane/app/views/module.py b/apiserver/plane/app/views/module.py
index 5ac244dda..3b52db64f 100644
--- a/apiserver/plane/app/views/module.py
+++ b/apiserver/plane/app/views/module.py
@@ -673,7 +673,10 @@ class ModuleLinkViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .order_by("-created_at")
             .distinct()
         )
diff --git a/apiserver/plane/app/views/page.py b/apiserver/plane/app/views/page.py
index 1d8ff1fbb..7ecf22fa8 100644
--- a/apiserver/plane/app/views/page.py
+++ b/apiserver/plane/app/views/page.py
@@ -60,7 +60,10 @@ class PageViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .filter(parent__isnull=True)
             .filter(Q(owned_by=self.request.user) | Q(access=0))
             .select_related("project")
diff --git a/apiserver/plane/app/views/project.py b/apiserver/plane/app/views/project.py
index 5d2f95673..6f9b2618e 100644
--- a/apiserver/plane/app/views/project.py
+++ b/apiserver/plane/app/views/project.py
@@ -77,6 +77,12 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
     ]
 
     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()
@@ -147,6 +153,7 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                     )
                 )
             )
+            .annotate(sort_order=Subquery(sort_order))
             .prefetch_related(
                 Prefetch(
                     "project_projectmember",
@@ -166,16 +173,8 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
             for field in request.GET.get("fields", "").split(",")
             if field
         ]
-
-        sort_order_query = ProjectMember.objects.filter(
-            member=request.user,
-            project_id=OuterRef("pk"),
-            workspace__slug=self.kwargs.get("slug"),
-            is_active=True,
-        ).values("sort_order")
         projects = (
             self.get_queryset()
-            .annotate(sort_order=Subquery(sort_order_query))
             .order_by("sort_order", "name")
         )
         if request.GET.get("per_page", False) and request.GET.get(
@@ -204,7 +203,7 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                 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,
diff --git a/apiserver/plane/app/views/search.py b/apiserver/plane/app/views/search.py
index ccef3d18f..a2ed1c015 100644
--- a/apiserver/plane/app/views/search.py
+++ b/apiserver/plane/app/views/search.py
@@ -48,8 +48,8 @@ class GlobalSearchEndpoint(BaseAPIView):
         return (
             Project.objects.filter(
                 q,
-                Q(project_projectmember__member=self.request.user)
-                | Q(network=2),
+                project_projectmember__member=self.request.user,
+                project_projectmember__is_active=True,
                 workspace__slug=slug,
             )
             .distinct()
@@ -71,6 +71,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         issues = Issue.issue_objects.filter(
             q,
             project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
             workspace__slug=slug,
         )
 
@@ -95,6 +96,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         cycles = Cycle.objects.filter(
             q,
             project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
             workspace__slug=slug,
         )
 
@@ -118,6 +120,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         modules = Module.objects.filter(
             q,
             project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
             workspace__slug=slug,
         )
 
@@ -141,6 +144,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         pages = Page.objects.filter(
             q,
             project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
             workspace__slug=slug,
         )
 
@@ -164,6 +168,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         issue_views = IssueView.objects.filter(
             q,
             project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
             workspace__slug=slug,
         )
 
@@ -236,6 +241,7 @@ class IssueSearchEndpoint(BaseAPIView):
         issues = Issue.issue_objects.filter(
             workspace__slug=slug,
             project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
         )
 
         if workspace_search == "false":
diff --git a/apiserver/plane/app/views/state.py b/apiserver/plane/app/views/state.py
index 242061e18..34b3d1dcc 100644
--- a/apiserver/plane/app/views/state.py
+++ b/apiserver/plane/app/views/state.py
@@ -31,7 +31,10 @@ class StateViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .filter(~Q(name="Triage"))
             .select_related("project")
             .select_related("workspace")
diff --git a/apiserver/plane/app/views/view.py b/apiserver/plane/app/views/view.py
index 97a0f036f..ade445fae 100644
--- a/apiserver/plane/app/views/view.py
+++ b/apiserver/plane/app/views/view.py
@@ -86,6 +86,10 @@ class GlobalViewIssuesViewSet(BaseViewSet):
                 .values("count")
             )
             .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("workspace", "project", "state", "parent")
             .prefetch_related("assignees", "labels", "issue_module__module")
             .annotate(cycle_id=F("issue_cycle__cycle_id"))
@@ -163,7 +167,6 @@ class GlobalViewIssuesViewSet(BaseViewSet):
         issue_queryset = (
             self.get_queryset()
             .filter(**filters)
-            .filter(project__project_projectmember__member=self.request.user)
             .annotate(cycle_id=F("issue_cycle__cycle_id"))
         )
 
@@ -284,7 +287,10 @@ class IssueViewViewSet(BaseViewSet):
             .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)
+            .filter(
+                project__project_projectmember__member=self.request.user,
+                project__project_projectmember__is_active=True,
+            )
             .select_related("project")
             .select_related("workspace")
             .annotate(is_favorite=Exists(subquery))
diff --git a/apiserver/plane/app/views/workspace.py b/apiserver/plane/app/views/workspace.py
index 6677b4c4b..47de86a1c 100644
--- a/apiserver/plane/app/views/workspace.py
+++ b/apiserver/plane/app/views/workspace.py
@@ -1086,6 +1086,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
                 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"))
@@ -1101,6 +1102,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
                 workspace__slug=slug,
                 assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True
             )
             .filter(**filters)
             .values("priority")
@@ -1123,6 +1125,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
             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)
@@ -1134,6 +1137,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
                 workspace__slug=slug,
                 assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True,
             )
             .filter(**filters)
             .count()
@@ -1145,6 +1149,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
                 workspace__slug=slug,
                 assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True,
             )
             .filter(**filters)
             .count()
@@ -1156,6 +1161,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
                 assignees__in=[user_id],
                 state__group="completed",
                 project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True
             )
             .filter(**filters)
             .count()
@@ -1166,6 +1172,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
                 workspace__slug=slug,
                 subscriber_id=user_id,
                 project__project_projectmember__member=request.user,
+                project__project_projectmember__is_active=True
             )
             .filter(**filters)
             .count()
@@ -1215,6 +1222,7 @@ class WorkspaceUserActivityEndpoint(BaseAPIView):
             ~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")
 
@@ -1355,6 +1363,7 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
                 | 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")
@@ -1486,6 +1495,7 @@ class WorkspaceLabelsEndpoint(BaseAPIView):
         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)
@@ -1500,6 +1510,7 @@ class WorkspaceStatesEndpoint(BaseAPIView):
         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)
diff --git a/apiserver/plane/bgtasks/email_notification_task.py b/apiserver/plane/bgtasks/email_notification_task.py
index 617bfcfdc..2a98c6b33 100644
--- a/apiserver/plane/bgtasks/email_notification_task.py
+++ b/apiserver/plane/bgtasks/email_notification_task.py
@@ -10,6 +10,7 @@ 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
@@ -301,5 +302,7 @@ def send_email_notification(
             print("Duplicate task recived. Skipping...")
             return
     except (Issue.DoesNotExist, User.DoesNotExist) as e:
+        if settings.DEBUG:
+            print(e)
         release_lock(lock_id=lock_id)
         return
diff --git a/apiserver/plane/bgtasks/export_task.py b/apiserver/plane/bgtasks/export_task.py
index b99e4b1d9..d8522e769 100644
--- a/apiserver/plane/bgtasks/export_task.py
+++ b/apiserver/plane/bgtasks/export_task.py
@@ -292,6 +292,7 @@ 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
                 )
                 .select_related(
                     "project", "workspace", "state", "parent", "created_by"
diff --git a/apiserver/plane/bgtasks/importer_task.py b/apiserver/plane/bgtasks/importer_task.py
index 421521363..7a1dc4fc6 100644
--- a/apiserver/plane/bgtasks/importer_task.py
+++ b/apiserver/plane/bgtasks/importer_task.py
@@ -60,15 +60,6 @@ def service_importer(service, importer_id):
                 batch_size=100,
             )
 
-            _ = [
-                send_welcome_slack.delay(
-                    str(user.id),
-                    True,
-                    f"{user.email} was imported to Plane from {service}",
-                )
-                for user in new_users
-            ]
-
             workspace_users = User.objects.filter(
                 email__in=[
                     user.get("email").strip().lower()
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index b86ab5e78..2a16ee911 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -483,17 +483,23 @@ def track_archive_at(
                 )
             )
         else:
+            if requested_data.get("automation"):
+                comment = "Plane has archived the issue"
+                new_value = "archive"
+            else:
+                comment = "Actor has archived the issue"
+                new_value = "manual_archive"
             issue_activities.append(
                 IssueActivity(
                     issue_id=issue_id,
                     project_id=project_id,
                     workspace_id=workspace_id,
-                    comment="Plane has archived the issue",
+                    comment=comment,
                     verb="updated",
                     actor_id=actor_id,
                     field="archived_at",
                     old_value=None,
-                    new_value="archive",
+                    new_value=new_value,
                     epoch=epoch,
                 )
             )
diff --git a/apiserver/plane/bgtasks/issue_automation_task.py b/apiserver/plane/bgtasks/issue_automation_task.py
index 974a545fc..c6c4d7515 100644
--- a/apiserver/plane/bgtasks/issue_automation_task.py
+++ b/apiserver/plane/bgtasks/issue_automation_task.py
@@ -79,7 +79,7 @@ def archive_old_issues():
                         issue_activity.delay(
                             type="issue.activity.updated",
                             requested_data=json.dumps(
-                                {"archived_at": str(archive_at)}
+                                {"archived_at": str(archive_at), "automation": True}
                             ),
                             actor_id=str(project.created_by_id),
                             issue_id=issue.id,
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index f254a3cb7..0377ccb8b 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -12,15 +12,9 @@ from django.contrib.auth.models import (
     PermissionsMixin,
 )
 from django.db.models.signals import post_save
-from django.conf import settings
 from django.dispatch import receiver
 from django.utils import timezone
 
-# Third party imports
-from sentry_sdk import capture_exception
-from slack_sdk import WebClient
-from slack_sdk.errors import SlackApiError
-
 
 def get_default_onboarding():
     return {
@@ -144,25 +138,6 @@ class User(AbstractBaseUser, PermissionsMixin):
         super(User, self).save(*args, **kwargs)
 
 
-@receiver(post_save, sender=User)
-def send_welcome_slack(sender, instance, created, **kwargs):
-    try:
-        if created and not instance.is_bot:
-            # Send message on slack as well
-            if settings.SLACK_BOT_TOKEN:
-                client = WebClient(token=settings.SLACK_BOT_TOKEN)
-                try:
-                    _ = client.chat_postMessage(
-                        channel="#trackers",
-                        text=f"New user {instance.email} has signed up and begun the onboarding journey.",
-                    )
-                except SlackApiError as e:
-                    print(f"Got an error: {e.response['error']}")
-        return
-    except Exception as e:
-        capture_exception(e)
-        return
-
 
 @receiver(post_save, sender=User)
 def create_user_notification(sender, instance, created, **kwargs):
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index f03209250..5c8947e73 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -1,4 +1,5 @@
 """Global Settings"""
+
 # Python imports
 import os
 import ssl
@@ -307,7 +308,9 @@ if bool(os.environ.get("SENTRY_DSN", False)) and os.environ.get(
         traces_sample_rate=1,
         send_default_pii=True,
         environment=os.environ.get("SENTRY_ENVIRONMENT", "development"),
-        profiles_sample_rate=1.0,
+        profiles_sample_rate=float(
+            os.environ.get("SENTRY_PROFILE_SAMPLE_RATE", 0.5)
+        ),
     )
 
 
diff --git a/apiserver/plane/utils/issue_search.py b/apiserver/plane/utils/issue_search.py
index d38b1f4c3..3b6dea332 100644
--- a/apiserver/plane/utils/issue_search.py
+++ b/apiserver/plane/utils/issue_search.py
@@ -9,11 +9,11 @@ from plane.db.models import Issue
 
 
 def search_issues(query, queryset):
-    fields = ["name", "sequence_id"]
+    fields = ["name", "sequence_id", "project__identifier"]
     q = Q()
     for field in fields:
         if field == "sequence_id" and len(query) <= 20:
-            sequences = re.findall(r"[A-Za-z0-9]{1,12}-\d+", query)
+            sequences = re.findall(r"\b\d+\b", query)
             for sequence_id in sequences:
                 q |= Q(**{"sequence_id": sequence_id})
         else:
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 194bf8d90..eb0f54201 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -30,7 +30,7 @@ openpyxl==3.1.2
 beautifulsoup4==4.12.2
 dj-database-url==2.1.0
 posthog==3.0.2
-cryptography==42.0.0
+cryptography==42.0.4
 lxml==4.9.3
 boto3==1.28.40
 
diff --git a/deploy/1-click/README.md b/deploy/1-click/README.md
new file mode 100644
index 000000000..88ea66c4c
--- /dev/null
+++ b/deploy/1-click/README.md
@@ -0,0 +1,78 @@
+# 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
new file mode 100644
index 000000000..c14603a4b
Binary files /dev/null and b/deploy/1-click/images/help.png differ
diff --git a/deploy/1-click/images/install.png b/deploy/1-click/images/install.png
new file mode 100644
index 000000000..c8ba1e5f8
Binary files /dev/null and b/deploy/1-click/images/install.png differ
diff --git a/deploy/1-click/install.sh b/deploy/1-click/install.sh
index 917d08fdf..9a0eac902 100644
--- a/deploy/1-click/install.sh
+++ b/deploy/1-click/install.sh
@@ -1,17 +1,20 @@
 #!/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/makeplane/plane/${BRANCH:-master}/deploy/1-click/plane-app?token=$(date +%s)
+        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/makeplane/plane/${BRANCH:-master}/deploy/1-click/plane-app?token=$(date +%s)
+        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@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 --help
+plane-app -i #--help
diff --git a/deploy/1-click/plane-app b/deploy/1-click/plane-app
index 2d6ef0a6f..e6bd24b9e 100644
--- a/deploy/1-click/plane-app
+++ b/deploy/1-click/plane-app
@@ -90,9 +90,9 @@ function prepare_environment() {
 
     show_message "- Updating OS with required tools ✋"  >&2
     sudo "$PACKAGE_MANAGER" update -y
-    sudo "$PACKAGE_MANAGER" upgrade -y
+    # sudo "$PACKAGE_MANAGER" upgrade -y
 
-    local required_tools=("curl" "awk" "wget" "nano" "dialog" "git" "uidmap")
+    local required_tools=("curl" "awk" "wget" "nano" "dialog" "git" "uidmap" "jq")
 
     for tool in "${required_tools[@]}"; do
         if ! command -v $tool &> /dev/null; then
@@ -150,11 +150,11 @@ function download_plane() {
     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/makeplane/plane/$DEPLOY_BRANCH/deploy/selfhost/docker-compose.yml?token=$(date +%s) 
+        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/makeplane/plane/$DEPLOY_BRANCH/deploy/selfhost/variables.env?token=$(date +%s) 
+        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
@@ -202,7 +202,7 @@ function printUsageInstructions() {
 }
 function build_local_image() {
     show_message "- Downloading Plane Source Code ✋" >&2
-    REPO=https://github.com/makeplane/plane.git
+    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
@@ -290,40 +290,40 @@ function configure_plane() {
     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_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)
+    # 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
+    # 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 ?" \
@@ -383,15 +383,6 @@ function configure_plane() {
             domain_name:          $domain_name
             upload_limit:         $upload_limit
 
-            save_smtp_settings:   $save_smtp_settings
-            smtp_host:            $smtp_host
-            smtp_user:            $smtp_user
-            smtp_password:        $smtp_password
-            smtp_port:            $smtp_port
-            smtp_from:            $smtp_from
-            smtp_tls:             $smtp_tls
-            smtp_ssl:             $smtp_ssl
-
             save_aws_settings:    $save_aws_settings
             aws_region:           $aws_region
             aws_access_key:       $aws_access_key
@@ -413,15 +404,15 @@ function configure_plane() {
         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
+        # 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
@@ -493,13 +484,24 @@ function install() {
                     check_for_docker_images
 
                     last_installed_on=$(read_config "INSTALLATION_DATE")
-                    if [ "$last_installed_on" == "" ]; then
-                        configure_plane
-                    fi
-                    printUsageInstructions
-
-                    update_config "INSTALLATION_DATE" "$(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
@@ -539,12 +541,15 @@ function upgrade() {
             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 ""
@@ -601,6 +606,11 @@ function uninstall() {
             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 ✅"
@@ -642,7 +652,39 @@ function start_server() {
         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
@@ -694,7 +736,7 @@ 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/makeplane/plane/$DEPLOY_BRANCH/deploy/1-click/plane-app?token=$(date +%s) 
+        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
@@ -711,12 +753,14 @@ fi
 
 PLANE_INSTALL_DIR=/opt/plane
 DATA_DIR=$PLANE_INSTALL_DIR/data
-LOG_DIR=$PLANE_INSTALL_DIR/log
+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
@@ -740,6 +784,9 @@ 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
diff --git a/deploy/selfhost/docker-compose.yml b/deploy/selfhost/docker-compose.yml
index 60861878c..07e5ea9f6 100644
--- a/deploy/selfhost/docker-compose.yml
+++ b/deploy/selfhost/docker-compose.yml
@@ -56,8 +56,6 @@ x-app-env : &app-env
     - BUCKET_NAME=${BUCKET_NAME:-uploads}
     - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
 
-
-
 services:
   web:
     <<: *app-env
@@ -138,7 +136,6 @@ services:
     command: postgres -c 'max_connections=1000'
     volumes:
       - pgdata:/var/lib/postgresql/data
-    
   plane-redis:
     <<: *app-env
     image: redis:6.2.7-alpine
diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
index 30f2d15d7..16b6ea7c3 100755
--- a/deploy/selfhost/install.sh
+++ b/deploy/selfhost/install.sh
@@ -13,6 +13,23 @@ YELLOW='\033[1;33m'
 GREEN='\033[0;32m'
 NC='\033[0m' # No Color
 
+function print_header() {
+clear
+
+cat <<"EOF"
+---------------------------------------
+ ____  _                  
+|  _ \| | __ _ _ __   ___ 
+| |_) | |/ _` | '_ \ / _ \
+|  __/| | (_| | | | |  __/
+|_|   |_|\__,_|_| |_|\___|    
+
+---------------------------------------
+Project management tool from the future
+---------------------------------------
+EOF
+}
+
 function buildLocalImage() {
     if [ "$1" == "--force-build" ]; then
         DO_BUILD="1"
@@ -110,7 +127,7 @@ function download() {
             exit 0
         fi
     else
-        docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml pull
+        docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH pull
     fi
     
     echo ""
@@ -121,19 +138,48 @@ function download() {
 
 }
 function startServices() {
-    cd $PLANE_INSTALL_DIR
-    docker compose up -d --quiet-pull
-    cd $SCRIPT_DIR
+    docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH up -d --quiet-pull
+
+    local migrator_container_id=$(docker container ls -aq -f "name=plane-app-migrator")
+    if [ -n "$migrator_container_id" ]; then
+        local idx=0
+        while docker inspect --format='{{.State.Status}}' $migrator_container_id | grep -q "running"; do
+            local message=">>> Waiting for Data Migration to finish"
+            local dots=$(printf '%*s' $idx | tr ' ' '.')
+            echo -ne "\r$message$dots"
+            ((idx++))
+            sleep 1
+        done
+    fi
+    printf "\r\033[K"
+
+    # 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
+            exit 1
+        fi
+    fi
+
+    local api_container_id=$(docker container ls -q -f "name=plane-app-api")
+    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 dots=$(printf '%*s' $idx2 | tr ' ' '.')    
+        echo -ne "\r$message$dots"
+        ((idx2++))
+        sleep 1
+    done
+    printf "\r\033[K"
 }
 function stopServices() {
-    cd $PLANE_INSTALL_DIR
-    docker compose down
-    cd $SCRIPT_DIR
+    docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH down
 }
 function restartServices() {
-    cd $PLANE_INSTALL_DIR
-    docker compose restart
-    cd $SCRIPT_DIR
+    docker compose -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH restart
 }
 function upgrade() {
     echo "***** STOPPING SERVICES ****"
@@ -144,47 +190,137 @@ function upgrade() {
     download
 
     echo "***** PLEASE VALIDATE AND START SERVICES ****"
+}
+function viewSpecificLogs(){
+    local SERVICE_NAME=$1
 
+    if docker-compose -f $DOCKER_FILE_PATH ps | grep -q "$SERVICE_NAME"; then
+        echo "Service '$SERVICE_NAME' is running."
+    else
+        echo "Service '$SERVICE_NAME' is not running."
+    fi
+
+    docker compose -f $DOCKER_FILE_PATH logs -f $SERVICE_NAME
+}
+function viewLogs(){
+    
+    ARG_SERVICE_NAME=$2
+
+    if [ -z "$ARG_SERVICE_NAME" ];
+    then
+        echo
+        echo "Select a Service you want to view the logs for:"
+        echo "   1) Web"
+        echo "   2) Space"
+        echo "   3) API"
+        echo "   4) Worker"
+        echo "   5) Beat-Worker"
+        echo "   6) Migrator"
+        echo "   7) Proxy"
+        echo "   8) Redis"
+        echo "   9) Postgres"
+        echo "   10) Minio"
+        echo "   0) Back to Main Menu"
+        echo 
+        read -p "Service: " DOCKER_SERVICE_NAME
+
+        until (( DOCKER_SERVICE_NAME >= 0 && DOCKER_SERVICE_NAME <= 10 )); do
+            echo "Invalid selection. Please enter a number between 1 and 11."
+            read -p "Service: " DOCKER_SERVICE_NAME
+        done
+
+        if [ -z "$DOCKER_SERVICE_NAME" ];
+        then
+            echo "INVALID SERVICE NAME SUPPLIED"
+        else
+            case $DOCKER_SERVICE_NAME in
+                1) viewSpecificLogs "web";;
+                2) viewSpecificLogs "space";;
+                3) viewSpecificLogs "api";;
+                4) viewSpecificLogs "worker";;
+                5) viewSpecificLogs "beat-worker";;
+                6) viewSpecificLogs "migrator";;
+                7) viewSpecificLogs "proxy";;
+                8) viewSpecificLogs "plane-redis";;
+                9) viewSpecificLogs "plane-db";;
+                10) viewSpecificLogs "plane-minio";;
+                0) askForAction;;
+                *) echo "INVALID SERVICE NAME SUPPLIED";;
+            esac
+        fi
+    elif [ -n "$ARG_SERVICE_NAME" ];
+    then
+        ARG_SERVICE_NAME=$(echo "$ARG_SERVICE_NAME" | tr '[:upper:]' '[:lower:]')
+        case $ARG_SERVICE_NAME in
+            web) viewSpecificLogs "web";;
+            space) viewSpecificLogs "space";;
+            api) viewSpecificLogs "api";;
+            worker) viewSpecificLogs "worker";;
+            beat-worker) viewSpecificLogs "beat-worker";;
+            migrator) viewSpecificLogs "migrator";;
+            proxy) viewSpecificLogs "proxy";;
+            redis) viewSpecificLogs "plane-redis";;
+            postgres) viewSpecificLogs "plane-db";;
+            minio) viewSpecificLogs "plane-minio";;
+            *) echo "INVALID SERVICE NAME SUPPLIED";;
+        esac
+    else
+        echo "INVALID SERVICE NAME SUPPLIED"
+    fi
 }
 function askForAction() {
-    echo
-    echo "Select a Action you want to perform:"
-    echo "   1) Install (${CPU_ARCH})"
-    echo "   2) Start"
-    echo "   3) Stop"
-    echo "   4) Restart"
-    echo "   5) Upgrade"
-    echo "   6) Exit"
-    echo 
-    read -p "Action [2]: " ACTION
-    until [[ -z "$ACTION" || "$ACTION" =~ ^[1-6]$ ]]; do
-        echo "$ACTION: invalid selection."
+    local DEFAULT_ACTION=$1
+
+    if [ -z "$DEFAULT_ACTION" ];
+    then
+        echo
+        echo "Select a Action you want to perform:"
+        echo "   1) Install (${CPU_ARCH})"
+        echo "   2) Start"
+        echo "   3) Stop"
+        echo "   4) Restart"
+        echo "   5) Upgrade"
+        echo "   6) View Logs"
+        echo "   7) Exit"
+        echo 
         read -p "Action [2]: " ACTION
-    done
-    echo
+        until [[ -z "$ACTION" || "$ACTION" =~ ^[1-7]$ ]]; do
+            echo "$ACTION: invalid selection."
+            read -p "Action [2]: " ACTION
+        done
 
+        if [ -z "$ACTION" ];
+        then
+            ACTION=2
+        fi
+        echo
+    fi
 
-    if [ "$ACTION" == "1" ]
+    if [ "$ACTION" == "1" ] || [ "$DEFAULT_ACTION" == "install" ]
     then
         install
         askForAction
-    elif [ "$ACTION" == "2" ] || [ "$ACTION" == "" ]
+    elif [ "$ACTION" == "2" ] || [ "$DEFAULT_ACTION" == "start" ]
     then
         startServices
         askForAction
-    elif [ "$ACTION" == "3" ] 
+    elif [ "$ACTION" == "3" ] || [ "$DEFAULT_ACTION" == "stop" ]
     then
         stopServices
         askForAction
-    elif [ "$ACTION" == "4" ] 
+    elif [ "$ACTION" == "4" ] || [ "$DEFAULT_ACTION" == "restart" ]
     then
         restartServices
         askForAction
-    elif [ "$ACTION" == "5" ] 
+    elif [ "$ACTION" == "5" ]  || [ "$DEFAULT_ACTION" == "upgrade" ]
     then
         upgrade
         askForAction
-    elif [ "$ACTION" == "6" ] 
+    elif [ "$ACTION" == "6" ]  || [ "$DEFAULT_ACTION" == "logs" ]
+    then
+        viewLogs $@
+        askForAction
+    elif [ "$ACTION" == "7" ]
     then
         exit 0
     else
@@ -217,4 +353,8 @@ then
 fi
 mkdir -p $PLANE_INSTALL_DIR/archive
 
-askForAction
+DOCKER_FILE_PATH=$PLANE_INSTALL_DIR/docker-compose.yaml
+DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/.env
+
+print_header
+askForAction $@
diff --git a/package.json b/package.json
index 762ce322a..9239a9b41 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
index 7f7f4831a..fcb6b57bb 100644
--- a/packages/editor/core/package.json
+++ b/packages/editor/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-core",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts
index 4a56f07c2..6524d1ff5 100644
--- a/packages/editor/core/src/lib/editor-commands.ts
+++ b/packages/editor/core/src/lib/editor-commands.ts
@@ -97,8 +97,8 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
       }
     }
   }
-  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-  else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3 }).run();
+  else editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run();
 };
 
 export const unsetLinkEditor = (editor: Editor) => {
diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
index b0d2a1021..dbbea671e 100644
--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@@ -170,68 +170,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 }
 
-#editor-container {
-  table {
-    border-collapse: collapse;
-    table-layout: fixed;
-    margin: 0.5em 0 0.5em 0;
-
-    border: 1px solid rgb(var(--color-border-200));
-    width: 100%;
-
-    td,
-    th {
-      min-width: 1em;
-      border: 1px solid rgb(var(--color-border-200));
-      padding: 10px 15px;
-      vertical-align: top;
-      box-sizing: border-box;
-      position: relative;
-      transition: background-color 0.3s ease;
-
-      > * {
-        margin-bottom: 0;
-      }
-    }
-
-    th {
-      font-weight: bold;
-      text-align: left;
-      background-color: rgb(var(--color-primary-100));
-    }
-
-    td:hover {
-      background-color: rgba(var(--color-primary-300), 0.1);
-    }
-
-    .selectedCell:after {
-      z-index: 2;
-      position: absolute;
-      content: "";
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background-color: rgba(var(--color-primary-300), 0.1);
-      pointer-events: none;
-    }
-
-    .column-resize-handle {
-      position: absolute;
-      right: -2px;
-      top: 0;
-      bottom: -2px;
-      width: 2px;
-      background-color: rgb(var(--color-primary-400));
-      pointer-events: none;
-    }
-  }
-}
-
-.tableWrapper {
-  overflow-x: auto;
-}
-
 .resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;
diff --git a/packages/editor/core/src/styles/table.css b/packages/editor/core/src/styles/table.css
index 8a47a8c59..ca384d34f 100644
--- a/packages/editor/core/src/styles/table.css
+++ b/packages/editor/core/src/styles/table.css
@@ -9,15 +9,15 @@
   border-collapse: collapse;
   table-layout: fixed;
   margin: 0;
-  margin-bottom: 3rem;
-  border: 1px solid rgba(var(--color-border-200));
+  margin-bottom: 1rem;
+  border: 2px solid rgba(var(--color-border-300));
   width: 100%;
 }
 
 .tableWrapper table td,
 .tableWrapper table th {
   min-width: 1em;
-  border: 1px solid rgba(var(--color-border-200));
+  border: 1px solid rgba(var(--color-border-300));
   padding: 10px 15px;
   vertical-align: top;
   box-sizing: border-box;
@@ -43,7 +43,8 @@
 .tableWrapper table th {
   font-weight: bold;
   text-align: left;
-  background-color: rgba(var(--color-primary-100));
+  background-color: #d9e4ff;
+  color: #171717;
 }
 
 .tableWrapper table th * {
@@ -62,6 +63,35 @@
   pointer-events: none;
 }
 
+.colorPicker {
+  display: grid;
+  padding: 8px 8px;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 5px;
+}
+
+.colorPickerLabel {
+  font-size: 0.85rem;
+  color: #6b7280;
+  padding: 8px 8px;
+  padding-bottom: 0px;
+}
+
+.colorPickerItem {
+  margin: 2px 0px;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+.divider {
+  background-color: #e5e7eb;
+  height: 1px;
+  margin: 3px 0;
+}
+
 .tableWrapper table .column-resize-handle {
   position: absolute;
   right: -2px;
@@ -69,7 +99,7 @@
   bottom: -2px;
   width: 4px;
   z-index: 99;
-  background-color: rgba(var(--color-primary-400));
+  background-color: #d9e4ff;
   pointer-events: none;
 }
 
@@ -112,7 +142,7 @@
 }
 
 .tableWrapper .tableControls .rowsControlDiv {
-  background-color: rgba(var(--color-primary-100));
+  background-color: #d9e4ff;
   border: 1px solid rgba(var(--color-border-200));
   border-radius: 2px;
   background-size: 1.25rem;
@@ -127,7 +157,7 @@
 }
 
 .tableWrapper .tableControls .columnsControlDiv {
-  background-color: rgba(var(--color-primary-100));
+  background-color: #d9e4ff;
   border: 1px solid rgba(var(--color-border-200));
   border-radius: 2px;
   background-size: 1.25rem;
@@ -144,10 +174,12 @@
 .tableWrapper .tableControls .tableColorPickerToolbox {
   border: 1px solid rgba(var(--color-border-300));
   background-color: rgba(var(--color-background-100));
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
   padding: 0.25rem;
   display: flex;
   flex-direction: column;
-  width: 200px;
+  width: max-content;
   gap: 0.25rem;
 }
 
@@ -158,7 +190,7 @@
   align-items: center;
   gap: 0.5rem;
   border: none;
-  padding: 0.1rem;
+  padding: 0.3rem 0.5rem 0.1rem 0.1rem;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
@@ -173,9 +205,7 @@
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
 .tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
-  border: 1px solid rgba(var(--color-border-300));
-  border-radius: 3px;
-  padding: 4px;
+  padding: 4px 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,8 +217,8 @@
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
 .tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
-  width: 2rem;
-  height: 2rem;
+  width: 1rem;
+  height: 1rem;
 }
 
 .tableToolbox {
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
index aedb59411..403bd3f02 100644
--- a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
@@ -13,7 +13,7 @@ export const TableCell = Node.create<TableCellOptions>({
     };
   },
 
-  content: "paragraph+",
+  content: "block+",
 
   addAttributes() {
     return {
@@ -33,7 +33,10 @@ export const TableCell = Node.create<TableCellOptions>({
         },
       },
       background: {
-        default: "none",
+        default: null,
+      },
+      textColor: {
+        default: null,
       },
     };
   },
@@ -50,7 +53,7 @@ export const TableCell = Node.create<TableCellOptions>({
     return [
       "td",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: `background-color: ${node.attrs.background}`,
+        style: `background-color: ${node.attrs.background}; color: ${node.attrs.textColor}`,
       }),
       0,
     ];
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
index c0decdbf8..bd994f467 100644
--- a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@@ -33,7 +33,7 @@ export const TableHeader = Node.create<TableHeaderOptions>({
         },
       },
       background: {
-        default: "rgb(var(--color-primary-100))",
+        default: "none",
       },
     };
   },
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
index 28c9a9a48..f961c0582 100644
--- a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
@@ -13,6 +13,17 @@ export const TableRow = Node.create<TableRowOptions>({
     };
   },
 
+  addAttributes() {
+    return {
+      background: {
+        default: null,
+      },
+      textColor: {
+        default: null,
+      },
+    };
+  },
+
   content: "(tableCell | tableHeader)*",
 
   tableRole: "row",
@@ -22,6 +33,12 @@ export const TableRow = Node.create<TableRowOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return ["tr", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    const style = HTMLAttributes.background
+      ? `background-color: ${HTMLAttributes.background}; color: ${HTMLAttributes.textColor}`
+      : "";
+
+    const attributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { style });
+
+    return ["tr", attributes, 0];
   },
 });
diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts
index c08710ec3..f73c55c09 100644
--- a/packages/editor/core/src/ui/extensions/table/table/icons.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -1,7 +1,7 @@
 export const icons = {
   colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
-  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
-  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
+  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
   insertLeftTableIcon: `<svg
     xmlns="http://www.w3.org/2000/svg"
     length={24}
@@ -35,6 +35,8 @@ export const icons = {
     />
   </svg>
 `,
+  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--color-text-300))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
   insertBottomTableIcon: `<svg
     xmlns="http://www.w3.org/2000/svg"
     length={24}
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 bd96ff1b1..674a8e115 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
@@ -81,53 +81,75 @@ const defaultTippyOptions: Partial<Props> = {
   placement: "right",
 };
 
-function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
+function setCellsBackgroundColor(editor: Editor, color: { backgroundColor: string; textColor: string }) {
   return editor
     .chain()
     .focus()
     .updateAttributes("tableCell", {
-      background: backgroundColor,
-    })
-    .updateAttributes("tableHeader", {
-      background: backgroundColor,
+      background: color.backgroundColor,
+      textColor: color.textColor,
     })
     .run();
 }
 
+function setTableRowBackgroundColor(editor: Editor, color: { backgroundColor: string; textColor: string }) {
+  const { state, dispatch } = editor.view;
+  const { selection } = state;
+  if (!(selection instanceof CellSelection)) {
+    return false;
+  }
+
+  // Get the position of the hovered cell in the selection to determine the row.
+  const hoveredCell = selection.$headCell || selection.$anchorCell;
+
+  // Find the depth of the table row node
+  let rowDepth = hoveredCell.depth;
+  while (rowDepth > 0 && hoveredCell.node(rowDepth).type.name !== "tableRow") {
+    rowDepth--;
+  }
+
+  // If we couldn't find a tableRow node, we can't set the background color
+  if (hoveredCell.node(rowDepth).type.name !== "tableRow") {
+    return false;
+  }
+
+  // Get the position where the table row starts
+  const rowStartPos = hoveredCell.start(rowDepth);
+
+  // Create a transaction that sets the background color on the tableRow node.
+  const tr = state.tr.setNodeMarkup(rowStartPos - 1, null, {
+    ...hoveredCell.node(rowDepth).attrs,
+    background: color.backgroundColor,
+    textColor: color.textColor,
+  });
+
+  dispatch(tr);
+  return true;
+}
+
 const columnsToolboxItems: ToolboxItem[] = [
   {
-    label: "Add Column Before",
+    label: "Toggle column header",
+    icon: icons.toggleColumnHeader,
+    action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderColumn().run(),
+  },
+  {
+    label: "Add column before",
     icon: icons.insertLeftTableIcon,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnBefore().run(),
   },
   {
-    label: "Add Column After",
+    label: "Add column after",
     icon: icons.insertRightTableIcon,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnAfter().run(),
   },
   {
-    label: "Pick Column Color",
-    icon: icons.colorPicker,
-    action: ({
-      editor,
-      triggerButton,
-      controlsContainer,
-    }: {
-      editor: Editor;
-      triggerButton: HTMLElement;
-      controlsContainer: Element;
-    }) => {
-      createColorPickerToolbox({
-        triggerButton,
-        tippyOptions: {
-          appendTo: controlsContainer,
-        },
-        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
-      });
-    },
+    label: "Pick color",
+    icon: "", // No icon needed for color picker
+    action: (args: any) => {}, // Placeholder action; actual color picking is handled in `createToolbox`
   },
   {
-    label: "Delete Column",
+    label: "Delete column",
     icon: icons.deleteColumn,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteColumn().run(),
   },
@@ -135,35 +157,24 @@ const columnsToolboxItems: ToolboxItem[] = [
 
 const rowsToolboxItems: ToolboxItem[] = [
   {
-    label: "Add Row Above",
+    label: "Toggle row header",
+    icon: icons.toggleRowHeader,
+    action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderRow().run(),
+  },
+  {
+    label: "Add row above",
     icon: icons.insertTopTableIcon,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowBefore().run(),
   },
   {
-    label: "Add Row Below",
+    label: "Add row below",
     icon: icons.insertBottomTableIcon,
     action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowAfter().run(),
   },
   {
-    label: "Pick Row Color",
-    icon: icons.colorPicker,
-    action: ({
-      editor,
-      triggerButton,
-      controlsContainer,
-    }: {
-      editor: Editor;
-      triggerButton: HTMLButtonElement;
-      controlsContainer: Element | "parent" | ((ref: Element) => Element) | undefined;
-    }) => {
-      createColorPickerToolbox({
-        triggerButton,
-        tippyOptions: {
-          appendTo: controlsContainer,
-        },
-        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
-      });
-    },
+    label: "Pick color",
+    icon: "",
+    action: (args: any) => {}, // Placeholder action; actual color picking is handled in `createToolbox`
   },
   {
     label: "Delete Row",
@@ -176,37 +187,57 @@ function createToolbox({
   triggerButton,
   items,
   tippyOptions,
+  onSelectColor,
   onClickItem,
+  colors,
 }: {
   triggerButton: Element | null;
   items: ToolboxItem[];
   tippyOptions: any;
   onClickItem: (item: ToolboxItem) => void;
+  onSelectColor: (color: { backgroundColor: string; textColor: string }) => void;
+  colors: { [key: string]: { backgroundColor: string; textColor: string; icon?: string } };
 }): Instance<Props> {
   // @ts-expect-error
   const toolbox = tippy(triggerButton, {
     content: h(
       "div",
       { className: "tableToolbox" },
-      items.map((item) =>
-        h(
-          "div",
-          {
-            className: "toolboxItem",
-            itemType: "button",
-            onClick() {
-              onClickItem(item);
+      items.map((item, index) => {
+        if (item.label === "Pick color") {
+          return h("div", { className: "flex flex-col" }, [
+            h("div", { className: "divider" }),
+            h("div", { className: "colorPickerLabel" }, item.label),
+            h(
+              "div",
+              { className: "colorPicker grid" },
+              Object.entries(colors).map(([colorName, colorValue]) =>
+                h("div", {
+                  className: "colorPickerItem",
+                  style: `background-color: ${colorValue.backgroundColor}; 
+                            color: ${colorValue.textColor || "inherit"};`,
+                  innerHTML: colorValue?.icon || "",
+                  onClick: () => onSelectColor(colorValue),
+                })
+              )
+            ),
+            h("div", { className: "divider" }),
+          ]);
+        } else {
+          return h(
+            "div",
+            {
+              className: "toolboxItem",
+              itemType: "div",
+              onClick: () => onClickItem(item),
             },
-          },
-          [
-            h("div", {
-              className: "iconContainer",
-              innerHTML: item.icon,
-            }),
-            h("div", { className: "label" }, item.label),
-          ]
-        )
-      )
+            [
+              h("div", { className: "iconContainer", innerHTML: item.icon }),
+              h("div", { className: "label" }, item.label),
+            ]
+          );
+        }
+      })
     ),
     ...tippyOptions,
   });
@@ -214,71 +245,6 @@ function createToolbox({
   return Array.isArray(toolbox) ? toolbox[0] : toolbox;
 }
 
-function createColorPickerToolbox({
-  triggerButton,
-  tippyOptions,
-  onSelectColor = () => {},
-}: {
-  triggerButton: HTMLElement;
-  tippyOptions: Partial<Props>;
-  onSelectColor?: (color: string) => void;
-}) {
-  const items = {
-    Default: "rgb(var(--color-primary-100))",
-    Orange: "#FFE5D1",
-    Grey: "#F1F1F1",
-    Yellow: "#FEF3C7",
-    Green: "#DCFCE7",
-    Red: "#FFDDDD",
-    Blue: "#D9E4FF",
-    Pink: "#FFE8FA",
-    Purple: "#E8DAFB",
-  };
-
-  const colorPicker = tippy(triggerButton, {
-    ...defaultTippyOptions,
-    content: h(
-      "div",
-      { className: "tableColorPickerToolbox" },
-      Object.entries(items).map(([key, value]) =>
-        h(
-          "div",
-          {
-            className: "toolboxItem",
-            itemType: "button",
-            onClick: () => {
-              onSelectColor(value);
-              colorPicker.hide();
-            },
-          },
-          [
-            h("div", {
-              className: "colorContainer",
-              style: {
-                backgroundColor: value,
-              },
-            }),
-            h(
-              "div",
-              {
-                className: "label",
-              },
-              key
-            ),
-          ]
-        )
-      )
-    ),
-    onHidden: (instance) => {
-      instance.destroy();
-    },
-    showOnCreate: true,
-    ...tippyOptions,
-  });
-
-  return colorPicker;
-}
-
 export class TableView implements NodeView {
   node: ProseMirrorNode;
   cellMinWidth: number;
@@ -347,10 +313,27 @@ export class TableView implements NodeView {
         this.rowsControl,
         this.columnsControl
       );
+      const columnColors = {
+        Blue: { backgroundColor: "#D9E4FF", textColor: "#171717" },
+        Orange: { backgroundColor: "#FFEDD5", textColor: "#171717" },
+        Grey: { backgroundColor: "#F1F1F1", textColor: "#171717" },
+        Yellow: { backgroundColor: "#FEF3C7", textColor: "#171717" },
+        Green: { backgroundColor: "#DCFCE7", textColor: "#171717" },
+        Red: { backgroundColor: "#FFDDDD", textColor: "#171717" },
+        Pink: { backgroundColor: "#FFE8FA", textColor: "#171717" },
+        Purple: { backgroundColor: "#E8DAFB", textColor: "#171717" },
+        None: {
+          backgroundColor: "none",
+          textColor: "none",
+          icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`,
+        },
+      };
 
       this.columnsToolbox = createToolbox({
         triggerButton: this.columnsControl.querySelector(".columnsControlDiv"),
         items: columnsToolboxItems,
+        colors: columnColors,
+        onSelectColor: (color) => setCellsBackgroundColor(this.editor, color),
         tippyOptions: {
           ...defaultTippyOptions,
           appendTo: this.controls,
@@ -368,10 +351,12 @@ export class TableView implements NodeView {
       this.rowsToolbox = createToolbox({
         triggerButton: this.rowsControl.firstElementChild,
         items: rowsToolboxItems,
+        colors: columnColors,
         tippyOptions: {
           ...defaultTippyOptions,
           appendTo: this.controls,
         },
+        onSelectColor: (color) => setTableRowBackgroundColor(editor, color),
         onClickItem: (item) => {
           item.action({
             editor: this.editor,
@@ -383,8 +368,6 @@ export class TableView implements NodeView {
       });
     }
 
-    // Table
-
     this.colgroup = h(
       "colgroup",
       null,
@@ -437,16 +420,19 @@ export class TableView implements NodeView {
   }
 
   updateControls() {
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => {
-      if (curr.spec.hoveredCell !== undefined) {
-        acc["hoveredCell"] = curr.spec.hoveredCell;
-      }
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
+      (acc, curr) => {
+        if (curr.spec.hoveredCell !== undefined) {
+          acc["hoveredCell"] = curr.spec.hoveredCell;
+        }
 
-      if (curr.spec.hoveredTable !== undefined) {
-        acc["hoveredTable"] = curr.spec.hoveredTable;
-      }
-      return acc;
-    }, {} as Record<string, HTMLElement>) as any;
+        if (curr.spec.hoveredTable !== undefined) {
+          acc["hoveredTable"] = curr.spec.hoveredTable;
+        }
+        return acc;
+      },
+      {} as Record<string, HTMLElement>
+    ) as any;
 
     if (table === undefined || cell === undefined) {
       return this.root.classList.add("controls--disabled");
@@ -457,12 +443,12 @@ export class TableView implements NodeView {
 
     const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
 
-    if (!this.table) {
+    if (!this.table || !cellDom) {
       return;
     }
 
-    const tableRect = this.table.getBoundingClientRect();
-    const cellRect = cellDom.getBoundingClientRect();
+    const tableRect = this.table?.getBoundingClientRect();
+    const cellRect = cellDom?.getBoundingClientRect();
 
     if (this.columnsControl) {
       this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`;
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 5600fd82a..ef595eee2 100644
--- a/packages/editor/core/src/ui/extensions/table/table/table.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@@ -107,10 +107,9 @@ export const Table = Node.create({
   addCommands() {
     return {
       insertTable:
-        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+        ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
         ({ tr, dispatch, editor }) => {
           const node = createTable(editor.schema, rows, cols, withHeaderRow);
-
           if (dispatch) {
             const offset = tr.selection.anchor + 1;
 
diff --git a/packages/editor/core/src/ui/props.tsx b/packages/editor/core/src/ui/props.tsx
index 2aaeb4264..1846efe47 100644
--- a/packages/editor/core/src/ui/props.tsx
+++ b/packages/editor/core/src/ui/props.tsx
@@ -42,15 +42,6 @@ export function CoreEditorProps(
       return false;
     },
     handleDrop: (view, event, _slice, moved) => {
-      if (typeof window !== "undefined") {
-        const selection: any = window?.getSelection();
-        if (selection.rangeCount !== 0) {
-          const range = selection.getRangeAt(0);
-          if (findTableAncestor(range.startContainer)) {
-            return;
-          }
-        }
-      }
       if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
         event.preventDefault();
         const file = event.dataTransfer.files[0];
diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json
index b33bc12fb..bd1f2d90f 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.15.1",
+  "version": "0.16.0",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
index be57a4a91..397e8c576 100644
--- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
+++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
@@ -48,34 +48,12 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   function getComplexItems(): BubbleMenuItem[] {
     const items: BubbleMenuItem[] = [TableItem(editor)];
 
-    if (shouldShowImageItem()) {
-      items.push(ImageItem(editor, uploadFile, setIsSubmitting));
-    }
-
+    items.push(ImageItem(editor, uploadFile, setIsSubmitting));
     return items;
   }
 
   const complexItems: BubbleMenuItem[] = getComplexItems();
 
-  function shouldShowImageItem(): boolean {
-    if (typeof window !== "undefined") {
-      const selectionRange: any = window?.getSelection();
-      const { selection } = props.editor.state;
-
-      if (selectionRange.rangeCount !== 0) {
-        const range = selectionRange.getRangeAt(0);
-        if (findTableAncestor(range.startContainer)) {
-          return false;
-        }
-        if (isCellSelection(selection)) {
-          return false;
-        }
-      }
-      return true;
-    }
-    return false;
-  }
-
   return (
     <div className="flex flex-wrap items-center divide-x divide-custom-border-200">
       <div className="flex items-center gap-0.5 pr-2">
diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json
index 8481abdf3..0bdd70824 100644
--- a/packages/editor/extensions/package.json
+++ b/packages/editor/extensions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-extensions",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Package that powers Plane's Editor with extensions",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/extensions/src/extensions/drag-drop.tsx b/packages/editor/extensions/src/extensions/drag-drop.tsx
index af99fec61..ce4088413 100644
--- a/packages/editor/extensions/src/extensions/drag-drop.tsx
+++ b/packages/editor/extensions/src/extensions/drag-drop.tsx
@@ -35,7 +35,7 @@ export interface DragHandleOptions {
 }
 
 function absoluteRect(node: Element) {
-  const data = node.getBoundingClientRect();
+  const data = node?.getBoundingClientRect();
 
   return {
     top: data.top,
@@ -65,7 +65,7 @@ function nodeDOMAtCoords(coords: { x: number; y: number }) {
 }
 
 function nodePosAtDOM(node: Element, view: EditorView) {
-  const boundingRect = node.getBoundingClientRect();
+  const boundingRect = node?.getBoundingClientRect();
 
   if (node.nodeName === "IMG") {
     return view.posAtCoords({
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
index 71d70399d..e033f620a 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.15.1",
+  "version": "0.16.0",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
index 71ad4e0e1..c6786698d 100644
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -60,34 +60,13 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   function getComplexItems(): BubbleMenuItem[] {
     const items: BubbleMenuItem[] = [TableItem(props.editor)];
 
-    if (shouldShowImageItem()) {
-      items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
-    }
+    items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
 
     return items;
   }
 
   const complexItems: BubbleMenuItem[] = getComplexItems();
 
-  function shouldShowImageItem(): boolean {
-    if (typeof window !== "undefined") {
-      const selectionRange: any = window?.getSelection();
-      const { selection } = props.editor.state;
-
-      if (selectionRange.rangeCount !== 0) {
-        const range = selectionRange.getRangeAt(0);
-        if (findTableAncestor(range.startContainer)) {
-          return false;
-        }
-        if (isCellSelection(selection)) {
-          return false;
-        }
-      }
-      return true;
-    }
-    return false;
-  }
-
   const handleAccessChange = (accessKey: string) => {
     props.commentAccessSpecifier?.onAccessChange(accessKey);
   };
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
index a85a8b998..0f3d0d8f7 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.15.1",
+  "version": "0.16.0",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index 6bfe67261..2fee408c9 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-custom",
   "private": true,
-  "version": "0.15.1",
+  "version": "0.16.0",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
index 50ede8674..d7e807b91 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.15.1",
+  "version": "0.16.0",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index 42ce3fed5..e0829e87b 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "private": true,
   "files": [
     "base.json",
diff --git a/packages/types/package.json b/packages/types/package.json
index 0e5c2eb16..9c9938845 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "private": true,
   "main": "./src/index.d.ts"
 }
diff --git a/packages/types/src/cycles.d.ts b/packages/types/src/cycles.d.ts
index 0e4890b7f..e7ec66ae2 100644
--- a/packages/types/src/cycles.d.ts
+++ b/packages/types/src/cycles.d.ts
@@ -30,7 +30,7 @@ export interface ICycle {
   is_favorite: boolean;
   issue: string;
   name: string;
-  owned_by: string;
+  owned_by_id: string;
   progress_snapshot: TProgressSnapshot;
   project_id: string;
   status: TCycleGroups;
diff --git a/packages/types/src/issues.d.ts b/packages/types/src/issues.d.ts
index 754d8df8f..ebe537138 100644
--- a/packages/types/src/issues.d.ts
+++ b/packages/types/src/issues.d.ts
@@ -203,6 +203,8 @@ export interface ViewFlags {
 
 export type GroupByColumnTypes =
   | "project"
+  | "cycle"
+  | "module"
   | "state"
   | "state_detail.group"
   | "priority"
diff --git a/packages/types/src/notifications.d.ts b/packages/types/src/notifications.d.ts
index 8033c19a9..652e2776f 100644
--- a/packages/types/src/notifications.d.ts
+++ b/packages/types/src/notifications.d.ts
@@ -12,27 +12,27 @@ export interface PaginatedUserNotification {
 }
 
 export interface IUserNotification {
-  id: string;
-  created_at: Date;
-  updated_at: Date;
+  archived_at: string | null;
+  created_at: string;
+  created_by: null;
   data: Data;
   entity_identifier: string;
   entity_name: string;
-  title: string;
+  id: string;
   message: null;
   message_html: string;
   message_stripped: null;
-  sender: string;
-  read_at: Date | null;
-  archived_at: Date | null;
-  snoozed_till: Date | null;
-  created_by: null;
-  updated_by: null;
-  workspace: string;
   project: string;
+  read_at: Date | null;
+  receiver: string;
+  sender: string;
+  snoozed_till: Date | null;
+  title: string;
   triggered_by: string;
   triggered_by_details: IUserLite;
-  receiver: string;
+  updated_at: Date;
+  updated_by: null;
+  workspace: string;
 }
 
 export interface Data {
diff --git a/packages/types/src/view-props.d.ts b/packages/types/src/view-props.d.ts
index b6454ae4c..c2c98def3 100644
--- a/packages/types/src/view-props.d.ts
+++ b/packages/types/src/view-props.d.ts
@@ -14,6 +14,8 @@ export type TIssueGroupByOptions =
   | "project"
   | "assignees"
   | "mentions"
+  | "cycle"
+  | "module"
   | null;
 
 export type TIssueOrderByOptions =
@@ -60,6 +62,8 @@ export type TIssueParams =
   | "created_by"
   | "subscriber"
   | "labels"
+  | "cycle"
+  | "module"
   | "start_date"
   | "target_date"
   | "project"
@@ -79,6 +83,8 @@ export interface IIssueFilterOptions {
   labels?: string[] | null;
   priority?: string[] | null;
   project?: string[] | null;
+  cycle?: string[] | null;
+  module?: string[] | null;
   start_date?: string[] | null;
   state?: string[] | null;
   state_group?: string[] | null;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 912fcfeb8..756a0f2f1 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.15.1",
+  "version": "0.16.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx
index dbdbaf095..ee4b66d7b 100644
--- a/packages/ui/src/control-link/control-link.tsx
+++ b/packages/ui/src/control-link/control-link.tsx
@@ -5,10 +5,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   onClick: () => void;
   children: React.ReactNode;
   target?: string;
+  disabled?: boolean;
 };
 
 export const ControlLink: React.FC<TControlLink> = (props) => {
-  const { href, onClick, children, target = "_self", ...rest } = props;
+  const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
   const _onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -19,6 +20,8 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
     }
   };
 
+  if (disabled) return <>{children}</>;
+
   return (
     <a href={href} target={target} onClick={_onClick} {...rest}>
       {children}
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 37aba932a..cdfccbb4e 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -177,17 +177,18 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
 };
 
 const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
-  const { children, onClick, className = "" } = props;
+  const { children, disabled = false, onClick, className } = props;
 
   return (
-    <Menu.Item as="div">
+    <Menu.Item as="div" disabled={disabled}>
       {({ active, close }) => (
         <button
           type="button"
           className={cn(
             "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
             {
-              "bg-custom-background-80": active,
+              "bg-custom-background-80": active && !disabled,
+              "text-custom-text-400": disabled,
             },
             className
           )}
@@ -195,6 +196,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
             close();
             onClick && onClick(e);
           }}
+          disabled={disabled}
         >
           {children}
         </button>
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index 930f332b9..f600499fe 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -64,6 +64,7 @@ export type ICustomSearchSelectProps = IDropdownProps &
 
 export interface ICustomMenuItemProps {
   children: React.ReactNode;
+  disabled?: boolean;
   onClick?: (args?: any) => void;
   className?: string;
 }
diff --git a/space/package.json b/space/package.json
index 9ee7279cd..a1d600a60 100644
--- a/space/package.json
+++ b/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
index c2644abe0..6a7b3c7b9 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -20,7 +20,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
   const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
   const projectDetails = projectId ? getProjectById(projectId.toString()) : undefined;
-  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by) : undefined;
+  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by_id) : undefined;
   const moduleLeadDetails = moduleDetails && moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
   return (
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 974efff3a..d871b64d0 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -48,7 +48,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
             <div className="">
               <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
               <p className="text-sm tracking-tight text-custom-text-200">
-                Plane will auto archive issues that have been completed or cancelled.
+                Plane will auto archive issues that have been completed or canceled.
               </p>
             </div>
           </div>
@@ -73,7 +73,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                   <CustomSelect
                     value={currentProjectDetails?.archive_in}
                     label={`${currentProjectDetails?.archive_in} ${
-                      currentProjectDetails?.archive_in === 1 ? "Month" : "Months"
+                      currentProjectDetails?.archive_in === 1 ? "month" : "months"
                     }`}
                     onChange={(val: number) => {
                       handleChange({ archive_in: val });
@@ -93,7 +93,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                         className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => setmonthModal(true)}
                       >
-                        Customise Time Range
+                        Customize time range
                       </button>
                     </>
                   </CustomSelect>
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 8d6662c11..2ae4d1f9c 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -74,7 +74,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
             <div className="">
               <h4 className="text-sm font-medium">Auto-close issues</h4>
               <p className="text-sm tracking-tight text-custom-text-200">
-                Plane will automatically close issue that haven{"'"}t been completed or cancelled.
+                Plane will automatically close issue that haven{"'"}t been completed or canceled.
               </p>
             </div>
           </div>
@@ -100,7 +100,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                     <CustomSelect
                       value={currentProjectDetails?.close_in}
                       label={`${currentProjectDetails?.close_in} ${
-                        currentProjectDetails?.close_in === 1 ? "Month" : "Months"
+                        currentProjectDetails?.close_in === 1 ? "month" : "months"
                       }`}
                       onChange={(val: number) => {
                         handleChange({ close_in: val });
@@ -119,7 +119,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                           className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
                           onClick={() => setmonthModal(true)}
                         >
-                          Customize Time Range
+                          Customize time range
                         </button>
                       </>
                     </CustomSelect>
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 1d306bb04..01d07f64a 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -72,7 +72,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Customise Time Range
+                      Customize time range
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
                       <div className="flex w-full flex-col justify-center gap-1">
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index bd489f4c4..b52976aa8 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -154,237 +154,239 @@ export const CommandModal: React.FC = observer(() => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <Dialog.Panel className="relative flex w-full items-center justify-center ">
-              <div className="w-full max-w-2xl transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-                <Command
-                  filter={(value, search) => {
-                    if (value.toLowerCase().includes(search.toLowerCase())) return 1;
-                    return 0;
-                  }}
-                  onKeyDown={(e) => {
-                    // when search is empty and page is undefined
-                    // when user tries to close the modal with esc
-                    if (e.key === "Escape" && !page && !searchTerm) closePalette();
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="flex items-center justify-center p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex w-full max-w-2xl items-center justify-center transform divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+                <div className="w-full max-w-2xl">
+                  <Command
+                    filter={(value, search) => {
+                      if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                      return 0;
+                    }}
+                    onKeyDown={(e) => {
+                      // when search is empty and page is undefined
+                      // when user tries to close the modal with esc
+                      if (e.key === "Escape" && !page && !searchTerm) closePalette();
 
-                    // Escape goes to previous page
-                    // Backspace goes to previous page when search is empty
-                    if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
-                      e.preventDefault();
-                      setPages((pages) => pages.slice(0, -1));
-                      setPlaceholder("Type a command or search...");
-                    }
-                  }}
-                >
-                  <div
-                    className={`flex gap-4 p-3 pb-0 sm:items-center ${
-                      issueDetails ? "flex-col justify-between sm:flex-row" : "justify-end"
-                    }`}
+                      // Escape goes to previous page
+                      // Backspace goes to previous page when search is empty
+                      if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
+                        e.preventDefault();
+                        setPages((pages) => pages.slice(0, -1));
+                        setPlaceholder("Type a command or search...");
+                      }
+                    }}
                   >
-                    {issueDetails && (
-                      <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
-                        {projectDetails?.identifier}-{issueDetails.sequence_id} {issueDetails.name}
-                      </div>
-                    )}
-                    {projectId && (
-                      <Tooltip tooltipContent="Toggle workspace level search">
-                        <div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
-                          <button
-                            type="button"
-                            onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                            className="flex-shrink-0"
-                          >
-                            Workspace Level
-                          </button>
-                          <ToggleSwitch
-                            value={isWorkspaceLevel}
-                            onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          />
+                    <div
+                      className={`flex gap-4 p-3 pb-0 sm:items-center ${
+                        issueDetails ? "flex-col justify-between sm:flex-row" : "justify-end"
+                      }`}
+                    >
+                      {issueDetails && (
+                        <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
+                          {projectDetails?.identifier}-{issueDetails.sequence_id} {issueDetails.name}
                         </div>
-                      </Tooltip>
-                    )}
-                  </div>
-                  <div className="relative">
-                    <Search
-                      className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-custom-text-200"
-                      aria-hidden="true"
-                      strokeWidth={2}
-                    />
-                    <Command.Input
-                      className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
-                      placeholder={placeholder}
-                      value={searchTerm}
-                      onValueChange={(e) => setSearchTerm(e)}
-                      autoFocus
-                      tabIndex={1}
-                    />
-                  </div>
+                      )}
+                      {projectId && (
+                        <Tooltip tooltipContent="Toggle workspace level search">
+                          <div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
+                            <button
+                              type="button"
+                              onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                              className="flex-shrink-0"
+                            >
+                              Workspace Level
+                            </button>
+                            <ToggleSwitch
+                              value={isWorkspaceLevel}
+                              onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                            />
+                          </div>
+                        </Tooltip>
+                      )}
+                    </div>
+                    <div className="relative">
+                      <Search
+                        className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-custom-text-200"
+                        aria-hidden="true"
+                        strokeWidth={2}
+                      />
+                      <Command.Input
+                        className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                        placeholder={placeholder}
+                        value={searchTerm}
+                        onValueChange={(e) => setSearchTerm(e)}
+                        autoFocus
+                        tabIndex={1}
+                      />
+                    </div>
 
-                  <Command.List className="max-h-96 overflow-scroll p-2 vertical-scrollbar scrollbar-sm">
-                    {searchTerm !== "" && (
-                      <h5 className="mx-[3px] my-4 text-xs text-custom-text-100">
-                        Search results for{" "}
-                        <span className="font-medium">
-                          {'"'}
-                          {searchTerm}
-                          {'"'}
-                        </span>{" "}
-                        in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
-                      </h5>
-                    )}
+                    <Command.List className="max-h-96 overflow-scroll p-2 vertical-scrollbar scrollbar-sm">
+                      {searchTerm !== "" && (
+                        <h5 className="mx-[3px] my-4 text-xs text-custom-text-100">
+                          Search results for{" "}
+                          <span className="font-medium">
+                            {'"'}
+                            {searchTerm}
+                            {'"'}
+                          </span>{" "}
+                          in {!projectId || isWorkspaceLevel ? "workspace" : "project"}:
+                        </h5>
+                      )}
 
-                    {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
-                      <div className="my-4 text-center text-sm text-custom-text-200">No results found.</div>
-                    )}
+                      {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                        <div className="my-4 text-center text-sm text-custom-text-200">No results found.</div>
+                      )}
 
-                    {(isLoading || isSearching) && (
-                      <Command.Loading>
-                        <Loader className="space-y-3">
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                          <Loader.Item height="40px" />
-                        </Loader>
-                      </Command.Loading>
-                    )}
+                      {(isLoading || isSearching) && (
+                        <Command.Loading>
+                          <Loader className="space-y-3">
+                            <Loader.Item height="40px" />
+                            <Loader.Item height="40px" />
+                            <Loader.Item height="40px" />
+                            <Loader.Item height="40px" />
+                          </Loader>
+                        </Command.Loading>
+                      )}
 
-                    {debouncedSearchTerm !== "" && (
-                      <CommandPaletteSearchResults closePalette={closePalette} results={results} />
-                    )}
+                      {debouncedSearchTerm !== "" && (
+                        <CommandPaletteSearchResults closePalette={closePalette} results={results} />
+                      )}
 
-                    {!page && (
-                      <>
-                        {/* issue actions */}
-                        {issueId && (
-                          <CommandPaletteIssueActions
-                            closePalette={closePalette}
-                            issueDetails={issueDetails}
-                            pages={pages}
-                            setPages={(newPages) => setPages(newPages)}
-                            setPlaceholder={(newPlaceholder) => setPlaceholder(newPlaceholder)}
-                            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 && (
-                          <Command.Group heading="Project">
+                      {!page && (
+                        <>
+                          {/* issue actions */}
+                          {issueId && (
+                            <CommandPaletteIssueActions
+                              closePalette={closePalette}
+                              issueDetails={issueDetails}
+                              pages={pages}
+                              setPages={(newPages) => setPages(newPages)}
+                              setPlaceholder={(newPlaceholder) => setPlaceholder(newPlaceholder)}
+                              setSearchTerm={(newSearchTerm) => setSearchTerm(newSearchTerm)}
+                            />
+                          )}
+                          <Command.Group heading="Issue">
                             <Command.Item
                               onSelect={() => {
                                 closePalette();
-                                setTrackElement("Command palette");
-                                toggleCreateProjectModal(true);
+                                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">
+                              <Command.Item
+                                onSelect={() => {
+                                  closePalette();
+                                  setTrackElement("Command palette");
+                                  toggleCreateProjectModal(true);
+                                }}
+                                className="focus:outline-none"
+                              >
+                                <div className="flex items-center gap-2 text-custom-text-200">
+                                  <FolderPlus className="h-3.5 w-3.5" />
+                                  Create new project
+                                </div>
+                                <kbd>P</kbd>
+                              </Command.Item>
+                            </Command.Group>
+                          )}
+
+                          {/* project actions */}
+                          {projectId && <CommandPaletteProjectActions closePalette={closePalette} />}
+
+                          <Command.Group heading="Workspace Settings">
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Search workspace settings...");
+                                setSearchTerm("");
+                                setPages([...pages, "settings"]);
                               }}
                               className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-custom-text-200">
-                                <FolderPlus className="h-3.5 w-3.5" />
-                                Create new project
+                                <Settings className="h-3.5 w-3.5" />
+                                Search settings...
+                              </div>
+                            </Command.Item>
+                          </Command.Group>
+                          <Command.Group heading="Account">
+                            <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <FolderPlus className="h-3.5 w-3.5" />
+                                Create new workspace
+                              </div>
+                            </Command.Item>
+                            <Command.Item
+                              onSelect={() => {
+                                setPlaceholder("Change interface theme...");
+                                setSearchTerm("");
+                                setPages([...pages, "change-interface-theme"]);
+                              }}
+                              className="focus:outline-none"
+                            >
+                              <div className="flex items-center gap-2 text-custom-text-200">
+                                <Settings className="h-3.5 w-3.5" />
+                                Change interface theme...
                               </div>
-                              <kbd>P</kbd>
                             </Command.Item>
                           </Command.Group>
-                        )}
 
-                        {/* project actions */}
-                        {projectId && <CommandPaletteProjectActions closePalette={closePalette} />}
+                          {/* help options */}
+                          <CommandPaletteHelpActions closePalette={closePalette} />
+                        </>
+                      )}
 
-                        <Command.Group heading="Workspace Settings">
-                          <Command.Item
-                            onSelect={() => {
-                              setPlaceholder("Search workspace settings...");
-                              setSearchTerm("");
-                              setPages([...pages, "settings"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Settings className="h-3.5 w-3.5" />
-                              Search settings...
-                            </div>
-                          </Command.Item>
-                        </Command.Group>
-                        <Command.Group heading="Account">
-                          <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <FolderPlus className="h-3.5 w-3.5" />
-                              Create new workspace
-                            </div>
-                          </Command.Item>
-                          <Command.Item
-                            onSelect={() => {
-                              setPlaceholder("Change interface theme...");
-                              setSearchTerm("");
-                              setPages([...pages, "change-interface-theme"]);
-                            }}
-                            className="focus:outline-none"
-                          >
-                            <div className="flex items-center gap-2 text-custom-text-200">
-                              <Settings className="h-3.5 w-3.5" />
-                              Change interface theme...
-                            </div>
-                          </Command.Item>
-                        </Command.Group>
+                      {/* workspace settings actions */}
+                      {page === "settings" && workspaceSlug && (
+                        <CommandPaletteWorkspaceSettingsActions closePalette={closePalette} />
+                      )}
 
-                        {/* help options */}
-                        <CommandPaletteHelpActions closePalette={closePalette} />
-                      </>
-                    )}
+                      {/* issue details page actions */}
+                      {page === "change-issue-state" && issueDetails && (
+                        <ChangeIssueState closePalette={closePalette} issue={issueDetails} />
+                      )}
+                      {page === "change-issue-priority" && issueDetails && (
+                        <ChangeIssuePriority closePalette={closePalette} issue={issueDetails} />
+                      )}
+                      {page === "change-issue-assignee" && issueDetails && (
+                        <ChangeIssueAssignee closePalette={closePalette} issue={issueDetails} />
+                      )}
 
-                    {/* workspace settings actions */}
-                    {page === "settings" && workspaceSlug && (
-                      <CommandPaletteWorkspaceSettingsActions closePalette={closePalette} />
-                    )}
-
-                    {/* issue details page actions */}
-                    {page === "change-issue-state" && issueDetails && (
-                      <ChangeIssueState closePalette={closePalette} issue={issueDetails} />
-                    )}
-                    {page === "change-issue-priority" && issueDetails && (
-                      <ChangeIssuePriority closePalette={closePalette} issue={issueDetails} />
-                    )}
-                    {page === "change-issue-assignee" && issueDetails && (
-                      <ChangeIssueAssignee closePalette={closePalette} issue={issueDetails} />
-                    )}
-
-                    {/* theme actions */}
-                    {page === "change-interface-theme" && (
-                      <CommandPaletteThemeActions
-                        closePalette={() => {
-                          closePalette();
-                          setPages((pages) => pages.slice(0, -1));
-                        }}
-                      />
-                    )}
-                  </Command.List>
-                </Command>
-              </div>
-            </Dialog.Panel>
-          </Transition.Child>
+                      {/* theme actions */}
+                      {page === "change-interface-theme" && (
+                        <CommandPaletteThemeActions
+                          closePalette={() => {
+                            closePalette();
+                            setPages((pages) => pages.slice(0, -1));
+                          }}
+                        />
+                      )}
+                    </Command.List>
+                  </Command>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
         </div>
       </Dialog>
     </Transition.Root>
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index f5eab83ef..39be2872b 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -49,8 +49,10 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
   const [query, setQuery] = useState("");
   // fetching project issues.
   const { data: issues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
-    workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId && isOpen ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+    workspaceSlug && projectId && isOpen
+      ? () => issueService.getIssues(workspaceSlug as string, projectId as string)
+      : null
   );
 
   const { setToastAlert } = useToast();
diff --git a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index cb433de05..0212e4980 100644
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -5,17 +5,17 @@ import { observer } from "mobx-react";
 
 type Props = {
   onClick?: () => void;
-}
+};
 
 export const SidebarHamburgerToggle: FC<Props> = observer((props) => {
-  const { onClick } = props
+  const { onClick } = props;
   const { theme: themeStore } = useApplication();
   return (
     <div
       className="w-7 h-7 flex-shrink-0 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
       onClick={() => {
-        if (onClick) onClick()
-        else themeStore.toggleMobileSidebar()
+        if (onClick) onClick();
+        else themeStore.toggleSidebar();
       }}
     >
       <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index 7e885635f..1fae0412f 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -69,7 +69,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
   );
 
   const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
-  const cycleOwnerDetails = activeCycle ? getUserDetails(activeCycle.owned_by) : undefined;
+  const cycleOwnerDetails = activeCycle ? getUserDetails(activeCycle.owned_by_id) : undefined;
 
   const { data: activeCycleIssues } = useSWR(
     workspaceSlug && projectId && currentProjectActiveCycleId
diff --git a/web/components/cycles/cycle-mobile-header.tsx b/web/components/cycles/cycle-mobile-header.tsx
index b893bf993..624334ec4 100644
--- a/web/components/cycles/cycle-mobile-header.tsx
+++ b/web/components/cycles/cycle-mobile-header.tsx
@@ -152,6 +152,7 @@ export const CycleMobileHeader = () => {
               handleDisplayFiltersUpdate={handleDisplayFilters}
               displayProperties={issueFilters?.displayProperties ?? {}}
               handleDisplayPropertiesUpdate={handleDisplayProperties}
+              ignoreGroupedFilters={["cycle"]}
             />
           </FiltersDropdown>
         </div>
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 20605a90c..646736bd2 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -59,7 +59,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const { getUserDetails } = useMember();
   // derived values
   const cycleDetails = getCycleById(cycleId);
-  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by) : undefined;
+  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by_id) : undefined;
   // toast alert
   const { setToastAlert } = useToast();
   // form info
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
index ed6bac324..7c8fbd2a9 100644
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -67,6 +67,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
 
   const filterParams = getRedirectionFilters(selectedTab);
   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} />;
 
@@ -84,30 +85,25 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           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") {
-              handleUpdateFilters({ duration: val, tab: "pending" });
-              return;
-            }
+            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") {
-              handleUpdateFilters({
-                duration: val,
-                tab: "upcoming",
-              });
-              return;
-            }
+            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";
 
-            handleUpdateFilters({ duration: val });
+            handleUpdateFilters({
+              duration: val,
+              tab: newTab,
+            });
           }}
         />
       </div>
       <Tab.Group
         as="div"
-        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
+        selectedIndex={selectedTabIndex}
         onChange={(i) => {
-          const selectedTab = tabsList[i];
-          handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
+          const newSelectedTab = tabsList[i];
+          handleUpdateFilters({ tab: newSelectedTab?.key ?? "completed" });
         }}
         className="h-full flex flex-col"
       >
@@ -115,18 +111,21 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {tabsList.map((tab) => (
-            <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
-              <WidgetIssuesList
-                issues={widgetStats.issues}
-                tab={tab.key}
-                totalIssues={widgetStats.count}
-                type="assigned"
-                workspaceSlug={workspaceSlug}
-                isLoading={fetching}
-              />
-            </Tab.Panel>
-          ))}
+          {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 4ef5708c8..e7832883b 100644
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -64,6 +64,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
 
   const filterParams = getRedirectionFilters(selectedTab);
   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} />;
 
@@ -81,30 +82,25 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           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") {
-              handleUpdateFilters({ duration: val, tab: "pending" });
-              return;
-            }
+            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") {
-              handleUpdateFilters({
-                duration: val,
-                tab: "upcoming",
-              });
-              return;
-            }
+            if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";
 
-            handleUpdateFilters({ duration: val });
+            handleUpdateFilters({
+              duration: val,
+              tab: newTab,
+            });
           }}
         />
       </div>
       <Tab.Group
         as="div"
-        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
+        selectedIndex={selectedTabIndex}
         onChange={(i) => {
-          const selectedTab = tabsList[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
+          const newSelectedTab = tabsList[i];
+          handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
         }}
         className="h-full flex flex-col"
       >
@@ -112,18 +108,21 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {tabsList.map((tab) => (
-            <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
-              <WidgetIssuesList
-                issues={widgetStats.issues}
-                tab={tab.key}
-                totalIssues={widgetStats.count}
-                type="created"
-                workspaceSlug={workspaceSlug}
-                isLoading={fetching}
-              />
-            </Tab.Panel>
-          ))}
+          {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>
     </div>
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
index cf3f32232..16b2b95d9 100644
--- a/web/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -14,24 +14,23 @@ import {
   IssueListItemProps,
 } from "components/dashboard/widgets";
 // ui
-import { getButtonStyling } from "@plane/ui";
+import { Loader, getButtonStyling } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { getRedirectionFilters } from "helpers/dashboard.helper";
 // types
-import { TIssue, TIssuesListTypes } from "@plane/types";
+import { TAssignedIssuesWidgetResponse, TCreatedIssuesWidgetResponse, TIssue, TIssuesListTypes } from "@plane/types";
 
 export type WidgetIssuesListProps = {
   isLoading: boolean;
-  issues: TIssue[];
   tab: TIssuesListTypes;
-  totalIssues: number;
   type: "assigned" | "created";
+  widgetStats: TAssignedIssuesWidgetResponse | TCreatedIssuesWidgetResponse;
   workspaceSlug: string;
 };
 
 export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
-  const { isLoading, issues, tab, totalIssues, type, workspaceSlug } = props;
+  const { isLoading, tab, type, widgetStats, workspaceSlug } = props;
   // store hooks
   const { setPeekIssue } = useIssueDetail();
 
@@ -59,12 +58,19 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
     },
   };
 
+  const issuesList = widgetStats.issues;
+
   return (
     <>
       <div className="h-full">
         {isLoading ? (
-          <></>
-        ) : issues.length > 0 ? (
+          <Loader className="space-y-4 mx-6 mt-7">
+            <Loader.Item height="25px" />
+            <Loader.Item height="25px" />
+            <Loader.Item height="25px" />
+            <Loader.Item height="25px" />
+          </Loader>
+        ) : issuesList.length > 0 ? (
           <>
             <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
               <h6
@@ -75,7 +81,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
               >
                 Issues
                 <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
-                  {totalIssues}
+                  {widgetStats.count}
                 </span>
               </h6>
               {["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
@@ -84,7 +90,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
               {type === "created" && <h6 className="text-center">Assigned to</h6>}
             </div>
             <div className="px-4 pb-3 mt-2">
-              {issues.map((issue) => {
+              {issuesList.map((issue) => {
                 const IssueListItem = ISSUE_LIST_ITEM[type][tab];
 
                 if (!IssueListItem) return null;
@@ -107,7 +113,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
           </div>
         )}
       </div>
-      {issues.length > 0 && (
+      {!isLoading && issuesList.length > 0 && (
         <Link
           href={`/${workspaceSlug}/workspace-views/${type}/${filterParams}`}
           className={cn(
diff --git a/web/components/dashboard/widgets/overview-stats.tsx b/web/components/dashboard/widgets/overview-stats.tsx
index 31bdee587..5a105cc15 100644
--- a/web/components/dashboard/widgets/overview-stats.tsx
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@@ -37,7 +37,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
       key: "overdue",
       title: "Issues overdue",
       count: widgetStats?.pending_issues_count,
-      link: `/${workspaceSlug}/workspace-views/assigned/?target_date=${today};before`,
+      link: `/${workspaceSlug}/workspace-views/assigned/?state_group=backlog,unstarted,started&target_date=${today};before`,
     },
     {
       key: "created",
diff --git a/web/components/dropdowns/cycle.tsx b/web/components/dropdowns/cycle.tsx
deleted file mode 100644
index 0104c3c1f..000000000
--- a/web/components/dropdowns/cycle.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-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";
-// hooks
-import { useApplication, 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, CycleGroupIcon } from "@plane/ui";
-// helpers
-import { cn } from "helpers/common.helper";
-// types
-import { TDropdownProps } from "./types";
-import { TCycleGroups } from "@plane/types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
-
-type Props = TDropdownProps & {
-  button?: ReactNode;
-  dropdownArrow?: boolean;
-  dropdownArrowClassName?: string;
-  onChange: (val: string | null) => void;
-  onClose?: () => void;
-  projectId: string;
-  value: string | null;
-};
-
-type DropdownOptions =
-  | {
-      value: string | null;
-      query: string;
-      content: JSX.Element;
-    }[]
-  | undefined;
-
-export const CycleDropdown: React.FC<Props> = observer((props) => {
-  const {
-    button,
-    buttonClassName,
-    buttonContainerClassName,
-    buttonVariant,
-    className = "",
-    disabled = false,
-    dropdownArrow = false,
-    dropdownArrowClassName = "",
-    hideIcon = false,
-    onChange,
-    onClose,
-    placeholder = "Cycle",
-    placement,
-    projectId,
-    showTooltip = false,
-    tabIndex,
-    value,
-  } = props;
-  // states
-  const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  // refs
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-  // store hooks
-  const {
-    router: { workspaceSlug },
-  } = useApplication();
-  const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
-
-  const cycleIds = (getProjectCycleIds(projectId) ?? [])?.filter((cycleId) => {
-    const cycleDetails = getCycleById(cycleId);
-    return cycleDetails?.status ? (cycleDetails?.status.toLowerCase() != "completed" ? true : false) : true;
-  });
-
-  const options: DropdownOptions = cycleIds?.map((cycleId) => {
-    const cycleDetails = getCycleById(cycleId);
-    const cycleStatus = cycleDetails?.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
-
-    return {
-      value: cycleId,
-      query: `${cycleDetails?.name}`,
-      content: (
-        <div className="flex items-center gap-2">
-          <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
-          <span className="flex-grow truncate">{cycleDetails?.name}</span>
-        </div>
-      ),
-    };
-  });
-  options?.unshift({
-    value: null,
-    query: "No cycle",
-    content: (
-      <div className="flex items-center gap-2">
-        <ContrastIcon className="h-3 w-3 flex-shrink-0" />
-        <span className="flex-grow truncate">No cycle</span>
-      </div>
-    ),
-  });
-
-  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
-
-  const selectedCycle = value ? getCycleById(value) : null;
-
-  const onOpen = () => {
-    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug, projectId);
-  };
-
-  const handleClose = () => {
-    if (!isOpen) return;
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string | null) => {
-    onChange(val);
-    handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
-  return (
-    <Combobox
-      as="div"
-      ref={dropdownRef}
-      tabIndex={tabIndex}
-      className={cn("h-full", className)}
-      value={value}
-      onChange={dropdownOnChange}
-      disabled={disabled}
-      onKeyDown={handleKeyDown}
-    >
-      <Combobox.Button as={Fragment}>
-        {button ? (
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={cn(
-              "clickable block h-full w-full outline-none hover:bg-custom-background-80",
-              buttonContainerClassName
-            )}
-            onClick={handleOnClick}
-          >
-            {button}
-          </button>
-        ) : (
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={cn(
-              "clickable block h-full max-w-full outline-none hover:bg-custom-background-80",
-              {
-                "cursor-not-allowed text-custom-text-200": disabled,
-                "cursor-pointer": !disabled,
-              },
-              buttonContainerClassName
-            )}
-            onClick={handleOnClick}
-          >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading="Cycle"
-              tooltipContent={selectedCycle?.name ?? placeholder}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedCycle?.name ?? placeholder}</span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
-          </button>
-        )}
-      </Combobox.Button>
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="my-1 w-48 rounded 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"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
-              <Combobox.Input
-                as="input"
-                ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <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>
-                  ))
-                ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
-                )
-              ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
-      )}
-    </Combobox>
-  );
-});
diff --git a/web/components/dropdowns/cycle/cycle-options.tsx b/web/components/dropdowns/cycle/cycle-options.tsx
new file mode 100644
index 000000000..e691569b7
--- /dev/null
+++ b/web/components/dropdowns/cycle/cycle-options.tsx
@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from "react";
+import { Combobox } from "@headlessui/react";
+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
+import { Check, Search } from "lucide-react";
+//types
+import { Placement } from "@popperjs/core";
+import { TCycleGroups } from "@plane/types";
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: JSX.Element;
+    }[]
+  | undefined;
+
+interface Props {
+  projectId: string;
+  referenceElement: HTMLButtonElement | null;
+  placement: Placement | undefined;
+  isOpen: boolean;
+}
+
+export const CycleOptions = observer((props: any) => {
+  const { projectId, isOpen, referenceElement, placement } = props;
+
+  //state hooks
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const cycleIds = (getProjectCycleIds(projectId) ?? [])?.filter((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    return cycleDetails?.status ? (cycleDetails?.status.toLowerCase() != "completed" ? true : false) : true;
+  });
+
+  const onOpen = () => {
+    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug, projectId);
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = cycleIds?.map((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    const cycleStatus = cycleDetails?.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+
+    return {
+      value: cycleId,
+      query: `${cycleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
+          <span className="flex-grow truncate">{cycleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+  options?.unshift({
+    value: null,
+    query: "No cycle",
+    content: (
+      <div className="flex items-center gap-2">
+        <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+        <span className="flex-grow truncate">No cycle</span>
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox.Options className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded 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"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search"
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  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 matches found</p>
+            )
+          ) : (
+            <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});
diff --git a/web/components/dropdowns/cycle/index.tsx b/web/components/dropdowns/cycle/index.tsx
new file mode 100644
index 000000000..2c05d9ddf
--- /dev/null
+++ b/web/components/dropdowns/cycle/index.tsx
@@ -0,0 +1,150 @@
+import { Fragment, ReactNode, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Combobox } from "@headlessui/react";
+import { ChevronDown } from "lucide-react";
+// hooks
+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 { TDropdownProps } from "../types";
+// constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { CycleOptions } from "./cycle-options";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onChange: (val: string | null) => void;
+  onClose?: () => void;
+  projectId: string;
+  value: string | null;
+};
+
+export const CycleDropdown: React.FC<Props> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    onChange,
+    onClose,
+    placeholder = "Cycle",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // states
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { getCycleNameById } = useCycle();
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  const selectedName = value ? getCycleNameById(value) : null;
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose && onClose();
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
+  };
+
+  const dropdownOnChange = (val: string | null) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+    >
+      <Combobox.Button as={Fragment}>
+        {button ? (
+          <button
+            ref={setReferenceElement}
+            type="button"
+            className={cn(
+              "clickable block h-full w-full outline-none hover:bg-custom-background-80",
+              buttonContainerClassName
+            )}
+            onClick={handleOnClick}
+          >
+            {button}
+          </button>
+        ) : (
+          <button
+            ref={setReferenceElement}
+            type="button"
+            className={cn(
+              "clickable block h-full max-w-full outline-none hover:bg-custom-background-80",
+              {
+                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-pointer": !disabled,
+              },
+              buttonContainerClassName
+            )}
+            onClick={handleOnClick}
+          >
+            <DropdownButton
+              className={buttonClassName}
+              isActive={isOpen}
+              tooltipHeading="Cycle"
+              tooltipContent={selectedName ?? placeholder}
+              showTooltip={showTooltip}
+              variant={buttonVariant}
+            >
+              {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
+              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+                <span className="flex-grow truncate max-w-40">{selectedName ?? placeholder}</span>
+              )}
+              {dropdownArrow && (
+                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              )}
+            </DropdownButton>
+          </button>
+        )}
+      </Combobox.Button>
+      {isOpen && (
+        <CycleOptions isOpen={isOpen} projectId={projectId} placement={placement} referenceElement={referenceElement} />
+      )}
+    </Combobox>
+  );
+});
diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 04c7d6948..570ea45da 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -86,6 +86,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
   const toggleDropdown = () => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: Date | null) => {
@@ -146,7 +147,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
               <span className="flex-grow truncate">{value ? renderFormattedDate(value) : placeholder}</span>
             )}
-            {isClearable && isDateSelected && (
+            {isClearable && !disabled && isDateSelected && (
               <X
                 className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
                 onClick={(e) => {
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 2674fa902..663ca67ce 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -122,6 +122,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const toggleDropdown = () => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: number | null) => {
@@ -137,6 +138,13 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     toggleDropdown();
   };
 
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
   useOutsideClickDetector(dropdownRef, handleClose);
 
   useEffect(() => {
@@ -217,6 +225,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
               />
             </div>
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
diff --git a/web/components/dropdowns/member/index.ts b/web/components/dropdowns/member/index.ts
deleted file mode 100644
index a9f7e09c8..000000000
--- a/web/components/dropdowns/member/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./project-member";
-export * from "./workspace-member";
diff --git a/web/components/dropdowns/member/index.tsx b/web/components/dropdowns/member/index.tsx
new file mode 100644
index 000000000..0513ec627
--- /dev/null
+++ b/web/components/dropdowns/member/index.tsx
@@ -0,0 +1,157 @@
+import { Fragment, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Combobox } from "@headlessui/react";
+import { ChevronDown } from "lucide-react";
+// hooks
+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";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { MemberDropdownProps } from "./types";
+// constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { MemberOptions } from "./member-options";
+
+type Props = {
+  projectId?: string;
+  onClose?: () => void;
+} & MemberDropdownProps;
+
+export const MemberDropdown: React.FC<Props> = observer((props) => {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    multiple,
+    onChange,
+    onClose,
+    placeholder = "Members",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  const { getUserDetails } = useMember();
+
+  const comboboxProps: any = {
+    value,
+    onChange,
+    disabled,
+  };
+  if (multiple) comboboxProps.multiple = true;
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose && onClose();
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
+  };
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      onChange={dropdownOnChange}
+      onKeyDown={handleKeyDown}
+      {...comboboxProps}
+    >
+      <Combobox.Button as={Fragment}>
+        {button ? (
+          <button
+            ref={setReferenceElement}
+            type="button"
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+            onClick={handleOnClick}
+          >
+            {button}
+          </button>
+        ) : (
+          <button
+            ref={setReferenceElement}
+            type="button"
+            className={cn(
+              "clickable block h-full max-w-full outline-none",
+              {
+                "cursor-not-allowed text-custom-text-200": disabled,
+                "cursor-pointer": !disabled,
+              },
+              buttonContainerClassName
+            )}
+            onClick={handleOnClick}
+          >
+            <DropdownButton
+              className={buttonClassName}
+              isActive={isOpen}
+              tooltipHeading={placeholder}
+              tooltipContent={`${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
+              showTooltip={showTooltip}
+              variant={buttonVariant}
+            >
+              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
+              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+                <span className="flex-grow truncate text-xs leading-5">
+                  {Array.isArray(value) && value.length > 0
+                    ? value.length === 1
+                      ? getUserDetails(value[0])?.display_name
+                      : ""
+                    : placeholder}
+                </span>
+              )}
+              {dropdownArrow && (
+                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              )}
+            </DropdownButton>
+          </button>
+        )}
+      </Combobox.Button>
+      {isOpen && (
+        <MemberOptions
+          isOpen={isOpen}
+          projectId={projectId}
+          placement={placement}
+          referenceElement={referenceElement}
+        />
+      )}
+    </Combobox>
+  );
+});
diff --git a/web/components/dropdowns/member/member-options.tsx b/web/components/dropdowns/member/member-options.tsx
new file mode 100644
index 000000000..46a0b9cba
--- /dev/null
+++ b/web/components/dropdowns/member/member-options.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import { Combobox } from "@headlessui/react";
+import { observer } from "mobx-react";
+//components
+import { Avatar } from "@plane/ui";
+//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;
+  referenceElement: HTMLButtonElement | null;
+  placement: Placement | undefined;
+  isOpen: boolean;
+}
+
+export const MemberOptions = observer((props: Props) => {
+  const { projectId, referenceElement, placement, isOpen } = props;
+
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const {
+    getUserDetails,
+    project: { getProjectMemberIds, fetchProjectMembers },
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const { currentUser } = useUser();
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const memberIds = projectId ? getProjectMemberIds(projectId) : workspaceMemberIds;
+  const onOpen = () => {
+    if (!memberIds && workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId);
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options = memberIds?.map((userId) => {
+    const userDetails = getUserDetails(userId);
+
+    return {
+      value: userId,
+      query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar name={userDetails?.display_name} src={userDetails?.avatar} />
+          <span className="flex-grow truncate">{currentUser?.id === userId ? "You" : userDetails?.display_name}</span>
+        </div>
+      ),
+    };
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox.Options className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded 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"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search"
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  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>
+            )
+          ) : (
+            <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});
diff --git a/web/components/dropdowns/member/project-member.tsx b/web/components/dropdowns/member/project-member.tsx
deleted file mode 100644
index 0e2479849..000000000
--- a/web/components/dropdowns/member/project-member.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import { Fragment, 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";
-// hooks
-import { useApplication, useMember, useUser } 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";
-// icons
-import { Avatar } from "@plane/ui";
-// helpers
-import { cn } from "helpers/common.helper";
-// types
-import { MemberDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
-
-type Props = {
-  projectId: string;
-  onClose?: () => void;
-} & MemberDropdownProps;
-
-export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
-  const {
-    button,
-    buttonClassName,
-    buttonContainerClassName,
-    buttonVariant,
-    className = "",
-    disabled = false,
-    dropdownArrow = false,
-    dropdownArrowClassName = "",
-    hideIcon = false,
-    multiple,
-    onChange,
-    onClose,
-    placeholder = "Members",
-    placement,
-    projectId,
-    showTooltip = false,
-    tabIndex,
-    value,
-  } = props;
-  // states
-  const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  // refs
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-  // store hooks
-  const {
-    router: { workspaceSlug },
-  } = useApplication();
-  const { currentUser } = useUser();
-  const {
-    getUserDetails,
-    project: { getProjectMemberIds, fetchProjectMembers },
-  } = useMember();
-  const projectMemberIds = getProjectMemberIds(projectId);
-
-  const options = projectMemberIds?.map((userId) => {
-    const userDetails = getUserDetails(userId);
-
-    return {
-      value: userId,
-      query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar name={userDetails?.display_name} src={userDetails?.avatar} />
-          <span className="flex-grow truncate">{currentUser?.id === userId ? "You" : userDetails?.display_name}</span>
-        </div>
-      ),
-    };
-  });
-
-  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
-
-  const comboboxProps: any = {
-    value,
-    onChange,
-    disabled,
-  };
-  if (multiple) comboboxProps.multiple = true;
-
-  const onOpen = () => {
-    if (!projectMemberIds && workspaceSlug) fetchProjectMembers(workspaceSlug, projectId);
-  };
-
-  const handleClose = () => {
-    if (!isOpen) return;
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string & string[]) => {
-    onChange(val);
-    if (!multiple) handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
-  return (
-    <Combobox
-      as="div"
-      ref={dropdownRef}
-      tabIndex={tabIndex}
-      className={cn("h-full", className)}
-      onChange={dropdownOnChange}
-      onKeyDown={handleKeyDown}
-      {...comboboxProps}
-    >
-      <Combobox.Button as={Fragment}>
-        {button ? (
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
-          >
-            {button}
-          </button>
-        ) : (
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={cn(
-              "clickable block h-full max-w-full outline-none",
-              {
-                "cursor-not-allowed text-custom-text-200": disabled,
-                "cursor-pointer": !disabled,
-              },
-              buttonContainerClassName
-            )}
-            onClick={handleOnClick}
-          >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading={placeholder}
-              tooltipContent={`${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate text-xs leading-5">
-                  {Array.isArray(value) && value.length > 0
-                    ? value.length === 1
-                      ? getUserDetails(value[0])?.display_name
-                      : ""
-                    : placeholder}
-                </span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
-          </button>
-        )}
-      </Combobox.Button>
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="my-1 w-48 rounded 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"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
-              <Combobox.Input
-                as="input"
-                ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <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>
-                  ))
-                ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
-                )
-              ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
-      )}
-    </Combobox>
-  );
-});
diff --git a/web/components/dropdowns/member/workspace-member.tsx b/web/components/dropdowns/member/workspace-member.tsx
deleted file mode 100644
index e7a679750..000000000
--- a/web/components/dropdowns/member/workspace-member.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import { Fragment, 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";
-// hooks
-import { useMember, useUser } 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";
-// icons
-import { Avatar } from "@plane/ui";
-// helpers
-import { cn } from "helpers/common.helper";
-// types
-import { MemberDropdownProps } from "./types";
-// constants
-import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
-
-export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
-  const {
-    button,
-    buttonClassName,
-    buttonContainerClassName,
-    buttonVariant,
-    className = "",
-    disabled = false,
-    dropdownArrow = false,
-    dropdownArrowClassName = "",
-    hideIcon = false,
-    multiple,
-    onChange,
-    onClose,
-    placeholder = "Members",
-    placement,
-    showTooltip = false,
-    tabIndex,
-    value,
-  } = props;
-  // states
-  const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  // refs
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-  // store hooks
-  const { currentUser } = useUser();
-  const {
-    getUserDetails,
-    workspace: { workspaceMemberIds },
-  } = useMember();
-
-  const options = workspaceMemberIds?.map((userId) => {
-    const userDetails = getUserDetails(userId);
-
-    return {
-      value: userId,
-      query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar name={userDetails?.display_name} src={userDetails?.avatar} />
-          <span className="flex-grow truncate">{currentUser?.id === userId ? "You" : userDetails?.display_name}</span>
-        </div>
-      ),
-    };
-  });
-
-  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
-
-  const comboboxProps: any = {
-    value,
-    onChange,
-    disabled,
-  };
-  if (multiple) comboboxProps.multiple = true;
-
-  const handleClose = () => {
-    if (!isOpen) return;
-    setIsOpen(false);
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-  };
-
-  const dropdownOnChange = (val: string & string[]) => {
-    onChange(val);
-    if (!multiple) handleClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
-  };
-
-  useOutsideClickDetector(dropdownRef, handleClose);
-
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-
-  return (
-    <Combobox
-      as="div"
-      ref={dropdownRef}
-      tabIndex={tabIndex}
-      className={cn("h-full", className)}
-      {...comboboxProps}
-      handleKeyDown={handleKeyDown}
-      onChange={dropdownOnChange}
-    >
-      <Combobox.Button as={Fragment}>
-        {button ? (
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
-            onClick={handleOnClick}
-          >
-            {button}
-          </button>
-        ) : (
-          <button
-            ref={setReferenceElement}
-            type="button"
-            className={cn(
-              "clickable block h-full max-w-full outline-none",
-              {
-                "cursor-not-allowed text-custom-text-200": disabled,
-                "cursor-pointer": !disabled,
-              },
-              buttonContainerClassName
-            )}
-            onClick={handleOnClick}
-          >
-            <DropdownButton
-              className={buttonClassName}
-              isActive={isOpen}
-              tooltipHeading={placeholder}
-              tooltipContent={`${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
-              showTooltip={showTooltip}
-              variant={buttonVariant}
-            >
-              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
-              {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate text-xs leading-5">
-                  {Array.isArray(value) && value.length > 0
-                    ? value.length === 1
-                      ? getUserDetails(value[0])?.display_name
-                      : ""
-                    : placeholder}
-                </span>
-              )}
-              {dropdownArrow && (
-                <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-              )}
-            </DropdownButton>
-          </button>
-        )}
-      </Combobox.Button>
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="my-1 w-48 rounded 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"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
-              <Combobox.Input
-                as="input"
-                ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <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>
-                  ))
-                ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
-                )
-              ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
-      )}
-    </Combobox>
-  );
-});
diff --git a/web/components/dropdowns/module.tsx b/web/components/dropdowns/module/index.tsx
similarity index 63%
rename from web/components/dropdowns/module.tsx
rename to web/components/dropdowns/module/index.tsx
index f41ece121..5e0a3977f 100644
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module/index.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, X } from "lucide-react";
+import { ChevronDown, X } from "lucide-react";
 // hooks
-import { useApplication, useModule } from "hooks/store";
+import { useModule } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { DropdownButton } from "./buttons";
+import { DropdownButton } from "../buttons";
 // icons
 import { DiceIcon, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
-import { TDropdownProps } from "./types";
+import { TDropdownProps } from "../types";
 // constants
-import { BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
+import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
+import { ModuleOptions } from "./module-options";
 
 type Props = TDropdownProps & {
   button?: ReactNode;
@@ -38,14 +38,6 @@ type Props = TDropdownProps & {
       }
   );
 
-type DropdownOptions =
-  | {
-      value: string | null;
-      query: string;
-      content: JSX.Element;
-    }[]
-  | undefined;
-
 type ButtonContentProps = {
   disabled: boolean;
   dropdownArrow: boolean;
@@ -166,64 +158,14 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     value,
   } = props;
   // states
-  const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   // refs
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-  // store hooks
-  const {
-    router: { workspaceSlug },
-  } = useApplication();
-  const { getProjectModuleIds, fetchModules, getModuleById } = useModule();
-  const moduleIds = getProjectModuleIds(projectId);
 
-  const options: DropdownOptions = moduleIds?.map((moduleId) => {
-    const moduleDetails = getModuleById(moduleId);
-    return {
-      value: moduleId,
-      query: `${moduleDetails?.name}`,
-      content: (
-        <div className="flex items-center gap-2">
-          <DiceIcon className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">{moduleDetails?.name}</span>
-        </div>
-      ),
-    };
-  });
-  if (!multiple)
-    options?.unshift({
-      value: null,
-      query: "No module",
-      content: (
-        <div className="flex items-center gap-2">
-          <DiceIcon className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">No module</span>
-        </div>
-      ),
-    });
-
-  const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
-
-  const onOpen = () => {
-    if (!moduleIds && workspaceSlug) fetchModules(workspaceSlug, projectId);
-  };
+  const { getModuleNameById } = useModule();
 
   const handleClose = () => {
     if (!isOpen) return;
@@ -232,8 +174,8 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   };
 
   const toggleDropdown = () => {
-    if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: string & string[]) => {
@@ -307,7 +249,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
               tooltipContent={
                 Array.isArray(value)
                   ? `${value
-                      .map((moduleId) => getModuleById(moduleId)?.name)
+                      .map((moduleId) => getModuleNameById(moduleId))
                       .toString()
                       .replaceAll(",", ", ")}`
                   : ""
@@ -332,60 +274,13 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
         )}
       </Combobox.Button>
       {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className="my-1 w-48 rounded 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"
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
-              <Combobox.Input
-                as="input"
-                ref={inputRef}
-                className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <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 }) =>
-                        cn(
-                          "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
-                          {
-                            "bg-custom-background-80": active,
-                            "text-custom-text-100": selected,
-                            "text-custom-text-200": !selected,
-                          }
-                        )
-                      }
-                    >
-                      {({ 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>
-                )
-              ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
+        <ModuleOptions
+          isOpen={isOpen}
+          projectId={projectId}
+          placement={placement}
+          referenceElement={referenceElement}
+          multiple={multiple}
+        />
       )}
     </Combobox>
   );
diff --git a/web/components/dropdowns/module/module-options.tsx b/web/components/dropdowns/module/module-options.tsx
new file mode 100644
index 000000000..e7d205b12
--- /dev/null
+++ b/web/components/dropdowns/module/module-options.tsx
@@ -0,0 +1,163 @@
+import { useEffect, useRef, useState } from "react";
+import { Combobox } from "@headlessui/react";
+import { observer } from "mobx-react";
+//components
+import { DiceIcon } from "@plane/ui";
+//store
+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 =
+  | {
+      value: string | null;
+      query: string;
+      content: JSX.Element;
+    }[]
+  | undefined;
+
+interface Props {
+  projectId: string;
+  referenceElement: HTMLButtonElement | null;
+  placement: Placement | undefined;
+  isOpen: boolean;
+  multiple: boolean;
+}
+
+export const ModuleOptions = observer((props: Props) => {
+  const { projectId, isOpen, referenceElement, placement, multiple } = props;
+
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // store hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+  const { getProjectModuleIds, fetchModules, getModuleById } = useModule();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const moduleIds = getProjectModuleIds(projectId);
+
+  const onOpen = () => {
+    if (workspaceSlug && !moduleIds) fetchModules(workspaceSlug, projectId);
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = moduleIds?.map((moduleId) => {
+    const moduleDetails = getModuleById(moduleId);
+    return {
+      value: moduleId,
+      query: `${moduleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <DiceIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{moduleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+  if (!multiple)
+    options?.unshift({
+      value: null,
+      query: "No module",
+      content: (
+        <div className="flex items-center gap-2">
+          <DiceIcon className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">No module</span>
+        </div>
+      ),
+    });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox.Options className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded 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"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search"
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    cn(
+                      "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
+                      {
+                        "bg-custom-background-80": active,
+                        "text-custom-text-100": selected,
+                        "text-custom-text-200": !selected,
+                      }
+                    )
+                  }
+                >
+                  {({ 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>
+            )
+          ) : (
+            <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index d519ad9f1..5cacefb3f 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -314,6 +314,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: TIssuePriorities) => {
@@ -329,6 +330,13 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     toggleDropdown();
   };
 
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
   useOutsideClickDetector(dropdownRef, handleClose);
 
   const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
@@ -417,6 +425,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
               />
             </div>
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index fa068fdd0..9fa2f38c8 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -104,6 +104,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const toggleDropdown = () => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: string) => {
@@ -119,6 +120,13 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     toggleDropdown();
   };
 
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
   useOutsideClickDetector(dropdownRef, handleClose);
 
   useEffect(() => {
@@ -205,6 +213,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search"
                 displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
               />
             </div>
             <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index 0c72b986a..57d5d8896 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -53,7 +53,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
       <Popover.Button
         ref={buttonRef}
         onClick={() => setIsOpen((prev) => !prev)}
-        className="outline-none"
+        className="outline-none flex items-center justify-center"
         disabled={disabled}
       >
         {label}
diff --git a/web/components/gantt-chart/blocks/block.tsx b/web/components/gantt-chart/blocks/block.tsx
new file mode 100644
index 000000000..1e0882aee
--- /dev/null
+++ b/web/components/gantt-chart/blocks/block.tsx
@@ -0,0 +1,106 @@
+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";
+// types
+import { IBlockUpdateData, IGanttBlock } from "../types";
+// constants
+import { BLOCK_HEIGHT } from "../constants";
+
+type Props = {
+  block: IGanttBlock;
+  blockToRender: (data: any) => React.ReactNode;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
+  enableAddBlock: boolean;
+  ganttContainerRef: React.RefObject<HTMLDivElement>;
+};
+
+export const GanttChartBlock: React.FC<Props> = observer((props) => {
+  const {
+    block,
+    blockToRender,
+    blockUpdateHandler,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    enableAddBlock,
+    ganttContainerRef,
+  } = props;
+  // store hooks
+  const { updateActiveBlockId, isBlockActive } = useGanttChart();
+  const { peekIssue } = useIssueDetail();
+
+  const isBlockVisibleOnChart = block.start_date && block.target_date;
+
+  const handleChartBlockPosition = (
+    block: IGanttBlock,
+    totalBlockShifts: number,
+    dragDirection: "left" | "right" | "move"
+  ) => {
+    if (!block.start_date || !block.target_date) return;
+
+    const originalStartDate = new Date(block.start_date);
+    const updatedStartDate = new Date(originalStartDate);
+
+    const originalTargetDate = new Date(block.target_date);
+    const updatedTargetDate = new Date(originalTargetDate);
+
+    // update the start date on left resize
+    if (dragDirection === "left") updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
+    // update the target date on right resize
+    else if (dragDirection === "right") updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
+    // update both the dates on x-axis move
+    else if (dragDirection === "move") {
+      updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts);
+      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
+    }
+
+    // call the block update handler with the updated dates
+    blockUpdateHandler(block.data, {
+      start_date: renderFormattedPayloadDate(updatedStartDate) ?? undefined,
+      target_date: renderFormattedPayloadDate(updatedTargetDate) ?? undefined,
+    });
+  };
+
+  return (
+    <div
+      key={`block-${block.id}`}
+      className="relative min-w-full w-max"
+      style={{
+        height: `${BLOCK_HEIGHT}px`,
+      }}
+    >
+      <div
+        className={cn("relative h-full", {
+          "bg-custom-background-80": isBlockActive(block.id),
+          "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
+            peekIssue?.issueId === block.data.id,
+        })}
+        onMouseEnter={() => updateActiveBlockId(block.id)}
+        onMouseLeave={() => updateActiveBlockId(null)}
+      >
+        {isBlockVisibleOnChart ? (
+          <ChartDraggable
+            block={block}
+            blockToRender={blockToRender}
+            handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
+            enableBlockLeftResize={enableBlockLeftResize}
+            enableBlockRightResize={enableBlockRightResize}
+            enableBlockMove={enableBlockMove}
+            ganttContainerRef={ganttContainerRef}
+          />
+        ) : (
+          enableAddBlock && <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/gantt-chart/blocks/blocks-list.tsx b/web/components/gantt-chart/blocks/blocks-list.tsx
index 15a3e5295..d98524ecc 100644
--- a/web/components/gantt-chart/blocks/blocks-list.tsx
+++ b/web/components/gantt-chart/blocks/blocks-list.tsx
@@ -1,16 +1,10 @@
-import { observer } from "mobx-react";
 import { FC } from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
-import { useChart } from "../hooks";
-// helpers
-import { ChartAddBlock, ChartDraggable } from "components/gantt-chart";
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
+// components
+import { GanttChartBlock } from "./block";
 // types
 import { IBlockUpdateData, IGanttBlock } from "../types";
 // constants
-import { BLOCK_HEIGHT, HEADER_HEIGHT } from "../constants";
+import { HEADER_HEIGHT } from "../constants";
 
 export type GanttChartBlocksProps = {
   itemsContainerWidth: number;
@@ -21,10 +15,11 @@ export type GanttChartBlocksProps = {
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
   enableAddBlock: boolean;
+  ganttContainerRef: React.RefObject<HTMLDivElement>;
   showAllBlocks: boolean;
 };
 
-export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props) => {
+export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
   const {
     itemsContainerWidth,
     blocks,
@@ -34,52 +29,9 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
     enableBlockRightResize,
     enableBlockMove,
     enableAddBlock,
+    ganttContainerRef,
     showAllBlocks,
   } = props;
-  // store hooks
-  const { peekIssue } = useIssueDetail();
-  // chart hook
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleChartBlockPosition = (
-    block: IGanttBlock,
-    totalBlockShifts: number,
-    dragDirection: "left" | "right" | "move"
-  ) => {
-    if (!block.start_date || !block.target_date) return;
-
-    const originalStartDate = new Date(block.start_date);
-    const updatedStartDate = new Date(originalStartDate);
-
-    const originalTargetDate = new Date(block.target_date);
-    const updatedTargetDate = new Date(originalTargetDate);
-
-    // update the start date on left resize
-    if (dragDirection === "left") updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
-    // update the target date on right resize
-    else if (dragDirection === "right") updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
-    // update both the dates on x-axis move
-    else if (dragDirection === "move") {
-      updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts);
-      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
-    }
-
-    // call the block update handler with the updated dates
-    blockUpdateHandler(block.data, {
-      start_date: renderFormattedPayloadDate(updatedStartDate) ?? undefined,
-      target_date: renderFormattedPayloadDate(updatedTargetDate) ?? undefined,
-    });
-  };
 
   return (
     <div
@@ -93,41 +45,19 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
         // hide the block if it doesn't have start and target dates and showAllBlocks is false
         if (!showAllBlocks && !(block.start_date && block.target_date)) return;
 
-        const isBlockVisibleOnChart = block.start_date && block.target_date;
-
         return (
-          <div
-            key={`block-${block.id}`}
-            className="relative min-w-full w-max"
-            style={{
-              height: `${BLOCK_HEIGHT}px`,
-            }}
-          >
-            <div
-              className={cn("relative h-full", {
-                "bg-custom-background-80": activeBlock?.id === block.id,
-                "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
-                  peekIssue?.issueId === block.data.id,
-              })}
-              onMouseEnter={() => updateActiveBlock(block)}
-              onMouseLeave={() => updateActiveBlock(null)}
-            >
-              {isBlockVisibleOnChart ? (
-                <ChartDraggable
-                  block={block}
-                  blockToRender={blockToRender}
-                  handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
-                  enableBlockLeftResize={enableBlockLeftResize}
-                  enableBlockRightResize={enableBlockRightResize}
-                  enableBlockMove={enableBlockMove}
-                />
-              ) : (
-                enableAddBlock && <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
-              )}
-            </div>
-          </div>
+          <GanttChartBlock
+            block={block}
+            blockToRender={blockToRender}
+            blockUpdateHandler={blockUpdateHandler}
+            enableBlockLeftResize={enableBlockLeftResize}
+            enableBlockRightResize={enableBlockRightResize}
+            enableBlockMove={enableBlockMove}
+            enableAddBlock={enableAddBlock}
+            ganttContainerRef={ganttContainerRef}
+          />
         );
       })}
     </div>
   );
-});
+};
diff --git a/web/components/gantt-chart/chart/header.tsx b/web/components/gantt-chart/chart/header.tsx
index 6dcfdc36f..2ebd0360d 100644
--- a/web/components/gantt-chart/chart/header.tsx
+++ b/web/components/gantt-chart/chart/header.tsx
@@ -1,10 +1,13 @@
 import { Expand, Shrink } from "lucide-react";
 // hooks
-import { useChart } from "../hooks";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
 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;
@@ -16,10 +19,10 @@ type Props = {
   toggleFullScreenMode: () => void;
 };
 
-export const GanttChartHeader: React.FC<Props> = (props) => {
+export const GanttChartHeader: React.FC<Props> = observer((props) => {
   const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
   // chart hook
-  const { currentView, allViews } = useChart();
+  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">
@@ -29,7 +32,7 @@ export const GanttChartHeader: React.FC<Props> = (props) => {
       </div>
 
       <div className="flex flex-wrap items-center gap-2">
-        {allViews?.map((chartView: any) => (
+        {VIEWS_LIST.map((chartView: any) => (
           <div
             key={chartView?.key}
             className={cn("cursor-pointer rounded-sm p-1 px-2 text-xs", {
@@ -56,4 +59,4 @@ export const GanttChartHeader: React.FC<Props> = (props) => {
       </button>
     </div>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/main-content.tsx b/web/components/gantt-chart/chart/main-content.tsx
index 42670b972..8a1c5de26 100644
--- a/web/components/gantt-chart/chart/main-content.tsx
+++ b/web/components/gantt-chart/chart/main-content.tsx
@@ -1,3 +1,7 @@
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "../hooks/use-gantt-chart";
 // components
 import {
   BiWeekChartView,
@@ -12,7 +16,6 @@ import {
   TGanttViews,
   WeekChartView,
   YearChartView,
-  useChart,
 } from "components/gantt-chart";
 // helpers
 import { cn } from "helpers/common.helper";
@@ -36,7 +39,7 @@ type Props = {
   quickAdd?: React.JSX.Element | undefined;
 };
 
-export const GanttChartMainContent: React.FC<Props> = (props) => {
+export const GanttChartMainContent: React.FC<Props> = observer((props) => {
   const {
     blocks,
     blockToRender,
@@ -55,13 +58,15 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
     updateCurrentViewRenderPayload,
     quickAdd,
   } = props;
+  // refs
+  const ganttContainerRef = useRef<HTMLDivElement>(null);
   // chart hook
-  const { currentView, currentViewData, updateScrollLeft } = useChart();
+  const { currentView, currentViewData } = useGanttChart();
   // handling scroll functionality
   const onScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
     const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
 
-    updateScrollLeft(scrollLeft);
+    // updateScrollLeft(scrollLeft);
 
     const approxRangeLeft = scrollLeft >= clientWidth + 1000 ? 1000 : scrollLeft - clientWidth;
     const approxRangeRight = scrollWidth - (scrollLeft + clientWidth);
@@ -95,6 +100,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
           "mb-8": bottomSpacing,
         }
       )}
+      ref={ganttContainerRef}
       onScroll={onScroll}
     >
       <GanttChartSidebar
@@ -117,10 +123,11 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
             enableBlockRightResize={enableBlockRightResize}
             enableBlockMove={enableBlockMove}
             enableAddBlock={enableAddBlock}
+            ganttContainerRef={ganttContainerRef}
             showAllBlocks={showAllBlocks}
           />
         )}
       </div>
     </div>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx
index 877c15901..be6229ce3 100644
--- a/web/components/gantt-chart/chart/root.tsx
+++ b/web/components/gantt-chart/chart/root.tsx
@@ -1,6 +1,9 @@
 import { FC, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "../hooks/use-gantt-chart";
 // components
-import { GanttChartHeader, useChart, GanttChartMainContent } from "components/gantt-chart";
+import { GanttChartHeader, GanttChartMainContent } from "components/gantt-chart";
 // views
 import {
   generateMonthChart,
@@ -34,7 +37,7 @@ type ChartViewRootProps = {
   quickAdd?: React.JSX.Element | undefined;
 };
 
-export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
+export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
   const {
     border,
     title,
@@ -57,7 +60,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
   const [fullScreenMode, setFullScreenMode] = useState(false);
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
   // hooks
-  const { currentView, currentViewData, renderView, dispatch } = useChart();
+  const { currentView, currentViewData, renderView, updateCurrentView, updateCurrentViewData, updateRenderView } =
+    useGanttChart();
 
   // rendering the block structure
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
@@ -87,36 +91,20 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
 
     // updating the prevData, currentData and nextData
     if (currentRender.payload.length > 0) {
+      updateCurrentViewData(currentRender.state);
+
       if (side === "left") {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: selectedCurrentView,
-            currentViewData: currentRender.state,
-            renderView: [...currentRender.payload, ...renderView],
-          },
-        });
+        updateCurrentView(selectedCurrentView);
+        updateRenderView([...currentRender.payload, ...renderView]);
         updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
         setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
       } else if (side === "right") {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: view,
-            currentViewData: currentRender.state,
-            renderView: [...renderView, ...currentRender.payload],
-          },
-        });
+        updateCurrentView(view);
+        updateRenderView([...renderView, ...currentRender.payload]);
         setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
       } else {
-        dispatch({
-          type: "PARTIAL_UPDATE",
-          payload: {
-            currentView: view,
-            currentViewData: currentRender.state,
-            renderView: [...currentRender.payload],
-          },
-        });
+        updateCurrentView(view);
+        updateRenderView(currentRender.payload);
         setItemsContainerWidth(currentRender.scrollWidth);
         setTimeout(() => {
           handleScrollToCurrentSelectedDate(currentRender.state, currentRender.state.data.currentDate);
@@ -206,4 +194,4 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
       />
     </div>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/bi-week.tsx b/web/components/gantt-chart/chart/views/bi-week.tsx
index 6e53d5390..f0ad084e9 100644
--- a/web/components/gantt-chart/chart/views/bi-week.tsx
+++ b/web/components/gantt-chart/chart/views/bi-week.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
-// context
-import { useChart } from "components/gantt-chart";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 
-export const BiWeekChartView: FC<any> = () => {
+export const BiWeekChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentView, currentViewData, renderView } = useGanttChart();
 
   return (
     <>
@@ -50,4 +51,4 @@ export const BiWeekChartView: FC<any> = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/day.tsx b/web/components/gantt-chart/chart/views/day.tsx
index a50b7748a..84b2edac4 100644
--- a/web/components/gantt-chart/chart/views/day.tsx
+++ b/web/components/gantt-chart/chart/views/day.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
-// context
-import { useChart } from "../../hooks";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 
-export const DayChartView: FC<any> = () => {
+export const DayChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentView, currentViewData, renderView } = useGanttChart();
 
   return (
     <>
@@ -50,4 +51,4 @@ export const DayChartView: FC<any> = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/hours.tsx b/web/components/gantt-chart/chart/views/hours.tsx
index e1fd02e3f..bd1a7b6dd 100644
--- a/web/components/gantt-chart/chart/views/hours.tsx
+++ b/web/components/gantt-chart/chart/views/hours.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
-// context
-import { useChart } from "components/gantt-chart";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 
-export const HourChartView: FC<any> = () => {
+export const HourChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentView, currentViewData, renderView } = useGanttChart();
 
   return (
     <>
@@ -50,4 +51,4 @@ export const HourChartView: FC<any> = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/month.tsx b/web/components/gantt-chart/chart/views/month.tsx
index c559e9688..b67b453f1 100644
--- a/web/components/gantt-chart/chart/views/month.tsx
+++ b/web/components/gantt-chart/chart/views/month.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 // hooks
-import { useChart } from "components/gantt-chart";
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 // helpers
 import { cn } from "helpers/common.helper";
 // types
@@ -8,15 +9,15 @@ import { IMonthBlock } from "../../views";
 // constants
 import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "components/gantt-chart/constants";
 
-export const MonthChartView: FC<any> = () => {
+export const MonthChartView: FC<any> = observer(() => {
   // chart hook
-  const { currentViewData, renderView } = useChart();
+  const { currentViewData, renderView } = useGanttChart();
   const monthBlocks: IMonthBlock[] = renderView;
 
   return (
-    <div className="absolute top-0 left-0 h-full w-max flex divide-x divide-custom-border-100/50">
+    <div className="absolute top-0 left-0 min-h-full h-max w-max flex divide-x divide-custom-border-100/50">
       {monthBlocks?.map((block, rootIndex) => (
-        <div key={`month-${block?.month}-${block?.year}`} className="relative">
+        <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"
             style={{
@@ -71,4 +72,4 @@ export const MonthChartView: FC<any> = () => {
       ))}
     </div>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/quarter.tsx b/web/components/gantt-chart/chart/views/quarter.tsx
index ffbc1cbfe..b8adc4b3a 100644
--- a/web/components/gantt-chart/chart/views/quarter.tsx
+++ b/web/components/gantt-chart/chart/views/quarter.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
-// context
-import { useChart } from "../../hooks";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 
-export const QuarterChartView: FC<any> = () => {
+export const QuarterChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentView, currentViewData, renderView } = useGanttChart();
 
   return (
     <>
@@ -46,4 +47,4 @@ export const QuarterChartView: FC<any> = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/week.tsx b/web/components/gantt-chart/chart/views/week.tsx
index 8170affa4..981fc9236 100644
--- a/web/components/gantt-chart/chart/views/week.tsx
+++ b/web/components/gantt-chart/chart/views/week.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
-// context
-import { useChart } from "../../hooks";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 
-export const WeekChartView: FC<any> = () => {
+export const WeekChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentView, currentViewData, renderView } = useGanttChart();
 
   return (
     <>
@@ -50,4 +51,4 @@ export const WeekChartView: FC<any> = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/chart/views/year.tsx b/web/components/gantt-chart/chart/views/year.tsx
index 9dbeedece..659126ac3 100644
--- a/web/components/gantt-chart/chart/views/year.tsx
+++ b/web/components/gantt-chart/chart/views/year.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
-// context
-import { useChart } from "../../hooks";
+import { observer } from "mobx-react";
+// hooks
+import { useGanttChart } from "components/gantt-chart/hooks/use-gantt-chart";
 
-export const YearChartView: FC<any> = () => {
+export const YearChartView: FC<any> = observer(() => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+  const { currentView, currentViewData, renderView } = useGanttChart();
 
   return (
     <>
@@ -46,4 +47,4 @@ export const YearChartView: FC<any> = () => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/contexts/index.tsx b/web/components/gantt-chart/contexts/index.tsx
index 84e7a19b5..1d8a19f1a 100644
--- a/web/components/gantt-chart/contexts/index.tsx
+++ b/web/components/gantt-chart/contexts/index.tsx
@@ -1,57 +1,19 @@
-import React, { createContext, useState } from "react";
-// types
-import { ChartContextData, ChartContextActionPayload, ChartContextReducer } from "../types";
-// data
-import { allViewsWithData, currentViewDataWithView } from "../data";
+import { createContext } from "react";
+// mobx store
+import { GanttStore } from "store/issue/issue_gantt_view.store";
 
-export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);
+let ganttViewStore = new GanttStore();
 
-const chartReducer = (state: ChartContextData, action: ChartContextActionPayload): ChartContextData => {
-  switch (action.type) {
-    case "CURRENT_VIEW":
-      return { ...state, currentView: action.payload };
-    case "CURRENT_VIEW_DATA":
-      return { ...state, currentViewData: action.payload };
-    case "RENDER_VIEW":
-      return { ...state, currentViewData: action.payload };
-    case "PARTIAL_UPDATE":
-      return { ...state, ...action.payload };
-    default:
-      return state;
-  }
+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 initialView = "month";
-
-export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  // states;
-  const [state, dispatch] = useState<ChartContextData>({
-    currentView: initialView,
-    currentViewData: currentViewDataWithView(initialView),
-    renderView: [],
-    allViews: allViewsWithData,
-    activeBlock: null,
-  });
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
-    const newState = chartReducer(state, action);
-    dispatch(() => newState);
-    return newState;
-  };
-
-  const updateScrollLeft = (scrollLeft: number) => setScrollLeft(scrollLeft);
-
-  return (
-    <ChartContext.Provider
-      value={{
-        ...state,
-        scrollLeft,
-        updateScrollLeft,
-        dispatch: handleDispatch,
-      }}
-    >
-      {children}
-    </ChartContext.Provider>
-  );
+export const GanttStoreProvider = ({ children }: any) => {
+  const store = initializeStore();
+  return <GanttStoreContext.Provider value={store}>{children}</GanttStoreContext.Provider>;
 };
diff --git a/web/components/gantt-chart/data/index.ts b/web/components/gantt-chart/data/index.ts
index 58ac6e4b2..cc15c5d9e 100644
--- a/web/components/gantt-chart/data/index.ts
+++ b/web/components/gantt-chart/data/index.ts
@@ -1,5 +1,5 @@
 // types
-import { WeekMonthDataType, ChartDataType } from "../types";
+import { WeekMonthDataType, ChartDataType, TGanttViews } from "../types";
 
 // constants
 export const weeks: WeekMonthDataType[] = [
@@ -53,7 +53,7 @@ export const datePreview = (date: Date, includeTime: boolean = false) => {
 };
 
 // context data
-export const allViewsWithData: ChartDataType[] = [
+export const VIEWS_LIST: ChartDataType[] = [
   // {
   //   key: "hours",
   //   title: "Hours",
@@ -133,7 +133,5 @@ export const allViewsWithData: ChartDataType[] = [
   // },
 ];
 
-export const currentViewDataWithView = (view: string = "month") => {
-  const currentView: ChartDataType | undefined = allViewsWithData.find((_viewData) => _viewData.key === view);
-  return currentView;
-};
+export const currentViewDataWithView = (view: TGanttViews = "month") =>
+  VIEWS_LIST.find((_viewData) => _viewData.key === view);
diff --git a/web/components/gantt-chart/helpers/add-block.tsx b/web/components/gantt-chart/helpers/add-block.tsx
index bfeddffa2..b7497013f 100644
--- a/web/components/gantt-chart/helpers/add-block.tsx
+++ b/web/components/gantt-chart/helpers/add-block.tsx
@@ -1,21 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 import { addDays } from "date-fns";
 import { Plus } from "lucide-react";
-// hooks
-import { useChart } from "../hooks";
 // ui
 import { Tooltip } from "@plane/ui";
 // helpers
 import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "../types";
+import { useGanttChart } from "../hooks/use-gantt-chart";
+import { observer } from "mobx-react";
 
 type Props = {
   block: IGanttBlock;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
 };
 
-export const ChartAddBlock: React.FC<Props> = (props) => {
+export const ChartAddBlock: React.FC<Props> = observer((props) => {
   const { block, blockUpdateHandler } = props;
   // states
   const [isButtonVisible, setIsButtonVisible] = useState(false);
@@ -24,7 +24,7 @@ export const ChartAddBlock: React.FC<Props> = (props) => {
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
   // chart hook
-  const { currentViewData } = useChart();
+  const { currentViewData } = useGanttChart();
 
   const handleButtonClick = () => {
     if (!currentViewData) return;
@@ -88,4 +88,4 @@ export const ChartAddBlock: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+});
diff --git a/web/components/gantt-chart/helpers/block-structure.ts b/web/components/gantt-chart/helpers/block-structure.ts
deleted file mode 100644
index 0f18b43cc..000000000
--- a/web/components/gantt-chart/helpers/block-structure.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// types
-import { TIssue } from "@plane/types";
-import { IGanttBlock } from "components/gantt-chart";
-
-export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] =>
-  blocks?.map((block) => ({
-    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,
-  }));
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index ac1602346..c2b4dc619 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -1,11 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import { ArrowRight } from "lucide-react";
 // hooks
-import { IGanttBlock, useChart } from "components/gantt-chart";
+import { IGanttBlock } from "components/gantt-chart";
 // helpers
 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;
@@ -14,19 +16,29 @@ type Props = {
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
+  ganttContainerRef: React.RefObject<HTMLDivElement>;
 };
 
-export const ChartDraggable: React.FC<Props> = (props) => {
-  const { block, blockToRender, handleBlock, enableBlockLeftResize, enableBlockRightResize, enableBlockMove } = props;
+export const ChartDraggable: React.FC<Props> = observer((props) => {
+  const {
+    block,
+    blockToRender,
+    handleBlock,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    ganttContainerRef,
+  } = props;
   // states
   const [isLeftResizing, setIsLeftResizing] = useState(false);
   const [isRightResizing, setIsRightResizing] = useState(false);
   const [isMoving, setIsMoving] = useState(false);
   const [isHidden, setIsHidden] = useState(true);
+  const [scrollLeft, setScrollLeft] = useState(0);
   // refs
   const resizableRef = useRef<HTMLDivElement>(null);
   // chart hook
-  const { currentViewData, scrollLeft } = useChart();
+  const { currentViewData } = useGanttChart();
   // check if cursor reaches either end while resizing/dragging
   const checkScrollEnd = (e: MouseEvent): number => {
     const SCROLL_THRESHOLD = 70;
@@ -212,6 +224,17 @@ export const ChartDraggable: React.FC<Props> = (props) => {
     block.position?.width &&
     scrollLeft > block.position.marginLeft + block.position.width;
 
+  useEffect(() => {
+    const ganttContainer = ganttContainerRef.current;
+    if (!ganttContainer) return;
+
+    const handleScroll = () => setScrollLeft(ganttContainer.scrollLeft);
+    ganttContainer.addEventListener("scroll", handleScroll);
+    return () => {
+      ganttContainer.removeEventListener("scroll", handleScroll);
+    };
+  }, [ganttContainerRef]);
+
   useEffect(() => {
     const intersectionRoot = document.querySelector("#gantt-container") as HTMLDivElement;
     const resizableBlock = resizableRef.current;
@@ -234,7 +257,7 @@ export const ChartDraggable: React.FC<Props> = (props) => {
     return () => {
       observer.unobserve(resizableBlock);
     };
-  }, [block.data.name]);
+  }, []);
 
   return (
     <>
@@ -312,4 +335,4 @@ export const ChartDraggable: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+});
diff --git a/web/components/gantt-chart/helpers/index.ts b/web/components/gantt-chart/helpers/index.ts
index 1b51dc374..c96d42eec 100644
--- a/web/components/gantt-chart/helpers/index.ts
+++ b/web/components/gantt-chart/helpers/index.ts
@@ -1,3 +1,2 @@
 export * from "./add-block";
-export * from "./block-structure";
 export * from "./draggable";
diff --git a/web/components/gantt-chart/hooks/index.ts b/web/components/gantt-chart/hooks/index.ts
new file mode 100644
index 000000000..009650675
--- /dev/null
+++ b/web/components/gantt-chart/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./use-gantt-chart";
diff --git a/web/components/gantt-chart/hooks/index.tsx b/web/components/gantt-chart/hooks/index.tsx
deleted file mode 100644
index 5fb9bee3f..000000000
--- a/web/components/gantt-chart/hooks/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useContext } from "react";
-// types
-import { ChartContextReducer } from "../types";
-// context
-import { ChartContext } from "../contexts";
-
-export const useChart = (): ChartContextReducer => {
-  const context = useContext(ChartContext);
-
-  if (!context) throw new Error("useChart must be used within a GanttChart");
-
-  return context;
-};
diff --git a/web/components/gantt-chart/hooks/use-gantt-chart.ts b/web/components/gantt-chart/hooks/use-gantt-chart.ts
new file mode 100644
index 000000000..23e025e90
--- /dev/null
+++ b/web/components/gantt-chart/hooks/use-gantt-chart.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { GanttStoreContext } from "components/gantt-chart/contexts";
+// types
+import { IGanttStore } from "store/issue/issue_gantt_view.store";
+
+export const useGanttChart = (): IGanttStore => {
+  const context = useContext(GanttStoreContext);
+  if (context === undefined) throw new Error("useGanttChart must be used within GanttStoreProvider");
+  return context;
+};
diff --git a/web/components/gantt-chart/index.ts b/web/components/gantt-chart/index.ts
index 54a2cc597..78297ffcd 100644
--- a/web/components/gantt-chart/index.ts
+++ b/web/components/gantt-chart/index.ts
@@ -3,5 +3,5 @@ export * from "./chart";
 export * from "./helpers";
 export * from "./hooks";
 export * from "./root";
-export * from "./types";
 export * from "./sidebar";
+export * from "./types";
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index ac132500b..4df5d9931 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 // components
 import { ChartViewRoot, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
 // context
-import { ChartContextProvider } from "./contexts";
+import { GanttStoreProvider } from "components/gantt-chart/contexts";
 
 type GanttChartRootProps = {
   border?: boolean;
@@ -42,7 +42,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
   } = props;
 
   return (
-    <ChartContextProvider>
+    <GanttStoreProvider>
       <ChartViewRoot
         border={border}
         title={title}
@@ -60,6 +60,6 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
         showAllBlocks={showAllBlocks}
         quickAdd={quickAdd}
       />
-    </ChartContextProvider>
+    </GanttStoreProvider>
   );
 };
diff --git a/web/components/gantt-chart/sidebar/cycles.tsx b/web/components/gantt-chart/sidebar/cycles.tsx
deleted file mode 100644
index 384869a40..000000000
--- a/web/components/gantt-chart/sidebar/cycles.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
-import { MoreVertical } from "lucide-react";
-// hooks
-import { useChart } from "components/gantt-chart/hooks";
-// ui
-import { Loader } from "@plane/ui";
-// components
-import { CycleGanttSidebarBlock } from "components/cycles";
-// helpers
-import { findTotalDaysInRange } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
-// types
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
-// constants
-import { BLOCK_HEIGHT } from "../constants";
-
-type Props = {
-  title: string;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blocks: IGanttBlock[] | null;
-  enableReorder: boolean;
-};
-
-export const CycleGanttSidebar: React.FC<Props> = (props) => {
-  const { blockUpdateHandler, blocks, enableReorder } = props;
-  // chart hook
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
-
-    const { source, destination } = result;
-
-    // return if dropped outside the list
-    if (!destination) return;
-
-    // return if dropped on the same index
-    if (source.index === destination.index) return;
-
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    // update the sort order to the lowest if dropped at the top
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    // update the sort order to the average of the two adjacent blocks if dropped in between
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    // extract the element from the source index and insert it at the destination index without updating the entire array
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    // call the block update handler with the updated sort order, new and old index
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
-    });
-  };
-
-  return (
-    <DragDropContext onDragEnd={handleOrderChange}>
-      <Droppable droppableId="gantt-sidebar">
-        {(droppableProvided) => (
-          <div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-            <>
-              {blocks ? (
-                blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
-
-                  return (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={cn({
-                            "rounded bg-custom-background-80": snapshot.isDragging,
-                          })}
-                          onMouseEnter={() => updateActiveBlock(block)}
-                          onMouseLeave={() => updateActiveBlock(null)}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                        >
-                          <div
-                            id={`sidebar-block-${block.id}`}
-                            className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
-                              "bg-custom-background-80": activeBlock?.id === block.id,
-                            })}
-                            style={{
-                              height: `${BLOCK_HEIGHT}px`,
-                            }}
-                          >
-                            {enableReorder && (
-                              <button
-                                type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-                                {...provided.dragHandleProps}
-                              >
-                                <MoreVertical className="h-3.5 w-3.5" />
-                                <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-                              </button>
-                            )}
-                            <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
-                              <div className="flex-grow truncate">
-                                <CycleGanttSidebarBlock cycleId={block.data.id} />
-                              </div>
-                              {duration && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                  {duration} day{duration > 1 ? "s" : ""}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </Draggable>
-                  );
-                })
-              ) : (
-                <Loader className="space-y-3 pr-2">
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                </Loader>
-              )}
-              {droppableProvided.placeholder}
-            </>
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  );
-};
diff --git a/web/components/gantt-chart/sidebar/cycles/block.tsx b/web/components/gantt-chart/sidebar/cycles/block.tsx
new file mode 100644
index 000000000..f1374c753
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/cycles/block.tsx
@@ -0,0 +1,72 @@
+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";
+// components
+import { CycleGanttSidebarBlock } from "components/cycles";
+// helpers
+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;
+  enableReorder: boolean;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+};
+
+export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
+  const { block, enableReorder, provided, snapshot } = props;
+  // store hooks
+  const { updateActiveBlockId, isBlockActive } = useGanttChart();
+
+  const duration = findTotalDaysInRange(block.start_date, block.target_date);
+
+  return (
+    <div
+      className={cn({
+        "rounded bg-custom-background-80": snapshot.isDragging,
+      })}
+      onMouseEnter={() => updateActiveBlockId(block.id)}
+      onMouseLeave={() => updateActiveBlockId(null)}
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+    >
+      <div
+        id={`sidebar-block-${block.id}`}
+        className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+          "bg-custom-background-80": isBlockActive(block.id),
+        })}
+        style={{
+          height: `${BLOCK_HEIGHT}px`,
+        }}
+      >
+        {enableReorder && (
+          <button
+            type="button"
+            className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+            {...provided.dragHandleProps}
+          >
+            <MoreVertical className="h-3.5 w-3.5" />
+            <MoreVertical className="-ml-5 h-3.5 w-3.5" />
+          </button>
+        )}
+        <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+          <div className="flex-grow truncate">
+            <CycleGanttSidebarBlock cycleId={block.data.id} />
+          </div>
+          {duration && (
+            <div className="flex-shrink-0 text-sm text-custom-text-200">
+              {duration} day{duration > 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/gantt-chart/sidebar/cycles/index.ts b/web/components/gantt-chart/sidebar/cycles/index.ts
new file mode 100644
index 000000000..01acaeffb
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/cycles/index.ts
@@ -0,0 +1 @@
+export * from "./sidebar";
diff --git a/web/components/gantt-chart/sidebar/cycles/sidebar.tsx b/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
new file mode 100644
index 000000000..11f67a099
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/cycles/sidebar.tsx
@@ -0,0 +1,100 @@
+import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { CyclesSidebarBlock } from "./block";
+// types
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+};
+
+export const CycleGanttSidebar: React.FC<Props> = (props) => {
+  const { blockUpdateHandler, blocks, enableReorder } = props;
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <Droppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+            <>
+              {blocks ? (
+                blocks.map((block, index) => (
+                  <Draggable
+                    key={`sidebar-block-${block.id}`}
+                    draggableId={`sidebar-block-${block.id}`}
+                    index={index}
+                    isDragDisabled={!enableReorder}
+                  >
+                    {(provided, snapshot) => (
+                      <CyclesSidebarBlock
+                        block={block}
+                        enableReorder={enableReorder}
+                        provided={provided}
+                        snapshot={snapshot}
+                      />
+                    )}
+                  </Draggable>
+                ))
+              ) : (
+                <Loader className="space-y-3 pr-2">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/sidebar/issues.tsx b/web/components/gantt-chart/sidebar/issues.tsx
deleted file mode 100644
index 52e30ded5..000000000
--- a/web/components/gantt-chart/sidebar/issues.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { observer } from "mobx-react";
-import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
-import { MoreVertical } from "lucide-react";
-// hooks
-import { useChart } from "components/gantt-chart/hooks";
-import { useIssueDetail } from "hooks/store";
-// ui
-import { Loader } from "@plane/ui";
-// components
-import { IssueGanttSidebarBlock } from "components/issues";
-// helpers
-import { findTotalDaysInRange } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
-// types
-import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
-import { BLOCK_HEIGHT } from "../constants";
-
-type Props = {
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blocks: IGanttBlock[] | null;
-  enableReorder: boolean;
-  showAllBlocks?: boolean;
-};
-
-export const IssueGanttSidebar: React.FC<Props> = observer((props: Props) => {
-  const { blockUpdateHandler, blocks, enableReorder, showAllBlocks = false } = props;
-
-  const { activeBlock, dispatch } = useChart();
-  const { peekIssue } = useIssueDetail();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
-
-    const { source, destination } = result;
-
-    // return if dropped outside the list
-    if (!destination) return;
-
-    // return if dropped on the same index
-    if (source.index === destination.index) return;
-
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    // update the sort order to the lowest if dropped at the top
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    // update the sort order to the average of the two adjacent blocks if dropped in between
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    // extract the element from the source index and insert it at the destination index without updating the entire array
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    // call the block update handler with the updated sort order, new and old index
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
-    });
-  };
-
-  return (
-    <>
-      <DragDropContext onDragEnd={handleOrderChange}>
-        <Droppable droppableId="gantt-sidebar">
-          {(droppableProvided) => (
-            <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-              <>
-                {blocks ? (
-                  blocks.map((block, index) => {
-                    const isBlockVisibleOnSidebar = block.start_date && block.target_date;
-
-                    // hide the block if it doesn't have start and target dates and showAllBlocks is false
-                    if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
-
-                    const duration =
-                      !block.start_date || !block.target_date
-                        ? null
-                        : findTotalDaysInRange(block.start_date, block.target_date);
-
-                    return (
-                      <Draggable
-                        key={`sidebar-block-${block.id}`}
-                        draggableId={`sidebar-block-${block.id}`}
-                        index={index}
-                        isDragDisabled={!enableReorder}
-                      >
-                        {(provided, snapshot) => (
-                          <div
-                            className={cn({
-                              "rounded bg-custom-background-80": snapshot.isDragging,
-                              "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
-                                peekIssue?.issueId === block.data.id,
-                            })}
-                            onMouseEnter={() => updateActiveBlock(block)}
-                            onMouseLeave={() => updateActiveBlock(null)}
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                          >
-                            <div
-                              className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
-                                "bg-custom-background-80": activeBlock?.id === block.id,
-                              })}
-                              style={{
-                                height: `${BLOCK_HEIGHT}px`,
-                              }}
-                            >
-                              {enableReorder && (
-                                <button
-                                  type="button"
-                                  className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-                                  {...provided.dragHandleProps}
-                                >
-                                  <MoreVertical className="h-3.5 w-3.5" />
-                                  <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-                                </button>
-                              )}
-                              <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
-                                <div className="flex-grow truncate">
-                                  <IssueGanttSidebarBlock issueId={block.data.id} />
-                                </div>
-                                {duration && (
-                                  <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                    <span>
-                                      {duration} day{duration > 1 ? "s" : ""}
-                                    </span>
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        )}
-                      </Draggable>
-                    );
-                  })
-                ) : (
-                  <Loader className="space-y-3 pr-2">
-                    <Loader.Item height="34px" />
-                    <Loader.Item height="34px" />
-                    <Loader.Item height="34px" />
-                    <Loader.Item height="34px" />
-                  </Loader>
-                )}
-                {droppableProvided.placeholder}
-              </>
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-    </>
-  );
-});
diff --git a/web/components/gantt-chart/sidebar/issues/block.tsx b/web/components/gantt-chart/sidebar/issues/block.tsx
new file mode 100644
index 000000000..03a17a65b
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/issues/block.tsx
@@ -0,0 +1,77 @@
+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";
+// components
+import { IssueGanttSidebarBlock } from "components/issues";
+// helpers
+import { cn } from "helpers/common.helper";
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IGanttBlock } from "../../types";
+// constants
+import { BLOCK_HEIGHT } from "../../constants";
+
+type Props = {
+  block: IGanttBlock;
+  enableReorder: boolean;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+};
+
+export const IssuesSidebarBlock: React.FC<Props> = observer((props) => {
+  const { block, enableReorder, provided, snapshot } = props;
+  // store hooks
+  const { updateActiveBlockId, isBlockActive } = useGanttChart();
+  const { peekIssue } = useIssueDetail();
+
+  const duration = findTotalDaysInRange(block.start_date, block.target_date);
+
+  return (
+    <div
+      className={cn({
+        "rounded bg-custom-background-80": snapshot.isDragging,
+        "rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
+          peekIssue?.issueId === block.data.id,
+      })}
+      onMouseEnter={() => updateActiveBlockId(block.id)}
+      onMouseLeave={() => updateActiveBlockId(null)}
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+    >
+      <div
+        className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+          "bg-custom-background-80": isBlockActive(block.id),
+        })}
+        style={{
+          height: `${BLOCK_HEIGHT}px`,
+        }}
+      >
+        {enableReorder && (
+          <button
+            type="button"
+            className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+            {...provided.dragHandleProps}
+          >
+            <MoreVertical className="h-3.5 w-3.5" />
+            <MoreVertical className="-ml-5 h-3.5 w-3.5" />
+          </button>
+        )}
+        <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+          <div className="flex-grow truncate">
+            <IssueGanttSidebarBlock issueId={block.data.id} />
+          </div>
+          {duration && (
+            <div className="flex-shrink-0 text-sm text-custom-text-200">
+              <span>
+                {duration} day{duration > 1 ? "s" : ""}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/gantt-chart/sidebar/issues/index.ts b/web/components/gantt-chart/sidebar/issues/index.ts
new file mode 100644
index 000000000..01acaeffb
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/issues/index.ts
@@ -0,0 +1 @@
+export * from "./sidebar";
diff --git a/web/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/components/gantt-chart/sidebar/issues/sidebar.tsx
new file mode 100644
index 000000000..323938eec
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -0,0 +1,107 @@
+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";
+
+type Props = {
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+  showAllBlocks?: boolean;
+};
+
+export const IssueGanttSidebar: React.FC<Props> = (props) => {
+  const { blockUpdateHandler, blocks, enableReorder, showAllBlocks = false } = props;
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <Droppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const isBlockVisibleOnSidebar = block.start_date && block.target_date;
+
+                  // hide the block if it doesn't have start and target dates and showAllBlocks is false
+                  if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <IssuesSidebarBlock
+                          block={block}
+                          enableReorder={enableReorder}
+                          provided={provided}
+                          snapshot={snapshot}
+                        />
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="space-y-3 pr-2">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/sidebar/modules.tsx b/web/components/gantt-chart/sidebar/modules.tsx
deleted file mode 100644
index bdf8ca571..000000000
--- a/web/components/gantt-chart/sidebar/modules.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
-import { MoreVertical } from "lucide-react";
-// hooks
-import { useChart } from "components/gantt-chart/hooks";
-// ui
-import { Loader } from "@plane/ui";
-// components
-import { ModuleGanttSidebarBlock } from "components/modules";
-// helpers
-import { findTotalDaysInRange } from "helpers/date-time.helper";
-import { cn } from "helpers/common.helper";
-// types
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
-// constants
-import { BLOCK_HEIGHT } from "../constants";
-
-type Props = {
-  title: string;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blocks: IGanttBlock[] | null;
-  enableReorder: boolean;
-};
-
-export const ModuleGanttSidebar: React.FC<Props> = (props) => {
-  const { blockUpdateHandler, blocks, enableReorder } = props;
-  // chart hook
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
-
-    const { source, destination } = result;
-
-    // return if dropped outside the list
-    if (!destination) return;
-
-    // return if dropped on the same index
-    if (source.index === destination.index) return;
-
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    // update the sort order to the lowest if dropped at the top
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    // update the sort order to the average of the two adjacent blocks if dropped in between
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    // extract the element from the source index and insert it at the destination index without updating the entire array
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    // call the block update handler with the updated sort order, new and old index
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
-    });
-  };
-
-  return (
-    <DragDropContext onDragEnd={handleOrderChange}>
-      <Droppable droppableId="gantt-sidebar">
-        {(droppableProvided) => (
-          <div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-            <>
-              {blocks ? (
-                blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
-
-                  return (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={cn({
-                            "rounded bg-custom-background-80": snapshot.isDragging,
-                          })}
-                          onMouseEnter={() => updateActiveBlock(block)}
-                          onMouseLeave={() => updateActiveBlock(null)}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                        >
-                          <div
-                            id={`sidebar-block-${block.id}`}
-                            className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
-                              "bg-custom-background-80": activeBlock?.id === block.id,
-                            })}
-                            style={{
-                              height: `${BLOCK_HEIGHT}px`,
-                            }}
-                          >
-                            {enableReorder && (
-                              <button
-                                type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-                                {...provided.dragHandleProps}
-                              >
-                                <MoreVertical className="h-3.5 w-3.5" />
-                                <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-                              </button>
-                            )}
-                            <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
-                              <div className="flex-grow truncate">
-                                <ModuleGanttSidebarBlock moduleId={block.data.id} />
-                              </div>
-                              {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                  {duration} day{duration > 1 ? "s" : ""}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </Draggable>
-                  );
-                })
-              ) : (
-                <Loader className="space-y-3 pr-2">
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                </Loader>
-              )}
-              {droppableProvided.placeholder}
-            </>
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  );
-};
diff --git a/web/components/gantt-chart/sidebar/modules/block.tsx b/web/components/gantt-chart/sidebar/modules/block.tsx
new file mode 100644
index 000000000..4b2e47226
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/modules/block.tsx
@@ -0,0 +1,72 @@
+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";
+// components
+import { ModuleGanttSidebarBlock } from "components/modules";
+// helpers
+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;
+  enableReorder: boolean;
+  provided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+};
+
+export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
+  const { block, enableReorder, provided, snapshot } = props;
+  // store hooks
+  const { updateActiveBlockId, isBlockActive } = useGanttChart();
+
+  const duration = findTotalDaysInRange(block.start_date, block.target_date);
+
+  return (
+    <div
+      className={cn({
+        "rounded bg-custom-background-80": snapshot.isDragging,
+      })}
+      onMouseEnter={() => updateActiveBlockId(block.id)}
+      onMouseLeave={() => updateActiveBlockId(null)}
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+    >
+      <div
+        id={`sidebar-block-${block.id}`}
+        className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+          "bg-custom-background-80": isBlockActive(block.id),
+        })}
+        style={{
+          height: `${BLOCK_HEIGHT}px`,
+        }}
+      >
+        {enableReorder && (
+          <button
+            type="button"
+            className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
+            {...provided.dragHandleProps}
+          >
+            <MoreVertical className="h-3.5 w-3.5" />
+            <MoreVertical className="-ml-5 h-3.5 w-3.5" />
+          </button>
+        )}
+        <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+          <div className="flex-grow truncate">
+            <ModuleGanttSidebarBlock moduleId={block.data.id} />
+          </div>
+          {duration !== undefined && (
+            <div className="flex-shrink-0 text-sm text-custom-text-200">
+              {duration} day{duration > 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/gantt-chart/sidebar/modules/index.ts b/web/components/gantt-chart/sidebar/modules/index.ts
new file mode 100644
index 000000000..01acaeffb
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/modules/index.ts
@@ -0,0 +1 @@
+export * from "./sidebar";
diff --git a/web/components/gantt-chart/sidebar/modules/sidebar.tsx b/web/components/gantt-chart/sidebar/modules/sidebar.tsx
new file mode 100644
index 000000000..dee83fa79
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -0,0 +1,100 @@
+import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { ModulesSidebarBlock } from "./block";
+// types
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  enableReorder: boolean;
+};
+
+export const ModuleGanttSidebar: React.FC<Props> = (props) => {
+  const { blockUpdateHandler, blocks, enableReorder } = props;
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <Droppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+            <>
+              {blocks ? (
+                blocks.map((block, index) => (
+                  <Draggable
+                    key={`sidebar-block-${block.id}`}
+                    draggableId={`sidebar-block-${block.id}`}
+                    index={index}
+                    isDragDisabled={!enableReorder}
+                  >
+                    {(provided, snapshot) => (
+                      <ModulesSidebarBlock
+                        block={block}
+                        enableReorder={enableReorder}
+                        provided={provided}
+                        snapshot={snapshot}
+                      />
+                    )}
+                  </Draggable>
+                ))
+              ) : (
+                <Loader className="space-y-3 pr-2">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/gantt-chart/sidebar/project-views.tsx b/web/components/gantt-chart/sidebar/project-views.tsx
index a27c4dded..a7e7c5e35 100644
--- a/web/components/gantt-chart/sidebar/project-views.tsx
+++ b/web/components/gantt-chart/sidebar/project-views.tsx
@@ -1,17 +1,10 @@
 import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea/dnd";
-import { MoreVertical } from "lucide-react";
-// hooks
-import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
 // components
-import { IssueGanttSidebarBlock } from "components/issues";
-// helpers
-import { findTotalDaysInRange } from "helpers/date-time.helper";
+import { IssuesSidebarBlock } from "./issues/block";
 // types
 import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
-// constants
-import { BLOCK_HEIGHT } from "../constants";
 
 type Props = {
   title: string;
@@ -23,18 +16,6 @@ type Props = {
 
 export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
   const { blockUpdateHandler, blocks, enableReorder } = props;
-  // chart hook
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
 
   const handleOrderChange = (result: DropResult) => {
     if (!blocks) return;
@@ -89,59 +70,23 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
           >
             <>
               {blocks ? (
-                blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
-
-                  return (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={`${snapshot.isDragging ? "rounded bg-custom-background-80" : ""}`}
-                          style={{
-                            height: `${BLOCK_HEIGHT}px`,
-                          }}
-                          onMouseEnter={() => updateActiveBlock(block)}
-                          onMouseLeave={() => updateActiveBlock(null)}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                        >
-                          <div
-                            id={`sidebar-block-${block.id}`}
-                            className={`group flex h-full w-full items-center gap-2 rounded-l px-2 pr-4 ${
-                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
-                            }`}
-                          >
-                            {enableReorder && (
-                              <button
-                                type="button"
-                                className="flex flex-shrink-0 rounded p-0.5 text-custom-sidebar-text-200 opacity-0 group-hover:opacity-100"
-                                {...provided.dragHandleProps}
-                              >
-                                <MoreVertical className="h-3.5 w-3.5" />
-                                <MoreVertical className="-ml-5 h-3.5 w-3.5" />
-                              </button>
-                            )}
-                            <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
-                              <div className="flex-grow truncate">
-                                <IssueGanttSidebarBlock issueId={block.data.id} />
-                              </div>
-                              {duration !== undefined && (
-                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                  {duration} day{duration > 1 ? "s" : ""}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </Draggable>
-                  );
-                })
+                blocks.map((block, index) => (
+                  <Draggable
+                    key={`sidebar-block-${block.id}`}
+                    draggableId={`sidebar-block-${block.id}`}
+                    index={index}
+                    isDragDisabled={!enableReorder}
+                  >
+                    {(provided, snapshot) => (
+                      <IssuesSidebarBlock
+                        block={block}
+                        enableReorder={enableReorder}
+                        provided={provided}
+                        snapshot={snapshot}
+                      />
+                    )}
+                  </Draggable>
+                ))
               ) : (
                 <Loader className="space-y-3 pr-2">
                   <Loader.Item height="34px" />
diff --git a/web/components/gantt-chart/types/index.ts b/web/components/gantt-chart/types/index.ts
index 1360f9f45..6268e4363 100644
--- a/web/components/gantt-chart/types/index.ts
+++ b/web/components/gantt-chart/types/index.ts
@@ -1,10 +1,3 @@
-// context types
-export type allViewsType = {
-  key: string;
-  title: string;
-  data: Object | null;
-};
-
 export interface IGanttBlock {
   data: any;
   id: string;
@@ -29,34 +22,6 @@ export interface IBlockUpdateData {
 
 export type TGanttViews = "hours" | "day" | "week" | "bi_week" | "month" | "quarter" | "year";
 
-export interface ChartContextData {
-  allViews: allViewsType[];
-  currentView: TGanttViews;
-  currentViewData: ChartDataType | undefined;
-  renderView: any;
-  activeBlock: IGanttBlock | null;
-}
-
-export type ChartContextActionPayload =
-  | {
-      type: "CURRENT_VIEW";
-      payload: TGanttViews;
-    }
-  | {
-      type: "CURRENT_VIEW_DATA" | "RENDER_VIEW";
-      payload: ChartDataType | undefined;
-    }
-  | {
-      type: "PARTIAL_UPDATE";
-      payload: Partial<ChartContextData>;
-    };
-
-export interface ChartContextReducer extends ChartContextData {
-  scrollLeft: number;
-  updateScrollLeft: (scrollLeft: number) => void;
-  dispatch: (action: ChartContextActionPayload) => void;
-}
-
 // chart render types
 export interface WeekMonthDataType {
   key: number;
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index a0ac3c9aa..e8236288c 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -308,6 +308,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 handleDisplayFiltersUpdate={handleDisplayFilters}
                 displayProperties={issueFilters?.displayProperties ?? {}}
                 handleDisplayPropertiesUpdate={handleDisplayProperties}
+                ignoreGroupedFilters={["cycle"]}
               />
             </FiltersDropdown>
 
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index c1846cdc2..07f779819 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -312,6 +312,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   handleDisplayFiltersUpdate={handleDisplayFilters}
                   displayProperties={issueFilters?.displayProperties ?? {}}
                   handleDisplayPropertiesUpdate={handleDisplayProperties}
+                  ignoreGroupedFilters={["module"]}
                 />
               </FiltersDropdown>
             </div>
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index 3b3e05f1a..9d4596f83 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -71,7 +71,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
               link={
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
-                  label="Archived Issues"
+                  label="Archived issues"
                   icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
                 />
               }
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
index b7ca78ede..d1da1c859 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -109,7 +109,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
               type="text"
               link={
                 <BreadcrumbLink
-                  label="Archived Issues"
+                  label="Archived issues"
                   icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
                 />
               }
diff --git a/web/components/inbox/inbox-issue-actions.tsx b/web/components/inbox/inbox-issue-actions.tsx
index 691ce36c7..8a3bb4261 100644
--- a/web/components/inbox/inbox-issue-actions.tsx
+++ b/web/components/inbox/inbox-issue-actions.tsx
@@ -92,7 +92,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
               id: inboxIssueId,
               state: "SUCCESS",
               element: "Inbox page",
-            }
+            },
           });
           router.push({
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
@@ -269,12 +269,17 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                         <DayPicker
                           selected={date ? new Date(date) : undefined}
                           defaultMonth={date ? new Date(date) : undefined}
-                          onSelect={(date) => { if (!date) return; setDate(date) }}
+                          onSelect={(date) => {
+                            if (!date) return;
+                            setDate(date);
+                          }}
                           mode="single"
                           className="border border-custom-border-200 rounded-md p-3"
-                          disabled={[{
-                            before: tomorrow,
-                          }]}
+                          disabled={[
+                            {
+                              before: tomorrow,
+                            },
+                          ]}
                         />
                         <Button
                           variant="primary"
diff --git a/web/components/issues/archive-issue-modal.tsx b/web/components/issues/archive-issue-modal.tsx
new file mode 100644
index 000000000..94c4c801a
--- /dev/null
+++ b/web/components/issues/archive-issue-modal.tsx
@@ -0,0 +1,106 @@
+import { useState, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import { useProject } from "hooks/store";
+import { useIssues } from "hooks/store/use-issues";
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { TIssue } from "@plane/types";
+
+type Props = {
+  data?: TIssue;
+  dataId?: string | null | undefined;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export const ArchiveIssueModal: React.FC<Props> = (props) => {
+  const { dataId, data, isOpen, handleClose, onSubmit } = props;
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getProjectById } = useProject();
+  const { issueMap } = useIssues();
+  // toast alert
+  const { setToastAlert } = useToast();
+
+  if (!dataId && !data) return null;
+
+  const issue = data ? data : issueMap[dataId!];
+  const projectDetails = getProjectById(issue.project_id);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveIssue = async () => {
+    if (!onSubmit) return;
+
+    setIsArchiving(true);
+    await onSubmit()
+      .then(() => onClose())
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue 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 issue {projectDetails?.identifier} {issue.sequence_id}
+                  </h3>
+                  <p className="text-sm text-custom-text-200 mt-3">
+                    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">
+                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button size="sm" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
+                      {isArchiving ? "Archiving" : "Archive"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/issues/delete-archived-issue-modal.tsx b/web/components/issues/delete-archived-issue-modal.tsx
deleted file mode 100644
index 49d9e19dd..000000000
--- a/web/components/issues/delete-archived-issue-modal.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { useEffect, useState, Fragment } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { Dialog, Transition } from "@headlessui/react";
-import { AlertTriangle } from "lucide-react";
-// hooks
-import useToast from "hooks/use-toast";
-import { useIssues, useProject } from "hooks/store";
-// ui
-import { Button } from "@plane/ui";
-// types
-import type { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data: TIssue;
-  onSubmit?: () => Promise<void>;
-};
-
-export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
-  const { data, isOpen, handleClose, onSubmit } = props;
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-  const { getProjectById } = useProject();
-
-  const {
-    issues: { removeIssue },
-  } = useIssues(EIssuesStoreType.ARCHIVED);
-
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  useEffect(() => {
-    setIsDeleteLoading(false);
-  }, [isOpen]);
-
-  const onClose = () => {
-    setIsDeleteLoading(false);
-    handleClose();
-  };
-
-  const handleIssueDelete = async () => {
-    if (!workspaceSlug) return;
-
-    setIsDeleteLoading(true);
-
-    await removeIssue(workspaceSlug.toString(), data.project_id, data.id)
-      .then(() => {
-        if (onSubmit) onSubmit();
-      })
-      .catch((err) => {
-        const error = err?.detail;
-        const errorString = Array.isArray(error) ? error[0] : error;
-
-        setToastAlert({
-          title: "Error",
-          type: "error",
-          message: errorString || "Something went wrong.",
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
-        onClose();
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop 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-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Archived Issue</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-200">
-                      Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
-                      </span>
-                      {""}? All of the data related to the archived issue will be permanently removed. This action
-                      cannot be undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="danger"
-                      size="sm"
-                      tabIndex={1}
-                      onClick={handleIssueDelete}
-                      loading={isDeleteLoading}
-                    >
-                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
deleted file mode 100644
index 6a2caba18..000000000
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import { IssueDraftService } from "services/issue";
-// hooks
-import useToast from "hooks/use-toast";
-// icons
-import { AlertTriangle } from "lucide-react";
-// ui
-import { Button } from "@plane/ui";
-// types
-import type { TIssue } from "@plane/types";
-import { useProject } from "hooks/store";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  data: TIssue | null;
-  onSubmit?: () => Promise<void> | void;
-};
-
-const issueDraftService = new IssueDraftService();
-
-export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
-  const { isOpen, handleClose, data, onSubmit } = props;
-  // states
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  // toast alert
-  const { setToastAlert } = useToast();
-  // hooks
-  const { getProjectById } = useProject();
-
-  useEffect(() => {
-    setIsDeleteLoading(false);
-  }, [isOpen]);
-
-  const onClose = () => {
-    setIsDeleteLoading(false);
-    handleClose();
-  };
-
-  const handleDeletion = async () => {
-    if (!workspaceSlug || !data) return;
-
-    setIsDeleteLoading(true);
-
-    await issueDraftService
-      .deleteDraftIssue(workspaceSlug.toString(), data.project_id, data.id)
-      .then(() => {
-        setIsDeleteLoading(false);
-        handleClose();
-
-        setToastAlert({
-          title: "Success",
-          message: "Draft Issue deleted successfully",
-          type: "success",
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-        handleClose();
-        setToastAlert({
-          title: "Error",
-          message: "Something went wrong",
-          type: "error",
-        });
-        setIsDeleteLoading(false);
-      });
-    if (onSubmit) await onSubmit();
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-6 p-6">
-                  <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete Draft Issue</h3>
-                    </span>
-                  </div>
-                  <span>
-                    <p className="text-sm text-custom-text-200">
-                      Are you sure you want to delete issue{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {data && getProjectById(data?.project_id)?.identifier}-{data?.sequence_id}
-                      </span>
-                      {""}? All of the data related to the draft issue will be permanently removed. This action cannot
-                      be undone.
-                    </p>
-                  </span>
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
-                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </Button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index a063980c0..3a9c0653e 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -23,14 +23,14 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
 
   const { issueMap } = useIssues();
 
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const { setToastAlert } = useToast();
   // hooks
   const { getProjectById } = useProject();
 
   useEffect(() => {
-    setIsDeleteLoading(false);
+    setIsDeleting(false);
   }, [isOpen]);
 
   if (!dataId && !data) return null;
@@ -38,12 +38,12 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
   const issue = data ? data : issueMap[dataId!];
 
   const onClose = () => {
-    setIsDeleteLoading(false);
+    setIsDeleting(false);
     handleClose();
   };
 
   const handleIssueDelete = async () => {
-    setIsDeleteLoading(true);
+    setIsDeleting(true);
     if (onSubmit)
       await onSubmit()
         .then(() => {
@@ -56,7 +56,7 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
             message: "Failed to delete issue",
           });
         })
-        .finally(() => setIsDeleteLoading(false));
+        .finally(() => setIsDeleting(false));
   };
 
   return (
@@ -109,14 +109,8 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
                     <Button variant="neutral-primary" size="sm" onClick={onClose}>
                       Cancel
                     </Button>
-                    <Button
-                      variant="danger"
-                      size="sm"
-                      tabIndex={1}
-                      onClick={handleIssueDelete}
-                      loading={isDeleteLoading}
-                    >
-                      {isDeleteLoading ? "Deleting..." : "Delete Issue"}
+                    <Button variant="danger" size="sm" tabIndex={1} onClick={handleIssueDelete} loading={isDeleting}>
+                      {isDeleting ? "Deleting" : "Delete"}
                     </Button>
                   </div>
                 </div>
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
deleted file mode 100644
index cfd6370fa..000000000
--- a/web/components/issues/draft-issue-form.tsx
+++ /dev/null
@@ -1,668 +0,0 @@
-import React, { FC, useState, useEffect, useRef } from "react";
-import { useRouter } from "next/router";
-import { Controller, useForm } from "react-hook-form";
-import { observer } from "mobx-react-lite";
-import { Sparkle, X } from "lucide-react";
-// hooks
-import { useApplication, useEstimate, useMention, useProject, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-import useLocalStorage from "hooks/use-local-storage";
-// 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 { CreateStateModal } from "components/states";
-import { CreateLabelModal } from "components/labels";
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
-import {
-  CycleDropdown,
-  DateDropdown,
-  EstimateDropdown,
-  ModuleDropdown,
-  PriorityDropdown,
-  ProjectDropdown,
-  ProjectMemberDropdown,
-  StateDropdown,
-} from "components/dropdowns";
-// ui
-import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
-// helpers
-import { renderFormattedPayloadDate } from "helpers/date-time.helper";
-// types
-import type { IUser, TIssue, ISearchIssueResponse } from "@plane/types";
-
-const aiService = new AIService();
-const fileService = new FileService();
-
-const defaultValues: Partial<TIssue> = {
-  project_id: "",
-  name: "",
-  description_html: "<p></p>",
-  estimate_point: null,
-  state_id: "",
-  parent_id: null,
-  priority: "none",
-  assignee_ids: [],
-  label_ids: [],
-  start_date: undefined,
-  target_date: undefined,
-};
-
-interface IssueFormProps {
-  handleFormSubmit: (
-    formData: Partial<TIssue>,
-    action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
-  ) => Promise<void>;
-  data?: Partial<TIssue> | null;
-  isOpen: boolean;
-  prePopulatedData?: Partial<TIssue> | null;
-  projectId: string;
-  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
-  createMore: boolean;
-  setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
-  handleClose: () => void;
-  handleDiscard: () => void;
-  status: boolean;
-  user: IUser | undefined;
-  fieldsToShow: (
-    | "project"
-    | "name"
-    | "description"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-  )[];
-}
-
-export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
-  const {
-    handleFormSubmit,
-    data,
-    isOpen,
-    prePopulatedData,
-    projectId,
-    setActiveProject,
-    createMore,
-    setCreateMore,
-    status,
-    fieldsToShow,
-    handleDiscard,
-  } = props;
-  // states
-  const [stateModal, setStateModal] = useState(false);
-  const [labelModal, setLabelModal] = useState(false);
-  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
-  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
-  const [gptAssistantModal, setGptAssistantModal] = useState(false);
-  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
-  // store hooks
-  const { areEstimatesEnabledForProject } = useEstimate();
-  const { mentionHighlights, mentionSuggestions } = useMention();
-  // hooks
-  const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
-  const { setToastAlert } = useToast();
-  // refs
-  const editorRef = useRef<any>(null);
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-  const workspaceStore = useWorkspace();
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
-
-  // store
-  const {
-    config: { envConfig },
-  } = useApplication();
-  const { getProjectById } = useProject();
-  // form info
-  const {
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    getValues,
-    setValue,
-    setFocus,
-  } = useForm<TIssue>({
-    defaultValues: prePopulatedData ?? defaultValues,
-    reValidateMode: "onChange",
-  });
-
-  const issueName = watch("name");
-
-  const payload: Partial<TIssue> = {
-    name: watch("name"),
-    description_html: watch("description_html"),
-    state_id: watch("state_id"),
-    priority: watch("priority"),
-    assignee_ids: watch("assignee_ids"),
-    label_ids: watch("label_ids"),
-    start_date: watch("start_date"),
-    target_date: watch("target_date"),
-    project_id: watch("project_id"),
-    parent_id: watch("parent_id"),
-    cycle_id: watch("cycle_id"),
-    module_ids: watch("module_ids"),
-  };
-
-  useEffect(() => {
-    if (!isOpen || data) return;
-
-    setLocalStorageValue(
-      JSON.stringify({
-        ...payload,
-      })
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(payload), isOpen, data]);
-
-  // const onClose = () => {
-  //   handleClose();
-  // };
-
-  // const onClose = () => {
-  //   handleClose();
-  // };
-
-  const handleCreateUpdateIssue = async (
-    formData: Partial<TIssue>,
-    action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft"
-  ) => {
-    await handleFormSubmit(
-      {
-        ...(data ?? {}),
-        ...formData,
-        // is_draft: action === "createDraft" || action === "updateDraft",
-      },
-      action
-    );
-    // TODO: check_with_backend
-
-    setGptAssistantModal(false);
-
-    reset({
-      ...defaultValues,
-      project_id: projectId,
-      description_html: "<p></p>",
-    });
-    editorRef?.current?.clearEditor();
-  };
-
-  const handleAiAssistance = async (response: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    // setValue("description", {});
-    setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
-    editorRef.current?.setEditorValue(`${watch("description_html")}`);
-  };
-
-  const handleAutoGenerateDescription = async () => {
-    if (!workspaceSlug || !projectId) return;
-
-    setIAmFeelingLucky(true);
-
-    aiService
-      .createGptTask(workspaceSlug as string, projectId as string, {
-        prompt: issueName,
-        task: "Generate a proper description for this issue.",
-      })
-      .then((res) => {
-        if (res.response === "")
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message:
-              "Issue title isn't informative enough to generate the description. Please try with a different title.",
-          });
-        else handleAiAssistance(res.response_html);
-      })
-      .catch((err) => {
-        const error = err?.data?.error;
-
-        if (err.status === 429)
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: error || "Some error occurred. Please try again.",
-          });
-      })
-      .finally(() => setIAmFeelingLucky(false));
-  };
-
-  useEffect(() => {
-    setFocus("name");
-  }, [setFocus]);
-
-  // update projectId in form when projectId changes
-  useEffect(() => {
-    reset({
-      ...getValues(),
-      project_id: projectId,
-    });
-  }, [getValues, projectId, reset]);
-
-  const startDate = watch("start_date");
-  const targetDate = watch("target_date");
-
-  const minDate = startDate ? new Date(startDate) : null;
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = targetDate ? new Date(targetDate) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  const projectDetails = getProjectById(projectId);
-
-  return (
-    <>
-      {projectId && (
-        <>
-          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
-          <CreateLabelModal
-            isOpen={labelModal}
-            handleClose={() => setLabelModal(false)}
-            projectId={projectId}
-            onSuccess={(response) => setValue("label_ids", [...watch("label_ids"), response.id])}
-          />
-        </>
-      )}
-      <form
-        onSubmit={handleSubmit((formData) =>
-          handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createDraft")
-        )}
-      >
-        <div className="space-y-5">
-          <div className="flex items-center gap-x-2">
-            {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
-              <Controller
-                control={control}
-                name="project_id"
-                render={({ field: { value, onChange } }) => (
-                  <div className="h-7">
-                    <ProjectDropdown
-                      value={value}
-                      onChange={(val) => {
-                        onChange(val);
-                        setActiveProject(val);
-                      }}
-                      buttonVariant="border-with-text"
-                    />
-                  </div>
-                )}
-              />
-            )}
-            <h3 className="text-xl font-semibold leading-6 text-custom-text-100">
-              {status ? "Update" : "Create"} issue
-            </h3>
-          </div>
-          {watch("parent_id") &&
-            (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
-            selectedParentIssue && (
-              <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
-                <div className="flex items-center gap-2">
-                  <span
-                    className="block h-1.5 w-1.5 rounded-full"
-                    style={{
-                      backgroundColor: selectedParentIssue.state__color,
-                    }}
-                  />
-                  <span className="flex-shrink-0 text-custom-text-200">
-                    {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
-                  </span>
-                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
-                  <X
-                    className="h-3 w-3 cursor-pointer"
-                    onClick={() => {
-                      setValue("parent_id", null);
-                      setSelectedParentIssue(null);
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-          <div className="space-y-3">
-            <div className="mt-2 space-y-3">
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
-                <div>
-                  <Controller
-                    control={control}
-                    name="name"
-                    rules={{
-                      required: "Title is required",
-                      maxLength: {
-                        value: 255,
-                        message: "Title should be less than 255 characters",
-                      },
-                    }}
-                    render={({ field: { value, onChange, ref } }) => (
-                      <Input
-                        id="name"
-                        name="name"
-                        type="text"
-                        value={value}
-                        onChange={onChange}
-                        ref={ref}
-                        hasError={Boolean(errors.name)}
-                        placeholder="Title"
-                        className="w-full resize-none text-xl"
-                      />
-                    )}
-                  />
-                </div>
-              )}
-              {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
-                <div className="relative">
-                  <div className="border-0.5 absolute bottom-3.5 right-3.5 flex items-center gap-2">
-                    {issueName && issueName !== "" && (
-                      <button
-                        type="button"
-                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
-                          iAmFeelingLucky ? "cursor-wait" : ""
-                        }`}
-                        onClick={handleAutoGenerateDescription}
-                        disabled={iAmFeelingLucky}
-                      >
-                        {iAmFeelingLucky ? (
-                          "Generating response..."
-                        ) : (
-                          <>
-                            <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
-                          </>
-                        )}
-                      </button>
-                    )}
-                    {envConfig?.has_openai_configured && (
-                      <GptAssistantPopover
-                        isOpen={gptAssistantModal}
-                        projectId={projectId}
-                        handleClose={() => {
-                          setGptAssistantModal((prevData) => !prevData);
-                          // this is done so that the title do not reset after gpt popover closed
-                          reset(getValues());
-                        }}
-                        onResponse={(response) => {
-                          handleAiAssistance(response);
-                        }}
-                        button={
-                          <button
-                            type="button"
-                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80"
-                            onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                          >
-                            <Sparkle className="h-3.5 w-3.5" />
-                            AI
-                          </button>
-                        }
-                        className=" !min-w-[38rem]"
-                        placement="top-end"
-                      />
-                    )}
-                  </div>
-                  <Controller
-                    name="description_html"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <RichTextEditorWithRef
-                        cancelUploadImage={fileService.cancelUpload}
-                        uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                        deleteFile={fileService.getDeleteImageFunction(workspaceId)}
-                        restoreFile={fileService.getRestoreImageFunction(workspaceId)}
-                        ref={editorRef}
-                        debouncedUpdatesEnabled={false}
-                        value={
-                          !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
-                            ? watch("description_html")
-                            : value
-                        }
-                        customClassName="min-h-[150px]"
-                        onChange={(description: Object, description_html: string) => {
-                          onChange(description_html);
-                        }}
-                        mentionHighlights={mentionHighlights}
-                        mentionSuggestions={mentionSuggestions}
-                      />
-                    )}
-                  />
-                </div>
-              )}
-              <div className="flex flex-wrap items-center gap-2">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <Controller
-                    control={control}
-                    name="state_id"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <StateDropdown
-                          value={value}
-                          onChange={onChange}
-                          projectId={projectId}
-                          buttonVariant="border-with-text"
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <Controller
-                    control={control}
-                    name="priority"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <PriorityDropdown value={value} onChange={onChange} buttonVariant="border-with-text" />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <Controller
-                    control={control}
-                    name="assignee_ids"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <ProjectMemberDropdown
-                          projectId={projectId}
-                          value={value}
-                          onChange={onChange}
-                          buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
-                          buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
-                          placeholder="Assignees"
-                          multiple
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-                  <Controller
-                    control={control}
-                    name="label_ids"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <IssueLabelSelect
-                          setIsOpen={setLabelModal}
-                          value={value}
-                          onChange={onChange}
-                          projectId={projectId}
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <Controller
-                    control={control}
-                    name="start_date"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <DateDropdown
-                          value={value}
-                          onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
-                          buttonVariant="border-with-text"
-                          placeholder="Start date"
-                          maxDate={maxDate ?? undefined}
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                  <Controller
-                    control={control}
-                    name="target_date"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <DateDropdown
-                          value={value}
-                          onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
-                          buttonVariant="border-with-text"
-                          placeholder="Due date"
-                          minDate={minDate ?? undefined}
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-                {projectDetails?.cycle_view && (
-                  <Controller
-                    control={control}
-                    name="cycle_id"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <CycleDropdown
-                          projectId={projectId}
-                          onChange={(cycleId) => onChange(cycleId)}
-                          value={value}
-                          buttonVariant="border-with-text"
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-
-                {projectDetails?.module_view && workspaceSlug && (
-                  <Controller
-                    control={control}
-                    name="module_ids"
-                    render={({ field: { value, onChange } }) => (
-                      <div className="h-7">
-                        <ModuleDropdown
-                          projectId={projectId}
-                          value={value ?? []}
-                          onChange={onChange}
-                          buttonVariant="border-with-text"
-                          multiple
-                        />
-                      </div>
-                    )}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  areEstimatesEnabledForProject(projectId) && (
-                    <Controller
-                      control={control}
-                      name="estimate_point"
-                      render={({ field: { value, onChange } }) => (
-                        <div className="h-7">
-                          <EstimateDropdown
-                            value={value}
-                            onChange={onChange}
-                            projectId={projectId}
-                            buttonVariant="border-with-text"
-                          />
-                        </div>
-                      )}
-                    />
-                  )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <Controller
-                    control={control}
-                    name="parent_id"
-                    render={({ field: { onChange } }) => (
-                      <ParentIssuesListModal
-                        isOpen={parentIssueListModalOpen}
-                        handleClose={() => setParentIssueListModalOpen(false)}
-                        onChange={(issue) => {
-                          onChange(issue.id);
-                          setSelectedParentIssue(issue);
-                        }}
-                        projectId={projectId}
-                      />
-                    )}
-                  />
-                )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <CustomMenu ellipsis>
-                    {watch("parent_id") ? (
-                      <>
-                        <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
-                          Change parent issue
-                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={() => setValue("parent_id", null)}>
-                          Remove parent issue
-                        </CustomMenu.MenuItem>
-                      </>
-                    ) : (
-                      <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
-                        Select Parent Issue
-                      </CustomMenu.MenuItem>
-                    )}
-                  </CustomMenu>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
-          <div
-            className="flex cursor-pointer items-center gap-1"
-            onClick={() => setCreateMore((prevData) => !prevData)}
-          >
-            <span className="text-xs">Create more</span>
-            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="neutral-primary" size="sm" onClick={handleDiscard}>
-              Discard
-            </Button>
-            <Button
-              variant="neutral-primary"
-              size="sm"
-              loading={isSubmitting}
-              onClick={handleSubmit((formData) =>
-                handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
-              )}
-            >
-              {isSubmitting ? "Saving..." : "Save Draft"}
-            </Button>
-            <Button
-              loading={isSubmitting}
-              variant="primary"
-              size="sm"
-              onClick={handleSubmit((formData) =>
-                handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
-              )}
-            >
-              {isSubmitting ? "Saving..." : "Add Issue"}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </>
-  );
-});
diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
deleted file mode 100644
index 40a79798e..000000000
--- a/web/components/issues/draft-issue-modal.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { mutate } from "swr";
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import { IssueService } from "services/issue";
-import { ModuleService } from "services/module.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useLocalStorage from "hooks/use-local-storage";
-import { useIssues, useProject, useUser } from "hooks/store";
-// components
-import { DraftIssueForm } from "components/issues";
-// types
-import type { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
-// fetch-keys
-import { PROJECT_ISSUES_DETAILS, USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
-
-interface IssuesModalProps {
-  data?: TIssue | null;
-  handleClose: () => void;
-  isOpen: boolean;
-  isUpdatingSingleIssue?: boolean;
-  prePopulateData?: Partial<TIssue>;
-  fieldsToShow?: (
-    | "project"
-    | "name"
-    | "description"
-    | "state"
-    | "priority"
-    | "assignee"
-    | "label"
-    | "startDate"
-    | "dueDate"
-    | "estimate"
-    | "parent"
-    | "all"
-  )[];
-  onSubmit?: (data: Partial<TIssue>) => Promise<void> | void;
-}
-
-// services
-const issueService = new IssueService();
-const moduleService = new ModuleService();
-
-export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer((props) => {
-  const {
-    data,
-    handleClose,
-    isOpen,
-    isUpdatingSingleIssue = false,
-    prePopulateData: prePopulateDataProps,
-    fieldsToShow = ["all"],
-    onSubmit,
-  } = props;
-
-  // states
-  const [createMore, setCreateMore] = useState(false);
-  const [activeProject, setActiveProject] = useState<string | null>(null);
-  const [prePopulateData, setPreloadedData] = useState<Partial<TIssue> | undefined>(undefined);
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-  // store
-  const { issues: draftIssues } = useIssues(EIssuesStoreType.DRAFT);
-  const { currentUser } = useUser();
-  const { workspaceProjectIds: workspaceProjects } = useProject();
-  // derived values
-  const projects = workspaceProjects;
-
-  const { clearValue: clearDraftIssueLocalStorage } = useLocalStorage("draftedIssue", {});
-
-  const { setToastAlert } = useToast();
-
-  const onClose = () => {
-    handleClose();
-    setActiveProject(null);
-  };
-
-  const onDiscard = () => {
-    clearDraftIssueLocalStorage();
-    onClose();
-  };
-
-  useEffect(() => {
-    setPreloadedData(prePopulateDataProps ?? {});
-
-    if (cycleId && !prePopulateDataProps?.cycle_id) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        cycle: cycleId.toString(),
-      }));
-    }
-    if (moduleId && !prePopulateDataProps?.module_ids) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        module: moduleId.toString(),
-      }));
-    }
-    if (
-      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
-      !prePopulateDataProps?.assignee_ids
-    ) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        assignees: prePopulateDataProps?.assignee_ids ?? [currentUser?.id ?? ""],
-      }));
-    }
-  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, currentUser?.id]);
-
-  useEffect(() => {
-    setPreloadedData(prePopulateDataProps ?? {});
-
-    if (cycleId && !prePopulateDataProps?.cycle_id) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        cycle: cycleId.toString(),
-      }));
-    }
-    if (moduleId && !prePopulateDataProps?.module_ids) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        module: moduleId.toString(),
-      }));
-    }
-    if (
-      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
-      !prePopulateDataProps?.assignee_ids
-    ) {
-      setPreloadedData((prevData) => ({
-        ...(prevData ?? {}),
-        ...prePopulateDataProps,
-        assignees: prePopulateDataProps?.assignee_ids ?? [currentUser?.id ?? ""],
-      }));
-    }
-  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, currentUser?.id]);
-
-  useEffect(() => {
-    // if modal is closed, reset active project to null
-    // and return to avoid activeProject being set to some other project
-    if (!isOpen) {
-      setActiveProject(null);
-      return;
-    }
-
-    // if data is present, set active project to the project of the
-    // issue. This has more priority than the project in the url.
-    if (data && data.project_id) return setActiveProject(data.project_id);
-
-    if (prePopulateData && prePopulateData.project_id && !activeProject)
-      return setActiveProject(prePopulateData.project_id);
-
-    if (prePopulateData && prePopulateData.project_id && !activeProject)
-      return setActiveProject(prePopulateData.project_id);
-
-    // if data is not present, set active project to the project
-    // in the url. This has the least priority.
-    if (projects && projects.length > 0 && !activeProject)
-      setActiveProject(projects?.find((id) => id === projectId) ?? projects?.[0] ?? null);
-  }, [activeProject, data, projectId, projects, isOpen, prePopulateData]);
-
-  const createDraftIssue = async (payload: Partial<TIssue>) => {
-    if (!workspaceSlug || !activeProject || !currentUser) return;
-
-    await draftIssues
-      .createIssue(workspaceSlug as string, activeProject ?? "", payload)
-      .then(async () => {
-        await draftIssues.fetchIssues(workspaceSlug as string, activeProject ?? "", "mutation");
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue created successfully.",
-        });
-
-        if (payload.assignee_ids?.some((assignee) => assignee === currentUser?.id))
-          mutate(USER_ISSUE(workspaceSlug.toString()));
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Issue could not be created. Please try again.",
-        });
-      });
-
-    if (!createMore) onClose();
-  };
-
-  const updateDraftIssue = async (payload: Partial<TIssue>) => {
-    await draftIssues
-      .updateIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
-      .then(() => {
-        if (isUpdatingSingleIssue) {
-          mutate<TIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...payload } as TIssue), false);
-        } else {
-          if (payload.parent_id) mutate(SUB_ISSUES(payload.parent_id.toString()));
-        }
-
-        // if (!payload.is_draft) { // TODO: check_with_backend
-        //   if (payload.cycle_id && payload.cycle_id !== "") addIssueToCycle(res.id, payload.cycle_id);
-        //   if (payload.module_id && payload.module_id !== "") addIssueToModule(res.id, payload.module_id);
-        // }
-
-        if (!createMore) onClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue updated successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Issue could not be updated. Please try again.",
-        });
-      });
-  };
-
-  const addIssueToCycle = async (issueId: string, cycleId: string) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    await issueService.addIssueToCycle(workspaceSlug as string, activeProject ?? "", cycleId, {
-      issues: [issueId],
-    });
-  };
-
-  const addIssueToModule = async (issueId: string, moduleIds: string[]) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    await moduleService.addModulesToIssue(workspaceSlug as string, activeProject ?? "", issueId as string, {
-      modules: moduleIds,
-    });
-  };
-
-  const createIssue = async (payload: Partial<TIssue>) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    await issueService
-      .createIssue(workspaceSlug.toString(), activeProject, payload)
-      .then(async (res) => {
-        if (payload.cycle_id && payload.cycle_id !== "") await addIssueToCycle(res.id, payload.cycle_id);
-        if (payload.module_ids && payload.module_ids.length > 0) await addIssueToModule(res.id, payload.module_ids);
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Issue created successfully.",
-        });
-
-        if (!createMore) onClose();
-
-        if (payload.assignee_ids?.some((assignee) => assignee === currentUser?.id))
-          mutate(USER_ISSUE(workspaceSlug as string));
-
-        if (payload.parent_id && payload.parent_id !== "") mutate(SUB_ISSUES(payload.parent_id));
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Issue could not be created. Please try again.",
-        });
-      });
-  };
-
-  const handleFormSubmit = async (
-    formData: Partial<TIssue>,
-    action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft"
-  ) => {
-    if (!workspaceSlug || !activeProject) return;
-
-    const payload: Partial<TIssue> = {
-      ...formData,
-      // description: formData.description ?? "",
-      description_html: formData.description_html ?? "<p></p>",
-    };
-
-    if (action === "createDraft") await createDraftIssue(payload);
-    else if (action === "updateDraft" || action === "convertToNewIssue") await updateDraftIssue(payload);
-    else if (action === "createNewIssue") await createIssue(payload);
-
-    clearDraftIssueLocalStorage();
-
-    if (onSubmit) await onSubmit(payload);
-  };
-
-  if (!projects || projects.length === 0) return null;
-
-  return (
-    <>
-      <Transition.Root show={isOpen} as={React.Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={onClose}>
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
-                  <DraftIssueForm
-                    isOpen={isOpen}
-                    handleFormSubmit={handleFormSubmit}
-                    prePopulatedData={prePopulateData}
-                    data={data}
-                    createMore={createMore}
-                    setCreateMore={setCreateMore}
-                    handleClose={onClose}
-                    handleDiscard={onDiscard}
-                    projectId={activeProject ?? ""}
-                    setActiveProject={setActiveProject}
-                    status={data ? true : false}
-                    user={currentUser ?? undefined}
-                    fieldsToShow={fieldsToShow}
-                  />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-});
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index 3904049e9..d001a29c2 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -14,10 +14,5 @@ export * from "./issue-detail";
 
 export * from "./peek-overview";
 
-// draft issue
-export * from "./draft-issue-form";
-export * from "./draft-issue-modal";
-export * from "./delete-draft-issue-modal";
-
 // archived issue
-export * from "./delete-archived-issue-modal";
+export * from "./archive-issue-modal";
diff --git a/web/components/issues/issue-detail/inbox/root.tsx b/web/components/issues/issue-detail/inbox/root.tsx
index 93845a41d..7407d3d9c 100644
--- a/web/components/issues/issue-detail/inbox/root.tsx
+++ b/web/components/issues/issue-detail/inbox/root.tsx
@@ -30,6 +30,8 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   } = useInboxIssues();
   const {
     issue: { getIssueById },
+    fetchActivities,
+    fetchComments,
   } = useIssueDetail();
   const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
@@ -54,7 +56,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
         showToast: boolean = true
       ) => {
         try {
-          const response = await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
+          await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
           if (showToast) {
             setToastAlert({
               title: "Issue updated successfully",
@@ -64,7 +66,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
           }
           captureIssueEvent({
             eventName: "Inbox issue updated",
-            payload: { ...response, state: "SUCCESS", element: "Inbox" },
+            payload: { ...data, state: "SUCCESS", element: "Inbox" },
             updates: {
               changed_property: Object.keys(data).join(","),
               change_details: !data.name && !data.description_html ? Object.values(data).join(",") : undefined,
@@ -125,6 +127,8 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
     async () => {
       if (workspaceSlug && projectId && inboxId && issueId) {
         await issueOperations.fetch(workspaceSlug, projectId, issueId);
+        await fetchActivities(workspaceSlug, projectId, issueId);
+        await fetchComments(workspaceSlug, projectId, issueId);
       }
     }
   );
diff --git a/web/components/issues/issue-detail/inbox/sidebar.tsx b/web/components/issues/issue-detail/inbox/sidebar.tsx
index e0b2aca28..592791a85 100644
--- a/web/components/issues/issue-detail/inbox/sidebar.tsx
+++ b/web/components/issues/issue-detail/inbox/sidebar.tsx
@@ -5,7 +5,7 @@ import { CalendarCheck2, Signal, Tag } from "lucide-react";
 import { useIssueDetail, useProject, useProjectState } from "hooks/store";
 // components
 import { IssueLabel, TIssueOperations } from "components/issues";
-import { DateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
+import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
 // icons
 import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // helper
@@ -80,7 +80,7 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
-              <ProjectMemberDropdown
+              <MemberDropdown
                 value={issue?.assignee_ids ?? undefined}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
                 disabled={!is_editable}
@@ -154,6 +154,10 @@ export const InboxIssueDetailsSidebar: React.FC<Props> = observer((props) => {
                   projectId={projectId}
                   issueId={issueId}
                   disabled={!is_editable}
+                  isInboxIssue
+                  onLabelUpdate={(val: string[]) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, { label_ids: val })
+                  }
                 />
               </div>
             </div>
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 55f07870c..2335e4d32 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
@@ -1,10 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { MessageSquare } from "lucide-react";
+import { RotateCcw } from "lucide-react";
 // hooks
 import { useIssueDetail } from "hooks/store";
 // components
 import { IssueActivityBlockComponent } from "./";
+// ui
+import { ArchiveIcon } from "@plane/ui";
 
 type TIssueArchivedAtActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
@@ -18,13 +20,21 @@ export const IssueArchivedAtActivity: FC<TIssueArchivedAtActivity> = observer((p
   const activity = getActivityById(activityId);
 
   if (!activity) return <></>;
+
   return (
     <IssueActivityBlockComponent
-      icon={<MessageSquare size={14} color="#6b7280" aria-hidden="true" />}
+      icon={
+        activity.new_value === "restore" ? (
+          <RotateCcw className="h-3.5 w-3.5" color="#6b7280" aria-hidden="true" />
+        ) : (
+          <ArchiveIcon className="h-3.5 w-3.5" color="#6b7280" aria-hidden="true" />
+        )
+      }
       activityId={activityId}
       ends={ends}
+      customUserName={activity.new_value === "archive" ? "Plane" : undefined}
     >
-      {activity.new_value === "restore" ? `restored the issue` : `archived the issue`}.
+      {activity.new_value === "restore" ? "restored the issue" : "archived the issue"}.
     </IssueActivityBlockComponent>
   );
 });
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 c7b75340b..e209b4bbf 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
@@ -14,10 +14,11 @@ type TIssueActivityBlockComponent = {
   activityId: string;
   ends: "top" | "bottom" | undefined;
   children: ReactNode;
+  customUserName?: string;
 };
 
 export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (props) => {
-  const { icon, activityId, ends, children } = props;
+  const { icon, activityId, ends, children, customUserName } = props;
   // hooks
   const {
     activity: { getActivityById },
@@ -37,7 +38,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full text-custom-text-200">
-        <IssueUser activityId={activityId} />
+        <IssueUser activityId={activityId} customUserName={customUserName} />
         <span> {children} </span>
         <span>
           <Tooltip
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 dd44879cf..706eb783f 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,15 +1,15 @@
 import { FC } from "react";
-
+import Link from "next/link";
 // hooks
 import { useIssueDetail } from "hooks/store";
-// ui
 
 type TIssueUser = {
   activityId: string;
+  customUserName?: string;
 };
 
 export const IssueUser: FC<TIssueUser> = (props) => {
-  const { activityId } = props;
+  const { activityId, customUserName } = props;
   // hooks
   const {
     activity: { getActivityById },
@@ -18,12 +18,19 @@ export const IssueUser: FC<TIssueUser> = (props) => {
   const activity = getActivityById(activityId);
 
   if (!activity) return <></>;
+
   return (
-    <a
-      href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-      className="hover:underline text-custom-text-100 font-medium capitalize"
-    >
-      {activity.actor_detail?.display_name}
-    </a>
+    <>
+      {customUserName ? (
+        <span className="text-custom-text-100 font-medium">{customUserName}</span>
+      ) : (
+        <Link
+          href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
+          className="hover:underline text-custom-text-100 font-medium"
+        >
+          {activity.actor_detail?.display_name}
+        </Link>
+      )}
+    </>
   );
 };
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 2000721ee..0c2c3cbb5 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
@@ -14,6 +14,8 @@ import { FileService } from "services/file.service";
 // types
 import { TIssueComment } from "@plane/types";
 import { TActivityOperations } from "../root";
+// helpers
+import { isEmptyHtmlString } from "helpers/string.helper";
 
 const fileService = new FileService();
 
@@ -67,6 +69,12 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
     isEditing && setFocus("comment_html");
   }, [isEditing, setFocus]);
 
+  const isEmpty =
+    watch("comment_html") === "" ||
+    watch("comment_html")?.trim() === "" ||
+    watch("comment_html") === "<p></p>" ||
+    isEmptyHtmlString(watch("comment_html") ?? "");
+
   if (!comment || !currentUser) return <></>;
   return (
     <IssueCommentBlock
@@ -115,9 +123,14 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
     >
       <>
         <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
-          <div>
+          <div
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !isEmpty) {
+                handleSubmit(onEnter)(e);
+              }
+            }}
+          >
             <LiteTextEditorWithRef
-              onEnterKeyPress={handleSubmit(onEnter)}
               cancelUploadImage={fileService.cancelUpload}
               uploadFile={fileService.getUploadFileFunction(comment?.workspace_detail?.slug as string)}
               deleteFile={fileService.getDeleteImageFunction(workspaceId)}
@@ -135,10 +148,14 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
             <button
               type="button"
               onClick={handleSubmit(onEnter)}
-              disabled={isSubmitting}
-              className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              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"
+              }`}
             >
-              <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              <Check
+                className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-white"}`}
+              />
             </button>
             <button
               type="button"
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 f7bce3edc..f666b6c1d 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
@@ -11,6 +11,8 @@ 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();
 
@@ -51,10 +53,10 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   const {
     handleSubmit,
     control,
+    watch,
     formState: { isSubmitting },
     reset,
-    watch,
-  } = useForm<Partial<TIssueComment>>({ defaultValues: { comment_html: "" } });
+  } = useForm<Partial<TIssueComment>>({ defaultValues: { comment_html: "<p></p>" } });
 
   const onSubmit = async (formData: Partial<TIssueComment>) => {
     await activityOperations.createComment(formData).finally(() => {
@@ -63,14 +65,19 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
     });
   };
 
+  const isEmpty =
+    watch("comment_html") === "" ||
+    watch("comment_html")?.trim() === "" ||
+    watch("comment_html") === "<p></p>" ||
+    isEmptyHtmlString(watch("comment_html") ?? "");
+
   return (
     <div
-    // onKeyDown={(e) => {
-    //   if (e.key === "Enter" && !e.shiftKey) {
-    //     e.preventDefault();
-    //     // handleSubmit(onSubmit)(e);
-    //   }
-    // }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !e.shiftKey && !isEmpty) {
+          handleSubmit(onSubmit)(e);
+        }
+      }}
     >
       <Controller
         name="access"
@@ -81,15 +88,12 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
             control={control}
             render={({ field: { value, onChange } }) => (
               <LiteTextEditorWithRef
-                onEnterKeyPress={(e) => {
-                  handleSubmit(onSubmit)(e);
-                }}
                 cancelUploadImage={fileService.cancelUpload}
                 uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
                 deleteFile={fileService.getDeleteImageFunction(workspaceId)}
                 restoreFile={fileService.getRestoreImageFunction(workspaceId)}
                 ref={editorRef}
-                value={value ?? ""}
+                value={!value ? "<p></p>" : value}
                 customClassName="p-2"
                 editorContentCustomClassNames="min-h-[35px]"
                 debouncedUpdatesEnabled={false}
@@ -105,7 +109,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 }
                 submitButton={
                   <Button
-                    disabled={isSubmitting || watch("comment_html") === ""}
+                    disabled={isSubmitting || isEmpty}
                     variant="primary"
                     type="submit"
                     className="!px-2.5 !py-1.5 !text-xs"
diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx
index 42d856b1e..695b248de 100644
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -20,7 +20,7 @@ type TActivityTabs = "all" | "activity" | "comments";
 const activityTabs: { key: TActivityTabs; title: string; icon: LucideIcon }[] = [
   {
     key: "all",
-    title: "All Activity",
+    title: "All activity",
     icon: History,
   },
   {
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 3c3164c5a..60792b01c 100644
--- a/web/components/issues/issue-detail/label/label-list-item.tsx
+++ b/web/components/issues/issue-detail/label/label-list-item.tsx
@@ -35,7 +35,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
   return (
     <div
       key={labelId}
-      className={`transition-all relative flex items-center gap-1  border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
+      className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
         !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
       } `}
       onClick={handleLabel}
@@ -46,7 +46,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
           backgroundColor: label.color ?? "#000000",
         }}
       />
-      <div className="flex-shrink-0">{label.name}</div>
+      <div className="truncate">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">
           <X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
diff --git a/web/components/issues/issue-detail/label/root.tsx b/web/components/issues/issue-detail/label/root.tsx
index 2ef9bec6e..94f9b451f 100644
--- a/web/components/issues/issue-detail/label/root.tsx
+++ b/web/components/issues/issue-detail/label/root.tsx
@@ -13,6 +13,8 @@ export type TIssueLabel = {
   projectId: string;
   issueId: string;
   disabled: boolean;
+  isInboxIssue?: boolean;
+  onLabelUpdate?: (labelIds: string[]) => void;
 };
 
 export type TLabelOperations = {
@@ -21,7 +23,7 @@ export type TLabelOperations = {
 };
 
 export const IssueLabel: FC<TIssueLabel> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  const { workspaceSlug, projectId, issueId, disabled = false, isInboxIssue = false, onLabelUpdate } = props;
   // hooks
   const { updateIssue } = useIssueDetail();
   const { createLabel } = useLabel();
@@ -31,12 +33,14 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
     () => ({
       updateIssue: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
         try {
-          await updateIssue(workspaceSlug, projectId, issueId, data);
-          setToastAlert({
-            title: "Issue updated successfully",
-            type: "success",
-            message: "Issue updated successfully",
-          });
+          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({
             title: "Issue update failed",
@@ -48,11 +52,12 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
       createLabel: async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => {
         try {
           const labelResponse = await createLabel(workspaceSlug, projectId, data);
-          setToastAlert({
-            title: "Label created successfully",
-            type: "success",
-            message: "Label created successfully",
-          });
+          if (!isInboxIssue)
+            setToastAlert({
+              title: "Label created successfully",
+              type: "success",
+              message: "Label created successfully",
+            });
           return labelResponse;
         } catch (error) {
           setToastAlert({
@@ -64,7 +69,7 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
         }
       },
     }),
-    [updateIssue, createLabel, setToastAlert]
+    [updateIssue, createLabel, setToastAlert, 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 4cdbdcf59..11ff77d37 100644
--- a/web/components/issues/issue-detail/label/select/label-select.tsx
+++ b/web/components/issues/issue-detail/label/select/label-select.tsx
@@ -80,6 +80,13 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
     </div>
   );
 
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
   if (!issue) return <></>;
 
   return (
@@ -118,6 +125,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder="Search"
                   displayValue={(assigned: any) => assigned?.name}
+                  onKeyDown={searchInputKeyDown}
                 />
               </div>
             </div>
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index e0dcdac47..4b5da3a9b 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -16,7 +16,7 @@ import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
-import { ISSUE_UPDATED, ISSUE_DELETED } from "constants/event-tracker";
+import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED } from "constants/event-tracker";
 import { observer } from "mobx-react";
 
 export type TIssueOperations = {
@@ -29,6 +29,8 @@ export type TIssueOperations = {
     showToast?: boolean
   ) => 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>;
   addIssueToCycle?: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromCycle?: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
   addModulesToIssue?: (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => Promise<void>;
@@ -63,6 +65,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
     fetchIssue,
     updateIssue,
     removeIssue,
+    archiveIssue,
     addIssueToCycle,
     removeIssueFromCycle,
     addModulesToIssue,
@@ -157,6 +160,32 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
           });
         }
       },
+      archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await archiveIssue(workspaceSlug, projectId, issueId);
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Issue archived successfully.",
+          });
+          captureIssueEvent({
+            eventName: ISSUE_ARCHIVED,
+            payload: { id: issueId, state: "SUCCESS", element: "Issue details page" },
+            path: router.asPath,
+          });
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Issue could not be archived. Please try again.",
+          });
+          captureIssueEvent({
+            eventName: ISSUE_ARCHIVED,
+            payload: { id: issueId, state: "FAILED", element: "Issue details page" },
+            path: router.asPath,
+          });
+        }
+      },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
@@ -320,6 +349,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
       fetchIssue,
       updateIssue,
       removeIssue,
+      archiveIssue,
       removeArchivedIssue,
       addIssueToCycle,
       removeIssueFromCycle,
@@ -351,7 +381,7 @@ 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-300 overflow-y-auto p-5">
+          <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">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -361,7 +391,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             />
           </div>
           <div
-            className="h-full w-full sm:w-1/2 md:w-1/3 space-y-5 overflow-hidden border-l border-custom-border-300 py-5 fixed md:relative bg-custom-sidebar-background-100 right-0 z-[5]"
+            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]"
             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 854550b0b..a65cb7f16 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { differenceInCalendarDays } from "date-fns";
 import {
   LinkIcon,
   Signal,
@@ -12,10 +11,11 @@ import {
   XCircle,
   CircleDot,
   CopyPlus,
-  CalendarDays,
+  CalendarClock,
+  CalendarCheck2,
 } from "lucide-react";
 // hooks
-import { useEstimate, useIssueDetail, useProject, useUser } from "hooks/store";
+import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -26,23 +26,20 @@ import {
   IssueModuleSelect,
   IssueParentSelect,
   IssueLabel,
+  ArchiveIssueModal,
 } from "components/issues";
 import { IssueSubscription } from "./subscription";
-import {
-  DateDropdown,
-  EstimateDropdown,
-  PriorityDropdown,
-  ProjectMemberDropdown,
-  StateDropdown,
-} from "components/dropdowns";
+import { DateDropdown, EstimateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
 // icons
-import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon, UserGroupIcon } from "@plane/ui";
+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;
@@ -55,6 +52,9 @@ type Props = {
 
 export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issueOperations, is_archived, is_editable } = props;
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
   // router
   const router = useRouter();
   // store hooks
@@ -65,8 +65,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // states
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const { getStateById } = useProjectState();
 
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
@@ -82,7 +81,23 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
     });
   };
 
-  const projectDetails = issue ? getProjectById(issue.project_id) : null;
+  const handleDeleteIssue = async () => {
+    await issueOperations.remove(workspaceSlug, projectId, issueId);
+    router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
+  };
+
+  const handleArchiveIssue = async () => {
+    if (!issueOperations.archive) return;
+    await issueOperations.archive(workspaceSlug, projectId, issueId);
+    router.push(`/${workspaceSlug}/projects/${projectId}/archived-issues/${issue.id}`);
+  };
+  // derived values
+  const projectDetails = getProjectById(issue.project_id);
+  const stateDetails = getStateById(issue.state_id);
+  // auth
+  const isArchivingAllowed = !is_archived && issueOperations.archive && is_editable;
+  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;
   minDate?.setDate(minDate.getDate());
@@ -90,50 +105,74 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
 
-  const targetDateDistance = issue.target_date ? differenceInCalendarDays(new Date(issue.target_date), new Date()) : 1;
-
   return (
     <>
-      {workspaceSlug && projectId && issue && (
-        <DeleteIssueModal
-          handleClose={() => setDeleteIssueModal(false)}
-          isOpen={deleteIssueModal}
-          data={issue}
-          onSubmit={async () => {
-            await issueOperations.remove(workspaceSlug, projectId, issueId);
-            router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
-          }}
-        />
-      )}
-
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issue}
+        onSubmit={handleDeleteIssue}
+      />
+      <ArchiveIssueModal
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        data={issue}
+        onSubmit={handleArchiveIssue}
+      />
       <div className="flex h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
         <div className="flex items-center justify-end px-5 pb-3">
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="flex flex-wrap items-center gap-4">
             {currentUser && !is_archived && (
               <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
             )}
-
-            <button
-              type="button"
-              className="rounded-md border border-custom-border-200 p-2 shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary"
-              onClick={handleCopyText}
-            >
-              <LinkIcon className="h-3.5 w-3.5" />
-            </button>
-
-            {is_editable && (
-              <button
-                type="button"
-                className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
-                onClick={() => setDeleteIssueModal(true)}
-              >
-                <Trash2 className="h-3.5 w-3.5" />
-              </button>
-            )}
+            <div className="flex items-center flex-wrap gap-2.5 text-custom-text-300">
+              <Tooltip tooltipContent="Copy link">
+                <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"
+                  onClick={handleCopyText}
+                >
+                  <LinkIcon className="h-4 w-4" />
+                </button>
+              </Tooltip>
+              {isArchivingAllowed && (
+                <Tooltip
+                  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",
+                      {
+                        "hover:text-custom-text-200": isInArchivableGroup,
+                        "cursor-not-allowed text-custom-text-400": !isInArchivableGroup,
+                      }
+                    )}
+                    onClick={() => {
+                      if (!isInArchivableGroup) return;
+                      setArchiveIssueModal(true);
+                    }}
+                  >
+                    <ArchiveIcon className="h-4 w-4" />
+                  </button>
+                </Tooltip>
+              )}
+              {is_editable && (
+                <Tooltip tooltipContent="Delete">
+                  <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"
+                    onClick={() => setDeleteIssueModal(true)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </Tooltip>
+              )}
+            </div>
           </div>
         </div>
 
-        <div className="h-full w-full overflow-y-auto px-5">
+        <div className="h-full w-full overflow-y-auto px-6">
           <h5 className="text-sm font-medium mt-6">Properties</h5>
           {/* TODO: render properties using a common component */}
           <div className={`mt-3 mb-2 space-y-2.5 ${!is_editable ? "opacity-60" : ""}`}>
@@ -161,7 +200,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
-              <ProjectMemberDropdown
+              <MemberDropdown
                 value={issue?.assignee_ids ?? undefined}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
                 disabled={!is_editable}
@@ -198,7 +237,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <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">
-                <CalendarDays className="h-4 w-4 flex-shrink-0" />
+                <CalendarClock className="h-4 w-4 flex-shrink-0" />
                 <span>Start date</span>
               </div>
               <DateDropdown
@@ -224,7 +263,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <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">
-                <CalendarDays className="h-4 w-4 flex-shrink-0" />
+                <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
                 <span>Due date</span>
               </div>
               <DateDropdown
@@ -242,7 +281,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonContainerClassName="w-full text-left"
                 buttonClassName={cn("text-sm", {
                   "text-custom-text-400": !issue.target_date,
-                  "text-red-500": targetDateDistance <= 0,
+                  "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
                 })}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline !text-custom-text-100"
diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
index ab5983960..7321ef27f 100644
--- a/web/components/issues/issue-detail/subscription.tsx
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -67,7 +67,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
       >
         {loading ? (
           <span>
-            <span className="hidden sm:block">Loading</span>...
+            <span className="hidden sm:block">Loading...</span>
           </span>
         ) : isSubscribed ? (
           <div className="hidden sm:block">Unsubscribe</div>
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 472d68085..43f62e5be 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -26,6 +26,8 @@ interface IBaseCalendarRoot {
     [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;
   isCompletedCycle?: boolean;
@@ -114,6 +116,16 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
                     ? 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
+                }
                 readOnly={!isEditingAllowed || isCompletedCycle}
               />
             )}
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index 4dcaab335..badb849fb 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -73,42 +73,44 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
         <CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
-        <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
-        <div className="h-full w-full overflow-y-auto vertical-scrollbar scrollbar-lg">
-          {layout === "month" && (
-            <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
-              {allWeeksOfActiveMonth &&
-                Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
-                  <CalendarWeekDays
-                    issuesFilterStore={issuesFilterStore}
-                    key={weekIndex}
-                    week={week}
-                    issues={issues}
-                    groupedIssueIds={groupedIssueIds}
-                    enableQuickIssueCreate
-                    disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-                    quickActions={quickActions}
-                    quickAddCallback={quickAddCallback}
-                    viewId={viewId}
-                    readOnly={readOnly}
-                  />
-                ))}
-            </div>
-          )}
-          {layout === "week" && (
-            <CalendarWeekDays
-              issuesFilterStore={issuesFilterStore}
-              week={issueCalendarView.allDaysOfActiveWeek}
-              issues={issues}
-              groupedIssueIds={groupedIssueIds}
-              enableQuickIssueCreate
-              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-              quickActions={quickActions}
-              quickAddCallback={quickAddCallback}
-              viewId={viewId}
-              readOnly={readOnly}
-            />
-          )}
+        <div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
+          <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
+          <div className="h-full w-full">
+            {layout === "month" && (
+              <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+                {allWeeksOfActiveMonth &&
+                  Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
+                    <CalendarWeekDays
+                      issuesFilterStore={issuesFilterStore}
+                      key={weekIndex}
+                      week={week}
+                      issues={issues}
+                      groupedIssueIds={groupedIssueIds}
+                      enableQuickIssueCreate
+                      disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                      quickActions={quickActions}
+                      quickAddCallback={quickAddCallback}
+                      viewId={viewId}
+                      readOnly={readOnly}
+                    />
+                  ))}
+              </div>
+            )}
+            {layout === "week" && (
+              <CalendarWeekDays
+                issuesFilterStore={issuesFilterStore}
+                week={issueCalendarView.allDaysOfActiveWeek}
+                issues={issues}
+                groupedIssueIds={groupedIssueIds}
+                enableQuickIssueCreate
+                disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                quickActions={quickActions}
+                quickAddCallback={quickAddCallback}
+                viewId={viewId}
+                readOnly={readOnly}
+              />
+            )}
+          </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 85ab152a7..f92365a58 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -91,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                   snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
                     ? "bg-custom-background-90"
                     : "bg-custom-background-100"
-                } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
+                } ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 49ca84eb6..b5d0c4346 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -26,7 +26,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   const {
     router: { workspaceSlug, projectId },
   } = useApplication();
-  const { getProjectById } = useProject();
+  const { getProjectIdentifierById } = useProject();
   const { getProjectStates } = useProjectState();
   const { peekIssue, setPeekIssue } = useIssueDetail();
   // states
@@ -79,6 +79,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                   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 && (
@@ -107,7 +108,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                           }}
                         />
                         <div className="flex-shrink-0 text-xs text-custom-text-300">
-                          {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
+                          {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
                         </div>
                         <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
                           <div className="truncate text-xs">{issue.name}</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 1ef08ea61..4daf68b9f 100644
--- a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -33,6 +33,10 @@ export const CycleCalendarLayout: React.FC = observer(() => {
         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]
   );
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 d2b23e176..cb474d25e 100644
--- a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -34,6 +34,10 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
         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]
   );
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 40f72e7b8..d42a8c5d2 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -28,6 +28,11 @@ export const CalendarLayout: React.FC = observer(() => {
 
         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]
   );
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 573a9cf20..0110aea2b 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
@@ -16,6 +16,7 @@ export interface IViewCalendarLayout {
     [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
     [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
   };
 }
 
diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
index f5ec41e96..a4b714c94 100644
--- a/web/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
new file mode 100644
index 000000000..6299bebd7
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -0,0 +1,48 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// hooks
+import { useCycle } from "hooks/store";
+// ui
+import { CycleGroupIcon } from "@plane/ui";
+// types
+import { TCycleGroups } from "@plane/types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedCycleFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const { getCycleById } = useCycle();
+
+  return (
+    <>
+      {values.map((cycleId) => {
+        const cycleDetails = getCycleById(cycleId) ?? null;
+
+        if (!cycleDetails) return null;
+
+        const cycleStatus = (cycleDetails?.status ? cycleDetails?.status.toLocaleLowerCase() : "draft") as TCycleGroups;
+
+        return (
+          <div key={cycleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
+            <span className="normal-case">{cycleDetails.name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(cycleId)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index 4ca2538e5..03b0c5138 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,12 +1,15 @@
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
+import { useRouter } from "next/router";
 // hooks
-import { useUser } from "hooks/store";
+import { useApplication, useUser } from "hooks/store";
 // components
 import {
+  AppliedCycleFilters,
   AppliedDateFilters,
   AppliedLabelsFilters,
   AppliedMembersFilters,
+  AppliedModuleFilters,
   AppliedPriorityFilters,
   AppliedProjectFilters,
   AppliedStateFilters,
@@ -34,6 +37,9 @@ const dateFilters = ["start_date", "target_date"];
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, states, alwaysAllowEditing } = props;
   // store hooks
+  const {
+    router: { moduleId, cycleId },
+  } = useApplication();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -104,6 +110,20 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
                   values={value}
                 />
               )}
+              {filterKey === "cycle" && !cycleId && (
+                <AppliedCycleFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("cycle", val)}
+                  values={value}
+                />
+              )}
+              {filterKey === "module" && !moduleId && (
+                <AppliedModuleFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("module", val)}
+                  values={value}
+                />
+              )}
               {isEditingAllowed && (
                 <button
                   type="button"
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/index.ts b/web/components/issues/issue-layouts/filters/applied-filters/index.ts
index a9feecfdf..ba074e84f 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/index.ts
+++ b/web/components/issues/issue-layouts/filters/applied-filters/index.ts
@@ -5,5 +5,7 @@ export * from "./label";
 export * from "./members";
 export * from "./priority";
 export * from "./project";
+export * from "./module";
+export * from "./cycle";
 export * from "./state";
 export * from "./state-group";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
new file mode 100644
index 000000000..790383f61
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -0,0 +1,44 @@
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// hooks
+import { useModule } from "hooks/store";
+// ui
+import { DiceIcon } from "@plane/ui";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+
+  return (
+    <>
+      {values.map((moduleId) => {
+        const moduleDetails = getModuleById(moduleId) ?? null;
+
+        if (!moduleDetails) return null;
+
+        return (
+          <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <DiceIcon className="h-3 w-3 flex-shrink-0" />
+            <span className="normal-case">{moduleDetails.name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(moduleId)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index 3c94b4f3f..131bea46b 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
@@ -11,7 +11,7 @@ import {
   FilterSubGroupBy,
 } from "components/issues";
 // types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueGroupByOptions } from "@plane/types";
 import { ILayoutDisplayFiltersOptions } from "constants/issue";
 
 type Props = {
@@ -20,6 +20,7 @@ type Props = {
   handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
   handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
   layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  ignoreGroupedFilters?: Partial<TIssueGroupByOptions>[];
 };
 
 export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
@@ -29,6 +30,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
     handleDisplayFiltersUpdate,
     handleDisplayPropertiesUpdate,
     layoutDisplayFiltersOptions,
+    ignoreGroupedFilters = [],
   } = props;
 
   const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
@@ -54,6 +56,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
                 group_by: val,
               })
             }
+            ignoreGroupedFilters={ignoreGroupedFilters}
           />
         </div>
       )}
@@ -71,6 +74,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
                 })
               }
               subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
+              ignoreGroupedFilters={ignoreGroupedFilters}
             />
           </div>
         )}
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
index 659d86d08..a4478e834 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,6 +1,5 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // types
@@ -12,10 +11,11 @@ type Props = {
   displayFilters: IIssueDisplayFilterOptions;
   groupByOptions: TIssueGroupByOptions[];
   handleUpdate: (val: TIssueGroupByOptions) => void;
+  ignoreGroupedFilters: Partial<TIssueGroupByOptions>[];
 };
 
 export const FilterGroupBy: React.FC<Props> = observer((props) => {
-  const { displayFilters, groupByOptions, handleUpdate } = props;
+  const { displayFilters, groupByOptions, handleUpdate, ignoreGroupedFilters } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -34,6 +34,7 @@ export const FilterGroupBy: React.FC<Props> = observer((props) => {
           {ISSUE_GROUP_BY_OPTIONS.filter((option) => groupByOptions.includes(option.key)).map((groupBy) => {
             if (displayFilters.layout === "kanban" && selectedSubGroupBy !== null && groupBy.key === selectedSubGroupBy)
               return null;
+            if (ignoreGroupedFilters.includes(groupBy?.key)) return null;
 
             return (
               <FilterOption
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 331051161..198148a84 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,6 +1,5 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // types
@@ -12,10 +11,11 @@ type Props = {
   displayFilters: IIssueDisplayFilterOptions;
   handleUpdate: (val: TIssueGroupByOptions) => void;
   subGroupByOptions: TIssueGroupByOptions[];
+  ignoreGroupedFilters: Partial<TIssueGroupByOptions>[];
 };
 
 export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
-  const { displayFilters, handleUpdate, subGroupByOptions } = props;
+  const { displayFilters, handleUpdate, subGroupByOptions, ignoreGroupedFilters } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -33,6 +33,7 @@ export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
         <div>
           {ISSUE_GROUP_BY_OPTIONS.filter((option) => subGroupByOptions.includes(option.key)).map((subGroupBy) => {
             if (selectedGroupBy !== null && subGroupBy.key === selectedGroupBy) return null;
+            if (ignoreGroupedFilters.includes(subGroupBy?.key)) return null;
 
             return (
               <FilterOption
diff --git a/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
new file mode 100644
index 000000000..47b3b0506
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import sortBy from "lodash/sortBy";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+import { useApplication, useCycle } from "hooks/store";
+// ui
+import { Loader, CycleGroupIcon } from "@plane/ui";
+// types
+import { TCycleGroups } from "@plane/types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterCycle: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  // hooks
+  const {
+    router: { projectId },
+  } = useApplication();
+  const { getCycleById, getProjectCycleIds } = useCycle();
+
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  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 handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  const cycleStatus = (status: TCycleGroups) => (status ? status.toLocaleLowerCase() : "draft") as TCycleGroups;
+
+  return (
+    <>
+      <FilterHeader
+        title={`Cycle ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((cycle) => (
+                  <FilterOption
+                    key={cycle.id}
+                    isChecked={appliedFilters?.includes(cycle.id) ? true : false}
+                    onClick={() => handleUpdate(cycle.id)}
+                    icon={
+                      <CycleGroupIcon cycleGroup={cycleStatus(cycle?.status)} className="h-3.5 w-3.5 flex-shrink-0" />
+                    }
+                    title={cycle.name}
+                    activePulse={cycleStatus(cycle?.status) === "current" ? true : false}
+                  />
+                ))}
+                {filteredOptions.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"}
+                  </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/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
index 19e3ec841..5a41ccf4d 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,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";
+// hooks
+import { useApplication } from "hooks/store";
 // components
 import {
   FilterAssignees,
@@ -13,6 +15,8 @@ import {
   FilterState,
   FilterStateGroup,
   FilterTargetDate,
+  FilterCycle,
+  FilterModule,
 } from "components/issues";
 // hooks
 import useDebounce from "hooks/use-debounce";
@@ -32,8 +36,11 @@ type Props = {
 };
 
 export const FilterSelection: React.FC<Props> = observer((props) => {
-  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, memberIds, states, onSearchCapture } =
-    props;
+  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, memberIds, states, onSearchCapture } = props;
+  // hooks
+  const {
+    router: { moduleId, cycleId },
+  } = useApplication();
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
 
@@ -111,6 +118,28 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           </div>
         )}
 
+        {/* cycle */}
+        {isFilterEnabled("cycle") && !cycleId && (
+          <div className="py-2">
+            <FilterCycle
+              appliedFilters={filters.cycle ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("cycle", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* module */}
+        {isFilterEnabled("module") && !moduleId && (
+          <div className="py-2">
+            <FilterModule
+              appliedFilters={filters.module ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("module", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
         {/* assignees */}
         {isFilterEnabled("mentions") && (
           <div className="py-2">
diff --git a/web/components/issues/issue-layouts/filters/header/filters/index.ts b/web/components/issues/issue-layouts/filters/header/filters/index.ts
index 2d3a04d0f..ab5756bf4 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/index.ts
+++ b/web/components/issues/issue-layouts/filters/header/filters/index.ts
@@ -8,4 +8,6 @@ export * from "./project";
 export * from "./start-date";
 export * from "./state-group";
 export * from "./state";
+export * from "./cycle";
+export * from "./module";
 export * from "./target-date";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/module.tsx b/web/components/issues/issue-layouts/filters/header/filters/module.tsx
new file mode 100644
index 000000000..49e00f84d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import sortBy from "lodash/sortBy";
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+import { useApplication, useModule } from "hooks/store";
+// ui
+import { Loader, DiceIcon } from "@plane/ui";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterModule: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  // hooks
+  const {
+    router: { projectId },
+  } = useApplication();
+  const { getModuleById, getProjectModuleIds } = useModule();
+
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  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 handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Module ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((cycle) => (
+                  <FilterOption
+                    key={cycle.id}
+                    isChecked={appliedFilters?.includes(cycle.id) ? true : false}
+                    onClick={() => handleUpdate(cycle.id)}
+                    icon={<DiceIcon className="h-3 w-3 flex-shrink-0" />}
+                    title={cycle.name}
+                  />
+                ))}
+                {filteredOptions.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"}
+                  </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/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
index f46d962ea..26c7bfaf5 100644
--- a/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -8,10 +8,11 @@ type Props = {
   title: React.ReactNode;
   onClick?: () => void;
   multiple?: boolean;
+  activePulse?: boolean;
 };
 
 export const FilterOption: React.FC<Props> = (props) => {
-  const { icon, isChecked, multiple = true, onClick, title } = props;
+  const { icon, isChecked, multiple = true, onClick, title, activePulse = false } = props;
 
   return (
     <button
@@ -30,6 +31,9 @@ export const FilterOption: React.FC<Props> = (props) => {
         {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
         <div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
       </div>
+      {activePulse && (
+        <div className="flex-shrink-0 text-xs w-2 h-2 rounded-full bg-custom-primary-100 animate-pulse ml-auto" />
+      )}
     </button>
   );
 };
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 b5f092aba..ec33872eb 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -5,12 +5,9 @@ import { observer } from "mobx-react-lite";
 import { useIssues, useUser } from "hooks/store";
 // components
 import { GanttQuickAddIssueForm, IssueGanttBlock } from "components/issues";
-import {
-  GanttChartRoot,
-  IBlockUpdateData,
-  renderIssueBlocksStructure,
-  IssueGanttSidebar,
-} from "components/gantt-chart";
+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";
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index 18a767455..209d876ac 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -29,6 +29,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   const handleIssuePeekOverview = () =>
     workspaceSlug &&
     issueDetails &&
+    !issueDetails.tempId &&
     setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
 
   return (
@@ -65,7 +66,7 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { issueId } = props;
   // store hooks
   const { getStateById } = useProjectState();
-  const { getProjectById } = useProject();
+  const { getProjectIdentifierById } = useProject();
   const {
     router: { workspaceSlug },
   } = useApplication();
@@ -75,7 +76,7 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
   } = useIssueDetail();
   // derived values
   const issueDetails = getIssueById(issueId);
-  const projectDetails = issueDetails && getProjectById(issueDetails?.project_id);
+  const projectIdentifier = issueDetails && getProjectIdentifierById(issueDetails?.project_id);
   const stateDetails = issueDetails && getStateById(issueDetails?.state_id);
 
   const handleIssuePeekOverview = () =>
@@ -89,11 +90,12 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
       target="_blank"
       onClick={handleIssuePeekOverview}
       className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+      disabled={!!issueDetails?.tempId}
     >
-      <div className="relative flex h-full w-full cursor-pointer items-center gap-2" onClick={handleIssuePeekOverview}>
+      <div className="relative flex h-full w-full cursor-pointer items-center gap-2">
         {stateDetails && <StateGroupIcon stateGroup={stateDetails?.group} color={stateDetails?.color} />}
         <div className="flex-shrink-0 text-xs text-custom-text-300">
-          {projectDetails?.identifier} {issueDetails?.sequence_id}
+          {projectIdentifier} {issueDetails?.sequence_id}
         </div>
         <Tooltip tooltipHeading="Title" tooltipContent={issueDetails?.name}>
           <span className="flex-grow truncate text-sm font-medium">{issueDetails?.name}</span>
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 3b31f6b67..0d7a984b1 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -41,6 +41,8 @@ export interface IBaseKanBanLayout {
     [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;
@@ -188,6 +190,12 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         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
+        }
         readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index fb83a14e3..8446e7328 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -42,7 +42,7 @@ interface IssueDetailsBlockProps {
 const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((props: IssueDetailsBlockProps) => {
   const { issue, handleIssues, quickActions, isReadOnly, displayProperties } = props;
   // hooks
-  const { getProjectById } = useProject();
+  const { getProjectIdentifierById } = useProject();
   const {
     router: { workspaceSlug },
   } = useApplication();
@@ -64,7 +64,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
       <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
         <div className="relative">
           <div className="line-clamp-1 text-xs text-custom-text-300">
-            {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
+            {getProjectIdentifierById(issue.project_id)}-{issue.sequence_id}
           </div>
           <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
         </div>
@@ -82,6 +82,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           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>
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index b645afe30..cefa84826 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -1,6 +1,15 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssueDetail, useKanbanView, useLabel, useMember, useProject, useProjectState } from "hooks/store";
+import {
+  useCycle,
+  useIssueDetail,
+  useKanbanView,
+  useLabel,
+  useMember,
+  useModule,
+  useProject,
+  useProjectState,
+} from "hooks/store";
 // components
 import { HeaderGroupByCard } from "./headers/group-by-card";
 import { KanbanGroup } from "./kanban-group";
@@ -79,14 +88,16 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
   const member = useMember();
   const project = useProject();
   const label = useLabel();
+  const cycle = useCycle();
+  const _module = useModule();
   const projectState = useProjectState();
   const { peekIssue } = useIssueDetail();
 
-  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member);
+  const list = getGroupByColumns(group_by as GroupByColumnTypes, project, cycle, _module, label, projectState, member);
 
   if (!list) return null;
 
-  const groupWithIssues = list.filter((_list) => (issueIds as TGroupedIssues)[_list.id]?.length > 0);
+  const groupWithIssues = list.filter((_list) => (issueIds as TGroupedIssues)?.[_list.id]?.length > 0);
 
   const groupList = showEmptyGroup ? list : groupWithIssues;
 
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index 7cbda05e1..a2f9ec4fb 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -80,6 +80,10 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         preloadedData = { ...preloadedData, state_id: groupValue };
       } else if (groupByKey === "priority") {
         preloadedData = { ...preloadedData, priority: groupValue };
+      } else if (groupByKey === "cycle") {
+        preloadedData = { ...preloadedData, cycle_id: groupValue };
+      } else if (groupByKey === "module") {
+        preloadedData = { ...preloadedData, module_ids: [groupValue] };
       } else if (groupByKey === "labels" && groupValue != "None") {
         preloadedData = { ...preloadedData, label_ids: [groupValue] };
       } else if (groupByKey === "assignees" && groupValue != "None") {
@@ -96,6 +100,10 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         preloadedData = { ...preloadedData, state_id: subGroupValue };
       } else if (subGroupByKey === "priority") {
         preloadedData = { ...preloadedData, priority: subGroupValue };
+      } else if (groupByKey === "cycle") {
+        preloadedData = { ...preloadedData, cycle_id: subGroupValue };
+      } else if (groupByKey === "module") {
+        preloadedData = { ...preloadedData, module_ids: [subGroupValue] };
       } else if (subGroupByKey === "labels" && subGroupValue != "None") {
         preloadedData = { ...preloadedData, label_ids: [subGroupValue] };
       } else if (subGroupByKey === "assignees" && subGroupValue != "None") {
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 2b311f6eb..001169933 100644
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
@@ -39,6 +39,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
 
         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]
   );
@@ -46,7 +51,15 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
 
-  const canEditIssueProperties = () => !isCompletedCycle;
+  const canEditIssueProperties = useCallback(() => !isCompletedCycle, [isCompletedCycle]);
+
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) throw new Error();
+      return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+    },
+    [issues?.addIssueToCycle, workspaceSlug, projectId, cycleId]
+  );
 
   return (
     <BaseKanBanRoot
@@ -57,10 +70,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
       QuickActions={CycleIssueQuickActions}
       viewId={cycleId?.toString() ?? ""}
       storeType={EIssuesStoreType.CYCLE}
-      addIssuesToView={(issueIds: string[]) => {
-        if (!workspaceSlug || !projectId || !cycleId) throw new Error();
-        return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
-      }}
+      addIssuesToView={addIssuesToView}
       canEditPropertiesBasedOnProject={canEditIssueProperties}
       isCompletedCycle={isCompletedCycle}
     />
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 c3af69e6e..07ad7eb83 100644
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -38,6 +38,11 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
 
         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]
   );
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 2e189c9f4..c6c041654 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
@@ -35,6 +35,11 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
 
         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]
   );
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 89e2ee187..efd86bc8e 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -32,6 +32,11 @@ export const KanBanLayout: React.FC = observer(() => {
 
         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]
   );
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 1cdf71d45..8dd33b728 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
@@ -17,6 +17,7 @@ export interface IViewKanBanLayout {
     [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
     [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
   };
 }
 
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index 5fdb58ef0..7b57752f2 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -18,7 +18,7 @@ import {
 } from "@plane/types";
 // constants
 import { EIssueActions } from "../types";
-import { useLabel, useMember, useProject, useProjectState } from "hooks/store";
+import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "hooks/store";
 import { getGroupByColumns } from "../utils";
 import { TCreateModalStoreTypes } from "constants/issue";
 
@@ -217,10 +217,28 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
   const member = useMember();
   const project = useProject();
   const label = useLabel();
+  const cycle = useCycle();
+  const _module = useModule();
   const projectState = useProjectState();
 
-  const groupByList = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member);
-  const subGroupByList = getGroupByColumns(sub_group_by as GroupByColumnTypes, project, label, projectState, member);
+  const groupByList = getGroupByColumns(
+    group_by as GroupByColumnTypes,
+    project,
+    cycle,
+    _module,
+    label,
+    projectState,
+    member
+  );
+  const subGroupByList = getGroupByColumns(
+    sub_group_by as GroupByColumnTypes,
+    project,
+    cycle,
+    _module,
+    label,
+    projectState,
+    member
+  );
 
   if (!groupByList || !subGroupByList) return null;
 
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 6cec6d358..ffe9de661 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -41,6 +41,8 @@ interface IBaseListRoot {
     [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;
@@ -109,6 +111,12 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         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
+        }
         readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 7a34311cc..cc04ed716 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -26,7 +26,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const {
     router: { workspaceSlug },
   } = useApplication();
-  const { getProjectById } = useProject();
+  const { getProjectIdentifierById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
 
   const updateIssue = async (issueToUpdate: TIssue) => {
@@ -45,7 +45,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   if (!issue) return null;
 
   const canEditIssueProperties = canEditProperties(issue.project_id);
-  const projectDetails = getProjectById(issue.project_id);
+  const projectIdentifier = getProjectIdentifierById(issue.project_id);
 
   return (
     <div
@@ -56,7 +56,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     >
       {displayProperties && displayProperties?.key && (
         <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-          {projectDetails?.identifier}-{issue.sequence_id}
+          {projectIdentifier}-{issue.sequence_id}
         </div>
       )}
 
@@ -76,6 +76,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           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>
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index e148d5131..c6f82c2be 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -3,7 +3,7 @@ import { useRef } from "react";
 import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
 import { HeaderGroupByCard } from "./headers/group-by-card";
 // hooks
-import { useLabel, useMember, useProject, useProjectState } from "hooks/store";
+import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "hooks/store";
 // types
 import {
   GroupByColumnTypes,
@@ -65,10 +65,21 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const project = useProject();
   const label = useLabel();
   const projectState = useProjectState();
+  const cycle = useCycle();
+  const _module = useModule();
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
-  const groups = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
+  const groups = getGroupByColumns(
+    group_by as GroupByColumnTypes,
+    project,
+    cycle,
+    _module,
+    label,
+    projectState,
+    member,
+    true
+  );
 
   if (!groups) return null;
 
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 e369410af..f435d0639 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
@@ -5,6 +5,8 @@ export interface IQuickActionProps {
   handleDelete: () => Promise<void>;
   handleUpdate?: (data: TIssue) => Promise<void>;
   handleRemoveFromView?: () => Promise<void>;
+  handleArchive?: () => Promise<void>;
+  handleRestore?: () => Promise<void>;
   customActionButton?: React.ReactElement;
   portalElement?: HTMLDivElement | null;
   readOnly?: boolean;
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 2ba4ea7f5..6e70d00d0 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
@@ -24,6 +24,11 @@ export const ArchivedIssueListLayout: FC = observer(() => {
 
         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]
   );
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 e30c207b6..5c15ebe60 100644
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
@@ -38,13 +38,26 @@ export const CycleListLayout: React.FC = observer(() => {
 
         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;
 
-  const canEditIssueProperties = () => !isCompletedCycle;
+  const canEditIssueProperties = useCallback(() => !isCompletedCycle, [isCompletedCycle]);
+
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) throw new Error();
+      return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+    },
+    [issues?.addIssueToCycle, workspaceSlug, projectId, cycleId]
+  );
 
   return (
     <BaseListRoot
@@ -54,10 +67,7 @@ export const CycleListLayout: React.FC = observer(() => {
       issueActions={issueActions}
       viewId={cycleId?.toString()}
       storeType={EIssuesStoreType.CYCLE}
-      addIssuesToView={(issueIds: string[]) => {
-        if (!workspaceSlug || !projectId || !cycleId) throw new Error();
-        return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
-      }}
+      addIssuesToView={addIssuesToView}
       canEditPropertiesBasedOnProject={canEditIssueProperties}
       isCompletedCycle={isCompletedCycle}
     />
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 520a2da32..95c62d34c 100644
--- a/web/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -37,6 +37,11 @@ export const ModuleListLayout: React.FC = observer(() => {
 
         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]
   );
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 91e80382a..fa4a05bbc 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
@@ -36,6 +36,11 @@ export const ProfileIssuesListLayout: FC = observer(() => {
 
         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]
   );
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 f0479b71f..9e1b5830b 100644
--- a/web/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -33,6 +33,11 @@ export const ListLayout: FC = observer(() => {
 
         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]
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 dd384ba93..5ecfd6da2 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
@@ -17,6 +17,7 @@ export interface IViewListLayout {
     [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
     [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
   };
 }
 
diff --git a/web/components/issues/issue-layouts/properties/all-properties.tsx b/web/components/issues/issue-layouts/properties/all-properties.tsx
index 840967565..776a1cd46 100644
--- a/web/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,11 +1,10 @@
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { differenceInCalendarDays } from "date-fns";
-import { Layers, Link, Paperclip } from "lucide-react";
+import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 import xor from "lodash/xor";
 // hooks
-import { useEventTracker, useEstimate, useLabel, useIssues } from "hooks/store";
+import { useEventTracker, useEstimate, useLabel, useIssues, useProjectState } from "hooks/store";
 // components
 import { IssuePropertyLabels } from "../properties/labels";
 import { Tooltip } from "@plane/ui";
@@ -14,13 +13,15 @@ import {
   DateDropdown,
   EstimateDropdown,
   PriorityDropdown,
-  ProjectMemberDropdown,
+  MemberDropdown,
   ModuleDropdown,
   CycleDropdown,
   StateDropdown,
 } from "components/dropdowns";
 // 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
@@ -47,11 +48,14 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const {
     issues: { addIssueToCycle, removeIssueFromCycle },
   } = useIssues(EIssuesStoreType.CYCLE);
+  const { areEstimatesEnabledForCurrentProject } = useEstimate();
+  const { getStateById } = useProjectState();
   // router
   const router = useRouter();
   const { workspaceSlug, cycleId, moduleId } = router.query;
-  const { areEstimatesEnabledForCurrentProject } = useEstimate();
   const currentLayout = `${activeLayout} layout`;
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
 
   const issueOperations = useMemo(
     () => ({
@@ -231,8 +235,6 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
 
-  const targetDateDistance = issue.target_date ? differenceInCalendarDays(new Date(issue.target_date), new Date()) : 1;
-
   return (
     <div className={className}>
       {/* basic properties */}
@@ -284,6 +286,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             onChange={handleStartDate}
             maxDate={maxDate ?? undefined}
             placeholder="Start date"
+            icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             disabled={isReadOnly}
             showTooltip
@@ -299,8 +302,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             onChange={handleTargetDate}
             minDate={minDate ?? undefined}
             placeholder="Due date"
+            icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
-            buttonClassName={targetDateDistance <= 0 ? "text-red-500" : ""}
+            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
             clearIconClassName="!text-custom-text-100"
             disabled={isReadOnly}
             showTooltip
@@ -311,7 +315,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       {/* assignee */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee">
         <div className="h-5">
-          <ProjectMemberDropdown
+          <MemberDropdown
             projectId={issue?.project_id}
             value={issue?.assignee_ids}
             onChange={handleAssignee}
@@ -344,7 +348,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       {/* cycles */}
       {cycleId === undefined && (
         <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
-          <div className="h-5">
+          <div className="h-5 truncate">
             <CycleDropdown
               projectId={issue?.project_id}
               value={issue?.cycle_id}
@@ -378,12 +382,17 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC
         displayProperties={displayProperties}
         displayPropertyKey="sub_issue_count"
-        shouldRenderProperty={(properties) => !!properties.sub_issue_count}
+        shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!issue.sub_issues_count}
       >
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
           <div
-            onClick={redirectToIssueDetail}
-            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 px-2.5 py-1 cursor-pointer"
+            onClick={issue.sub_issues_count ? redirectToIssueDetail : () => {}}
+            className={cn(
+              "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1",
+              {
+                "hover:bg-custom-background-80 cursor-pointer": issue.sub_issues_count,
+              }
+            )}
           >
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.sub_issues_count}</div>
@@ -395,7 +404,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC
         displayProperties={displayProperties}
         displayPropertyKey="attachment_count"
-        shouldRenderProperty={(properties) => !!properties.attachment_count}
+        shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
         <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
           <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">
@@ -409,7 +418,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       <WithDisplayPropertiesHOC
         displayProperties={displayProperties}
         displayPropertyKey="link"
-        shouldRenderProperty={(properties) => !!properties.link}
+        shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
         <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
           <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">
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 7e14ad3da..0c1091d39 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -1,10 +1,11 @@
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 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 { Tooltip } from "@plane/ui";
@@ -48,6 +49,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   } = props;
   // states
   const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -60,18 +65,45 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
 
   const storeLabels = getProjectLabels(projectId);
 
-  const openDropDown = () => {
-    if (!storeLabels && workspaceSlug && projectId) {
-      setIsLoading(true);
+  const onOpen = () => {
+    if (!storeLabels && workspaceSlug && projectId)
       fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
-    }
   };
 
   const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
     onClose && onClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(openDropDown, handleClose, false);
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
@@ -176,6 +208,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   return (
     <Combobox
       as="div"
+      ref={dropdownRef}
       className={`w-auto max-w-full flex-shrink-0 text-left ${className}`}
       value={value}
       onChange={onChange}
@@ -194,64 +227,68 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={openDropDown}
+          onClick={handleOnClick}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
 
-      <Combobox.Options className="fixed z-10">
-        <div
-          className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
-          ref={setPopperElement}
-          style={styles.popper}
-          {...attributes.popper}
-        >
-          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-            <Search className="h-3.5 w-3.5 text-custom-text-300" />
-            <Combobox.Input
-              className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search"
-              displayValue={(assigned: any) => assigned?.name || ""}
-            />
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-300" />
+              <Combobox.Input
+                ref={inputRef}
+                className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search"
+                displayValue={(assigned: any) => assigned?.name || ""}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+              {isLoading ? (
+                <p className="text-center text-custom-text-200">Loading...</p>
+              ) : filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && (
+                          <div className="flex-shrink-0">
+                            <Check className={`h-3.5 w-3.5`} />
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )}
+            </div>
           </div>
-          <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
-            {isLoading ? (
-              <p className="text-center text-custom-text-200">Loading...</p>
-            ) : filteredOptions.length > 0 ? (
-              filteredOptions.map((option) => (
-                <Combobox.Option
-                  key={option.value}
-                  value={option.value}
-                  className={({ active, selected }) =>
-                    `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                      active ? "bg-custom-background-80" : ""
-                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                  }
-                >
-                  {({ selected }) => (
-                    <>
-                      {option.content}
-                      {selected && (
-                        <div className="flex-shrink-0">
-                          <Check className={`h-3.5 w-3.5`} />
-                        </div>
-                      )}
-                    </>
-                  )}
-                </Combobox.Option>
-              ))
-            ) : (
-              <span className="flex items-center gap-2 p-1">
-                <p className="text-left text-custom-text-200 ">No matching results</p>
-              </span>
-            )}
-          </div>
-        </div>
-      </Combobox.Options>
+        </Combobox.Options>
+      )}
     </Combobox>
   );
 });
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 bc6518911..1d0472454 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,13 +1,14 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
-import { CustomMenu } from "@plane/ui";
-import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+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";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker } from "hooks/store";
+import { useEventTracker, useProjectState } from "hooks/store";
 // components
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
@@ -15,30 +16,50 @@ 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> = (props) => {
-  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
+export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+  } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // hooks
+  // store hooks
   const { setTrackElement } = useEventTracker();
+  const { getStateById } = useProjectState();
   // toast alert
   const { setToastAlert } = useToast();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  const isEditingAllowed = !readOnly;
+  // auth
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup =
+    !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
 
-  const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+
+  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+  const handleCopyIssueLink = () =>
+    copyUrlToClipboard(issueLink).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
     );
-  };
 
   const duplicateIssuePayload = omit(
     {
@@ -50,6 +71,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
 
   return (
     <>
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
       <DeleteIssueModal
         data={issue}
         isOpen={deleteIssueModal}
@@ -75,55 +102,81 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         closeOnSelect
         ellipsis
       >
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleCopyIssueLink();
-          }}
-        >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement("Global issues");
+              setIssueToEdit(issue);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Pencil className="h-3 w-3" />
+              Edit
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        <CustomMenu.MenuItem onClick={handleOpenInNewTab}>
+          <div className="flex items-center gap-2">
+            <ExternalLink className="h-3 w-3" />
+            Open in new tab
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
           <div className="flex items-center gap-2">
             <Link className="h-3 w-3" />
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {!readOnly && (
-          <>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement("Global issues");
-                setIssueToEdit(issue);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement("Global issues");
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Copy className="h-3 w-3" />
+              Make a copy
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isArchivingAllowed && (
+          <CustomMenu.MenuItem onClick={() => setArchiveIssueModal(true)} disabled={!isInArchivableGroup}>
+            {isInArchivableGroup ? (
               <div className="flex items-center gap-2">
-                <Pencil className="h-3 w-3" />
-                Edit issue
+                <ArchiveIcon className="h-3 w-3" />
+                Archive
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement("Global issues");
-                setCreateUpdateIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Copy className="h-3 w-3" />
-                Make a copy
+            ) : (
+              <div className="flex items-start gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                <div className="-mt-1">
+                  <p>Archive</p>
+                  <p className="text-xs text-custom-text-400">
+                    Only completed or canceled
+                    <br />
+                    issues can be archived
+                  </p>
+                </div>
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement("Global issues");
-                setDeleteIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Trash2 className="h-3 w-3" />
-                Delete issue
-              </div>
-            </CustomMenu.MenuItem>
-          </>
+            )}
+          </CustomMenu.MenuItem>
+        )}
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement("Global issues");
+              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/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index e331d7182..9bad920c8 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,12 +1,12 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
-import { Link, Trash2 } from "lucide-react";
+import { ExternalLink, Link, RotateCcw, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 import { useEventTracker, useIssues, useUser } from "hooks/store";
 // components
-import { DeleteArchivedIssueModal } from "components/issues";
+import { DeleteIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
@@ -15,40 +15,41 @@ import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, customActionButton, portalElement, readOnly = false } = props;
+  const { issue, handleDelete, handleRestore, customActionButton, portalElement, readOnly = false } = props;
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // states
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  // toast alert
-  const { setToastAlert } = useToast();
-
   // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
-
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-  // store hooks
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
-
+  // derived values
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+  // auth
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
+  const isRestoringAllowed = handleRestore && isEditingAllowed;
+  // toast alert
+  const { setToastAlert } = useToast();
 
-  const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/archived-issues/${issue.id}`).then(() =>
+  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/archived-issues/${issue.id}`;
+
+  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+  const handleCopyIssueLink = () =>
+    copyUrlToClipboard(issueLink).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
     );
-  };
 
   return (
     <>
-      <DeleteArchivedIssueModal
+      <DeleteIssueModal
         data={issue}
         isOpen={deleteIssueModal}
         handleClose={() => setDeleteIssueModal(false)}
@@ -61,17 +62,27 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         closeOnSelect
         ellipsis
       >
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleCopyIssueLink();
-          }}
-        >
+        {isRestoringAllowed && (
+          <CustomMenu.MenuItem onClick={handleRestore}>
+            <div className="flex items-center gap-2">
+              <RotateCcw className="h-3 w-3" />
+              Restore
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        <CustomMenu.MenuItem onClick={handleOpenInNewTab}>
+          <div className="flex items-center gap-2">
+            <ExternalLink className="h-3 w-3" />
+            Open in new tab
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
           <div className="flex items-center gap-2">
             <Link className="h-3 w-3" />
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {isEditingAllowed && !readOnly && (
+        {isEditingAllowed && (
           <CustomMenu.MenuItem
             onClick={() => {
               setTrackElement(activeLayout);
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 4699b1c81..3c0ed9800 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,13 +1,14 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
-import { CustomMenu } from "@plane/ui";
-import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
+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";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssues, useProjectState, useUser } from "hooks/store";
 // components
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
@@ -16,13 +17,15 @@ 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> = (props) => {
+export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
   const {
     issue,
     handleDelete,
     handleUpdate,
     handleRemoveFromView,
+    handleArchive,
     customActionButton,
     portalElement,
     readOnly = false,
@@ -31,33 +34,42 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query;
   // store hooks
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
-  // toast alert
-  const { setToastAlert } = useToast();
-
-  // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
-
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const { getStateById } = useProjectState();
+  // toast alert
+  const { setToastAlert } = useToast();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  // auth
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup =
+    !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
+  const isDeletingAllowed = isEditingAllowed;
 
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
-  const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+
+  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+
+  const handleCopyIssueLink = () =>
+    copyUrlToClipboard(issueLink).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
     );
-  };
 
   const duplicateIssuePayload = omit(
     {
@@ -69,6 +81,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
 
   return (
     <>
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
       <DeleteIssueModal
         data={issue}
         isOpen={deleteIssueModal}
@@ -94,68 +112,96 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         closeOnSelect
         ellipsis
       >
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleCopyIssueLink();
-          }}
-        >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIssueToEdit({
+                ...issue,
+                cycle_id: cycleId?.toString() ?? null,
+              });
+              setTrackElement(activeLayout);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Pencil className="h-3 w-3" />
+              Edit
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        <CustomMenu.MenuItem onClick={handleOpenInNewTab}>
+          <div className="flex items-center gap-2">
+            <ExternalLink className="h-3 w-3" />
+            Open in new tab
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
           <div className="flex items-center gap-2">
             <Link className="h-3 w-3" />
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {isEditingAllowed && !readOnly && (
-          <>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setIssueToEdit({
-                  ...issue,
-                  cycle_id: cycleId?.toString() ?? null,
-                });
-                setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Copy className="h-3 w-3" />
+              Make a copy
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleRemoveFromView && handleRemoveFromView();
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <XCircle className="h-3 w-3" />
+              Remove from cycle
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isArchivingAllowed && (
+          <CustomMenu.MenuItem onClick={() => setArchiveIssueModal(true)} disabled={!isInArchivableGroup}>
+            {isInArchivableGroup ? (
               <div className="flex items-center gap-2">
-                <Pencil className="h-3 w-3" />
-                Edit issue
+                <ArchiveIcon className="h-3 w-3" />
+                Archive
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                handleRemoveFromView && handleRemoveFromView();
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <XCircle className="h-3 w-3" />
-                Remove from cycle
+            ) : (
+              <div className="flex items-start gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                <div className="-mt-1">
+                  <p>Archive</p>
+                  <p className="text-xs text-custom-text-400">
+                    Only completed or canceled
+                    <br />
+                    issues can be archived
+                  </p>
+                </div>
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Copy className="h-3 w-3" />
-                Make a copy
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement(activeLayout);
-                setDeleteIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Trash2 className="h-3 w-3" />
-                Delete issue
-              </div>
-            </CustomMenu.MenuItem>
-          </>
+            )}
+          </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/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 6eabfda59..5532fa2a0 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,13 +1,14 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
-import { CustomMenu } from "@plane/ui";
-import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
+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";
 // hooks
 import useToast from "hooks/use-toast";
-import { useIssues, useEventTracker, useUser } from "hooks/store";
+import { useIssues, useEventTracker, useUser, useProjectState } from "hooks/store";
 // components
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
@@ -16,13 +17,15 @@ 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> = (props) => {
+export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
   const {
     issue,
     handleDelete,
     handleUpdate,
     handleRemoveFromView,
+    handleArchive,
     customActionButton,
     portalElement,
     readOnly = false,
@@ -31,33 +34,42 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query;
   // store hooks
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
-  // toast alert
-  const { setToastAlert } = useToast();
-
-  // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
-
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const { getStateById } = useProjectState();
+  // toast alert
+  const { setToastAlert } = useToast();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  // auth
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup =
+    !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
+  const isDeletingAllowed = isEditingAllowed;
 
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
-  const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+
+  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+
+  const handleCopyIssueLink = () =>
+    copyUrlToClipboard(issueLink).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
     );
-  };
 
   const duplicateIssuePayload = omit(
     {
@@ -69,6 +81,12 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
 
   return (
     <>
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
       <DeleteIssueModal
         data={issue}
         isOpen={deleteIssueModal}
@@ -94,67 +112,95 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         closeOnSelect
         ellipsis
       >
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleCopyIssueLink();
-          }}
-        >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIssueToEdit({ ...issue, module_ids: moduleId ? [moduleId.toString()] : [] });
+              setTrackElement(activeLayout);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Pencil className="h-3 w-3" />
+              Edit
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        <CustomMenu.MenuItem onClick={handleOpenInNewTab}>
+          <div className="flex items-center gap-2">
+            <ExternalLink className="h-3 w-3" />
+            Open in new tab
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
           <div className="flex items-center gap-2">
             <Link className="h-3 w-3" />
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {isEditingAllowed && !readOnly && (
-          <>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setIssueToEdit({ ...issue, module_ids: moduleId ? [moduleId.toString()] : [] });
-                setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Copy className="h-3 w-3" />
+              Make a copy
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleRemoveFromView && handleRemoveFromView();
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <XCircle className="h-3 w-3" />
+              Remove from module
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isArchivingAllowed && (
+          <CustomMenu.MenuItem onClick={() => setArchiveIssueModal(true)} disabled={!isInArchivableGroup}>
+            {isInArchivableGroup ? (
               <div className="flex items-center gap-2">
-                <Pencil className="h-3 w-3" />
-                Edit issue
+                <ArchiveIcon className="h-3 w-3" />
+                Archive
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                handleRemoveFromView && handleRemoveFromView();
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <XCircle className="h-3 w-3" />
-                Remove from module
+            ) : (
+              <div className="flex items-start gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                <div className="-mt-1">
+                  <p>Archive</p>
+                  <p className="text-xs text-custom-text-400">
+                    Only completed or canceled
+                    <br />
+                    issues can be archived
+                  </p>
+                </div>
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Copy className="h-3 w-3" />
-                Make a copy
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                setTrackElement(activeLayout);
-                setDeleteIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Trash2 className="h-3 w-3" />
-                Delete issue
-              </div>
-            </CustomMenu.MenuItem>
-          </>
+            )}
+          </CustomMenu.MenuItem>
+        )}
+        {isDeletingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              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/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 1d6d88f25..b32929009 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,13 +1,14 @@
 import { useState } from "react";
 import { useRouter } from "next/router";
-import { CustomMenu } from "@plane/ui";
-import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+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";
 // hooks
-import { useEventTracker, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssues, useProjectState, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
@@ -16,9 +17,18 @@ 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> = (props) => {
-  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
+export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+  } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -26,48 +36,64 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
   // store hooks
   const {
     membership: { currentProjectRole },
   } = useUser();
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
-
+  const { getStateById } = useProjectState();
+  // derived values
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
-
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const stateDetails = getStateById(issue.state_id);
+  // auth
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER && !readOnly;
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup =
+    !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
+  const isDeletingAllowed = isEditingAllowed;
 
   const { setToastAlert } = useToast();
 
-  const handleCopyIssueLink = () => {
-    copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`).then(() =>
+  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+
+  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+
+  const handleCopyIssueLink = () =>
+    copyUrlToClipboard(issueLink).then(() =>
       setToastAlert({
         type: "success",
         title: "Link copied",
         message: "Issue link copied to clipboard",
       })
     );
-  };
+
+  const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
 
   const duplicateIssuePayload = omit(
     {
       ...issue,
       name: `${issue.name} (copy)`,
+      is_draft: isDraftIssue ? false : issue.is_draft,
     },
     ["id"]
   );
 
-  const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
-
   return (
     <>
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
       <DeleteIssueModal
         data={issue}
         isOpen={deleteIssueModal}
         handleClose={() => setDeleteIssueModal(false)}
         onSubmit={handleDelete}
       />
-
       <CreateUpdateIssueModal
         isOpen={createUpdateIssueModal}
         onClose={() => {
@@ -81,7 +107,6 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         storeType={EIssuesStoreType.PROJECT}
         isDraft={isDraftIssue}
       />
-
       <CustomMenu
         placement="bottom-start"
         customButton={customActionButton}
@@ -89,55 +114,81 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         closeOnSelect
         ellipsis
       >
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleCopyIssueLink();
-          }}
-        >
+        {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>
+        )}
+        <CustomMenu.MenuItem onClick={handleOpenInNewTab}>
+          <div className="flex items-center gap-2">
+            <ExternalLink className="h-3 w-3" />
+            Open in new tab
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
           <div className="flex items-center gap-2">
             <Link className="h-3 w-3" />
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {isEditingAllowed && !readOnly && (
-          <>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement(activeLayout);
-                setIssueToEdit(issue);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
+        {isEditingAllowed && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
+              setCreateUpdateIssueModal(true);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Copy className="h-3 w-3" />
+              Make a copy
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+        {isArchivingAllowed && (
+          <CustomMenu.MenuItem onClick={() => setArchiveIssueModal(true)} disabled={!isInArchivableGroup}>
+            {isInArchivableGroup ? (
               <div className="flex items-center gap-2">
-                <Pencil className="h-3 w-3" />
-                Edit issue
+                <ArchiveIcon className="h-3 w-3" />
+                Archive
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement(activeLayout);
-                setCreateUpdateIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Copy className="h-3 w-3" />
-                Make a copy
+            ) : (
+              <div className="flex items-start gap-2">
+                <ArchiveIcon className="h-3 w-3" />
+                <div className="-mt-1">
+                  <p>Archive</p>
+                  <p className="text-xs text-custom-text-400">
+                    Only completed or canceled
+                    <br />
+                    issues can be archived
+                  </p>
+                </div>
               </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                setTrackElement(activeLayout);
-                setDeleteIssueModal(true);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <Trash2 className="h-3 w-3" />
-                Delete issue
-              </div>
-            </CustomMenu.MenuItem>
-          </>
+            )}
+          </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/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index c7173c30e..f678809e9 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
@@ -34,7 +34,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
   const { commandPalette: commandPaletteStore } = useApplication();
   const {
     issuesFilter: { filters, fetchFilters, updateFilters },
-    issues: { loader, groupedIssueIds, fetchIssues, updateIssue, removeIssue },
+    issues: { loader, groupedIssueIds, fetchIssues, updateIssue, removeIssue, archiveIssue },
   } = useIssues(EIssuesStoreType.GLOBAL);
 
   const { dataViewId, issueIds } = groupedIssueIds;
@@ -88,11 +88,15 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
     }
   };
 
-  useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
-    if (workspaceSlug) {
-      await fetchAllGlobalViews(workspaceSlug.toString());
-    }
-  });
+  useSWR(
+    workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS_${workspaceSlug}` : null,
+    async () => {
+      if (workspaceSlug) {
+        await fetchAllGlobalViews(workspaceSlug.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
 
   useSWR(
     workspaceSlug && globalViewId ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${globalViewId}` : null,
@@ -107,7 +111,8 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
         await fetchIssues(workspaceSlug.toString(), globalViewId.toString(), issueIds ? "mutation" : "init-loader");
         routerFilterParams();
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   const canEditProperties = useCallback(
@@ -137,6 +142,12 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
         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]
@@ -146,6 +157,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
     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
     []
@@ -173,10 +185,12 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
         issue={issue}
         handleUpdate={async () => handleIssues({ ...issue }, EIssueActions.UPDATE)}
         handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
+        handleArchive={async () => handleIssues(issue, EIssueActions.ARCHIVE)}
         portalElement={portalElement}
+        readOnly={!canEditProperties(issue.project_id)}
       />
     ),
-    [handleIssues]
+    [canEditProperties, handleIssues]
   );
 
   const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
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 d927d5e0b..524f79d8a 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
@@ -39,7 +39,8 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
           issues?.groupedIssueIds ? "mutation" : "init-loader"
         );
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) {
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 4982179ce..8b1f23fa4 100644
--- a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -53,7 +53,8 @@ export const CycleLayoutRoot: React.FC = observer(() => {
           cycleId.toString()
         );
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
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 e9af8b178..62c058463 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
@@ -39,7 +39,8 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
           issues?.groupedIssueIds ? "mutation" : "init-loader"
         );
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout || undefined;
@@ -66,7 +67,7 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
             <DraftKanBanLayout />
           ) : null}
           {/* issue peek overview */}
-          <IssuePeekOverview />
+          <IssuePeekOverview is_draft />
         </div>
       )}
     </div>
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 e2b64f893..b4bf79f4a 100644
--- a/web/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -49,7 +49,8 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
           moduleId.toString()
         );
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   const userFilters = issuesFilter?.issueFilters?.filters;
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 f952909c3..474171165 100644
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -30,21 +30,25 @@ export const ProjectLayoutRoot: FC = observer(() => {
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
   const { captureIssuesListOpenedEvent } = useEventTracker();
 
-  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null, async () => {
-    if (workspaceSlug && projectId) {
-      await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
-      captureIssuesListOpenedEvent({
-        path: router.asPath,
-        filters: issuesFilter?.issueFilters?.filters,
-        element_id: projectId,
-      });
-      await issues?.fetchIssues(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issues?.groupedIssueIds ? "mutation" : "init-loader"
-      );
-    }
-  });
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
+        captureIssuesListOpenedEvent({
+          path: router.asPath,
+          filters: issuesFilter?.issueFilters?.filters,
+          element_id: projectId,
+        });
+        await issues?.fetchIssues(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          issues?.groupedIssueIds ? "mutation" : "init-loader"
+        );
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
 
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
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 c4b68a5b0..e035d6fa9 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
@@ -47,7 +47,8 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
           viewId.toString()
         );
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   const issueActions = useMemo(
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 a94455a0b..2f09b55d6 100644
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -26,6 +26,8 @@ interface IBaseSpreadsheetRoot {
     [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>;
   };
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
   isCompletedCycle?: boolean;
@@ -103,6 +105,12 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         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
+        }
         portalElement={portalElement}
         readOnly={!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 b9450141b..c4b8ea0ef 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { ProjectMemberDropdown } from "components/dropdowns";
+import { MemberDropdown } from "components/dropdowns";
 // types
 import { TIssue } from "@plane/types";
 
@@ -17,7 +17,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
-      <ProjectMemberDropdown
+      <MemberDropdown
         value={issue?.assignee_ids ?? []}
         onChange={(data) => {
           onChange(
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 83b46baf6..88fbf1054 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -30,7 +30,6 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
 
   const handleCycle = useCallback(
     async (cycleId: string | null) => {
-      console.log("cycleId", cycleId);
       if (!workspaceSlug || !issue || issue.cycle_id === cycleId) return;
       if (cycleId) await addIssueToCycle(workspaceSlug.toString(), issue.project_id, cycleId, [issue.id]);
       else await removeIssueFromCycle(workspaceSlug.toString(), issue.project_id, issue.cycle_id ?? "", issue.id);
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 e07500c03..e261797af 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,13 +1,16 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import { CalendarCheck2 } from "lucide-react";
+// hooks
+import { useProjectState } from "hooks/store";
 // components
 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";
 // types
 import { TIssue } from "@plane/types";
-import { cn } from "helpers/common.helper";
 
 type Props = {
   issue: TIssue;
@@ -18,8 +21,10 @@ type Props = {
 
 export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props) => {
   const { issue, onChange, disabled, onClose } = props;
-
-  const targetDateDistance = issue.target_date ? differenceInCalendarDays(new Date(issue.target_date), new Date()) : 1;
+  // store hooks
+  const { getStateById } = useProjectState();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
 
   return (
     <div className="h-11 border-b-[0.5px] border-custom-border-200">
@@ -39,10 +44,11 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
         }}
         disabled={disabled}
         placeholder="Due date"
+        icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full"
         buttonClassName={cn("rounded-none text-left", {
-          "text-red-500": targetDateDistance <= 0,
+          "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
         })}
         clearIconClassName="!text-custom-text-100"
         onClose={onClose}
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 82c00fc12..01f7fe793 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,5 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { CalendarClock } from "lucide-react";
 // components
 import { DateDropdown } from "components/dropdowns";
 // helpers
@@ -35,6 +36,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         }}
         disabled={disabled}
         placeholder="Start date"
+        icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
         buttonClassName="rounded-none text-left"
         buttonContainerClassName="w-full"
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 20864eb96..c635ca85e 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
@@ -5,6 +5,8 @@ import { useRouter } from "next/router";
 import { useApplication } from "hooks/store";
 // types
 import { TIssue } from "@plane/types";
+// helpers
+import { cn } from "helpers/common.helper";
 
 type Props = {
   issue: TIssue;
@@ -30,8 +32,13 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
 
   return (
     <div
-      onClick={redirectToIssueDetail}
-      className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80 cursor-pointer"
+      onClick={issue?.sub_issues_count ? redirectToIssueDetail : () => {}}
+      className={cn(
+        "flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80",
+        {
+          "cursor-pointer": issue?.sub_issues_count,
+        }
+      )}
     >
       {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
     </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 1f6a755a4..9f4810c78 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -142,7 +142,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   //hooks
-  const { getProjectById } = useProject();
+  const { getProjectIdentifierById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
@@ -187,8 +187,9 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   return (
     <>
       <td
+        id={`issue-${issueDetail.id}`}
         className={cn(
-          "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-[1] border-custom-border-200",
+          "sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200",
           {
             "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
           },
@@ -212,14 +213,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                   isMenuActive ? "opacity-0" : "opacity-100"
                 }`}
               >
-                {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
+                {getProjectIdentifierById(issueDetail.project_id)}-{issueDetail.sequence_id}
               </span>
 
-              {canEditProperties(issueDetail.project_id) && (
-                <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
-                  {quickActions(issueDetail, customActionButton, portalElement.current)}
-                </div>
-              )}
+              <div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
+                {quickActions(issueDetail, customActionButton, portalElement.current)}
+              </div>
             </div>
 
             {issueDetail.sub_issues_count > 0 && (
@@ -239,11 +238,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           target="_blank"
           onClick={() => handleIssuePeekOverview(issueDetail)}
           className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          disabled={!!issueDetail?.tempId}
         >
           <div className="w-full overflow-hidden">
             <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
               <div
-                className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
+                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"
                 tabIndex={-1}
               >
                 {issueDetail.name}
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 7f92bd74c..6d3037de0 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
@@ -32,6 +32,10 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
         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]
   );
@@ -39,7 +43,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
 
-  const canEditIssueProperties = () => !isCompletedCycle;
+  const canEditIssueProperties = useCallback(() => !isCompletedCycle, [isCompletedCycle]);
 
   return (
     <BaseSpreadsheetRoot
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 6538ab20b..af8abc801 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -31,6 +31,10 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
         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]
   );
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 e260daee1..4ce54cff5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -28,6 +28,11 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
 
         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]
   );
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 28b766cd1..d8b7571e5 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
@@ -17,6 +17,7 @@ export interface IViewSpreadsheetLayout {
     [EIssueActions.DELETE]: (issue: TIssue) => Promise<void>;
     [EIssueActions.UPDATE]?: (issue: TIssue) => Promise<void>;
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
+    [EIssueActions.ARCHIVE]?: (issue: TIssue) => Promise<void>;
   };
 }
 
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index 8a4461cb5..98666d790 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -19,10 +19,10 @@ export const SpreadsheetHeader = (props: Props) => {
   const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled } = props;
 
   return (
-    <thead className="sticky top-0 left-0 z-[2] border-b-[0.5px] border-custom-border-100">
+    <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-custom-border-100">
       <tr>
         <th
-          className="sticky left-0 z-[2] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
+          className="sticky left-0 z-[15] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-custom-border-100"
           tabIndex={-1}
         >
           <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
diff --git a/web/components/issues/issue-layouts/types.ts b/web/components/issues/issue-layouts/types.ts
index f4c2d8100..d1c3f4fd9 100644
--- a/web/components/issues/issue-layouts/types.ts
+++ b/web/components/issues/issue-layouts/types.ts
@@ -2,4 +2,6 @@ export enum EIssueActions {
   UPDATE = "update",
   DELETE = "delete",
   REMOVE = "remove",
+  ARCHIVE = "archive",
+  RESTORE = "restore",
 }
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index 83ec363b9..ce49d774d 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -1,16 +1,25 @@
-import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
-import { ISSUE_PRIORITIES } from "constants/issue";
-import { renderEmoji } from "helpers/emoji.helper";
+import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
+// stores
 import { IMemberRootStore } from "store/member";
 import { IProjectStore } from "store/project/project.store";
 import { IStateStore } from "store/state.store";
-import { GroupByColumnTypes, IGroupByColumn } from "@plane/types";
-import { STATE_GROUPS } from "constants/state";
 import { ILabelStore } from "store/label.store";
+import { ICycleStore } from "store/cycle.store";
+import { IModuleStore } from "store/module.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 getGroupByColumns = (
   groupBy: GroupByColumnTypes | null,
   project: IProjectStore,
+  cycle: ICycleStore,
+  module: IModuleStore,
   label: ILabelStore,
   projectState: IStateStore,
   member: IMemberRootStore,
@@ -19,6 +28,10 @@ export const getGroupByColumns = (
   switch (groupBy) {
     case "project":
       return getProjectColumns(project);
+    case "cycle":
+      return getCycleColumns(project, cycle);
+    case "module":
+      return getModuleColumns(project, module);
     case "state":
       return getStateColumns(projectState);
     case "state_detail.group":
@@ -55,6 +68,68 @@ const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined
     }) as any;
 };
 
+const getCycleColumns = (projectStore: IProjectStore, cycleStore: ICycleStore): IGroupByColumn[] | undefined => {
+  const { currentProjectDetails } = projectStore;
+  const { getProjectCycleIds, getCycleById } = cycleStore;
+
+  if (!currentProjectDetails || !currentProjectDetails?.id) return;
+
+  const cycleIds = currentProjectDetails?.id ? getProjectCycleIds(currentProjectDetails?.id) : undefined;
+  if (!cycleIds) return;
+
+  const cycles = [];
+
+  cycleIds.map((cycleId) => {
+    const cycle = getCycleById(cycleId);
+    if (cycle) {
+      const cycleStatus = cycle.status ? (cycle.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+      cycles.push({
+        id: cycle.id,
+        name: cycle.name,
+        icon: <CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />,
+        payload: { cycle_id: cycle.id },
+      });
+    }
+  });
+  cycles.push({
+    id: "None",
+    name: "None",
+    icon: <ContrastIcon className="h-3.5 w-3.5" />,
+  });
+
+  return cycles as any;
+};
+
+const getModuleColumns = (projectStore: IProjectStore, moduleStore: IModuleStore): IGroupByColumn[] | undefined => {
+  const { currentProjectDetails } = projectStore;
+  const { getProjectModuleIds, getModuleById } = moduleStore;
+
+  if (!currentProjectDetails || !currentProjectDetails?.id) return;
+
+  const moduleIds = currentProjectDetails?.id ? getProjectModuleIds(currentProjectDetails?.id) : undefined;
+  if (!moduleIds) return;
+
+  const modules = [];
+
+  moduleIds.map((moduleId) => {
+    const _module = getModuleById(moduleId);
+    if (_module)
+      modules.push({
+        id: _module.id,
+        name: _module.name,
+        icon: <DiceIcon className="w-3.5 h-3.5" />,
+        payload: { module_ids: [_module.id] },
+      });
+  }) as any;
+  modules.push({
+    id: "None",
+    name: "None",
+    icon: <DiceIcon className="w-3.5 h-3.5" />,
+  });
+
+  return modules as any;
+};
+
 const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefined => {
   const { projectStates } = projectState;
   if (!projectStates) return;
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 564cc9b08..e2e4e784e 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -23,11 +23,11 @@ import {
   ModuleDropdown,
   PriorityDropdown,
   ProjectDropdown,
-  ProjectMemberDropdown,
+  MemberDropdown,
   StateDropdown,
 } from "components/dropdowns";
 // ui
-import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
+import { Button, CustomMenu, Input, Loader, ToggleSwitch } from "@plane/ui";
 // helpers
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
@@ -64,6 +64,31 @@ export interface IssueFormProps {
 const aiService = new AIService();
 const fileService = new FileService();
 
+const TAB_INDICES = [
+  "name",
+  "description_html",
+  "feeling_lucky",
+  "ai_assistant",
+  "state_id",
+  "priority",
+  "assignee_ids",
+  "label_ids",
+  "start_date",
+  "target_date",
+  "cycle_id",
+  "module_ids",
+  "estimate_point",
+  "parent_id",
+  "create_more",
+  "discard_button",
+  "draft_button",
+  "submit_button",
+  "project_id",
+  "remove_parent",
+];
+
+const getTabIndex = (key: string) => TAB_INDICES.findIndex((tabIndex) => tabIndex === key) + 1;
+
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const {
     data,
@@ -137,6 +162,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
+  useEffect(() => {
+    if (data?.description_html) setValue("description_html", data?.description_html);
+  }, [data?.description_html]);
+
   const issueName = watch("name");
 
   const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue = false) => {
@@ -271,7 +300,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       }}
                       buttonVariant="border-with-text"
                       // TODO: update tabIndex logic
-                      tabIndex={19}
+                      tabIndex={getTabIndex("project_id")}
                     />
                   </div>
                 )}
@@ -294,15 +323,18 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                 </span>
                 <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
-                <X
-                  className="h-3 w-3 cursor-pointer"
+                <button
+                  type="button"
+                  className="grid place-items-center"
                   onClick={() => {
                     setValue("parent_id", null);
                     handleFormChange();
                     setSelectedParentIssue(null);
                   }}
-                  tabIndex={20}
-                />
+                  tabIndex={getTabIndex("remove_parent")}
+                >
+                  <X className="h-3 w-3 cursor-pointer" />
+                </button>
               </div>
             </div>
           )}
@@ -332,85 +364,110 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     hasError={Boolean(errors.name)}
                     placeholder="Issue Title"
                     className="resize-none text-xl w-full"
-                    tabIndex={1}
+                    tabIndex={getTabIndex("name")}
                   />
                 )}
               />
               <div className="relative">
-                <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 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 ${
-                        iAmFeelingLucky ? "cursor-wait" : ""
-                      }`}
-                      onClick={handleAutoGenerateDescription}
-                      disabled={iAmFeelingLucky}
-                      tabIndex={3}
-                    >
-                      {iAmFeelingLucky ? (
-                        "Generating response"
-                      ) : (
-                        <>
-                          <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
-                        </>
-                      )}
-                    </button>
-                  )}
-                  {envConfig?.has_openai_configured && (
-                    <GptAssistantPopover
-                      isOpen={gptAssistantModal}
-                      projectId={projectId}
-                      handleClose={() => {
-                        setGptAssistantModal((prevData) => !prevData);
-                        // this is done so that the title do not reset after gpt popover closed
-                        reset(getValues());
-                      }}
-                      onResponse={(response) => {
-                        handleAiAssistance(response);
-                      }}
-                      placement="top-end"
-                      button={
+                {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.Item width="100%" height="26px" />
+                    <div className="flex items-center gap-2">
+                      <Loader.Item width="26px" height="26px" />
+                      <Loader.Item width="400px" height="26px" />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Loader.Item width="26px" height="26px" />
+                      <Loader.Item width="400px" height="26px" />
+                    </div>
+                    <Loader.Item width="80%" height="26px" />
+                    <div className="flex items-center gap-2">
+                      <Loader.Item width="50%" height="26px" />
+                    </div>
+                    <div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 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">
+                      {issueName && issueName.trim() !== "" && envConfig?.has_openai_configured && (
                         <button
                           type="button"
-                          className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
-                          onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                          tabIndex={4}
+                          className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
+                            iAmFeelingLucky ? "cursor-wait" : ""
+                          }`}
+                          onClick={handleAutoGenerateDescription}
+                          disabled={iAmFeelingLucky}
+                          tabIndex={getTabIndex("feeling_lucky")}
                         >
-                          <Sparkle className="h-4 w-4" />
-                          AI
+                          {iAmFeelingLucky ? (
+                            "Generating response"
+                          ) : (
+                            <>
+                              <Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
+                            </>
+                          )}
                         </button>
-                      }
+                      )}
+                      {envConfig?.has_openai_configured && (
+                        <GptAssistantPopover
+                          isOpen={gptAssistantModal}
+                          projectId={projectId}
+                          handleClose={() => {
+                            setGptAssistantModal((prevData) => !prevData);
+                            // this is done so that the title do not reset after gpt popover closed
+                            reset(getValues());
+                          }}
+                          onResponse={(response) => {
+                            handleAiAssistance(response);
+                          }}
+                          placement="top-end"
+                          button={
+                            <button
+                              type="button"
+                              className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                              onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                              tabIndex={getTabIndex("ai_assistant")}
+                            >
+                              <Sparkle className="h-4 w-4" />
+                              AI
+                            </button>
+                          }
+                        />
+                      )}
+                    </div>
+                    <Controller
+                      name="description_html"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <RichTextEditorWithRef
+                          cancelUploadImage={fileService.cancelUpload}
+                          uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                          deleteFile={fileService.getDeleteImageFunction(workspaceId)}
+                          restoreFile={fileService.getRestoreImageFunction(workspaceId)}
+                          ref={editorRef}
+                          debouncedUpdatesEnabled={false}
+                          value={
+                            !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                              ? watch("description_html")
+                              : value
+                          }
+                          initialValue={data?.description_html}
+                          customClassName="min-h-[7rem] border-custom-border-100"
+                          onChange={(description: Object, description_html: string) => {
+                            onChange(description_html);
+                            handleFormChange();
+                          }}
+                          mentionHighlights={mentionHighlights}
+                          mentionSuggestions={mentionSuggestions}
+                          // tabIndex={2}
+                        />
+                      )}
                     />
-                  )}
-                </div>
-                <Controller
-                  name="description_html"
-                  control={control}
-                  render={({ field: { value, onChange } }) => (
-                    <RichTextEditorWithRef
-                      cancelUploadImage={fileService.cancelUpload}
-                      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                      deleteFile={fileService.getDeleteImageFunction(workspaceId)}
-                      restoreFile={fileService.getRestoreImageFunction(workspaceId)}
-                      ref={editorRef}
-                      debouncedUpdatesEnabled={false}
-                      value={
-                        !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
-                          ? watch("description_html")
-                          : value
-                      }
-                      customClassName="min-h-[7rem] border-custom-border-100"
-                      onChange={(description: Object, description_html: string) => {
-                        onChange(description_html);
-                        handleFormChange();
-                      }}
-                      mentionHighlights={mentionHighlights}
-                      mentionSuggestions={mentionSuggestions}
-                      // tabIndex={2}
-                    />
-                  )}
-                />
+                  </Fragment>
+                )}
               </div>
               <div className="flex flex-wrap items-center gap-2">
                 <Controller
@@ -426,7 +483,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         }}
                         projectId={projectId}
                         buttonVariant="border-with-text"
-                        tabIndex={6}
+                        tabIndex={getTabIndex("state_id")}
                       />
                     </div>
                   )}
@@ -443,7 +500,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           handleFormChange();
                         }}
                         buttonVariant="border-with-text"
-                        tabIndex={7}
+                        tabIndex={getTabIndex("priority")}
                       />
                     </div>
                   )}
@@ -453,7 +510,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   name="assignee_ids"
                   render={({ field: { value, onChange } }) => (
                     <div className="h-7">
-                      <ProjectMemberDropdown
+                      <MemberDropdown
                         projectId={projectId}
                         value={value}
                         onChange={(assigneeIds) => {
@@ -464,7 +521,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
                         placeholder="Assignees"
                         multiple
-                        tabIndex={8}
+                        tabIndex={getTabIndex("assignee_ids")}
                       />
                     </div>
                   )}
@@ -482,7 +539,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           handleFormChange();
                         }}
                         projectId={projectId}
-                        tabIndex={9}
+                        tabIndex={getTabIndex("label_ids")}
                       />
                     </div>
                   )}
@@ -498,6 +555,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         buttonVariant="border-with-text"
                         maxDate={maxDate ?? undefined}
                         placeholder="Start date"
+                        tabIndex={getTabIndex("start_date")}
                       />
                     </div>
                   )}
@@ -513,6 +571,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         buttonVariant="border-with-text"
                         minDate={minDate ?? undefined}
                         placeholder="Due date"
+                        tabIndex={getTabIndex("target_date")}
                       />
                     </div>
                   )}
@@ -531,7 +590,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           }}
                           value={value}
                           buttonVariant="border-with-text"
-                          tabIndex={11}
+                          tabIndex={getTabIndex("cycle_id")}
                         />
                       </div>
                     )}
@@ -551,7 +610,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                             handleFormChange();
                           }}
                           buttonVariant="border-with-text"
-                          tabIndex={12}
+                          tabIndex={getTabIndex("module_ids")}
                           multiple
                           showCount
                         />
@@ -573,7 +632,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           }}
                           projectId={projectId}
                           buttonVariant="border-with-text"
-                          tabIndex={13}
+                          tabIndex={getTabIndex("estimate_point")}
                         />
                       </div>
                     )}
@@ -603,7 +662,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     </button>
                   }
                   placement="bottom-start"
-                  tabIndex={14}
+                  tabIndex={getTabIndex("parent_id")}
                 >
                   {watch("parent_id") ? (
                     <>
@@ -653,7 +712,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             onKeyDown={(e) => {
               if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
             }}
-            tabIndex={15}
+            tabIndex={getTabIndex("create_more")}
           >
             <div className="flex cursor-pointer items-center justify-center">
               <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
@@ -661,7 +720,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             <span className="text-xs">Create more</span>
           </div>
           <div className="flex items-center gap-2">
-            <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={16}>
+            <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={getTabIndex("discard_button")}>
               Discard
             </Button>
 
@@ -673,7 +732,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     size="sm"
                     loading={isSubmitting}
                     onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
-                    tabIndex={17}
+                    tabIndex={getTabIndex("draft_button")}
                   >
                     {isSubmitting ? "Moving" : "Move from draft"}
                   </Button>
@@ -683,7 +742,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     size="sm"
                     loading={isSubmitting}
                     onClick={handleSubmit((data) => handleFormSubmit(data, true))}
-                    tabIndex={17}
+                    tabIndex={getTabIndex("draft_button")}
                   >
                     {isSubmitting ? "Saving" : "Save as draft"}
                   </Button>
@@ -691,7 +750,13 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               </Fragment>
             )}
 
-            <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={isDraft ? 18 : 17}>
+            <Button
+              variant="primary"
+              type="submit"
+              size="sm"
+              loading={isSubmitting}
+              tabIndex={isDraft ? getTabIndex("submit_button") : getTabIndex("draft_button")}
+            >
               {data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
             </Button>
           </div>
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 339045b90..dc73bc77a 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -3,7 +3,16 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
 // hooks
-import { useApplication, useEventTracker, useCycle, useIssues, useModule, useProject } from "hooks/store";
+import {
+  useApplication,
+  useEventTracker,
+  useCycle,
+  useIssues,
+  useModule,
+  useProject,
+  useWorkspace,
+  useIssueDetail,
+} from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -39,6 +48,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
   const [createMore, setCreateMore] = useState(false);
   const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
+  const [description, setDescription] = useState<string | undefined>(undefined);
   // store hooks
   const { captureIssueEvent } = useEventTracker();
   const {
@@ -52,7 +62,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
   const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
   const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
-  const { issues: draftIssueStore } = useIssues(EIssuesStoreType.DRAFT);
+  const { issues: draftIssues } = useIssues(EIssuesStoreType.DRAFT);
+  const { fetchIssue } = useIssueDetail();
   // store mapping based on current store
   const issueStores = {
     [EIssuesStoreType.PROJECT]: {
@@ -81,11 +92,26 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   // toast alert
   const { setToastAlert } = useToast();
   // local storage
-  const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
+  const { storedValue: localStorageDraftIssues, setValue: setLocalStorageDraftIssue } = useLocalStorage<
+    Record<string, Partial<TIssue>>
+  >("draftedIssue", {});
   // current store details
   const { store: currentIssueStore, viewId } = issueStores[storeType];
 
+  const fetchIssueDetail = async (issueId: string | undefined) => {
+    if (!workspaceSlug) return;
+    if (!projectId || issueId === undefined) {
+      setDescription("<p></p>");
+      return;
+    }
+    const response = await fetchIssue(workspaceSlug, projectId, issueId, isDraft ? "DRAFT" : "DEFAULT");
+    if (response) setDescription(response?.description_html || "<p></p>");
+  };
+
   useEffect(() => {
+    // fetching issue details
+    if (isOpen) fetchIssueDetail(data?.id);
+
     // if modal is closed, reset active project to null
     // and return to avoid activeProjectId being set to some other project
     if (!isOpen) {
@@ -104,6 +130,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     // in the url. This has the least priority.
     if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProjectId)
       setActiveProjectId(projectId ?? workspaceProjectIds?.[0]);
+
+    // clearing up the description state when we leave the component
+    return () => setDescription(undefined);
   }, [data, projectId, workspaceProjectIds, isOpen, activeProjectId]);
 
   const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
@@ -126,9 +155,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
   const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
     if (changesMade && saveDraftIssueInLocalStorage) {
-      const draftIssue = JSON.stringify(changesMade);
-      setLocalStorageDraftIssue(draftIssue);
+      // updating the current edited issue data in the local storage
+      let draftIssues = localStorageDraftIssues ? localStorageDraftIssues : {};
+      if (workspaceSlug) {
+        draftIssues = { ...draftIssues, [workspaceSlug]: changesMade };
+        setLocalStorageDraftIssue(draftIssues);
+      }
     }
+
     setActiveProjectId(null);
     onClose();
   };
@@ -141,7 +175,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
     try {
       const response = is_draft_issue
-        ? await draftIssueStore.createIssue(workspaceSlug, payload.project_id, payload)
+        ? await draftIssues.createIssue(workspaceSlug, payload.project_id, payload)
         : await currentIssueStore.createIssue(workspaceSlug, payload.project_id, payload, viewId);
       if (!response) throw new Error();
 
@@ -182,7 +216,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     if (!workspaceSlug || !payload.project_id || !data?.id) return;
 
     try {
-      await currentIssueStore.updateIssue(workspaceSlug, payload.project_id, data.id, payload, viewId);
+      isDraft
+        ? await draftIssues.updateIssue(workspaceSlug, payload.project_id, data.id, payload)
+        : await currentIssueStore.updateIssue(workspaceSlug, payload.project_id, data.id, payload, viewId);
+
       setToastAlert({
         type: "success",
         title: "Success!",
@@ -260,6 +297,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                     changesMade={changesMade}
                     data={{
                       ...data,
+                      description_html: description,
                       cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
                       module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
                     }}
@@ -275,6 +313,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
                   <IssueFormRoot
                     data={{
                       ...data,
+                      description_html: description,
                       cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId : null,
                       module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId] : null,
                     }}
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx
index 2338e1848..56b88f70c 100644
--- a/web/components/issues/issues-mobile-header.tsx
+++ b/web/components/issues/issues-mobile-header.tsx
@@ -14,153 +14,153 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 import { ProjectAnalyticsModal } from "components/analytics";
 
 export const IssuesMobileHeader = () => {
-    const layouts = [
-        { key: "list", title: "List", icon: List },
-        { key: "kanban", title: "Kanban", icon: Kanban },
-        { key: "calendar", title: "Calendar", icon: Calendar },
-    ];
-    const [analyticsModal, setAnalyticsModal] = useState(false);
-    const { workspaceSlug, projectId } = router.query as {
-        workspaceSlug: string;
-        projectId: string;
-    };
-    const { currentProjectDetails } = useProject();
-    const { projectStates } = useProjectState();
-    const { projectLabels } = useLabel();
+  const layouts = [
+    { key: "list", title: "List", icon: List },
+    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "calendar", title: "Calendar", icon: Calendar },
+  ];
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  const { workspaceSlug, projectId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+  };
+  const { currentProjectDetails } = useProject();
+  const { projectStates } = useProjectState();
+  const { projectLabels } = useLabel();
 
-    // store hooks
-    const {
-        issuesFilter: { issueFilters, updateFilters },
-    } = useIssues(EIssuesStoreType.PROJECT);
-    const {
-        project: { projectMemberIds },
-    } = useMember();
-    const activeLayout = issueFilters?.displayFilters?.layout;
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+  const activeLayout = issueFilters?.displayFilters?.layout;
 
-    const handleLayoutChange = useCallback(
-        (layout: TIssueLayouts) => {
-            if (!workspaceSlug || !projectId) return;
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
-        },
-        [workspaceSlug, projectId, updateFilters]
-    );
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
 
-    const handleFiltersUpdate = useCallback(
-        (key: keyof IIssueFilterOptions, value: string | string[]) => {
-            if (!workspaceSlug || !projectId) return;
-            const newValues = issueFilters?.filters?.[key] ?? [];
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
 
-            if (Array.isArray(value)) {
-                value.forEach((val) => {
-                    if (!newValues.includes(val)) newValues.push(val);
-                });
-            } else {
-                if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-                else newValues.push(value);
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
+    },
+    [workspaceSlug, projectId, issueFilters, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        projectDetails={currentProjectDetails ?? undefined}
+      />
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {layouts.map((layout, index) => (
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].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 className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Filters"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Filters
+                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+              </span>
             }
-
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
-        },
-        [workspaceSlug, projectId, issueFilters, updateFilters]
-    );
-
-    const handleDisplayFilters = useCallback(
-        (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-            if (!workspaceSlug || !projectId) return;
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
-        },
-        [workspaceSlug, projectId, updateFilters]
-    );
-
-    const handleDisplayProperties = useCallback(
-        (property: Partial<IIssueDisplayProperties>) => {
-            if (!workspaceSlug || !projectId) return;
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
-        },
-        [workspaceSlug, projectId, updateFilters]
-    );
-
-    return (
-        <>
-            <ProjectAnalyticsModal
-                isOpen={analyticsModal}
-                onClose={() => setAnalyticsModal(false)}
-                projectDetails={currentProjectDetails ?? undefined}
+          >
+            <FilterSelection
+              filters={issueFilters?.filters ?? {}}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectLabels}
+              memberIds={projectMemberIds ?? undefined}
+              states={projectStates}
             />
-            <div className="flex justify-evenly py-2 border-b border-custom-border-200">
-                <CustomMenu
-                    maxHeight={"md"}
-                    className="flex flex-grow justify-center text-custom-text-200 text-sm"
-                    placement="bottom-start"
-                    customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
-                    customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
-                    closeOnSelect
-                >
-                    {layouts.map((layout, index) => (
-                        <CustomMenu.MenuItem
-                            onClick={() => {
-                                handleLayoutChange(ISSUE_LAYOUTS[index].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 className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
-                    <FiltersDropdown
-                        title="Filters"
-                        placement="bottom-end"
-                        menuButton={
-                            <span className="flex items-center text-custom-text-200 text-sm">
-                                Filters
-                                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
-                            </span>
-                        }
-                    >
-                        <FilterSelection
-                            filters={issueFilters?.filters ?? {}}
-                            handleFiltersUpdate={handleFiltersUpdate}
-                            layoutDisplayFiltersOptions={
-                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                            }
-                            labels={projectLabels}
-                            memberIds={projectMemberIds ?? undefined}
-                            states={projectStates}
-                        />
-                    </FiltersDropdown>
-                </div>
-                <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
-                    <FiltersDropdown
-                        title="Display"
-                        placement="bottom-end"
-                        menuButton={
-                            <span className="flex items-center text-custom-text-200 text-sm">
-                                Display
-                                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
-                            </span>
-                        }
-                    >
-                        <DisplayFiltersSelection
-                            layoutDisplayFiltersOptions={
-                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                            }
-                            displayFilters={issueFilters?.displayFilters ?? {}}
-                            handleDisplayFiltersUpdate={handleDisplayFilters}
-                            displayProperties={issueFilters?.displayProperties ?? {}}
-                            handleDisplayPropertiesUpdate={handleDisplayProperties}
-                        />
-                    </FiltersDropdown>
-                </div>
+          </FiltersDropdown>
+        </div>
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Display"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Display
+                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+            />
+          </FiltersDropdown>
+        </div>
 
-                <button
-                    onClick={() => setAnalyticsModal(true)}
-                    className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
-                >
-                    Analytics
-                </button>
-            </div>
-        </>
-    );
+        <button
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+        >
+          Analytics
+        </button>
+      </div>
+    </>
+  );
 };
diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
index 8b51c977e..8db7fd0ac 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -1,17 +1,20 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react";
-import { MoveRight, MoveDiagonal, Link2, Trash2 } from "lucide-react";
+import { MoveRight, MoveDiagonal, Link2, Trash2, RotateCcw } from "lucide-react";
 // ui
-import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
+import { ArchiveIcon, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Tooltip } from "@plane/ui";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // hooks
 import useToast from "hooks/use-toast";
 // store hooks
-import { useUser } from "hooks/store";
+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";
 
 export type TPeekModes = "side-peek" | "modal" | "full-screen";
 
@@ -43,6 +46,8 @@ export type PeekOverviewHeaderProps = {
   isArchived: boolean;
   disabled: boolean;
   toggleDeleteIssueModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (value: boolean) => void;
+  handleRestoreIssue: () => void;
   isSubmitting: "submitting" | "submitted" | "saved";
 };
 
@@ -57,23 +62,31 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
     disabled,
     removeRoutePeekId,
     toggleDeleteIssueModal,
+    toggleArchiveIssueModal,
+    handleRestoreIssue,
     isSubmitting,
   } = props;
   // router
   const router = useRouter();
   // store hooks
   const { currentUser } = useUser();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getStateById } = useProjectState();
   // hooks
   const { setToastAlert } = useToast();
   // 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 handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     e.preventDefault();
-    copyUrlToClipboard(
-      `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`
-    ).then(() => {
+    copyUrlToClipboard(issueLink).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -81,13 +94,15 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
       });
     });
   };
-
   const redirectToIssueDetail = () => {
-    router.push({
-      pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
-    });
+    router.push({ pathname: `/${issueLink}` });
     removeRoutePeekId();
   };
+  // auth
+  const isArchivingAllowed = !isArchived && !disabled;
+  const isInArchivableGroup =
+    !!stateDetails && [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateDetails?.group);
+  const isRestoringAllowed = isArchived && !disabled;
 
   return (
     <div
@@ -97,11 +112,11 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
     >
       <div className="flex items-center gap-4">
         <button onClick={removeRoutePeekId}>
-          <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+          <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
         </button>
 
         <button onClick={redirectToIssueDetail}>
-          <MoveDiagonal className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+          <MoveDiagonal className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
         </button>
         {currentMode && (
           <div className="flex flex-shrink-0 items-center gap-2">
@@ -110,7 +125,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
               onChange={(val: any) => setPeekMode(val)}
               customButton={
                 <button type="button" className="">
-                  <currentMode.icon className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                  <currentMode.icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
                 </button>
               }
             >
@@ -138,13 +153,43 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
           {currentUser && !isArchived && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
-          <button onClick={handleCopyText}>
-            <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
-          </button>
-          {!disabled && (
-            <button onClick={() => toggleDeleteIssueModal(true)}>
-              <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+          <Tooltip tooltipContent="Copy link">
+            <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
+              tooltipContent={isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"}
+            >
+              <button
+                type="button"
+                className={cn("text-custom-text-300", {
+                  "hover:text-custom-text-200": isInArchivableGroup,
+                  "cursor-not-allowed text-custom-text-400": !isInArchivableGroup,
+                })}
+                onClick={() => {
+                  if (!isInArchivableGroup) return;
+                  toggleArchiveIssueModal(true);
+                }}
+              >
+                <ArchiveIcon className="h-4 w-4" />
+              </button>
+            </Tooltip>
+          )}
+          {isRestoringAllowed && (
+            <Tooltip tooltipContent="Restore">
+              <button type="button" onClick={handleRestoreIssue}>
+                <RotateCcw 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)}>
+                <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+              </button>
+            </Tooltip>
           )}
         </div>
       </div>
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index c669c0349..2f5a02c11 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -1,9 +1,18 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { differenceInCalendarDays } from "date-fns";
-import { Signal, Tag, Triangle, LayoutPanelTop, CircleDot, CopyPlus, XCircle, CalendarDays } from "lucide-react";
+import {
+  Signal,
+  Tag,
+  Triangle,
+  LayoutPanelTop,
+  CircleDot,
+  CopyPlus,
+  XCircle,
+  CalendarClock,
+  CalendarCheck2,
+} from "lucide-react";
 // hooks
-import { useIssueDetail, useProject } from "hooks/store";
+import { useIssueDetail, useProject, useProjectState } from "hooks/store";
 // ui icons
 import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
 import {
@@ -15,17 +24,12 @@ import {
   TIssueOperations,
   IssueRelationSelect,
 } from "components/issues";
-import {
-  DateDropdown,
-  EstimateDropdown,
-  PriorityDropdown,
-  ProjectMemberDropdown,
-  StateDropdown,
-} from "components/dropdowns";
+import { DateDropdown, EstimateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
 // components
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // helpers
 import { cn } from "helpers/common.helper";
+import { shouldHighlightIssueDueDate } from "helpers/issue.helper";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -42,11 +46,13 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { getStateById } = useProjectState();
   // derived values
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
   const projectDetails = getProjectById(issue.project_id);
   const isEstimateEnabled = projectDetails?.estimate;
+  const stateDetails = getStateById(issue.state_id);
 
   const minDate = issue.start_date ? new Date(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
@@ -54,8 +60,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
 
-  const targetDateDistance = issue.target_date ? differenceInCalendarDays(new Date(issue.target_date), new Date()) : 1;
-
   return (
     <div className="mt-1">
       <h6 className="text-sm font-medium">Properties</h6>
@@ -87,7 +91,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
             <span>Assignees</span>
           </div>
-          <ProjectMemberDropdown
+          <MemberDropdown
             value={issue?.assignee_ids ?? undefined}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
             disabled={disabled}
@@ -124,7 +128,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* start date */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <CalendarDays className="h-4 w-4 flex-shrink-0" />
+            <CalendarClock className="h-4 w-4 flex-shrink-0" />
             <span>Start date</span>
           </div>
           <DateDropdown
@@ -151,7 +155,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* due date */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <CalendarDays className="h-4 w-4 flex-shrink-0" />
+            <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
             <span>Due date</span>
           </div>
           <DateDropdown
@@ -169,7 +173,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             buttonContainerClassName="w-full text-left"
             buttonClassName={cn("text-sm", {
               "text-custom-text-400": !issue.target_date,
-              "text-red-500": targetDateDistance <= 0,
+              "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
             })}
             hideIcon
             clearIconClassName="h-3 w-3 hidden group-hover:inline !text-custom-text-100"
diff --git a/web/components/issues/peek-overview/root.tsx b/web/components/issues/peek-overview/root.tsx
index eb8ad0aa7..f014b12c5 100644
--- a/web/components/issues/peek-overview/root.tsx
+++ b/web/components/issues/peek-overview/root.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, useEffect, useState, useMemo } from "react";
+import { FC, useEffect, useState, useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
@@ -11,10 +11,11 @@ import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
-import { ISSUE_UPDATED, ISSUE_DELETED } from "constants/event-tracker";
+import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED, ISSUE_RESTORED } from "constants/event-tracker";
 
 interface IIssuePeekOverview {
   is_archived?: boolean;
+  is_draft?: boolean;
 }
 
 export type TIssuePeekOperations = {
@@ -27,6 +28,8 @@ export type TIssuePeekOperations = {
     showToast?: boolean
   ) => 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>;
   addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
   addModulesToIssue?: (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => Promise<void>;
@@ -45,7 +48,7 @@ export type TIssuePeekOperations = {
 };
 
 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
-  const { is_archived = false } = props;
+  const { is_archived = false, is_draft = false } = props;
   // hooks
   const { setToastAlert } = useToast();
   // router
@@ -54,12 +57,13 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     membership: { currentWorkspaceAllProjectsRole },
   } = useUser();
   const {
-    issues: { removeIssue: removeArchivedIssue },
+    issues: { restoreIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
   const {
     peekIssue,
     updateIssue,
     removeIssue,
+    archiveIssue,
     issue: { getIssueById, fetchIssue },
   } = useIssueDetail();
   const { addIssueToCycle, removeIssueFromCycle, addModulesToIssue, removeIssueFromModule, removeModulesFromIssue } =
@@ -72,7 +76,12 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     () => ({
       fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          await fetchIssue(workspaceSlug, projectId, issueId, is_archived);
+          await fetchIssue(
+            workspaceSlug,
+            projectId,
+            issueId,
+            is_archived ? "ARCHIVED" : is_draft ? "DRAFT" : "DEFAULT"
+          );
         } catch (error) {
           console.error("Error fetching the parent issue");
         }
@@ -116,8 +125,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
-          else await removeIssue(workspaceSlug, projectId, issueId);
+          removeIssue(workspaceSlug, projectId, issueId);
           setToastAlert({
             title: "Issue deleted successfully",
             type: "success",
@@ -141,6 +149,58 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           });
         }
       },
+      archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await archiveIssue(workspaceSlug, projectId, issueId);
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Issue archived successfully.",
+          });
+          captureIssueEvent({
+            eventName: ISSUE_ARCHIVED,
+            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Issue could not be archived. Please try again.",
+          });
+          captureIssueEvent({
+            eventName: ISSUE_ARCHIVED,
+            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
+        }
+      },
+      restore: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await restoreIssue(workspaceSlug, projectId, issueId);
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: "Issue restored successfully.",
+          });
+          captureIssueEvent({
+            eventName: ISSUE_RESTORED,
+            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
+        } catch (error) {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Issue could not be restored. Please try again.",
+          });
+          captureIssueEvent({
+            eventName: ISSUE_RESTORED,
+            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
+            path: router.asPath,
+          });
+        }
+      },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
@@ -301,10 +361,12 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     }),
     [
       is_archived,
+      is_draft,
       fetchIssue,
       updateIssue,
       removeIssue,
-      removeArchivedIssue,
+      archiveIssue,
+      restoreIssue,
       addIssueToCycle,
       removeIssueFromCycle,
       addModulesToIssue,
@@ -335,16 +397,14 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
   const isLoading = !issue || loader ? true : false;
 
   return (
-    <Fragment>
-      <IssueView
-        workspaceSlug={peekIssue.workspaceSlug}
-        projectId={peekIssue.projectId}
-        issueId={peekIssue.issueId}
-        isLoading={isLoading}
-        is_archived={is_archived}
-        disabled={is_archived || !is_editable}
-        issueOperations={issueOperations}
-      />
-    </Fragment>
+    <IssueView
+      workspaceSlug={peekIssue.workspaceSlug}
+      projectId={peekIssue.projectId}
+      issueId={peekIssue.issueId}
+      isLoading={isLoading}
+      is_archived={is_archived}
+      disabled={!is_editable}
+      issueOperations={issueOperations}
+    />
   );
 });
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index e69692ecc..cb2100ce0 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -5,17 +5,18 @@ 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";
 // components
 import {
-  DeleteArchivedIssueModal,
   DeleteIssueModal,
   IssuePeekOverviewHeader,
   TPeekModes,
   PeekOverviewIssueDetails,
   PeekOverviewProperties,
   TIssueOperations,
+  ArchiveIssueModal,
 } from "components/issues";
 import { IssueActivity } from "../issue-detail/issue-activity";
 // ui
@@ -43,21 +44,53 @@ export const IssueView: FC<IIssueView> = observer((props) => {
     setPeekIssue,
     isAnyModalOpen,
     isDeleteIssueModalOpen,
+    isArchiveIssueModalOpen,
     toggleDeleteIssueModal,
+    toggleArchiveIssueModal,
     issue: { getIssueById },
   } = useIssueDetail();
   const issue = getIssueById(issueId);
+  // hooks
+  const { alerts } = useToast();
   // remove peek id
   const removeRoutePeekId = () => {
     setPeekIssue(undefined);
   };
-  // hooks
-  useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId());
-  const handleKeyDown = () => !isAnyModalOpen && removeRoutePeekId();
+
+  useOutsideClickDetector(issuePeekOverviewRef, () => {
+    if (!isAnyModalOpen && (!alerts || alerts.length === 0)) {
+      removeRoutePeekId();
+    }
+  });
+  const handleKeyDown = () => {
+    if (!isAnyModalOpen) {
+      removeRoutePeekId();
+      const issueElement = document.getElementById(`issue-${issueId}`);
+      if (issueElement) issueElement?.focus();
+    }
+  };
   useKeypress("Escape", handleKeyDown);
 
+  const handleRestore = async () => {
+    if (!issueOperations.restore) return;
+    await issueOperations.restore(workspaceSlug, projectId, issueId);
+    removeRoutePeekId();
+  };
+
   return (
     <>
+      {issue && !is_archived && (
+        <ArchiveIssueModal
+          isOpen={isArchiveIssueModalOpen}
+          handleClose={() => toggleArchiveIssueModal(false)}
+          data={issue}
+          onSubmit={async () => {
+            if (issueOperations.archive) await issueOperations.archive(workspaceSlug, projectId, issueId);
+            removeRoutePeekId();
+          }}
+        />
+      )}
+
       {issue && !is_archived && (
         <DeleteIssueModal
           isOpen={isDeleteIssueModalOpen}
@@ -71,7 +104,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
       )}
 
       {issue && is_archived && (
-        <DeleteArchivedIssueModal
+        <DeleteIssueModal
           data={issue}
           isOpen={isDeleteIssueModalOpen}
           handleClose={() => toggleDeleteIssueModal(false)}
@@ -96,11 +129,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             {/* header */}
             <IssuePeekOverviewHeader
               peekMode={peekMode}
-              setPeekMode={(value: TPeekModes) => {
-                setPeekMode(value);
-              }}
+              setPeekMode={(value) => setPeekMode(value)}
               removeRoutePeekId={removeRoutePeekId}
               toggleDeleteIssueModal={toggleDeleteIssueModal}
+              toggleArchiveIssueModal={toggleArchiveIssueModal}
+              handleRestoreIssue={handleRestore}
               isArchived={is_archived}
               issueId={issueId}
               workspaceSlug={workspaceSlug}
@@ -124,7 +157,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           projectId={projectId}
                           issueId={issueId}
                           issueOperations={issueOperations}
-                          disabled={disabled}
+                          disabled={disabled || is_archived}
                           isSubmitting={isSubmitting}
                           setIsSubmitting={(value) => setIsSubmitting(value)}
                         />
@@ -134,7 +167,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                           projectId={projectId}
                           issueId={issueId}
                           issueOperations={issueOperations}
-                          disabled={disabled}
+                          disabled={disabled || is_archived}
                         />
 
                         <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
@@ -148,7 +181,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                               projectId={projectId}
                               issueId={issueId}
                               issueOperations={issueOperations}
-                              disabled={disabled}
+                              disabled={disabled || is_archived}
                               isSubmitting={isSubmitting}
                               setIsSubmitting={(value) => setIsSubmitting(value)}
                             />
@@ -166,7 +199,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                             projectId={projectId}
                             issueId={issueId}
                             issueOperations={issueOperations}
-                            disabled={disabled}
+                            disabled={disabled || is_archived}
                           />
                         </div>
                       </div>
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
index 3a205aea2..03c9d8902 100644
--- a/web/components/issues/sub-issues/properties.tsx
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -2,7 +2,7 @@ import React from "react";
 // hooks
 import { useIssueDetail } from "hooks/store";
 // components
-import { PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
+import { PriorityDropdown, MemberDropdown, StateDropdown } from "components/dropdowns";
 // types
 import { TSubIssueOperations } from "./root";
 
@@ -62,7 +62,7 @@ export const IssueProperty: React.FC<IIssueProperty> = (props) => {
       </div>
 
       <div className="h-5 flex-shrink-0">
-        <ProjectMemberDropdown
+        <MemberDropdown
           value={issue.assignee_ids}
           projectId={issue.project_id}
           onChange={(val) =>
diff --git a/web/components/issues/title-input.tsx b/web/components/issues/title-input.tsx
index dbd18aaaa..4a4057a6a 100644
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@@ -19,11 +19,10 @@ export type IssueTitleInputProps = {
 };
 
 export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  const { disabled, value, workspaceSlug, isSubmitting, setIsSubmitting, issueId, issueOperations, projectId } = props;
   // states
   const [title, setTitle] = useState("");
   // hooks
-
   const debouncedValue = useDebounce(title, 1500);
 
   useEffect(() => {
@@ -31,15 +30,41 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   }, [value]);
 
   useEffect(() => {
+    const textarea = document.querySelector("#title-input");
     if (debouncedValue && debouncedValue !== value) {
       issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
         setIsSubmitting("saved");
+        if (textarea && !textarea.matches(":focus")) {
+          const trimmedTitle = debouncedValue.trim();
+          if (trimmedTitle !== title) setTitle(trimmedTitle);
+        }
       });
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
 
+  useEffect(() => {
+    const handleBlur = () => {
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== title && isSubmitting !== "submitting") {
+        setTitle(trimmedTitle);
+        setIsSubmitting("submitting");
+      }
+    };
+
+    const textarea = document.querySelector("#title-input"); // You might need to change this selector according to your TextArea component
+    if (textarea) {
+      textarea.addEventListener("blur", handleBlur);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener("blur", handleBlur);
+      }
+    };
+  }, [title, isSubmitting, setIsSubmitting]);
+
   const handleTitleChange = useCallback(
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setIsSubmitting("submitting");
@@ -53,6 +78,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   return (
     <div className="relative">
       <TextArea
+        id="title-input"
         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 ${
           title?.length === 0 ? "!ring-red-400" : ""
         }`}
diff --git a/web/components/labels/index.ts b/web/components/labels/index.ts
index a22251c64..9195f8649 100644
--- a/web/components/labels/index.ts
+++ b/web/components/labels/index.ts
@@ -1,7 +1,6 @@
 export * from "./create-label-modal";
 export * from "./create-update-label-inline";
 export * from "./delete-label-modal";
-export * from "./labels-list-modal";
 export * from "./project-setting-label-group";
 export * from "./project-setting-label-item";
 export * from "./project-setting-label-list";
diff --git a/web/components/labels/labels-list-modal.tsx b/web/components/labels/labels-list-modal.tsx
deleted file mode 100644
index 82920b9ba..000000000
--- a/web/components/labels/labels-list-modal.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useState } from "react";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
-import { Search } from "lucide-react";
-// hooks
-import { useLabel } from "hooks/store";
-// icons
-import { LayerStackIcon } from "@plane/ui";
-// types
-import { IIssueLabel } from "@plane/types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  parent: IIssueLabel | undefined;
-};
-
-export const LabelsListModal: React.FC<Props> = observer((props) => {
-  const { isOpen, handleClose, parent } = props;
-  // states
-  const [query, setQuery] = useState("");
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-  // store hooks
-  const { projectLabels, fetchProjectLabels, updateLabel } = useLabel();
-
-  // api call to fetch project details
-  useSWR(
-    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
-  );
-
-  // derived values
-  const filteredLabels: IIssueLabel[] =
-    query === ""
-      ? projectLabels ?? []
-      : projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
-
-  const handleModalClose = () => {
-    handleClose();
-    setQuery("");
-  };
-
-  const addChildLabel = async (label: IIssueLabel) => {
-    if (!workspaceSlug || !projectId) return;
-
-    await updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
-      parent: parent?.id!,
-    });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
-      <Dialog as="div" className="relative z-20" onClose={handleModalClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 scale-95"
-            enterTo="opacity-100 scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 scale-100"
-            leaveTo="opacity-0 scale-95"
-          >
-            <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
-              <Combobox>
-                <div className="relative m-1">
-                  <Search
-                    className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-custom-text-100 text-opacity-40"
-                    aria-hidden="true"
-                  />
-                  <Combobox.Input
-                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none focus:ring-0 sm:text-sm"
-                    placeholder="Search..."
-                    onChange={(e) => setQuery(e.target.value)}
-                  />
-                </div>
-
-                <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
-                  {filteredLabels.length > 0 && (
-                    <li className="p-2">
-                      {query === "" && (
-                        <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Labels</h2>
-                      )}
-                      <ul className="text-sm text-gray-700">
-                        {filteredLabels.map((label) => {
-                          const children = projectLabels?.filter((l) => l.parent === label.id);
-
-                          if (
-                            (label.parent === "" || label.parent === null) && // issue does not have any other parent
-                            label.id !== parent?.id && // issue is not itself
-                            children?.length === 0 // issue doesn't have any other children
-                          )
-                            return (
-                              <Combobox.Option
-                                key={label.id}
-                                value={{
-                                  name: label.name,
-                                }}
-                                className={({ active }) =>
-                                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                    active ? "bg-custom-background-80 text-custom-text-100" : ""
-                                  }`
-                                }
-                                onClick={() => {
-                                  addChildLabel(label);
-                                }}
-                              >
-                                <span
-                                  className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor: label.color !== "" ? label.color : "#000000",
-                                  }}
-                                />
-                                {label.name}
-                              </Combobox.Option>
-                            );
-                        })}
-                      </ul>
-                    </li>
-                  )}
-                </Combobox.Options>
-
-                {query !== "" && filteredLabels.length === 0 && (
-                  <div className="px-6 py-14 text-center sm:px-14">
-                    <LayerStackIcon
-                      className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
-                      aria-hidden="true"
-                    />
-                    <p className="mt-4 text-sm text-custom-text-100">
-                      We couldn{"'"}t find any label with that term. Please try again.
-                    </p>
-                  </div>
-                )}
-              </Combobox>
-            </Dialog.Panel>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 191476357..1dde2b85d 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // components
 import { ModuleStatusSelect } from "components/modules";
-import { DateRangeDropdown, ProjectDropdown, ProjectMemberDropdown } from "components/dropdowns";
+import { DateRangeDropdown, ProjectDropdown, MemberDropdown } from "components/dropdowns";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // helpers
@@ -175,7 +175,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
               name="lead_id"
               render={({ field: { value, onChange } }) => (
                 <div className="h-7">
-                  <ProjectMemberDropdown
+                  <MemberDropdown
                     value={value}
                     onChange={onChange}
                     projectId={projectId}
@@ -192,7 +192,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
               name="member_ids"
               render={({ field: { value, onChange } }) => (
                 <div className="h-7">
-                  <ProjectMemberDropdown
+                  <MemberDropdown
                     value={value}
                     onChange={onChange}
                     projectId={projectId}
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 1ecc3974d..3d7468f24 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -235,7 +235,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                   </button>
                 ))}
 
-              <CustomMenu verticalEllipsis buttonClassName="z-[1]">
+              <CustomMenu verticalEllipsis buttonClassName="z-[1]" placement="bottom-end">
                 {isEditingAllowed && (
                   <>
                     <CustomMenu.MenuItem onClick={handleEditModule}>
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
index e9ed56a8d..e3f504479 100644
--- a/web/components/modules/module-mobile-header.tsx
+++ b/web/components/modules/module-mobile-header.tsx
@@ -9,154 +9,155 @@ import router from "next/router";
 import { useCallback, useState } from "react";
 
 export const ModuleMobileHeader = () => {
-    const [analyticsModal, setAnalyticsModal] = useState(false);
-    const { getModuleById } = useModule();
-    const layouts = [
-        { key: "list", title: "List", icon: List },
-        { key: "kanban", title: "Kanban", icon: Kanban },
-        { key: "calendar", title: "Calendar", icon: Calendar },
-    ];
-    const { workspaceSlug, projectId, moduleId } = router.query as {
-        workspaceSlug: string;
-        projectId: string;
-        moduleId: string;
-    };
-    const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  const { getModuleById } = useModule();
+  const layouts = [
+    { key: "list", title: "List", icon: List },
+    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "calendar", title: "Calendar", icon: Calendar },
+  ];
+  const { workspaceSlug, projectId, moduleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    moduleId: string;
+  };
+  const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
 
-    const {
-        issuesFilter: { issueFilters, updateFilters },
-    } = useIssues(EIssuesStoreType.MODULE);
-    const activeLayout = issueFilters?.displayFilters?.layout;
-    const { projectStates } = useProjectState();
-    const { projectLabels } = useLabel();
-    const {
-        project: { projectMemberIds },
-    } = useMember();
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.MODULE);
+  const activeLayout = issueFilters?.displayFilters?.layout;
+  const { projectStates } = useProjectState();
+  const { projectLabels } = useLabel();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
 
-    const handleLayoutChange = useCallback(
-        (layout: TIssueLayouts) => {
-            if (!workspaceSlug || !projectId) return;
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, moduleId);
-        },
-        [workspaceSlug, projectId, moduleId, updateFilters]
-    );
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, updateFilters]
+  );
 
-    const handleFiltersUpdate = useCallback(
-        (key: keyof IIssueFilterOptions, value: string | string[]) => {
-            if (!workspaceSlug || !projectId) return;
-            const newValues = issueFilters?.filters?.[key] ?? [];
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
 
-            if (Array.isArray(value)) {
-                value.forEach((val) => {
-                    if (!newValues.includes(val)) newValues.push(val);
-                });
-            } else {
-                if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-                else newValues.push(value);
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } 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);
+    },
+    [workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, moduleId);
+    },
+    [workspaceSlug, projectId, moduleId, updateFilters]
+  );
+
+  return (
+    <div className="block md:hidden">
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        moduleDetails={moduleDetails ?? undefined}
+      />
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {layouts.map((layout, index) => (
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].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 className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Filters"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Filters
+                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+              </span>
             }
-
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, moduleId);
-        },
-        [workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
-    );
-
-    const handleDisplayFilters = useCallback(
-        (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-            if (!workspaceSlug || !projectId) return;
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, moduleId);
-        },
-        [workspaceSlug, projectId, moduleId, updateFilters]
-    );
-
-    const handleDisplayProperties = useCallback(
-        (property: Partial<IIssueDisplayProperties>) => {
-            if (!workspaceSlug || !projectId) return;
-            updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, moduleId);
-        },
-        [workspaceSlug, projectId, moduleId, updateFilters]
-    );
-
-    return (
-        <div className="block md:hidden">
-            <ProjectAnalyticsModal
-                isOpen={analyticsModal}
-                onClose={() => setAnalyticsModal(false)}
-                moduleDetails={moduleDetails ?? undefined}
+          >
+            <FilterSelection
+              filters={issueFilters?.filters ?? {}}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectLabels}
+              memberIds={projectMemberIds ?? undefined}
+              states={projectStates}
             />
-            <div className="flex justify-evenly py-2 border-b border-custom-border-200">
-                <CustomMenu
-                    maxHeight={"md"}
-                    className="flex flex-grow justify-center text-custom-text-200 text-sm"
-                    placement="bottom-start"
-                    customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
-                    customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
-                    closeOnSelect
-                >
-                    {layouts.map((layout, index) => (
-                        <CustomMenu.MenuItem
-                            onClick={() => {
-                                handleLayoutChange(ISSUE_LAYOUTS[index].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 className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
-                    <FiltersDropdown
-                        title="Filters"
-                        placement="bottom-end"
-                        menuButton={
-                            <span className="flex items-center text-custom-text-200 text-sm">
-                                Filters
-                                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
-                            </span>
-                        }
-                    >
-                        <FilterSelection
-                            filters={issueFilters?.filters ?? {}}
-                            handleFiltersUpdate={handleFiltersUpdate}
-                            layoutDisplayFiltersOptions={
-                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                            }
-                            labels={projectLabels}
-                            memberIds={projectMemberIds ?? undefined}
-                            states={projectStates}
-                        />
-                    </FiltersDropdown>
-                </div>
-                <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
-                    <FiltersDropdown
-                        title="Display"
-                        placement="bottom-end"
-                        menuButton={
-                            <span className="flex items-center text-custom-text-200 text-sm">
-                                Display
-                                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
-                            </span>
-                        }
-                    >
-                        <DisplayFiltersSelection
-                            layoutDisplayFiltersOptions={
-                                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                            }
-                            displayFilters={issueFilters?.displayFilters ?? {}}
-                            handleDisplayFiltersUpdate={handleDisplayFilters}
-                            displayProperties={issueFilters?.displayProperties ?? {}}
-                            handleDisplayPropertiesUpdate={handleDisplayProperties}
-                        />
-                    </FiltersDropdown>
-                </div>
-
-                <button
-                    onClick={() => setAnalyticsModal(true)}
-                    className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
-                >
-                    Analytics
-                </button>
-            </div>
+          </FiltersDropdown>
         </div>
-    );
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Display"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Display
+                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+              ignoreGroupedFilters={["module"]}
+            />
+          </FiltersDropdown>
+        </div>
+
+        <button
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+        >
+          Analytics
+        </button>
+      </div>
+    </div>
+  );
 };
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index de31769f1..53d7eff4c 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -21,7 +21,7 @@ import useToast from "hooks/use-toast";
 import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
-import { DateRangeDropdown, ProjectMemberDropdown } from "components/dropdowns";
+import { DateRangeDropdown, MemberDropdown } from "components/dropdowns";
 // ui
 import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
 // helpers
@@ -385,7 +385,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               name="lead_id"
               render={({ field: { value } }) => (
                 <div className="w-3/5 h-7">
-                  <ProjectMemberDropdown
+                  <MemberDropdown
                     value={value ?? null}
                     onChange={(val) => {
                       submitChanges({ lead_id: val });
@@ -409,7 +409,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               name="member_ids"
               render={({ field: { value } }) => (
                 <div className="w-3/5 h-7">
-                  <ProjectMemberDropdown
+                  <MemberDropdown
                     value={value ?? []}
                     onChange={(val: string[]) => {
                       submitChanges({ member_ids: val });
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index d7ad61141..03d849a82 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -49,7 +49,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // states
-  const [showSnoozeOptions, setshowSnoozeOptions] = React.useState(false);
+  const [showSnoozeOptions, setShowSnoozeOptions] = React.useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // refs
@@ -105,7 +105,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   useEffect(() => {
     const handleClickOutside = (event: any) => {
       if (snoozeRef.current && !snoozeRef.current?.contains(event.target)) {
-        setshowSnoozeOptions(false);
+        setShowSnoozeOptions(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside, true);
@@ -116,6 +116,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;
 
   return (
@@ -129,7 +132,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         closePopover();
       }}
       href={`/${workspaceSlug}/projects/${notification.project}/${
-        notification.data.issue_activity.field === "archived_at" ? "archived-issues" : "issues"
+        notificationField === "archived_at" ? "archived-issues" : "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"
@@ -139,10 +142,10 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         <span className="absolute left-2 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-custom-primary-100" />
       )}
       <div className="relative h-12 w-12 rounded-full">
-        {notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? (
+        {notificationTriggeredBy.avatar && notificationTriggeredBy.avatar !== "" ? (
           <div className="h-12 w-12 rounded-full">
             <Image
-              src={notification.triggered_by_details.avatar}
+              src={notificationTriggeredBy.avatar}
               alt="Profile Image"
               layout="fill"
               objectFit="cover"
@@ -152,10 +155,10 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         ) : (
           <div className="flex h-12 w-12 items-center justify-center rounded-full bg-custom-background-80">
             <span className="text-lg font-medium text-custom-text-100">
-              {notification.triggered_by_details.is_bot ? (
-                notification.triggered_by_details.first_name?.[0]?.toUpperCase()
-              ) : notification.triggered_by_details.display_name?.[0] ? (
-                notification.triggered_by_details.display_name?.[0]?.toUpperCase()
+              {notificationTriggeredBy.is_bot ? (
+                notificationTriggeredBy.first_name?.[0]?.toUpperCase()
+              ) : notificationTriggeredBy.display_name?.[0] ? (
+                notificationTriggeredBy.display_name?.[0]?.toUpperCase()
               ) : (
                 <User2 className="h-4 w-4" />
               )}
@@ -168,30 +171,32 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           {!notification.message ? (
             <div className="w-full break-words text-sm">
               <span className="font-semibold">
-                {notification.triggered_by_details.is_bot
-                  ? notification.triggered_by_details.first_name
-                  : notification.triggered_by_details.display_name}{" "}
+                {notificationTriggeredBy.is_bot
+                  ? notificationTriggeredBy.first_name
+                  : notificationTriggeredBy.display_name}{" "}
               </span>
-              {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
-              {notification.data.issue_activity.field === "comment"
+              {!["comment", "archived_at"].includes(notificationField) && notification.data.issue_activity.verb}{" "}
+              {notificationField === "comment"
                 ? "commented"
-                : notification.data.issue_activity.field === "None"
+                : notificationField === "archived_at"
+                ? notification.data.issue_activity.new_value === "restore"
+                  ? "restored the issue"
+                  : "archived the issue"
+                : notificationField === "None"
                 ? null
-                : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
-              {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
-                ? "to"
-                : ""}
+                : replaceUnderscoreIfSnakeCase(notificationField)}{" "}
+              {!["comment", "archived_at", "None"].includes(notificationField) ? "to" : ""}
               <span className="font-semibold">
                 {" "}
-                {notification.data.issue_activity.field !== "None" ? (
-                  notification.data.issue_activity.field !== "comment" ? (
-                    notification.data.issue_activity.field === "target_date" ? (
+                {notificationField !== "None" ? (
+                  notificationField !== "comment" ? (
+                    notificationField === "target_date" ? (
                       renderFormattedDate(notification.data.issue_activity.new_value)
-                    ) : notification.data.issue_activity.field === "attachment" ? (
+                    ) : notificationField === "attachment" ? (
                       "the issue"
-                    ) : notification.data.issue_activity.field === "description" ? (
+                    ) : notificationField === "description" ? (
                       stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
-                    ) : (
+                    ) : notificationField === "archived_at" ? null : (
                       notification.data.issue_activity.new_value
                     )
                   ) : (
@@ -255,7 +260,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                             onClick={(e) => {
                               e.stopPropagation();
                               e.preventDefault();
-                              setshowSnoozeOptions(true);
+                              setShowSnoozeOptions(true);
                             }}
                             className="flex gap-x-2 items-center p-1.5"
                           >
@@ -280,7 +285,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                     onClick={(e) => {
                       e.stopPropagation();
                       e.preventDefault();
-                      setshowSnoozeOptions(false);
+                      setShowSnoozeOptions(false);
                       snoozeOptionOnClick(item.value);
                     }}
                   >
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index ac4a3c198..a29df3c94 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -62,6 +62,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
     formState: { errors, isSubmitting, isValid },
   } = useForm<IUser>({
     defaultValues,
+    mode: "onChange",
   });
 
   const onSubmit = async (formData: IUser) => {
@@ -164,35 +165,38 @@ export const UserDetails: React.FC<Props> = observer((props) => {
                 )}
               </button>
 
-              <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
-                <Controller
-                  control={control}
-                  name="first_name"
-                  rules={{
-                    required: "First name is required",
-                    maxLength: {
-                      value: 24,
-                      message: "First name cannot exceed the limit of 24 characters",
-                    },
-                  }}
-                  render={({ field: { value, onChange, ref } }) => (
-                    <Input
-                      id="first_name"
-                      name="first_name"
-                      type="text"
-                      value={value}
-                      autoFocus={true}
-                      onChange={(event) => {
-                        setUserName(event.target.value);
-                        onChange(event);
-                      }}
-                      ref={ref}
-                      hasError={Boolean(errors.first_name)}
-                      placeholder="Enter your full name..."
-                      className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
-                    />
-                  )}
-                />
+              <div className="flex flex-col gap-1">
+                <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
+                  <Controller
+                    control={control}
+                    name="first_name"
+                    rules={{
+                      required: "Name is required",
+                      maxLength: {
+                        value: 24,
+                        message: "Name must be within 24 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="first_name"
+                        name="first_name"
+                        type="text"
+                        value={value}
+                        autoFocus={true}
+                        onChange={(event) => {
+                          setUserName(event.target.value);
+                          onChange(event);
+                        }}
+                        ref={ref}
+                        hasError={Boolean(errors.first_name)}
+                        placeholder="Enter your full name..."
+                        className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
+                      />
+                    )}
+                  />
+                </div>
+                {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
               </div>
             </div>
             <div className="mb-10 mt-14">
diff --git a/web/components/profile/profile-issues.tsx b/web/components/profile/profile-issues.tsx
index e7b61b4d2..7e501764a 100644
--- a/web/components/profile/profile-issues.tsx
+++ b/web/components/profile/profile-issues.tsx
@@ -51,7 +51,8 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
         await fetchFilters(workspaceSlug, userId);
         await fetchIssues(workspaceSlug, undefined, groupedIssueIds ? "mutation" : "init-loader", userId, type);
       }
-    }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 83589795e..49a42a0a3 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -11,7 +11,7 @@ import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
-import { WorkspaceMemberDropdown } from "components/dropdowns";
+import { MemberDropdown } from "components/dropdowns";
 // helpers
 import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 // constants
@@ -383,7 +383,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                         control={control}
                         render={({ field: { value, onChange } }) => (
                           <div className="h-7 flex-shrink-0" tabIndex={5}>
-                            <WorkspaceMemberDropdown
+                            <MemberDropdown
                               value={value}
                               onChange={onChange}
                               placeholder="Lead"
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 1fc4b7705..837ccb1da 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -146,10 +146,14 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
         memberDetails?.member.last_name
       } ${memberDetails?.member.display_name.toLowerCase()}`,
       content: (
-        <div className="flex items-center gap-2">
-          <Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
-          {memberDetails?.member.display_name} (
-          {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
+        <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>
       ),
     };
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index df8d58ed6..0c54f08f2 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -37,6 +37,7 @@ type Props = {
   snapshot?: DraggableStateSnapshot;
   handleCopyText: () => void;
   shortContextMenu?: boolean;
+  disableDrag?: boolean;
 };
 
 const navigation = (workspaceSlug: string, projectId: string) => [
@@ -79,7 +80,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 
 export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { projectId, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
+  const { projectId, provided, snapshot, handleCopyText, shortContextMenu = false, disableDrag } = props;
   // store hooks
   const { theme: themeStore } = useApplication();
   const { setTrackElement } = useEventTracker();
@@ -143,7 +144,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
 
   const handleProjectClick = () => {
     if (window.innerWidth < 768) {
-      themeStore.toggleMobileSidebar();
+      themeStore.toggleSidebar();
     }
     setTrackElement("Project sidebar");
   };
@@ -164,7 +165,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                 snapshot?.isDragging ? "opacity-60" : ""
               } ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
             >
-              {provided && (
+              {provided && !disableDrag && (
                 <Tooltip
                   tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
                   position="top-right"
@@ -271,13 +272,12 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </div>
                     </CustomMenu.MenuItem>
                   )}
-
-                  {project.archive_in > 0 && (
+                  {!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>
+                          <span>Archived issues</span>
                         </div>
                       </Link>
                     </CustomMenu.MenuItem>
@@ -286,7 +286,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     <Link href={`/${workspaceSlug}/projects/${project?.id}/draft-issues/`}>
                       <div className="flex items-center justify-start gap-2">
                         <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
-                        <span>Draft Issues</span>
+                        <span>Draft issues</span>
                       </div>
                     </Link>
                   </CustomMenu.MenuItem>
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 7d3be86f4..d95b8a55b 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -1,4 +1,4 @@
-import { useState, FC, useRef, useEffect } from "react";
+import { useState, FC, useRef, useEffect, useCallback } from "react";
 import { useRouter } from "next/router";
 import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea/dnd";
 import { Disclosure, Transition } from "@headlessui/react";
@@ -11,8 +11,11 @@ import useToast from "hooks/use-toast";
 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
@@ -31,9 +34,9 @@ export const ProjectSidebarList: FC = observer(() => {
     membership: { currentWorkspaceRole },
   } = useUser();
   const {
+    getProjectById,
     joinedProjectIds: joinedProjects,
     favoriteProjectIds: favoriteProjects,
-    orderProjectsWithSortOrder,
     updateProjectView,
   } = useProject();
   // router
@@ -54,22 +57,27 @@ export const ProjectSidebarList: FC = observer(() => {
     });
   };
 
-  const onDragEnd = async (result: DropResult) => {
+  const onDragEnd = (result: DropResult) => {
     const { source, destination, draggableId } = result;
-
     if (!destination || !workspaceSlug) return;
-
     if (source.index === destination.index) return;
 
-    const updatedSortOrder = orderProjectsWithSortOrder(source.index, destination.index, draggableId);
-
-    updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder }).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Something went wrong. Please try again.",
-      });
+    const joinedProjectsList: IProject[] = [];
+    joinedProjects.map((projectId) => {
+      const _project = getProjectById(projectId);
+      if (_project) joinedProjectsList.push(_project);
     });
+    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",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        });
+      });
   };
 
   const isCollapsed = sidebarCollapsed || false;
@@ -109,9 +117,9 @@ export const ProjectSidebarList: FC = observer(() => {
       )}
       <div
         ref={containerRef}
-        className={`h-full space-y-2 overflow-y-auto pl-4 vertical-scrollbar scrollbar-md ${
-          isScrolled ? "border-t border-custom-sidebar-border-300" : ""
-        }`}
+        className={cn("h-full space-y-2 overflow-y-auto px-4 vertical-scrollbar scrollbar-md", {
+          "border-t border-custom-sidebar-border-300": isScrolled,
+        })}
       >
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="favorite-projects">
@@ -175,6 +183,7 @@ export const ProjectSidebarList: FC = observer(() => {
                                       snapshot={snapshot}
                                       handleCopyText={() => handleCopyText(projectId)}
                                       shortContextMenu
+                                      disableDrag
                                     />
                                   </div>
                                 )}
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index e22ad9280..d61b9d02a 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -94,7 +94,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
       <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
       <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
         <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
-          <div className="relative flex w-full items-center justify-between rounded p-4">
+          <div className="relative flex h-[52px] w-full items-center justify-between rounded p-4">
             <div className="flex w-full items-center justify-between">
               <div className="flex items-center gap-4 overflow-hidden">
                 <div className="flex flex-col overflow-hidden ">
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index a61ac1823..0bb77f9c7 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -10,7 +10,6 @@ import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-reac
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 // assets
 import packageJson from "package.json";
-import useSize from "hooks/use-window-size";
 
 const helpOptions = [
   {
@@ -43,11 +42,10 @@ export interface WorkspaceHelpSectionProps {
 export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
   // store hooks
   const {
-    theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar },
+    theme: { sidebarCollapsed, toggleSidebar },
     commandPalette: { toggleShortcutModal },
   } = useApplication();
 
-  const [windowWidth] = useSize();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // refs
@@ -60,8 +58,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
   return (
     <>
       <div
-        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${isCollapsed ? "flex-col" : ""
-          }`}
+        className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+          isCollapsed ? "flex-col" : ""
+        }`}
       >
         {!isCollapsed && (
           <div className="w-1/2 cursor-default rounded-md bg-green-500/10 px-2.5 py-1.5 text-center text-sm font-medium text-green-500 outline-none">
@@ -72,8 +71,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent="Shortcuts">
             <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 ${isCollapsed ? "w-full" : ""
-                }`}
+              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 ${
+                isCollapsed ? "w-full" : ""
+              }`}
               onClick={() => toggleShortcutModal(true)}
             >
               <Zap className="h-3.5 w-3.5" />
@@ -82,8 +82,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent="Help">
             <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 ${isCollapsed ? "w-full" : ""
-                }`}
+              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 ${
+                isCollapsed ? "w-full" : ""
+              }`}
               onClick={() => setIsNeedHelpOpen((prev) => !prev)}
             >
               <HelpCircle className="h-3.5 w-3.5" />
@@ -93,7 +94,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <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 md:hidden"
-            onClick={() => windowWidth <= 768 ? toggleMobileSidebar() : toggleSidebar()}
+            onClick={() => toggleSidebar()}
           >
             <MoveLeft className="h-3.5 w-3.5" />
           </button>
@@ -101,9 +102,10 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
           <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
             <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 ${isCollapsed ? "w-full" : ""
-                }`}
-              onClick={() => windowWidth <= 768 ? toggleMobileSidebar() : toggleSidebar()}
+              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 ${
+                isCollapsed ? "w-full" : ""
+              }`}
+              onClick={() => toggleSidebar()}
             >
               <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
             </button>
@@ -121,8 +123,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
             leaveTo="transform opacity-0 scale-95"
           >
             <div
-              className={`absolute bottom-2 min-w-[10rem] ${isCollapsed ? "left-full" : "-left-[75px]"
-                } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+              className={`absolute bottom-2 min-w-[10rem] ${
+                isCollapsed ? "left-full" : "-left-[75px]"
+              } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
               ref={helpOptionsRef}
             >
               <div className="space-y-1 pb-2">
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index ade89555a..984bc1caf 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -54,7 +54,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
   const { workspaceSlug } = router.query;
   // store hooks
   const {
-    theme: { sidebarCollapsed, toggleMobileSidebar },
+    theme: { sidebarCollapsed, toggleSidebar },
   } = useApplication();
   const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
@@ -97,7 +97,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
   };
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
-      toggleMobileSidebar();
+      toggleSidebar();
     }
   };
   const workspacesList = Object.values(workspaces ?? {});
@@ -156,7 +156,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               <Menu.Items as={Fragment}>
                 <div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg divide-y divide-custom-border-100 outline-none">
                   <div className="flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll mb-2 px-4 vertical-scrollbar scrollbar-sm">
-                    <h6 className="sticky top-0 z-10 h-full w-full pt-3 text-sm font-medium text-custom-sidebar-text-400">
+                    <h6 className="sticky top-0 z-10 h-full w-full pt-3 pb-1 text-sm font-medium text-custom-sidebar-text-400 bg-custom-sidebar-background-100">
                       {currentUser?.email}
                     </h6>
                     {workspacesList ? (
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index 9f3f5e1d6..774a231db 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -31,7 +31,7 @@ export const WorkspaceSidebarMenu = observer(() => {
 
   const handleLinkClick = (itemKey: string) => {
     if (window.innerWidth < 768) {
-      themeStore.toggleMobileSidebar();
+      themeStore.toggleSidebar();
     }
     captureEvent(SIDEBAR_CLICKED, {
       destination: itemKey,
@@ -52,10 +52,11 @@ export const WorkspaceSidebarMenu = observer(() => {
                   disabled={!themeStore?.sidebarCollapsed}
                 >
                   <div
-                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.asPath, `/${workspaceSlug}`)
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                      } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
+                    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.asPath, `/${workspaceSlug}`)
+                        ? "bg-custom-primary-100/10 text-custom-primary-100"
+                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                    } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                   >
                     {
                       <link.Icon
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 28b57f0f5..38d3e6b6a 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -5,23 +5,29 @@ import { ChevronUp, PenSquare, Search } from "lucide-react";
 import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // components
-import { CreateUpdateDraftIssueModal } from "components/issues";
+import { CreateUpdateIssueModal } from "components/issues";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 import { EIssuesStoreType } from "constants/issue";
+// types
+import { TIssue } from "@plane/types";
 
 export const WorkspaceSidebarQuickAction = observer(() => {
   // states
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
 
-  const { theme: themeStore, commandPalette: commandPaletteStore } = useApplication();
+  const {
+    router: { workspaceSlug },
+    theme: themeStore,
+    commandPalette: commandPaletteStore,
+  } = useApplication();
   const { setTrackElement } = useEventTracker();
   const { joinedProjectIds } = useProject();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
 
-  const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
+  const { storedValue, setValue } = useLocalStorage<Record<string, Partial<TIssue>>>("draftedIssue", {});
 
   //useState control for displaying draft issue button instead of group hover
   const [isDraftButtonOpen, setIsDraftButtonOpen] = useState(false);
@@ -45,18 +51,25 @@ export const WorkspaceSidebarQuickAction = observer(() => {
       setIsDraftButtonOpen(false);
     }, 300);
   };
+
+  const workspaceDraftIssue = workspaceSlug ? storedValue?.[workspaceSlug] ?? undefined : undefined;
+
+  const removeWorkspaceDraftIssue = () => {
+    const draftIssues = storedValue ?? {};
+    if (workspaceSlug && draftIssues[workspaceSlug]) delete draftIssues[workspaceSlug];
+    setValue(draftIssues);
+  };
+
   return (
     <>
-      <CreateUpdateDraftIssueModal
+      <CreateUpdateIssueModal
         isOpen={isDraftIssueModalOpen}
-        handleClose={() => setIsDraftIssueModalOpen(false)}
-        prePopulateData={storedValue ? JSON.parse(storedValue) : {}}
-        onSubmit={() => {
-          localStorage.removeItem("draftedIssue");
-          clearValue();
-        }}
-        fieldsToShow={["all"]}
+        onClose={() => setIsDraftIssueModalOpen(false)}
+        data={workspaceDraftIssue ?? {}}
+        // storeType={storeType}
+        isDraft={true}
       />
+
       <div
         className={`mt-4 flex w-full cursor-pointer items-center justify-between px-4 ${
           isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
@@ -87,7 +100,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
               {!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
             </button>
 
-            {!disabled && storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
+            {!disabled && workspaceDraftIssue && (
               <>
                 <div
                   className={`h-8 w-0.5 bg-custom-sidebar-background-80 ${isSidebarCollapsed ? "hidden" : "block"}`}
diff --git a/web/components/workspace/views/default-view-list-item.tsx b/web/components/workspace/views/default-view-list-item.tsx
index 6262621f4..ad2f487f7 100644
--- a/web/components/workspace/views/default-view-list-item.tsx
+++ b/web/components/workspace/views/default-view-list-item.tsx
@@ -15,7 +15,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
   return (
     <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
       <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
-        <div className="relative flex w-full items-center justify-between rounded px-5 py-4">
+        <div className="relative flex w-full h-[52px] items-center justify-between rounded px-5 py-4">
           <div className="flex w-full items-center justify-between">
             <div className="flex items-center gap-4">
               <div className="flex flex-col">
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index ce04b2f2d..71627c08a 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -8,7 +8,7 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // types
-import { IWorkspaceView } from "@plane/types";
+import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
@@ -39,7 +39,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
     reset,
     setValue,
     watch,
-  } = useForm({
+  } = useForm<IWorkspaceView>({
     defaultValues,
   });
 
@@ -59,7 +59,35 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
     });
   }, [data, preLoadedData, reset]);
 
-  const selectedFilters = watch("filters");
+  const selectedFilters: IIssueFilterOptions = watch("filters");
+
+  // filters whose value not null or empty array
+  let appliedFilters: IIssueFilterOptions | undefined = undefined;
+  Object.entries(selectedFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+    if (Array.isArray(value) && value.length === 0) return;
+    if (!appliedFilters) appliedFilters = {};
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    // To clear all filters of any particular filter key.
+    if (!value) {
+      setValue("filters", {
+        ...selectedFilters,
+        [key]: [],
+      });
+      return;
+    }
+
+    let newValues = selectedFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    setValue("filters", {
+      ...selectedFilters,
+      [key]: newValues,
+    });
+  };
 
   const clearAllFilters = () => {
     if (!selectedFilters) return;
@@ -151,11 +179,12 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
           {selectedFilters && Object.keys(selectedFilters).length > 0 && (
             <div>
               <AppliedFiltersList
-                appliedFilters={selectedFilters}
+                appliedFilters={appliedFilters ?? {}}
                 handleClearAllFilters={clearAllFilters}
-                handleRemoveFilter={() => {}}
+                handleRemoveFilter={handleRemoveFilter}
                 labels={workspaceLabels ?? undefined}
                 states={undefined}
+                alwaysAllowEditing
               />
             </div>
           )}
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index 138d47323..888cbf572 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
@@ -24,9 +24,8 @@ const ViewTab = observer((props: { viewId: string }) => {
   if (!view) return null;
 
   return (
-    <Link key={viewId} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
+    <Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
       <span
-        id={`global-view-${viewId}`}
         className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
           viewId === globalViewId
             ? "border-custom-primary-100 text-custom-primary-100"
@@ -42,6 +41,7 @@ const ViewTab = observer((props: { viewId: string }) => {
 export const GlobalViewsHeader: React.FC = observer(() => {
   // states
   const [createViewModal, setCreateViewModal] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
@@ -54,6 +54,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
 
   // bring the active view to the centre of the header
   useEffect(() => {
+<<<<<<< HEAD
     if (!globalViewId) return;
 
     captureEvent(GLOBAL_VIEW_OPENED, {
@@ -67,6 +68,24 @@ export const GlobalViewsHeader: React.FC = observer(() => {
 
     if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
   }, [globalViewId, captureEvent]);
+=======
+    if (globalViewId && currentWorkspaceViews) {
+      captureEvent(GLOBAL_VIEW_OPENED, {
+        view_id: globalViewId,
+        view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
+          ? "Default"
+          : "Custom",
+      });
+      const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
+      if (activeTabElement && containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const activeTabRect = activeTabElement.getBoundingClientRect();
+        const diff = containerRect.right - activeTabRect.right;
+        activeTabElement.scrollIntoView({ behavior: "smooth", inline: diff > 500 ? "center" : "nearest" });
+      }
+    }
+  }, [globalViewId, currentWorkspaceViews, containerRef]);
+>>>>>>> 62693abb0992a35f2cd57c7caf8b94304c2756f7
 
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -74,9 +93,12 @@ export const GlobalViewsHeader: React.FC = observer(() => {
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div className="group relative flex border-b border-custom-border-200">
-        <div className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm">
+        <div
+          ref={containerRef}
+          className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
+        >
           {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
-            <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
+            <Link key={tab.key} id={`global-view-${tab.key}`} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
               <span
                 className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
                   tab.key === globalViewId
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
index 9dbf69d45..28f25551c 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -39,7 +39,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
       <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
       <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
         <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
-          <div className="relative flex w-full items-center justify-between rounded p-4">
+          <div className="relative flex h-[52px] w-full items-center justify-between rounded p-4">
             <div className="flex w-full items-center justify-between">
               <div className="flex items-center gap-4">
                 <div className="flex flex-col">
diff --git a/web/constants/dashboard.ts b/web/constants/dashboard.ts
index 3f251ca78..b1cfa51d7 100644
--- a/web/constants/dashboard.ts
+++ b/web/constants/dashboard.ts
@@ -256,7 +256,7 @@ export const SIDEBAR_MENU_ITEMS: {
     label: "Analytics",
     href: `/analytics`,
     access: EUserWorkspaceRoles.MEMBER,
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/analytics`,
+    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/analytics`),
     Icon: BarChart2,
   },
   {
diff --git a/web/constants/empty-state.ts b/web/constants/empty-state.ts
index eaf7f4b05..a1b2b06f3 100644
--- a/web/constants/empty-state.ts
+++ b/web/constants/empty-state.ts
@@ -244,9 +244,9 @@ export const EMPTY_ISSUE_STATE_DETAILS = {
     key: "archived",
     title: "No archived issues yet",
     description:
-      "Archived issues help you remove issues you completed or cancelled from focus. You can set automation to auto archive issues and find them here.",
+      "Archived issues help you remove issues you completed or canceled from focus. You can set automation to auto archive issues and find them here.",
     primaryButton: {
-      text: "Set Automation",
+      text: "Set automation",
     },
   },
   draft: {
diff --git a/web/constants/event-tracker.ts b/web/constants/event-tracker.ts
index a9275e621..a4e59a777 100644
--- a/web/constants/event-tracker.ts
+++ b/web/constants/event-tracker.ts
@@ -159,14 +159,29 @@ export const getIssuesDisplayFilterPayload = (payload: any) => {
 };
 
 export const elementFromPath = (path?: string) => {
-  if (path?.includes("workspace-views")) return "Global view";
-  if (path?.includes("cycles")) return "Cycle";
-  if (path?.includes("modules")) return "Module";
-  if (path?.includes("views")) return "Project view";
-  if (path?.includes("inbox")) return "Inbox";
-  if (path?.includes("draft")) return "Draft";
-  if (path?.includes("archived")) return "Archive";
-  return "Project";
+  if (!path)
+    return {
+      element: "Project",
+      element_id: path?.split("/").at(-2),
+    };
+
+  let element = "Project";
+  if (path.includes("workspace-views")) element = "Global view";
+  else if (path.includes("cycles")) element = "Cycle";
+  else if (path.includes("modules")) element = "Module";
+  else if (path.includes("pages")) element = "Project page";
+  else if (path.includes("views")) element = "Project view";
+  else if (path.includes("profile")) element = "Profile";
+  else if (path.includes("inbox")) element = "Inbox";
+  else if (path.includes("draft")) element = "Draft";
+  else if (path.includes("archived")) element = "Archive";
+
+  return {
+    element: element,
+    element_id: ["Project", "Draft", "Archive"].includes(element)
+      ? path.split("/").at(-2)
+      : path.split("/").at(-1),
+  };
 };
 
 // Workspace crud Events
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 4bb6bcec0..7e0fd7a06 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -49,22 +49,6 @@ export const ISSUE_PRIORITIES: {
   { key: "none", title: "None" },
 ];
 
-export const ISSUE_START_DATE_OPTIONS = [
-  { key: "last_week", title: "Last Week" },
-  { key: "2_weeks_from_now", title: "2 weeks from now" },
-  { key: "1_month_from_now", title: "1 month from now" },
-  { key: "2_months_from_now", title: "2 months from now" },
-  { key: "custom", title: "Custom" },
-];
-
-export const ISSUE_DUE_DATE_OPTIONS = [
-  { key: "last_week", title: "Last Week" },
-  { key: "2_weeks_from_now", title: "2 weeks from now" },
-  { key: "1_month_from_now", title: "1 month from now" },
-  { key: "2_months_from_now", title: "2 months from now" },
-  { key: "custom", title: "Custom" },
-];
-
 export const ISSUE_GROUP_BY_OPTIONS: {
   key: TIssueGroupByOptions;
   title: string;
@@ -73,6 +57,8 @@ export const ISSUE_GROUP_BY_OPTIONS: {
   { key: "state_detail.group", title: "State Groups" },
   { key: "priority", title: "Priority" },
   { key: "project", title: "Project" }, // required this on my issues
+  { key: "cycle", title: "Cycle" }, // required this on my issues
+  { key: "module", title: "Module" }, // required this on my issues
   { key: "labels", title: "Labels" },
   { key: "assignees", title: "Assignees" },
   { key: "created_by", title: "Created By" },
@@ -140,81 +126,6 @@ export const ISSUE_LAYOUTS: {
   { key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChartSquare },
 ];
 
-export const ISSUE_LIST_FILTERS = [
-  { key: "mentions", title: "Mentions" },
-  { key: "priority", title: "Priority" },
-  { key: "state", title: "State" },
-  { key: "assignees", title: "Assignees" },
-  { key: "created_by", title: "Created By" },
-  { key: "labels", title: "Labels" },
-  { key: "start_date", title: "Start Date" },
-  { key: "due_date", title: "Due Date" },
-];
-
-export const ISSUE_KANBAN_FILTERS = [
-  { key: "priority", title: "Priority" },
-  { key: "state", title: "State" },
-  { key: "assignees", title: "Assignees" },
-  { key: "created_by", title: "Created By" },
-  { key: "labels", title: "Labels" },
-  { key: "start_date", title: "Start Date" },
-  { key: "due_date", title: "Due Date" },
-];
-
-export const ISSUE_CALENDER_FILTERS = [
-  { key: "priority", title: "Priority" },
-  { key: "state", title: "State" },
-  { key: "assignees", title: "Assignees" },
-  { key: "created_by", title: "Created By" },
-  { key: "labels", title: "Labels" },
-];
-
-export const ISSUE_SPREADSHEET_FILTERS = [
-  { key: "priority", title: "Priority" },
-  { key: "state", title: "State" },
-  { key: "assignees", title: "Assignees" },
-  { key: "created_by", title: "Created By" },
-  { key: "labels", title: "Labels" },
-  { key: "start_date", title: "Start Date" },
-  { key: "due_date", title: "Due Date" },
-];
-
-export const ISSUE_GANTT_FILTERS = [
-  { key: "priority", title: "Priority" },
-  { key: "state", title: "State" },
-  { key: "assignees", title: "Assignees" },
-  { key: "created_by", title: "Created By" },
-  { key: "labels", title: "Labels" },
-  { key: "start_date", title: "Start Date" },
-  { key: "due_date", title: "Due Date" },
-];
-
-export const ISSUE_LIST_DISPLAY_FILTERS = [
-  { key: "group_by", title: "Group By" },
-  { key: "order_by", title: "Order By" },
-  { key: "issue_type", title: "Issue Type" },
-  { key: "sub_issue", title: "Sub Issue" },
-  { key: "show_empty_groups", title: "Show Empty Groups" },
-];
-
-export const ISSUE_KANBAN_DISPLAY_FILTERS = [
-  { key: "group_by", title: "Group By" },
-  { key: "order_by", title: "Order By" },
-  { key: "issue_type", title: "Issue Type" },
-  { key: "sub_issue", title: "Sub Issue" },
-  { key: "show_empty_groups", title: "Show Empty Groups" },
-];
-
-export const ISSUE_CALENDER_DISPLAY_FILTERS = [{ key: "issue_type", title: "Issue Type" }];
-
-export const ISSUE_SPREADSHEET_DISPLAY_FILTERS = [{ key: "issue_type", title: "Issue Type" }];
-
-export const ISSUE_GANTT_DISPLAY_FILTERS = [
-  { key: "order_by", title: "Order By" },
-  { key: "issue_type", title: "Issue Type" },
-  { key: "sub_issue", title: "Sub Issue" },
-];
-
 export interface ILayoutDisplayFiltersOptions {
   filters: (keyof IIssueFilterOptions)[];
   display_properties: boolean;
@@ -263,10 +174,30 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
   archived_issues: {
     list: {
-      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
       display_properties: true,
       display_filters: {
-        group_by: ["state", "state_detail.group", "priority", "labels", "assignees", "created_by", null],
+        group_by: [
+          "state",
+          "cycle",
+          "module",
+          "state_detail.group",
+          "priority",
+          "labels",
+          "assignees",
+          "created_by",
+          null,
+        ],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
@@ -278,10 +209,10 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
   draft_issues: {
     list: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: ["state_detail.group", "priority", "project", "labels", null],
+        group_by: ["state_detail.group", "cycle", "module", "priority", "project", "labels", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
@@ -291,10 +222,10 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     kanban: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
+      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date"],
       display_properties: true,
       display_filters: {
-        group_by: ["state_detail.group", "priority", "project", "labels"],
+        group_by: ["state_detail.group", "cycle", "module", "priority", "project", "labels"],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
@@ -350,10 +281,21 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
   },
   issues: {
     list: {
-      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
       display_properties: true,
       display_filters: {
-        group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        group_by: ["state", "priority", "cycle", "module", "labels", "assignees", "created_by", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
@@ -363,11 +305,22 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     kanban: {
-      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
       display_properties: true,
       display_filters: {
-        group_by: ["state", "priority", "labels", "assignees", "created_by"],
-        sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        group_by: ["state", "priority", "cycle", "module", "labels", "assignees", "created_by"],
+        sub_group_by: ["state", "priority", "cycle", "module", "labels", "assignees", "created_by", null],
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"],
         type: [null, "active", "backlog"],
       },
@@ -377,7 +330,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     calendar: {
-      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date"],
+      filters: ["priority", "state", "cycle", "module", "assignees", "mentions", "created_by", "labels", "start_date"],
       display_properties: true,
       display_filters: {
         type: [null, "active", "backlog"],
@@ -388,19 +341,41 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
       },
     },
     spreadsheet: {
-      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
       display_properties: true,
       display_filters: {
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
         type: [null, "active", "backlog"],
       },
       extra_options: {
-        access: false,
-        values: [],
+        access: true,
+        values: ["sub_issue"],
       },
     },
     gantt_chart: {
-      filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
       display_properties: false,
       display_filters: {
         order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
diff --git a/web/constants/project.ts b/web/constants/project.ts
index 9e7bdee9e..6073e96be 100644
--- a/web/constants/project.ts
+++ b/web/constants/project.ts
@@ -57,11 +57,11 @@ export const MONTHS = [
 export const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
 export const PROJECT_AUTOMATION_MONTHS = [
-  { label: "1 Month", value: 1 },
-  { label: "3 Months", value: 3 },
-  { label: "6 Months", value: 6 },
-  { label: "9 Months", value: 9 },
-  { label: "12 Months", value: 12 },
+  { label: "1 month", value: 1 },
+  { label: "3 months", value: 3 },
+  { label: "6 months", value: 6 },
+  { label: "9 months", value: 9 },
+  { label: "12 months", value: 12 },
 ];
 
 export const PROJECT_UNSPLASH_COVERS = [
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index 465449047..aa588d9e1 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -1,6 +1,6 @@
 import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
 import { LayersIcon, DoubleCircleIcon, UserGroupIcon, DiceIcon, ContrastIcon } from "@plane/ui";
-import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip } from "lucide-react";
+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 {
@@ -60,7 +60,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "target_date",
     descendingOrderTitle: "Old",
-    icon: CalendarDays,
+    icon: CalendarCheck2,
     Column: SpreadsheetDueDateColumn,
   },
   estimate: {
@@ -114,7 +114,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "start_date",
     descendingOrderTitle: "Old",
-    icon: CalendarDays,
+    icon: CalendarClock,
     Column: SpreadsheetStartDateColumn,
   },
   state: {
diff --git a/web/constants/swr-config.ts b/web/constants/swr-config.ts
index 38478fcea..66e799126 100644
--- a/web/constants/swr-config.ts
+++ b/web/constants/swr-config.ts
@@ -1,7 +1,7 @@
 export const SWR_CONFIG = {
   refreshWhenHidden: false,
-  revalidateIfStale: false,
-  revalidateOnFocus: false,
+  revalidateIfStale: true,
+  revalidateOnFocus: true,
   revalidateOnMount: true,
   refreshInterval: 600000,
   errorRetryCount: 3,
diff --git a/web/helpers/emoji.helper.tsx b/web/helpers/emoji.helper.tsx
index 026211634..5ff95027b 100644
--- a/web/helpers/emoji.helper.tsx
+++ b/web/helpers/emoji.helper.tsx
@@ -30,7 +30,7 @@ export const renderEmoji = (
 
   if (typeof emoji === "object")
     return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded !text-sm">
+      <span style={{ fontSize: "16px", color: emoji.color }} className="material-symbols-rounded">
         {emoji.name}
       </span>
     );
@@ -41,16 +41,13 @@ 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;
 };
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
index 2dd165f65..831cb321e 100644
--- a/web/helpers/issue.helper.ts
+++ b/web/helpers/issue.helper.ts
@@ -1,10 +1,20 @@
 import { v4 as uuidv4 } from "uuid";
+import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { TIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams } from "@plane/types";
+import {
+  TIssue,
+  TIssueGroupByOptions,
+  TIssueLayouts,
+  TIssueOrderByOptions,
+  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>,
@@ -132,3 +142,32 @@ export const createIssuePayload: (projectId: string, formData: Partial<TIssue>)
 
   return payload;
 };
+
+/**
+ * @description check if the issue due date should be highlighted
+ * @param date
+ * @param stateGroup
+ * @returns boolean
+ */
+export const shouldHighlightIssueDueDate = (
+  date: string | Date | null,
+  stateGroup: TStateGroups | undefined
+): boolean => {
+  if (!date || !stateGroup) return false;
+  // if the issue is completed or cancelled, don't highlight the due date
+  if ([STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateGroup)) return false;
+
+  const parsedDate = new Date(date);
+  const targetDateDistance = differenceInCalendarDays(parsedDate, new Date());
+
+  // if the issue is overdue, highlight the due date
+  return targetDateDistance <= 0;
+};
+export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] =>
+  blocks?.map((block) => ({
+    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,
+  }));
diff --git a/web/helpers/project.helper.ts b/web/helpers/project.helper.ts
new file mode 100644
index 000000000..8d78964ee
--- /dev/null
+++ b/web/helpers/project.helper.ts
@@ -0,0 +1,45 @@
+import { IProject } from "@plane/types";
+
+/**
+ * Updates the sort order of the project.
+ * @param sortIndex
+ * @param destinationIndex
+ * @param projectId
+ * @returns number | undefined
+ */
+export const orderJoinedProjects = (
+  sourceIndex: number,
+  destinationIndex: number,
+  currentProjectId: string,
+  joinedProjects: IProject[]
+): number | undefined => {
+  if (!currentProjectId || sourceIndex < 0 || destinationIndex < 0 || joinedProjects.length <= 0) return undefined;
+
+  let updatedSortOrder: number | undefined = undefined;
+  const sortOrderDefaultValue = 10000;
+
+  if (destinationIndex === 0) {
+    // updating project at the top of the project
+    const currentSortOrder = joinedProjects[destinationIndex].sort_order || 0;
+    updatedSortOrder = currentSortOrder - sortOrderDefaultValue;
+  } else if (destinationIndex === joinedProjects.length - 1) {
+    // updating project at the bottom of the project
+    const currentSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
+    updatedSortOrder = currentSortOrder + sortOrderDefaultValue;
+  } else {
+    // updating project in the middle of the project
+    if (sourceIndex > destinationIndex) {
+      const destinationTopProjectSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
+      const destinationBottomProjectSortOrder = joinedProjects[destinationIndex].sort_order || 0;
+      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+      updatedSortOrder = updatedValue;
+    } else {
+      const destinationTopProjectSortOrder = joinedProjects[destinationIndex].sort_order || 0;
+      const destinationBottomProjectSortOrder = joinedProjects[destinationIndex + 1].sort_order || 0;
+      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+      updatedSortOrder = updatedValue;
+    }
+  }
+
+  return updatedSortOrder;
+};
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
index 22b5834b0..d30b29b52 100644
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@@ -4,6 +4,7 @@ import {
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   VIEW_ISSUES,
 } from "constants/fetch-keys";
+import * as DOMPurify from 'dompurify';
 
 export const addSpaceIfCamelCase = (str: string) => {
   if (str === undefined || str === null) return "";
@@ -171,10 +172,10 @@ export const getFetchKeysForIssueMutation = (options: {
   const ganttFetchKey = cycleId
     ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
     : moduleId
-      ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
-      : viewId
-        ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
-        : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
+    ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
+    : viewId
+    ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
+    : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
 
   return {
     ...ganttFetchKey,
@@ -224,3 +225,10 @@ export const checkEmailValidity = (email: string): boolean => {
 
   return isEmailValid;
 };
+
+export const isEmptyHtmlString = (htmlString: string) => {
+  // Remove HTML tags using regex
+  const cleanText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] });
+  // Trim the string and check if it's empty
+  return cleanText.trim() === "";
+};
diff --git a/web/hooks/store/use-page.ts b/web/hooks/store/use-page.ts
index 8971acd22..2d4dbd5b1 100644
--- a/web/hooks/store/use-page.ts
+++ b/web/hooks/store/use-page.ts
@@ -9,13 +9,13 @@ export const usePage = (pageId: string) => {
   const { projectPageMap, projectArchivedPageMap } = context.projectPages;
 
   const { projectId, workspaceSlug } = context.app.router;
-  if (!projectId || !workspaceSlug) throw new Error("usePage must be used within ProjectProvider");
-
-  if (projectPageMap[projectId] && projectPageMap[projectId][pageId]) {
-    return projectPageMap[projectId][pageId];
-  } else if (projectArchivedPageMap[projectId] && projectArchivedPageMap[projectId][pageId]) {
-    return projectArchivedPageMap[projectId][pageId];
-  } else {
+  if (!projectId || !workspaceSlug) {
+    console.log("usePage must be used within ProjectProvider");
     return;
   }
+
+  if (projectPageMap[projectId] && projectPageMap[projectId][pageId]) return projectPageMap[projectId][pageId];
+  else if (projectArchivedPageMap[projectId] && projectArchivedPageMap[projectId][pageId])
+    return projectArchivedPageMap[projectId][pageId];
+  else return;
 };
diff --git a/web/hooks/use-workspace-issue-properties.ts b/web/hooks/use-workspace-issue-properties.ts
index 5dd0bc82b..8622100aa 100644
--- a/web/hooks/use-workspace-issue-properties.ts
+++ b/web/hooks/use-workspace-issue-properties.ts
@@ -15,30 +15,35 @@ export const useWorkspaceIssueProperties = (workspaceSlug: string | string[] | u
   // fetch workspace Modules
   useSWR(
     workspaceSlug ? `WORKSPACE_MODULES_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceModules(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchWorkspaceModules(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   // fetch workspace Cycles
   useSWR(
     workspaceSlug ? `WORKSPACE_CYCLES_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceCycles(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchWorkspaceCycles(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   // fetch workspace labels
   useSWR(
     workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   // fetch workspace states
   useSWR(
     workspaceSlug ? `WORKSPACE_STATES_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   // fetch workspace estimates
   useSWR(
     workspaceSlug ? `WORKSPACE_ESTIMATES_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceEstimates(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchWorkspaceEstimates(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 };
diff --git a/web/layouts/app-layout/layout.tsx b/web/layouts/app-layout/layout.tsx
index d0bd7849a..2a788e761 100644
--- a/web/layouts/app-layout/layout.tsx
+++ b/web/layouts/app-layout/layout.tsx
@@ -33,7 +33,7 @@ export const AppLayout: FC<IAppLayout> = observer((props) => {
         // await issues?.fetchIssues(workspaceSlug, projectId, issues?.groupedIssueIds ? "mutation" : "init-loader");
       }
     },
-    { revalidateOnFocus: false, refreshInterval: 600000, revalidateOnMount: true }
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   return (
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index 8477525d4..c3b47d021 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -20,9 +20,9 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
   const ref = useRef<HTMLDivElement>(null);
 
   useOutsideClickDetector(ref, () => {
-    if (themStore.mobileSidebarCollapsed === false) {
+    if (themStore.sidebarCollapsed === false) {
       if (window.innerWidth < 768) {
-        themStore.toggleMobileSidebar();
+        themStore.toggleSidebar();
       }
     }
   });
@@ -31,8 +31,8 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
     <div
       className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
         fixed md:relative
-        ${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
-        sm:${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
+        ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
         md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
         lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
       `}
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
index b9fd22f2d..bdd2da8b5 100644
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -66,37 +66,44 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   // fetching project labels
   useSWR(
     workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project members
   useSWR(
     workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project states
   useSWR(
     workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project estimates
   useSWR(
     workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project cycles
   useSWR(
     workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project modules
   useSWR(
     workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchModules(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchModules(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project views
   useSWR(
     workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null
+    workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project inboxes if inbox is enabled in project settings
   useSWR(
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index 9f402cb57..ba6498301 100644
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -26,22 +26,26 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   // fetching user workspace information
   useSWR(
     workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
-    workspaceSlug ? () => membership.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null
+    workspaceSlug ? () => membership.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching workspace projects
   useSWR(
     workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchProjects(workspaceSlug.toString()) : null
+    workspaceSlug ? () => fetchProjects(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetch workspace members
   useSWR(
     workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
+    workspaceSlug ? () => 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 ? () => membership.fetchUserWorkspaceProjectsRole(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
   // while data is being loaded
diff --git a/web/layouts/settings-layout/profile/sidebar.tsx b/web/layouts/settings-layout/profile/sidebar.tsx
index fc0bf7435..85f82961f 100644
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@@ -40,7 +40,7 @@ export const ProfileLayoutSidebar = observer(() => {
   const { setToastAlert } = useToast();
   // store hooks
   const {
-    theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar },
+    theme: { sidebarCollapsed, toggleSidebar },
   } = useApplication();
   const { currentUser, currentUserSettings, signOut } = useUser();
   const { workspaces } = useWorkspace();
@@ -78,7 +78,7 @@ export const ProfileLayoutSidebar = observer(() => {
 
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
-      toggleMobileSidebar();
+      toggleSidebar();
     }
   };
 
@@ -113,8 +113,9 @@ export const ProfileLayoutSidebar = observer(() => {
       <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
         <Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}>
           <div
-            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${sidebarCollapsed ? "justify-center" : ""
-              }`}
+            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
+              sidebarCollapsed ? "justify-center" : ""
+            }`}
           >
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <ChevronLeft className="h-5 w-5" strokeWidth={1} />
@@ -136,10 +137,11 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
                   <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                     <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)
-                        ? "bg-custom-primary-100/10 text-custom-primary-100"
-                        : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                        } ${sidebarCollapsed ? "justify-center" : ""}`}
+                      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)
+                          ? "bg-custom-primary-100/10 text-custom-primary-100"
+                          : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                      } ${sidebarCollapsed ? "justify-center" : ""}`}
                     >
                       {<link.Icon className="h-4 w-4" />}
                       {!sidebarCollapsed && link.label}
@@ -160,17 +162,20 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Link
                   key={workspace.id}
                   href={`/${workspace.slug}`}
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${sidebarCollapsed ? "justify-center" : `justify-between`
-                    }`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                    sidebarCollapsed ? "justify-center" : `justify-between`
+                  }`}
                   onClick={handleItemClick}
                 >
                   <span
-                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : ""
-                      }`}
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
                   >
                     <span
-                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white"
-                        }`}
+                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
+                        !workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                      }`}
                     >
                       {workspace?.logo && workspace.logo !== "" ? (
                         <img
@@ -195,8 +200,9 @@ export const ProfileLayoutSidebar = observer(() => {
               <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
                 <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                   <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" : ""
-                      }`}
+                    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" : ""
+                    }`}
                   >
                     {<link.Icon className="h-4 w-4" />}
                     {!sidebarCollapsed && link.label}
@@ -208,8 +214,9 @@ export const ProfileLayoutSidebar = observer(() => {
         </div>
         <div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
           <div
-            className={`flex w-full ${sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
-              }`}
+            className={`flex w-full ${
+              sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
+            }`}
           >
             <button
               type="button"
@@ -229,8 +236,9 @@ export const ProfileLayoutSidebar = observer(() => {
             </button>
             <button
               type="button"
-              className={`ml-auto 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 ${sidebarCollapsed ? "w-full" : ""
-                }`}
+              className={`ml-auto 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 ${
+                sidebarCollapsed ? "w-full" : ""
+              }`}
               onClick={() => toggleSidebar()}
             >
               <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
diff --git a/web/layouts/user-profile-layout/layout.tsx b/web/layouts/user-profile-layout/layout.tsx
index 5ff3891e0..60c17d8d4 100644
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/layouts/user-profile-layout/layout.tsx
@@ -28,8 +28,9 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
   const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");
 
   return (
-    <div className="h-full w-full realtive flex flex-row">
-      <div className="w-full realtive flex flex-col">
+    <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} />
         {isAuthorized || !isAuthorizedPath ? (
           <div className={`w-full overflow-hidden md:h-full ${className}`}>{children}</div>
@@ -39,8 +40,6 @@ export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
           </div>
         )}
       </div>
-
-      <ProfileSidebar />
     </div>
   );
 });
diff --git a/web/package.json b/web/package.json
index 482472672..af28cbb3d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -34,6 +34,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
+    "dompurify": "^3.0.9",
     "dotenv": "^16.0.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -61,6 +62,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.202",
     "@types/node": "18.0.6",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index 1538d240f..ee1be4ebb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
 import useToast from "hooks/use-toast";
-import { useIssueDetail, useIssues, useProject } from "hooks/store";
+import { useIssueDetail, useIssues, useProject, useUser } from "hooks/store";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
@@ -12,13 +12,14 @@ import { IssueDetailRoot } from "components/issues";
 import { ProjectArchivedIssueDetailsHeader } from "components/headers";
 import { PageHead } from "components/core";
 // ui
-import { ArchiveIcon, Loader } from "@plane/ui";
+import { ArchiveIcon, Button, Loader } from "@plane/ui";
 // icons
-import { History } from "lucide-react";
+import { RotateCcw } from "lucide-react";
 // types
 import { NextPageWithLayout } from "lib/types";
 // constants
 import { EIssuesStoreType } from "constants/issue";
+import { EUserProjectRoles } from "constants/project";
 
 const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
@@ -32,32 +33,38 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
     issue: { getIssueById },
   } = useIssueDetail();
   const {
-    issues: { removeIssueFromArchived },
+    issues: { restoreIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
   const { setToastAlert } = useToast();
   const { getProjectById } = useProject();
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
 
   const { isLoading } = useSWR(
     workspaceSlug && projectId && archivedIssueId
       ? `ARCHIVED_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${archivedIssueId}`
       : null,
     workspaceSlug && projectId && archivedIssueId
-      ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString(), true)
+      ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString(), "ARCHIVED")
       : null
   );
 
-  const issue = getIssueById(archivedIssueId?.toString() || "") || undefined;
-  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
+  // derived values
+  const issue = archivedIssueId ? getIssueById(archivedIssueId.toString()) : undefined;
+  const project = issue ? getProjectById(issue?.project_id) : undefined;
   const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
+  // auth
+  const canRestoreIssue = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   if (!issue) return <></>;
 
-  const handleUnArchive = async () => {
+  const handleRestore = async () => {
     if (!workspaceSlug || !projectId || !archivedIssueId) return;
 
     setIsRestoring(true);
 
-    await removeIssueFromArchived(workspaceSlug as string, projectId as string, archivedIssueId as string)
+    await restoreIssue(workspaceSlug.toString(), projectId.toString(), archivedIssueId.toString())
       .then(() => {
         setToastAlert({
           type: "success",
@@ -102,21 +109,22 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
         </Loader>
       ) : (
         <div className="flex h-full overflow-hidden">
-          <div className="h-full w-full space-y-2 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
-            {issue?.archived_at && (
+          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
+            {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" />
-                  <p>This issue has been archived by Plane.</p>
+                  <p>This issue has been archived.</p>
                 </div>
-                <button
-                  className="flex items-center gap-2 rounded-md border border-custom-border-200 p-1.5 text-sm"
-                  onClick={handleUnArchive}
+                <Button
+                  className="flex items-center gap-1.5 rounded-md border border-custom-border-200 p-1.5 text-sm"
+                  onClick={handleRestore}
                   disabled={isRestoring}
+                  variant="neutral-primary"
                 >
-                  <History className="h-3.5 w-3.5" />
-                  <span>{isRestoring ? "Restoring..." : "Restore Issue"}</span>
-                </button>
+                  <RotateCcw className="h-3 w-3" />
+                  <span>{isRestoring ? "Restoring" : "Restore"}</span>
+                </Button>
               </div>
             )}
             {workspaceSlug && projectId && archivedIssueId && (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index c24c80a92..34019c026 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -5,44 +5,28 @@ import { observer } from "mobx-react";
 import { AppLayout } from "layouts/app-layout";
 // contexts
 import { ArchivedIssueLayoutRoot } from "components/issues";
-// ui
-import { ArchiveIcon } from "@plane/ui";
 // components
 import { ProjectArchivedIssuesHeader } from "components/headers";
 import { PageHead } from "components/core";
-// icons
-import { X } from "lucide-react";
 // types
 import { NextPageWithLayout } from "lib/types";
 // hooks
 import { useProject } from "hooks/store";
 
 const ProjectArchivedIssuesPage: NextPageWithLayout = observer(() => {
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  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 Issues`;
+  const pageTitle = project?.name && `${project?.name} - Archived issues`;
 
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="flex h-full w-full flex-col">
-        <div className="ga-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm">
-          <button
-            type="button"
-            onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
-            className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
-          >
-            <ArchiveIcon className="h-4 w-4" />
-            <span>Archived Issues</span>
-            <X className="h-3 w-3" />
-          </button>
-        </div>
-        <ArchivedIssueLayoutRoot />
-      </div>
+      <ArchivedIssueLayoutRoot />
     </>
   );
 });
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
index e2ad25214..bf11063c3 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -26,7 +26,7 @@ const ProjectDraftIssuesPage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <div className="flex h-full w-full flex-col">
-        <div className="ga-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm">
+        <div className="gap-1 flex items-center border-b border-custom-border-200 px-4 py-2.5 shadow-sm">
           <button
             type="button"
             onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
@@ -34,8 +34,8 @@ const ProjectDraftIssuesPage: NextPageWithLayout = observer(() => {
           >
             <PenSquare className="h-4 w-4" />
             <span>Draft Issues</span>
+            <X className="h-3 w-3" />
           </button>
-          <X className="h-3 w-3" />
         </div>
         <DraftIssueLayoutRoot />
       </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 125ee4245..de412c9d7 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -7,6 +7,7 @@ import { useProject, useInboxIssues } from "hooks/store";
 // layouts
 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";
@@ -23,7 +24,7 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
     issues: { fetchInboxIssues },
   } = useInboxIssues();
   // fetching the Inbox filters and issues
-  useSWR(
+  const { isLoading } = useSWR(
     workspaceSlug && projectId && currentProjectDetails && currentProjectDetails?.inbox_view
       ? `INBOX_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}`
       : null,
@@ -37,7 +38,12 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : undefined;
 
-  if (!workspaceSlug || !projectId || !inboxId || !currentProjectDetails?.inbox_view) return <></>;
+  if (!workspaceSlug || !projectId || !inboxId || !currentProjectDetails?.inbox_view || isLoading)
+    return (
+      <div className="flex h-full flex-col">
+        <InboxLayoutLoader />
+      </div>
+    );
 
   return (
     <>
diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx
index e967df828..bdde41d08 100644
--- a/web/pages/profile/index.tsx
+++ b/web/pages/profile/index.tsx
@@ -250,6 +250,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           hasError={Boolean(errors.first_name)}
                           placeholder="Enter your first name"
                           className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
+                          maxLength={24}
                         />
                       )}
                     />
@@ -273,6 +274,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           hasError={Boolean(errors.last_name)}
                           placeholder="Enter your last name"
                           className="w-full rounded-md"
+                          maxLength={24}
                         />
                       )}
                     />
@@ -369,6 +371,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                           hasError={Boolean(errors.display_name)}
                           placeholder="Enter your display name"
                           className={`w-full ${errors.display_name ? "border-red-500" : ""}`}
+                          maxLength={24}
                         />
                       )}
                     />
diff --git a/web/services/issue/issue_archive.service.ts b/web/services/issue/issue_archive.service.ts
index 065f41d7e..e2a5132a5 100644
--- a/web/services/issue/issue_archive.service.ts
+++ b/web/services/issue/issue_archive.service.ts
@@ -1,7 +1,8 @@
 import { APIService } from "services/api.service";
-// type
-import { API_BASE_URL } from "helpers/common.helper";
+// types
 import { TIssue } from "@plane/types";
+// constants
+import { API_BASE_URL } from "helpers/common.helper";
 
 export class IssueArchiveService extends APIService {
   constructor() {
@@ -18,8 +19,22 @@ export class IssueArchiveService extends APIService {
       });
   }
 
-  async unarchiveIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/unarchive/${issueId}/`)
+  async archiveIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/archive/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -32,7 +47,7 @@ export class IssueArchiveService extends APIService {
     issueId: string,
     queries?: any
   ): Promise<TIssue> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issueId}/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/archive/`, {
       params: queries,
     })
       .then((response) => response?.data)
@@ -40,12 +55,4 @@ export class IssueArchiveService extends APIService {
         throw error?.response?.data;
       });
   }
-
-  async deleteArchivedIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issuesId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
 }
diff --git a/web/services/issue/issue_draft.service.ts b/web/services/issue/issue_draft.service.ts
index b4eb995b0..a93bda776 100644
--- a/web/services/issue/issue_draft.service.ts
+++ b/web/services/issue/issue_draft.service.ts
@@ -42,8 +42,10 @@ export class IssueDraftService extends APIService {
       });
   }
 
-  async getDraftIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`)
+  async getDraftIssueById(workspaceSlug: string, projectId: string, issueId: string, queries?: any): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`, {
+      params: queries,
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response;
diff --git a/web/services/project/project.service.ts b/web/services/project/project.service.ts
index 4956b952e..0a7c6e682 100644
--- a/web/services/project/project.service.ts
+++ b/web/services/project/project.service.ts
@@ -72,9 +72,6 @@ export class ProjectService extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: {
-      view_props?: IProjectViewProps;
-      default_props?: IProjectViewProps;
-      preferences?: ProjectPreferences;
       sort_order?: number;
     }
   ): Promise<any> {
diff --git a/web/store/application/theme.store.ts b/web/store/application/theme.store.ts
index 3873e7386..0f40e86ae 100644
--- a/web/store/application/theme.store.ts
+++ b/web/store/application/theme.store.ts
@@ -6,14 +6,12 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
 export interface IThemeStore {
   // observables
   theme: string | null;
-  mobileSidebarCollapsed: boolean | undefined;
   sidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined;
   issueDetailSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
-  toggleMobileSidebar: (collapsed?: boolean) => void;
   setTheme: (theme: any) => void;
   toggleProfileSidebar: (collapsed?: boolean) => void;
   toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
@@ -22,7 +20,6 @@ export interface IThemeStore {
 
 export class ThemeStore implements IThemeStore {
   // observables
-  mobileSidebarCollapsed: boolean | undefined = true;
   sidebarCollapsed: boolean | undefined = undefined;
   theme: string | null = null;
   profileSidebarCollapsed: boolean | undefined = undefined;
@@ -34,7 +31,6 @@ export class ThemeStore implements IThemeStore {
   constructor(_rootStore: any | null = null) {
     makeObservable(this, {
       // observable
-      mobileSidebarCollapsed: observable.ref,
       sidebarCollapsed: observable.ref,
       theme: observable.ref,
       profileSidebarCollapsed: observable.ref,
@@ -42,7 +38,6 @@ export class ThemeStore implements IThemeStore {
       issueDetailSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
-      toggleMobileSidebar: action,
       setTheme: action,
       toggleProfileSidebar: action,
       toggleWorkspaceAnalyticsSidebar: action,
@@ -66,19 +61,6 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
   };
 
-  /**
-   * Toggle mobile sidebar collapsed state
-   * @param collapsed
-   */
-  toggleMobileSidebar = (collapsed?: boolean) => {
-    if (collapsed === undefined) {
-      this.mobileSidebarCollapsed = !this.mobileSidebarCollapsed;
-    } else {
-      this.mobileSidebarCollapsed = collapsed;
-    }
-    localStorage.setItem("mobile_sidebar_collapsed", this.mobileSidebarCollapsed.toString());
-  };
-
   /**
    * Toggle the profile sidebar collapsed state
    * @param collapsed
diff --git a/web/store/cycle.store.ts b/web/store/cycle.store.ts
index 16ada6060..ee4842539 100644
--- a/web/store/cycle.store.ts
+++ b/web/store/cycle.store.ts
@@ -1,6 +1,6 @@
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-import { isFuture, isPast } from "date-fns";
+import { isFuture, isPast, isToday } from "date-fns";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
 // types
@@ -28,6 +28,7 @@ export interface ICycleStore {
   currentProjectActiveCycleId: string | null;
   // computed actions
   getCycleById: (cycleId: string) => ICycle | null;
+  getCycleNameById: (cycleId: string) => string | undefined;
   getActiveCycleById: (cycleId: string) => ICycle | null;
   getProjectCycleIds: (projectId: string) => string[] | null;
   // actions
@@ -118,7 +119,8 @@ export class CycleStore implements ICycleStore {
     if (!projectId || !this.fetchedMap[projectId]) return null;
     let completedCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
       const hasEndDatePassed = isPast(new Date(c.end_date ?? ""));
-      return c.project_id === projectId && hasEndDatePassed;
+      const isEndDateToday = isToday(new Date(c.end_date ?? ""));
+      return c.project_id === projectId && hasEndDatePassed && !isEndDateToday;
     });
     completedCycles = sortBy(completedCycles, [(c) => c.sort_order]);
     const completedCycleIds = completedCycles.map((c) => c.id);
@@ -188,6 +190,13 @@ export class CycleStore implements ICycleStore {
    */
   getCycleById = computedFn((cycleId: string): ICycle | null => this.cycleMap?.[cycleId] ?? null);
 
+  /**
+   * @description returns cycle name by cycle id
+   * @param cycleId
+   * @returns
+   */
+  getCycleNameById = computedFn((cycleId: string): string => this.cycleMap?.[cycleId]?.name);
+
   /**
    * @description returns active cycle details by cycle id
    * @param cycleId
diff --git a/web/store/inbox/inbox_issue.store.ts b/web/store/inbox/inbox_issue.store.ts
index 2fedb73dc..4f980357f 100644
--- a/web/store/inbox/inbox_issue.store.ts
+++ b/web/store/inbox/inbox_issue.store.ts
@@ -53,7 +53,7 @@ export interface IInboxIssue {
     inboxId: string,
     inboxIssueId: string,
     data: Partial<TInboxIssueExtendedDetail>
-  ) => Promise<TInboxIssueExtendedDetail>;
+  ) => Promise<void>;
   removeInboxIssue: (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => Promise<void>;
   updateInboxIssueStatus: (
     workspaceSlug: string,
@@ -61,7 +61,7 @@ export interface IInboxIssue {
     inboxId: string,
     inboxIssueId: string,
     data: TInboxDetailedStatus
-  ) => Promise<TInboxIssueExtendedDetail>;
+  ) => Promise<void>;
 }
 
 export class InboxIssue implements IInboxIssue {
@@ -215,22 +215,9 @@ export class InboxIssue implements IInboxIssue {
         issue: data,
       });
 
-      runInAction(() => {
-        const { ["issue_inbox"]: issueInboxDetail, ...issue } = response;
-        this.rootStore.inbox.rootStore.issue.issues.updateIssue(issue.id, issue);
-        const { ["id"]: omittedId, ...inboxIssue } = issueInboxDetail[0];
-        set(this.inboxIssueMap, [inboxId, response.id], inboxIssue);
-      });
-
-      runInAction(() => {
-        update(this.inboxIssues, inboxId, (inboxIssueIds: string[] = []) => {
-          if (inboxIssueIds.includes(response.id)) return inboxIssueIds;
-          return uniq(concat(inboxIssueIds, response.id));
-        });
-      });
+      this.rootStore.inbox.rootStore.issue.issues.updateIssue(inboxIssueId, data);
 
       await this.rootStore.issue.issueDetail.fetchActivities(workspaceSlug, projectId, inboxIssueId);
-      return response as any;
     } catch (error) {
       throw error;
     }
@@ -238,7 +225,7 @@ export class InboxIssue implements IInboxIssue {
 
   removeInboxIssue = async (workspaceSlug: string, projectId: string, inboxId: string, inboxIssueId: string) => {
     try {
-      const response = await this.inboxIssueService.removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
+      await this.inboxIssueService.removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
 
       runInAction(() => {
         pull(this.inboxIssues[inboxId], inboxIssueId);
@@ -248,7 +235,6 @@ export class InboxIssue implements IInboxIssue {
       });
 
       await this.rootStore.issue.issueDetail.fetchActivities(workspaceSlug, projectId, inboxIssueId);
-      return response as any;
     } catch (error) {
       throw error;
     }
@@ -262,34 +248,18 @@ export class InboxIssue implements IInboxIssue {
     data: TInboxDetailedStatus
   ) => {
     try {
-      const response = await this.inboxIssueService.updateInboxIssueStatus(
-        workspaceSlug,
-        projectId,
-        inboxId,
-        inboxIssueId,
-        data
-      );
+      await this.inboxIssueService.updateInboxIssueStatus(workspaceSlug, projectId, inboxId, inboxIssueId, data);
 
       const pendingStatus = -2;
       runInAction(() => {
-        const { ["issue_inbox"]: issueInboxDetail, ...issue } = response;
-        this.rootStore.inbox.rootStore.issue.issues.addIssue([issue]);
-        const { ["id"]: omittedId, ...inboxIssue } = issueInboxDetail[0];
-        set(this.inboxIssueMap, [inboxId, response.id], inboxIssue);
+        set(this.inboxIssueMap, [inboxId, inboxIssueId, "status"], data.status);
+
         update(this.rootStore.inbox.inbox.inboxMap, [inboxId, "pending_issue_count"], (count: number = 0) =>
           data.status === pendingStatus ? count + 1 : count - 1
         );
       });
 
-      runInAction(() => {
-        update(this.inboxIssues, inboxId, (inboxIssueIds: string[] = []) => {
-          if (inboxIssueIds.includes(response.id)) return inboxIssueIds;
-          return uniq(concat(inboxIssueIds, response.id));
-        });
-      });
-
       await this.rootStore.issue.issueDetail.fetchActivities(workspaceSlug, projectId, inboxIssueId);
-      return response as any;
     } catch (error) {
       throw error;
     }
diff --git a/web/store/issue/archived/filter.store.ts b/web/store/issue/archived/filter.store.ts
index d92453a30..032928cda 100644
--- a/web/store/issue/archived/filter.store.ts
+++ b/web/store/issue/archived/filter.store.ts
@@ -89,8 +89,6 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -183,11 +181,6 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
             _filters.displayFilters.group_by = "state";
             updatedDisplayFilters.group_by = "state";
           }
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
 
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
diff --git a/web/store/issue/archived/issue.store.ts b/web/store/issue/archived/issue.store.ts
index fa3a06f37..a0b26eb8b 100644
--- a/web/store/issue/archived/issue.store.ts
+++ b/web/store/issue/archived/issue.store.ts
@@ -1,5 +1,6 @@
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import set from "lodash/set";
+import pull from "lodash/pull";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -18,7 +19,7 @@ export interface IArchivedIssues {
   // actions
   fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
-  removeIssueFromArchived: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   quickAddIssue: undefined;
 }
 
@@ -48,7 +49,7 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
       // action
       fetchIssues: action,
       removeIssue: action,
-      removeIssueFromArchived: action,
+      restoreIssue: action,
     });
     // root store
     this.rootIssueStore = _rootStore;
@@ -70,7 +71,7 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
     const archivedIssueIds = this.issues[projectId];
     if (!archivedIssueIds) return undefined;
 
-    const _issues = this.rootIssueStore.issues.getIssuesByIds(archivedIssueIds);
+    const _issues = this.rootIssueStore.issues.getIssuesByIds(archivedIssueIds, "archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;
@@ -113,25 +114,24 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
     try {
       await this.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
 
-      const issueIndex = this.issues[projectId].findIndex((_issueId) => _issueId === issueId);
-      if (issueIndex >= 0)
-        runInAction(() => {
-          this.issues[projectId].splice(issueIndex, 1);
-        });
+      runInAction(() => {
+        pull(this.issues[projectId], issueId);
+      });
     } catch (error) {
       throw error;
     }
   };
 
-  removeIssueFromArchived = async (workspaceSlug: string, projectId: string, issueId: string) => {
+  restoreIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
     try {
-      const response = await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
+      const response = await this.archivedIssueService.restoreIssue(workspaceSlug, projectId, issueId);
 
-      const issueIndex = this.issues[projectId]?.findIndex((_issueId) => _issueId === issueId);
-      if (issueIndex && issueIndex >= 0)
-        runInAction(() => {
-          this.issues[projectId].splice(issueIndex, 1);
+      runInAction(() => {
+        this.rootStore.issues.updateIssue(issueId, {
+          archived_at: null,
         });
+        pull(this.issues[projectId], issueId);
+      });
 
       return response;
     } catch (error) {
diff --git a/web/store/issue/cycle/filter.store.ts b/web/store/issue/cycle/filter.store.ts
index dd81cfc0e..5d8c2a6b8 100644
--- a/web/store/issue/cycle/filter.store.ts
+++ b/web/store/issue/cycle/filter.store.ts
@@ -84,14 +84,14 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
     const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
     if (!filteredParams) return undefined;
 
+    if (filteredParams.includes("cycle")) filteredParams.splice(filteredParams.indexOf("cycle"), 1);
+
     const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
       userFilters?.filters as IIssueFilterOptions,
       userFilters?.displayFilters as IIssueDisplayFilterOptions,
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -195,12 +195,6 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
             updatedDisplayFilters.group_by = "state";
           }
 
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
-
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
               set(
diff --git a/web/store/issue/cycle/issue.store.ts b/web/store/issue/cycle/issue.store.ts
index 41731e134..61b280da9 100644
--- a/web/store/issue/cycle/issue.store.ts
+++ b/web/store/issue/cycle/issue.store.ts
@@ -48,6 +48,12 @@ export interface ICycleIssues {
     issueId: string,
     cycleId?: string | undefined
   ) => Promise<void>;
+  archiveIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    cycleId?: string | undefined
+  ) => Promise<void>;
   quickAddIssue: (
     workspaceSlug: string,
     projectId: string,
@@ -100,6 +106,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       createIssue: action,
       updateIssue: action,
       removeIssue: action,
+      archiveIssue: action,
       quickAddIssue: action,
       addIssueToCycle: action,
       removeIssueFromCycle: action,
@@ -127,7 +134,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     const cycleIssueIds = this.issues[cycleId];
     if (!cycleIssueIds) return;
 
-    const _issues = this.rootIssueStore.issues.getIssuesByIds(cycleIssueIds);
+    const _issues = this.rootIssueStore.issues.getIssuesByIds(cycleIssueIds, "un-archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
@@ -237,6 +244,26 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     }
   };
 
+  archiveIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    cycleId: string | undefined = undefined
+  ) => {
+    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);
+
+      runInAction(() => {
+        pull(this.issues[cycleId], issueId);
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
   quickAddIssue = async (
     workspaceSlug: string,
     projectId: string,
diff --git a/web/store/issue/draft/filter.store.ts b/web/store/issue/draft/filter.store.ts
index 8295c263d..cc58a7755 100644
--- a/web/store/issue/draft/filter.store.ts
+++ b/web/store/issue/draft/filter.store.ts
@@ -89,8 +89,6 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -179,12 +177,6 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
             updatedDisplayFilters.group_by = "state";
           }
 
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
-
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
               set(
diff --git a/web/store/issue/draft/issue.store.ts b/web/store/issue/draft/issue.store.ts
index ee6d785ec..a06213eb0 100644
--- a/web/store/issue/draft/issue.store.ts
+++ b/web/store/issue/draft/issue.store.ts
@@ -81,7 +81,7 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
     const draftIssueIds = this.issues[projectId];
     if (!draftIssueIds) return undefined;
 
-    const _issues = this.rootIssueStore.issues.getIssuesByIds(draftIssueIds);
+    const _issues = this.rootIssueStore.issues.getIssuesByIds(draftIssueIds, "un-archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;
@@ -141,7 +141,9 @@ export class DraftIssues extends IssueHelperStore implements IDraftIssues {
 
   updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
     try {
-      await this.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
+      await this.issueDraftService.updateDraftIssue(workspaceSlug, projectId, issueId, data);
+
+      this.rootStore.issues.updateIssue(issueId, data);
 
       if (data.hasOwnProperty("is_draft") && data?.is_draft === false) {
         runInAction(() => {
diff --git a/web/store/issue/helpers/issue-filter-helper.store.ts b/web/store/issue/helpers/issue-filter-helper.store.ts
index 8ff45ed09..baac4a2ad 100644
--- a/web/store/issue/helpers/issue-filter-helper.store.ts
+++ b/web/store/issue/helpers/issue-filter-helper.store.ts
@@ -74,6 +74,8 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
       mentions: filters?.mentions || undefined,
       created_by: filters?.created_by || undefined,
       labels: filters?.labels || undefined,
+      cycle: filters?.cycle || undefined,
+      module: filters?.module || undefined,
       start_date: filters?.start_date || undefined,
       target_date: filters?.target_date || undefined,
       project: filters.project || undefined,
@@ -107,6 +109,8 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
     mentions: filters?.mentions || null,
     created_by: filters?.created_by || null,
     labels: filters?.labels || null,
+    cycle: filters?.cycle || null,
+    module: filters?.module || null,
     start_date: filters?.start_date || null,
     target_date: filters?.target_date || null,
     project: filters?.project || null,
diff --git a/web/store/issue/helpers/issue-helper.store.ts b/web/store/issue/helpers/issue-helper.store.ts
index 9d498e900..a267ac9c8 100644
--- a/web/store/issue/helpers/issue-helper.store.ts
+++ b/web/store/issue/helpers/issue-helper.store.ts
@@ -36,6 +36,8 @@ export type TIssueHelperStore = {
 
 const ISSUE_FILTER_DEFAULT_DATA: Record<TIssueDisplayFilterOptions, keyof TIssue> = {
   project: "project_id",
+  cycle: "cycle_id",
+  module: "module_ids",
   state: "state_id",
   "state_detail.group": "state_group" as keyof TIssue, // state_detail.group is only being used for state_group display,
   priority: "priority",
@@ -157,6 +159,10 @@ export class IssueHelperStore implements TIssueHelperStore {
         return Object.keys(this.rootStore?.workSpaceMemberRolesMap || {});
       case "project":
         return Object.keys(this.rootStore?.projectMap || {});
+      case "cycle":
+        return Object.keys(this.rootStore?.cycleMap || {});
+      case "module":
+        return Object.keys(this.rootStore?.moduleMap || {});
       default:
         return [];
     }
diff --git a/web/store/issue/issue-details/issue.store.ts b/web/store/issue/issue-details/issue.store.ts
index 8731bf478..f42c13376 100644
--- a/web/store/issue/issue-details/issue.store.ts
+++ b/web/store/issue/issue-details/issue.store.ts
@@ -1,6 +1,6 @@
 import { makeObservable } from "mobx";
 // services
-import { IssueArchiveService, IssueService } from "services/issue";
+import { IssueArchiveService, IssueDraftService, IssueService } from "services/issue";
 // types
 import { TIssue } from "@plane/types";
 import { computedFn } from "mobx-utils";
@@ -8,9 +8,15 @@ import { IIssueDetail } from "./root.store";
 
 export interface IIssueStoreActions {
   // actions
-  fetchIssue: (workspaceSlug: string, projectId: string, issueId: string, isArchived?: boolean) => Promise<TIssue>;
+  fetchIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    issueType?: "DEFAULT" | "DRAFT" | "ARCHIVED"
+  ) => Promise<TIssue>;
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
   removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<TIssue>;
   addModulesToIssue: (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => Promise<any>;
@@ -34,6 +40,7 @@ export class IssueStore implements IIssueStore {
   // services
   issueService;
   issueArchiveService;
+  issueDraftService;
 
   constructor(rootStore: IIssueDetail) {
     makeObservable(this, {});
@@ -42,6 +49,7 @@ export class IssueStore implements IIssueStore {
     // services
     this.issueService = new IssueService();
     this.issueArchiveService = new IssueArchiveService();
+    this.issueDraftService = new IssueDraftService();
   }
 
   // helper methods
@@ -51,21 +59,54 @@ export class IssueStore implements IIssueStore {
   });
 
   // actions
-  fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string, isArchived = false) => {
+  fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string, issueType = "DEFAULT") => {
     try {
       const query = {
         expand: "issue_reactions,issue_attachment,issue_link,parent",
       };
 
       let issue: TIssue;
+      let issuePayload: TIssue;
 
-      if (isArchived)
+      if (issueType === "ARCHIVED")
         issue = await this.issueArchiveService.retrieveArchivedIssue(workspaceSlug, projectId, issueId, query);
+      else if (issueType === "DRAFT")
+        issue = await this.issueDraftService.getDraftIssueById(workspaceSlug, projectId, issueId, query);
       else issue = await this.issueService.retrieve(workspaceSlug, projectId, issueId, query);
 
       if (!issue) throw new Error("Issue not found");
 
-      this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue], true);
+      issuePayload = {
+        id: issue?.id,
+        sequence_id: issue?.sequence_id,
+        name: issue?.name,
+        description_html: issue?.description_html,
+        sort_order: issue?.sort_order,
+        state_id: issue?.state_id,
+        priority: issue?.priority,
+        label_ids: issue?.label_ids,
+        assignee_ids: issue?.assignee_ids,
+        estimate_point: issue?.estimate_point,
+        sub_issues_count: issue?.sub_issues_count,
+        attachment_count: issue?.attachment_count,
+        link_count: issue?.link_count,
+        project_id: issue?.project_id,
+        parent_id: issue?.parent_id,
+        cycle_id: issue?.cycle_id,
+        module_ids: issue?.module_ids,
+        created_at: issue?.created_at,
+        updated_at: issue?.updated_at,
+        start_date: issue?.start_date,
+        target_date: issue?.target_date,
+        completed_at: issue?.completed_at,
+        archived_at: issue?.archived_at,
+        created_by: issue?.created_by,
+        updated_by: issue?.updated_by,
+        is_draft: issue?.is_draft,
+        is_subscribed: issue?.is_subscribed,
+      };
+
+      this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issuePayload], true);
 
       // store handlers from issue detail
       // parent
@@ -116,6 +157,9 @@ export class IssueStore implements IIssueStore {
   removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
     this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
 
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.rootIssueDetailStore.rootIssueStore.projectIssues.archiveIssue(workspaceSlug, projectId, issueId);
+
   addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
     await this.rootIssueDetailStore.rootIssueStore.cycleIssues.addIssueToCycle(
       workspaceSlug,
diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts
index 4c2d6add1..db5dab307 100644
--- a/web/store/issue/issue-details/root.store.ts
+++ b/web/store/issue/issue-details/root.store.ts
@@ -47,6 +47,7 @@ export interface IIssueDetail
   isIssueLinkModalOpen: boolean;
   isParentIssueModalOpen: boolean;
   isDeleteIssueModalOpen: boolean;
+  isArchiveIssueModalOpen: boolean;
   isRelationModalOpen: TIssueRelationTypes | null;
   // computed
   isAnyModalOpen: boolean;
@@ -55,6 +56,7 @@ export interface IIssueDetail
   toggleIssueLinkModal: (value: boolean) => void;
   toggleParentIssueModal: (value: boolean) => void;
   toggleDeleteIssueModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (value: boolean) => void;
   toggleRelationModal: (value: TIssueRelationTypes | null) => void;
   // store
   rootIssueStore: IIssueRootStore;
@@ -76,6 +78,7 @@ export class IssueDetail implements IIssueDetail {
   isIssueLinkModalOpen: boolean = false;
   isParentIssueModalOpen: boolean = false;
   isDeleteIssueModalOpen: boolean = false;
+  isArchiveIssueModalOpen: boolean = false;
   isRelationModalOpen: TIssueRelationTypes | null = null;
   // store
   rootIssueStore: IIssueRootStore;
@@ -97,6 +100,7 @@ export class IssueDetail implements IIssueDetail {
       isIssueLinkModalOpen: observable.ref,
       isParentIssueModalOpen: observable.ref,
       isDeleteIssueModalOpen: observable.ref,
+      isArchiveIssueModalOpen: observable.ref,
       isRelationModalOpen: observable.ref,
       // computed
       isAnyModalOpen: computed,
@@ -105,6 +109,7 @@ export class IssueDetail implements IIssueDetail {
       toggleIssueLinkModal: action,
       toggleParentIssueModal: action,
       toggleDeleteIssueModal: action,
+      toggleArchiveIssueModal: action,
       toggleRelationModal: action,
     });
 
@@ -128,6 +133,7 @@ export class IssueDetail implements IIssueDetail {
       this.isIssueLinkModalOpen ||
       this.isParentIssueModalOpen ||
       this.isDeleteIssueModalOpen ||
+      this.isArchiveIssueModalOpen ||
       Boolean(this.isRelationModalOpen)
     );
   }
@@ -137,15 +143,22 @@ export class IssueDetail implements IIssueDetail {
   toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
   toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
   toggleDeleteIssueModal = (value: boolean) => (this.isDeleteIssueModalOpen = value);
+  toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
   toggleRelationModal = (value: TIssueRelationTypes | null) => (this.isRelationModalOpen = value);
 
   // issue
-  fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string, isArchived = false) =>
-    this.issue.fetchIssue(workspaceSlug, projectId, issueId, isArchived);
+  fetchIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    issueType: "DEFAULT" | "ARCHIVED" | "DRAFT" = "DEFAULT"
+  ) => this.issue.fetchIssue(workspaceSlug, projectId, issueId, issueType);
   updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) =>
     this.issue.updateIssue(workspaceSlug, projectId, issueId, data);
   removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
     this.issue.removeIssue(workspaceSlug, projectId, issueId);
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.issue.archiveIssue(workspaceSlug, projectId, issueId);
   addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) =>
     this.issue.addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
   removeIssueFromCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) =>
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
index 8bdb18dad..cbda505ff 100644
--- a/web/store/issue/issue.store.ts
+++ b/web/store/issue/issue.store.ts
@@ -18,7 +18,7 @@ export type IIssueStore = {
   removeIssue(issueId: string): void;
   // helper methods
   getIssueById(issueId: string): undefined | TIssue;
-  getIssuesByIds(issueIds: string[]): undefined | Record<string, TIssue>; // Record defines issue_id as key and TIssue as value
+  getIssuesByIds(issueIds: string[], type: "archived" | "un-archived"): undefined | Record<string, TIssue>; // Record defines issue_id as key and TIssue as value
 };
 
 export class IssueStore implements IIssueStore {
@@ -108,14 +108,17 @@ export class IssueStore implements IIssueStore {
   /**
    * @description This method will return the issues from the issuesMap
    * @param {string[]} issueIds
+   * @param {boolean} archivedIssues
    * @returns {Record<string, TIssue> | undefined}
    */
-  getIssuesByIds = computedFn((issueIds: string[]) => {
+  getIssuesByIds = computedFn((issueIds: string[], type: "archived" | "un-archived") => {
     if (!issueIds || issueIds.length <= 0 || isEmpty(this.issuesMap)) return undefined;
     const filteredIssues: { [key: string]: TIssue } = {};
     Object.values(this.issuesMap).forEach((issue) => {
-      if (issueIds.includes(issue.id)) {
-        filteredIssues[issue.id] = issue;
+      // if type is archived then check archived_at is not null
+      // if type is un-archived then check archived_at is null
+      if ((type === "archived" && issue.archived_at) || (type === "un-archived" && !issue.archived_at)) {
+        if (issueIds.includes(issue.id)) filteredIssues[issue.id] = issue;
       }
     });
     return isEmpty(filteredIssues) ? undefined : filteredIssues;
diff --git a/web/store/issue/issue_gantt_view.store.ts b/web/store/issue/issue_gantt_view.store.ts
new file mode 100644
index 000000000..b087554dd
--- /dev/null
+++ b/web/store/issue/issue_gantt_view.store.ts
@@ -0,0 +1,95 @@
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// helpers
+import { currentViewDataWithView } from "components/gantt-chart/data";
+// types
+import { ChartDataType, TGanttViews } from "components/gantt-chart";
+
+export interface IGanttStore {
+  // observables
+  currentView: TGanttViews;
+  currentViewData: ChartDataType | undefined;
+  activeBlockId: string | null;
+  renderView: any;
+  // computed functions
+  isBlockActive: (blockId: string) => boolean;
+  // actions
+  updateCurrentView: (view: TGanttViews) => void;
+  updateCurrentViewData: (data: ChartDataType | undefined) => void;
+  updateActiveBlockId: (blockId: string | null) => void;
+  updateRenderView: (data: any[]) => void;
+}
+
+export class GanttStore implements IGanttStore {
+  // observables
+  currentView: TGanttViews = "month";
+  currentViewData: ChartDataType | undefined = undefined;
+  activeBlockId: string | null = null;
+  renderView: any[] = [];
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      currentView: observable.ref,
+      currentViewData: observable,
+      activeBlockId: observable.ref,
+      renderView: observable,
+      // actions
+      updateCurrentView: action.bound,
+      updateCurrentViewData: action.bound,
+      updateActiveBlockId: action.bound,
+      updateRenderView: action.bound,
+    });
+
+    this.initGantt();
+  }
+
+  /**
+   * @description check if block is active
+   * @param {string} blockId
+   */
+  isBlockActive = computedFn((blockId: string): boolean => this.activeBlockId === blockId);
+
+  /**
+   * @description update current view
+   * @param {TGanttViews} view
+   */
+  updateCurrentView = (view: TGanttViews) => {
+    this.currentView = view;
+  };
+
+  /**
+   * @description update current view data
+   * @param {ChartDataType | undefined} data
+   */
+  updateCurrentViewData = (data: ChartDataType | undefined) => {
+    this.currentViewData = data;
+  };
+
+  /**
+   * @description update active block
+   * @param {string | null} block
+   */
+  updateActiveBlockId = (blockId: string | null) => {
+    this.activeBlockId = blockId;
+  };
+
+  /**
+   * @description update render view
+   * @param {any[]} data
+   */
+  updateRenderView = (data: any[]) => {
+    this.renderView = data;
+  };
+
+  /**
+   * @description initialize gantt chart with month view
+   */
+  initGantt = () => {
+    const newCurrentViewData = currentViewDataWithView(this.currentView);
+
+    runInAction(() => {
+      this.currentViewData = newCurrentViewData;
+    });
+  };
+}
diff --git a/web/store/issue/module/filter.store.ts b/web/store/issue/module/filter.store.ts
index e92027235..c353059ef 100644
--- a/web/store/issue/module/filter.store.ts
+++ b/web/store/issue/module/filter.store.ts
@@ -84,14 +84,14 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
     const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
     if (!filteredParams) return undefined;
 
+    if (filteredParams.includes("module")) filteredParams.splice(filteredParams.indexOf("module"), 1);
+
     const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
       userFilters?.filters as IIssueFilterOptions,
       userFilters?.displayFilters as IIssueDisplayFilterOptions,
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -194,12 +194,6 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
             updatedDisplayFilters.group_by = "state";
           }
 
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
-
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
               set(
diff --git a/web/store/issue/module/issue.store.ts b/web/store/issue/module/issue.store.ts
index e9b96ac54..9e6ad3f49 100644
--- a/web/store/issue/module/issue.store.ts
+++ b/web/store/issue/module/issue.store.ts
@@ -46,6 +46,12 @@ export interface IModuleIssues {
     issueId: string,
     moduleId?: string | undefined
   ) => Promise<void>;
+  archiveIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    moduleId?: string | undefined
+  ) => Promise<void>;
   quickAddIssue: (
     workspaceSlug: string,
     projectId: string,
@@ -103,6 +109,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       createIssue: action,
       updateIssue: action,
       removeIssue: action,
+      archiveIssue: action,
       quickAddIssue: action,
       addIssuesToModule: action,
       removeIssuesFromModule: action,
@@ -131,7 +138,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     const moduleIssueIds = this.issues[moduleId];
     if (!moduleIssueIds) return;
 
-    const _issues = this.rootIssueStore.issues.getIssuesByIds(moduleIssueIds);
+    const _issues = this.rootIssueStore.issues.getIssuesByIds(moduleIssueIds, "un-archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
@@ -242,6 +249,26 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     }
   };
 
+  archiveIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    moduleId: string | undefined = undefined
+  ) => {
+    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);
+
+      runInAction(() => {
+        pull(this.issues[moduleId], issueId);
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
   quickAddIssue = async (
     workspaceSlug: string,
     projectId: string,
diff --git a/web/store/issue/profile/filter.store.ts b/web/store/issue/profile/filter.store.ts
index 563af5b01..658980082 100644
--- a/web/store/issue/profile/filter.store.ts
+++ b/web/store/issue/profile/filter.store.ts
@@ -93,8 +93,6 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -188,11 +186,6 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
             _filters.displayFilters.group_by = "priority";
             updatedDisplayFilters.group_by = "priority";
           }
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
 
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
diff --git a/web/store/issue/profile/issue.store.ts b/web/store/issue/profile/issue.store.ts
index 461928c64..c39b33a80 100644
--- a/web/store/issue/profile/issue.store.ts
+++ b/web/store/issue/profile/issue.store.ts
@@ -1,5 +1,6 @@
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import set from "lodash/set";
+import pull from "lodash/pull";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -48,6 +49,12 @@ export interface IProfileIssues {
     issueId: string,
     userId?: string | undefined
   ) => Promise<void>;
+  archiveIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    userId?: string | undefined
+  ) => Promise<void>;
   quickAddIssue: undefined;
 }
 
@@ -77,6 +84,7 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
       createIssue: action,
       updateIssue: action,
       removeIssue: action,
+      archiveIssue: action,
     });
     // root store
     this.rootIssueStore = _rootStore;
@@ -104,7 +112,7 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
 
     if (!userIssueIds) return;
 
-    const _issues = this.rootStore.issues.getIssuesByIds(userIssueIds);
+    const _issues = this.rootStore.issues.getIssuesByIds(userIssueIds, "un-archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined = undefined;
@@ -249,4 +257,24 @@ export class ProfileIssues extends IssueHelperStore implements IProfileIssues {
       throw error;
     }
   };
+
+  archiveIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    userId: string | undefined = undefined
+  ) => {
+    if (!userId) return;
+    try {
+      await this.rootIssueStore.projectIssues.archiveIssue(workspaceSlug, projectId, issueId);
+
+      const uniqueViewId = `${workspaceSlug}_${this.currentView}`;
+
+      runInAction(() => {
+        pull(this.issues[userId][uniqueViewId], issueId);
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
 }
diff --git a/web/store/issue/project-views/filter.store.ts b/web/store/issue/project-views/filter.store.ts
index b3df3903b..c7c8988b1 100644
--- a/web/store/issue/project-views/filter.store.ts
+++ b/web/store/issue/project-views/filter.store.ts
@@ -90,8 +90,6 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -192,11 +190,6 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
             _filters.displayFilters.group_by = "state";
             updatedDisplayFilters.group_by = "state";
           }
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
 
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
diff --git a/web/store/issue/project-views/issue.store.ts b/web/store/issue/project-views/issue.store.ts
index 8327ffcce..b85465ec8 100644
--- a/web/store/issue/project-views/issue.store.ts
+++ b/web/store/issue/project-views/issue.store.ts
@@ -1,5 +1,6 @@
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import set from "lodash/set";
+import pull from "lodash/pull";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
@@ -41,6 +42,12 @@ export interface IProjectViewIssues {
     issueId: string,
     viewId?: string | undefined
   ) => Promise<void>;
+  archiveIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    viewId?: string | undefined
+  ) => Promise<void>;
   quickAddIssue: (
     workspaceSlug: string,
     projectId: string,
@@ -75,6 +82,7 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
       createIssue: action,
       updateIssue: action,
       removeIssue: action,
+      archiveIssue: action,
       quickAddIssue: action,
     });
     // root store
@@ -98,7 +106,7 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
     const viewIssueIds = this.issues[viewId];
     if (!viewIssueIds) return;
 
-    const _issues = this.rootStore.issues.getIssuesByIds(viewIssueIds);
+    const _issues = this.rootStore.issues.getIssuesByIds(viewIssueIds, "un-archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
@@ -210,6 +218,26 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
     }
   };
 
+  archiveIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    viewId: string | undefined = undefined
+  ) => {
+    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");
+      throw error;
+    }
+  };
+
   quickAddIssue = async (
     workspaceSlug: string,
     projectId: string,
diff --git a/web/store/issue/project/filter.store.ts b/web/store/issue/project/filter.store.ts
index 69393a320..f18654cde 100644
--- a/web/store/issue/project/filter.store.ts
+++ b/web/store/issue/project/filter.store.ts
@@ -89,8 +89,6 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
       filteredParams
     );
 
-    if (userFilters?.displayFilters?.layout === "spreadsheet") filteredRouteParams.sub_issue = false;
-
     return filteredRouteParams;
   }
 
@@ -191,11 +189,6 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
             updatedDisplayFilters.group_by = "state";
           }
 
-          // set sub_issue to false if layout is switched to spreadsheet and sub_issue is true
-          if (_filters.displayFilters.layout === "spreadsheet" && _filters.displayFilters.sub_issue === true) {
-            _filters.displayFilters.sub_issue = false;
-            updatedDisplayFilters.sub_issue = false;
-          }
 
           runInAction(() => {
             Object.keys(updatedDisplayFilters).forEach((_key) => {
diff --git a/web/store/issue/project/issue.store.ts b/web/store/issue/project/issue.store.ts
index 76bf7bcc2..f3ee94783 100644
--- a/web/store/issue/project/issue.store.ts
+++ b/web/store/issue/project/issue.store.ts
@@ -6,7 +6,7 @@ import concat from "lodash/concat";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
-import { IssueService } from "services/issue/issue.service";
+import { IssueService, IssueArchiveService } from "services/issue";
 // types
 import { IIssueRootStore } from "../root.store";
 import { TIssue, TGroupedIssues, TSubGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
@@ -23,6 +23,7 @@ export interface IProjectIssues {
   createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   quickAddIssue: (workspaceSlug: string, projectId: string, data: TIssue) => Promise<TIssue>;
   removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
 }
@@ -40,6 +41,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
   rootIssueStore: IIssueRootStore;
   // services
   issueService;
+  issueArchiveService;
 
   constructor(_rootStore: IIssueRootStore) {
     super(_rootStore);
@@ -54,6 +56,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       createIssue: action,
       updateIssue: action,
       removeIssue: action,
+      archiveIssue: action,
       removeBulkIssues: action,
       quickAddIssue: action,
     });
@@ -61,6 +64,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
     this.rootIssueStore = _rootStore;
     // services
     this.issueService = new IssueService();
+    this.issueArchiveService = new IssueArchiveService();
   }
 
   get groupedIssueIds() {
@@ -78,7 +82,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
     const projectIssueIds = this.issues[projectId];
     if (!projectIssueIds) return;
 
-    const _issues = this.rootStore.issues.getIssuesByIds(projectIssueIds);
+    const _issues = this.rootStore.issues.getIssuesByIds(projectIssueIds, "un-archived");
     if (!_issues) return [];
 
     let issues: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues = [];
@@ -165,6 +169,21 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
     }
   };
 
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const response = await this.issueArchiveService.archiveIssue(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.rootStore.issues.updateIssue(issueId, {
+          archived_at: response.archived_at,
+        });
+        pull(this.issues[projectId], issueId);
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
   quickAddIssue = async (workspaceSlug: string, projectId: string, data: TIssue) => {
     try {
       runInAction(() => {
diff --git a/web/store/issue/workspace/issue.store.ts b/web/store/issue/workspace/issue.store.ts
index e2b8418c7..b7fe43b30 100644
--- a/web/store/issue/workspace/issue.store.ts
+++ b/web/store/issue/workspace/issue.store.ts
@@ -1,10 +1,11 @@
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 import set from "lodash/set";
+import pull from "lodash/pull";
 // base class
 import { IssueHelperStore } from "../helpers/issue-helper.store";
 // services
 import { WorkspaceService } from "services/workspace.service";
-import { IssueService } from "services/issue";
+import { IssueService, IssueArchiveService } from "services/issue";
 // types
 import { IIssueRootStore } from "../root.store";
 import { TIssue, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
@@ -37,6 +38,12 @@ export interface IWorkspaceIssues {
     issueId: string,
     viewId?: string | undefined
   ) => Promise<void>;
+  archiveIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    viewId?: string | undefined
+  ) => Promise<void>;
 }
 
 export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssues {
@@ -52,6 +59,7 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
   // service
   workspaceService;
   issueService;
+  issueArchiveService;
 
   constructor(_rootStore: IIssueRootStore) {
     super(_rootStore);
@@ -67,12 +75,14 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
       createIssue: action,
       updateIssue: action,
       removeIssue: action,
+      archiveIssue: action,
     });
     // root store
     this.rootIssueStore = _rootStore;
     // services
     this.workspaceService = new WorkspaceService();
     this.issueService = new IssueService();
+    this.issueArchiveService = new IssueArchiveService();
   }
 
   get groupedIssueIds() {
@@ -91,7 +101,7 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
 
     if (!viewIssueIds) return { dataViewId: viewId, issueIds: undefined };
 
-    const _issues = this.rootStore.issues.getIssuesByIds(viewIssueIds);
+    const _issues = this.rootStore.issues.getIssuesByIds(viewIssueIds, "un-archived");
     if (!_issues) return { dataViewId: viewId, issueIds: [] };
 
     let issueIds: TIssue | TUnGroupedIssues | undefined = undefined;
@@ -196,4 +206,28 @@ export class WorkspaceIssues extends IssueHelperStore implements IWorkspaceIssue
       throw error;
     }
   };
+
+  archiveIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    viewId: string | undefined = undefined
+  ) => {
+    try {
+      if (!viewId) throw new Error("View id is required");
+
+      const uniqueViewId = `${workspaceSlug}_${viewId}`;
+
+      const response = await this.issueArchiveService.archiveIssue(workspaceSlug, projectId, issueId);
+
+      runInAction(() => {
+        this.rootStore.issues.updateIssue(issueId, {
+          archived_at: response.archived_at,
+        });
+        pull(this.issues[uniqueViewId], issueId);
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
 }
diff --git a/web/store/module.store.ts b/web/store/module.store.ts
index c27ace487..2b4522cd0 100644
--- a/web/store/module.store.ts
+++ b/web/store/module.store.ts
@@ -19,6 +19,7 @@ export interface IModuleStore {
   projectModuleIds: string[] | null;
   // computed actions
   getModuleById: (moduleId: string) => IModule | null;
+  getModuleNameById: (moduleId: string) => string;
   getProjectModuleIds: (projectId: string) => string[] | null;
   // actions
   // fetch
@@ -114,6 +115,13 @@ export class ModulesStore implements IModuleStore {
    */
   getModuleById = computedFn((moduleId: string) => this.moduleMap?.[moduleId] || null);
 
+  /**
+   * @description get module by id
+   * @param moduleId
+   * @returns IModule | null
+   */
+  getModuleNameById = computedFn((moduleId: string) => this.moduleMap?.[moduleId]?.name);
+
   /**
    * @description returns list of module ids of the project id passed as argument
    * @param projectId
@@ -194,7 +202,6 @@ export class ModulesStore implements IModuleStore {
       runInAction(() => {
         set(this.moduleMap, [response?.id], response);
       });
-      this.fetchModules(workspaceSlug, projectId);
       return response;
     });
 
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
index ef88c5b0f..c9aa826fe 100644
--- a/web/store/project/project.store.ts
+++ b/web/store/project/project.store.ts
@@ -1,12 +1,14 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 import set from "lodash/set";
+import sortBy from "lodash/sortBy";
 // types
 import { RootStore } from "../root.store";
 import { IProject } from "@plane/types";
 // services
 import { IssueLabelService, IssueService } from "services/issue";
 import { ProjectService, ProjectStateService } from "services/project";
+import { cloneDeep, update } from "lodash";
 export interface IProjectStore {
   // observables
   searchQuery: string;
@@ -22,14 +24,13 @@ export interface IProjectStore {
   // 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>;
   // favorites actions
   addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
-  // project-order action
-  orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
   // project-view action
   updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
   // CRUD actions
@@ -71,8 +72,6 @@ export class ProjectStore implements IProjectStore {
       // favorites actions
       addProjectToFavorites: action,
       removeProjectFromFavorites: action,
-      // project-order action
-      orderProjectsWithSortOrder: action,
       // project-view action
       updateProjectView: action,
       // CRUD actions
@@ -128,7 +127,11 @@ export class ProjectStore implements IProjectStore {
   get joinedProjectIds() {
     const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
     if (!currentWorkspace) return [];
-    const projectIds = Object.values(this.projectMap ?? {})
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "sort_order");
+
+    const projectIds = projects
       .filter((project) => project.workspace === currentWorkspace.id && project.is_member)
       .map((project) => project.id);
     return projectIds;
@@ -140,7 +143,11 @@ export class ProjectStore implements IProjectStore {
   get favoriteProjectIds() {
     const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
     if (!currentWorkspace) return [];
-    const projectIds = Object.values(this.projectMap ?? {})
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "created_at");
+
+    const projectIds = projects
       .filter((project) => project.workspace === currentWorkspace.id && project.is_favorite)
       .map((project) => project.id);
     return projectIds;
@@ -204,6 +211,16 @@ export class ProjectStore implements IProjectStore {
     return projectInfo;
   });
 
+  /**
+   * Returns project identifier using project id
+   * @param projectId
+   * @returns string
+   */
+  getProjectIdentifierById = computedFn((projectId: string) => {
+    const projectInfo = this.projectMap?.[projectId];
+    return projectInfo?.identifier;
+  });
+
   /**
    * Adds project to favorites and updates project favorite status in the store
    * @param workspaceSlug
@@ -253,41 +270,6 @@ export class ProjectStore implements IProjectStore {
     }
   };
 
-  /**
-   * Updates the sort order of the project.
-   * @param sortIndex
-   * @param destinationIndex
-   * @param projectId
-   * @returns
-   */
-  orderProjectsWithSortOrder = (sortIndex: number, destinationIndex: number, projectId: string) => {
-    try {
-      const workspaceSlug = this.rootStore.app.router.workspaceSlug;
-      if (!workspaceSlug) return 0;
-      const projectsList = Object.values(this.projectMap || {}) || [];
-      let updatedSortOrder = projectsList[sortIndex].sort_order;
-      if (destinationIndex === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
-      else if (destinationIndex === projectsList.length - 1)
-        updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
-      else {
-        const destinationSortingOrder = projectsList[destinationIndex].sort_order as number;
-        const relativeDestinationSortingOrder =
-          sortIndex < destinationIndex
-            ? (projectsList[destinationIndex + 1].sort_order as number)
-            : (projectsList[destinationIndex - 1].sort_order as number);
-
-        updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-      }
-      runInAction(() => {
-        set(this.projectMap, [projectId, "sort_order"], updatedSortOrder);
-      });
-      return updatedSortOrder;
-    } catch (error) {
-      console.log("failed to update sort order of the projects");
-      return 0;
-    }
-  };
-
   /**
    * Updates the project view
    * @param workspaceSlug
@@ -295,12 +277,18 @@ export class ProjectStore implements IProjectStore {
    * @param viewProps
    * @returns
    */
-  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: any) => {
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: { sort_order: number }) => {
+    const currentProjectSortOrder = this.getProjectById(projectId)?.sort_order;
     try {
+      runInAction(() => {
+        set(this.projectMap, [projectId, "sort_order"], viewProps?.sort_order);
+      });
       const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
-      await this.fetchProjects(workspaceSlug);
       return response;
     } catch (error) {
+      runInAction(() => {
+        set(this.projectMap, [projectId, "sort_order"], currentProjectSortOrder);
+      });
       console.log("Failed to update sort order of the projects");
       throw error;
     }
diff --git a/yarn.lock b/yarn.lock
index 32f0a8aac..f413d1a44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2641,6 +2641,13 @@
   resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.4.tgz#427a4ce8590727aed5ce0fe39a64f175a57fdc1c"
   integrity sha512-PD+wqNhrjWFjAlSVd18jvChZvOXB2SOwAILBmuYev5zswBats5qmzs/QFoooLKd2omj9BT05a8MeSeRmXLGY+Q==
 
+"@types/dompurify@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.5.tgz#02069a2fcb89a163bacf1a788f73cb415dd75cb7"
+  integrity sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/estree@*", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -2843,7 +2850,7 @@
   resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
   integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
 
-"@types/trusted-types@^2.0.2":
+"@types/trusted-types@*", "@types/trusted-types@^2.0.2":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
@@ -4082,6 +4089,11 @@ 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==
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"