diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index 4f895aeba..9090d96c0 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -102,48 +102,84 @@ class CycleViewSet(BaseViewSet):
             .select_related("workspace")
             .select_related("owned_by")
             .annotate(is_favorite=Exists(subquery))
-            .annotate(total_issues=Count("issue_cycle"))
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
             .annotate(
                 completed_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="completed"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 cancelled_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="cancelled"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="started"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 unstarted_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="unstarted"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 backlog_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="backlog"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
             .annotate(
                 completed_estimates=Sum(
                     "issue_cycle__issue__estimate_point",
-                    filter=Q(issue_cycle__issue__state__group="completed"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_estimates=Sum(
                     "issue_cycle__issue__estimate_point",
-                    filter=Q(issue_cycle__issue__state__group="started"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .prefetch_related(
@@ -196,17 +232,30 @@ class CycleViewSet(BaseViewSet):
                         .annotate(assignee_id=F("assignees__id"))
                         .annotate(avatar=F("assignees__avatar"))
                         .values("display_name", "assignee_id", "avatar")
-                        .annotate(total_issues=Count("assignee_id"))
+                        .annotate(
+                            total_issues=Count(
+                                "assignee_id",
+                                filter=Q(archived_at__isnull=True, is_draft=False),
+                            ),
+                        )
                         .annotate(
                             completed_issues=Count(
                                 "assignee_id",
-                                filter=Q(completed_at__isnull=False),
+                                filter=Q(
+                                    completed_at__isnull=False,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .annotate(
                             pending_issues=Count(
                                 "assignee_id",
-                                filter=Q(completed_at__isnull=True),
+                                filter=Q(
+                                    completed_at__isnull=True,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .order_by("display_name")
@@ -222,17 +271,30 @@ class CycleViewSet(BaseViewSet):
                         .annotate(color=F("labels__color"))
                         .annotate(label_id=F("labels__id"))
                         .values("label_name", "color", "label_id")
-                        .annotate(total_issues=Count("label_id"))
+                        .annotate(
+                            total_issues=Count(
+                                "label_id",
+                                filter=Q(archived_at__isnull=True, is_draft=False),
+                            )
+                        )
                         .annotate(
                             completed_issues=Count(
                                 "label_id",
-                                filter=Q(completed_at__isnull=False),
+                                filter=Q(
+                                    completed_at__isnull=False,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .annotate(
                             pending_issues=Count(
                                 "label_id",
-                                filter=Q(completed_at__isnull=True),
+                                filter=Q(
+                                    completed_at__isnull=True,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .order_by("label_name")
@@ -385,17 +447,30 @@ class CycleViewSet(BaseViewSet):
                 .values(
                     "first_name", "last_name", "assignee_id", "avatar", "display_name"
                 )
-                .annotate(total_issues=Count("assignee_id"))
+                .annotate(
+                    total_issues=Count(
+                        "assignee_id",
+                        filter=Q(archived_at__isnull=True, is_draft=False),
+                    ),
+                )
                 .annotate(
                     completed_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("first_name", "last_name")
@@ -412,17 +487,30 @@ class CycleViewSet(BaseViewSet):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(total_issues=Count("label_id"))
+                .annotate(
+                    total_issues=Count(
+                        "label_id",
+                        filter=Q(archived_at__isnull=True, is_draft=False),
+                    ),
+                )
                 .annotate(
                     completed_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("label_name")
diff --git a/apiserver/plane/api/views/importer.py b/apiserver/plane/api/views/importer.py
index 0a92b3850..18d9a1d69 100644
--- a/apiserver/plane/api/views/importer.py
+++ b/apiserver/plane/api/views/importer.py
@@ -384,7 +384,7 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         sort_order=largest_sort_order,
                         start_date=issue_data.get("start_date", None),
                         target_date=issue_data.get("target_date", None),
-                        priority=issue_data.get("priority", None),
+                        priority=issue_data.get("priority", "none"),
                         created_by=request.user,
                     )
                 )
diff --git a/apiserver/plane/api/views/inbox.py b/apiserver/plane/api/views/inbox.py
index 1a0284ea4..b75922f74 100644
--- a/apiserver/plane/api/views/inbox.py
+++ b/apiserver/plane/api/views/inbox.py
@@ -173,12 +173,12 @@ class InboxIssueViewSet(BaseViewSet):
                 )
 
             # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", None) in [
+            if not request.data.get("issue", {}).get("priority", "none") in [
                 "low",
                 "medium",
                 "high",
                 "urgent",
-                None,
+                "none",
             ]:
                 return Response(
                     {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
@@ -480,12 +480,12 @@ class InboxIssuePublicViewSet(BaseViewSet):
                 )
 
             # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", None) in [
+            if not request.data.get("issue", {}).get("priority", "none") in [
                 "low",
                 "medium",
                 "high",
                 "urgent",
-                None,
+                "none",
             ]:
                 return Response(
                     {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index c2a15da1c..8be466ea7 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -40,6 +40,7 @@ from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
 from plane.utils.analytics_plot import burndown_plot
 
+
 class ModuleViewSet(BaseViewSet):
     model = Module
     permission_classes = [
@@ -78,35 +79,63 @@ class ModuleViewSet(BaseViewSet):
                     queryset=ModuleLink.objects.select_related("module", "created_by"),
                 )
             )
-            .annotate(total_issues=Count("issue_module"))
+            .annotate(
+                total_issues=Count(
+                    "issue_module",
+                    filter=Q(
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                ),
+            )
             .annotate(
                 completed_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="completed"),
+                    filter=Q(
+                        issue_module__issue__state__group="completed",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 cancelled_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="cancelled"),
+                    filter=Q(
+                        issue_module__issue__state__group="cancelled",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="started"),
+                    filter=Q(
+                        issue_module__issue__state__group="started",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 unstarted_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="unstarted"),
+                    filter=Q(
+                        issue_module__issue__state__group="unstarted",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 backlog_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="backlog"),
+                    filter=Q(
+                        issue_module__issue__state__group="backlog",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .order_by(order_by, "name")
@@ -179,18 +208,36 @@ class ModuleViewSet(BaseViewSet):
                 .annotate(assignee_id=F("assignees__id"))
                 .annotate(display_name=F("assignees__display_name"))
                 .annotate(avatar=F("assignees__avatar"))
-                .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
-                .annotate(total_issues=Count("assignee_id"))
+                .values(
+                    "first_name", "last_name", "assignee_id", "avatar", "display_name"
+                )
+                .annotate(
+                    total_issues=Count(
+                        "assignee_id",
+                        filter=Q(
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    )
+                )
                 .annotate(
                     completed_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("first_name", "last_name")
@@ -206,17 +253,33 @@ class ModuleViewSet(BaseViewSet):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(total_issues=Count("label_id"))
+                .annotate(
+                    total_issues=Count(
+                        "label_id",
+                        filter=Q(
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    ),
+                )
                 .annotate(
                     completed_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("label_name")
@@ -494,7 +557,6 @@ class ModuleLinkViewSet(BaseViewSet):
 
 
 class ModuleFavoriteViewSet(BaseViewSet):
-
     serializer_class = ModuleFavoriteSerializer
     model = ModuleFavorite
 
diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py
index 2d1ee8132..753fd861b 100644
--- a/apiserver/plane/api/views/workspace.py
+++ b/apiserver/plane/api/views/workspace.py
@@ -1239,13 +1239,21 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
                     .annotate(
                         created_issues=Count(
                             "project_issue",
-                            filter=Q(project_issue__created_by_id=user_id),
+                            filter=Q(
+                                project_issue__created_by_id=user_id,
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
+                            ),
                         )
                     )
                     .annotate(
                         assigned_issues=Count(
                             "project_issue",
-                            filter=Q(project_issue__assignees__in=[user_id]),
+                            filter=Q(
+                                project_issue__assignees__in=[user_id],
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
+                            ),
                         )
                     )
                     .annotate(
@@ -1254,6 +1262,8 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
                             filter=Q(
                                 project_issue__completed_at__isnull=False,
                                 project_issue__assignees__in=[user_id],
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
                             ),
                         )
                     )
@@ -1267,6 +1277,8 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
                                     "started",
                                 ],
                                 project_issue__assignees__in=[user_id],
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
                             ),
                         )
                     )
@@ -1317,6 +1329,11 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
     def get(self, request, slug, user_id):
         try:
             filters = issue_filters(request.query_params, "GET")
+
+            # Custom ordering for priority and state
+            priority_order = ["urgent", "high", "medium", "low", "none"]
+            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
             order_by_param = request.GET.get("order_by", "-created_at")
             issue_queryset = (
                 Issue.issue_objects.filter(
diff --git a/apiserver/plane/bgtasks/exporter_expired_task.py b/apiserver/plane/bgtasks/exporter_expired_task.py
index a77d68b4b..45c53eaca 100644
--- a/apiserver/plane/bgtasks/exporter_expired_task.py
+++ b/apiserver/plane/bgtasks/exporter_expired_task.py
@@ -32,7 +32,7 @@ def delete_old_s3_link():
     else:
         s3 = boto3.client(
             "s3",
-            region_name="ap-south-1",
+            region_name=settings.AWS_REGION,
             aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
             aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
             config=Config(signature_version="s3v4"),
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 733defe69..6d33dfc4f 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -121,36 +121,20 @@ def track_priority(
     epoch
 ):
     if current_instance.get("priority") != requested_data.get("priority"):
-        if requested_data.get("priority") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("priority"),
-                    new_value=None,
-                    field="priority",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the priority to None",
-                    epoch=epoch,
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("priority"),
-                    new_value=requested_data.get("priority"),
-                    field="priority",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the priority to {requested_data.get('priority')}",
-                    epoch=epoch,
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="updated",
+                old_value=current_instance.get("priority"),
+                new_value=requested_data.get("priority"),
+                field="priority",
+                project=project,
+                workspace=project.workspace,
+                comment=f"updated the priority to {requested_data.get('priority')}",
+                epoch=epoch,
             )
+        )
 
 
 # Track chnages in state of the issue
diff --git a/apiserver/plane/db/migrations/0047_auto_20230921_0758.py b/apiserver/plane/db/migrations/0047_auto_20230921_0758.py
new file mode 100644
index 000000000..4344963cd
--- /dev/null
+++ b/apiserver/plane/db/migrations/0047_auto_20230921_0758.py
@@ -0,0 +1,27 @@
+# Generated by Django 4.2.3 on 2023-09-21 07:58
+
+
+from django.db import migrations
+
+
+def update_priority_history(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.all():
+        if obj.field == "priority":
+            obj.new_value = obj.new_value or "none"
+            obj.old_value = obj.old_value or "none"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity, ["new_value", "old_value"], batch_size=100
+    )
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0046_auto_20230919_1421"),
+    ]
+
+    operations = [
+        migrations.RunPython(update_priority_history),
+    ]
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index 4cd2134ac..08d825b59 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -26,7 +26,7 @@ ROLE_CHOICES = (
 def get_default_props():
     return {
         "filters": {
-            "priority": None,
+            "priority": "none",
             "state": None,
             "state_group": None,
             "assignees": None,
diff --git a/apiserver/plane/db/models/workspace.py b/apiserver/plane/db/models/workspace.py
index c85268435..e063d873a 100644
--- a/apiserver/plane/db/models/workspace.py
+++ b/apiserver/plane/db/models/workspace.py
@@ -17,7 +17,7 @@ ROLE_CHOICES = (
 def get_default_props():
     return {
         "filters": {
-            "priority": None,
+            "priority": "none",
             "state": None,
             "state_group": None,
             "assignees": None,
diff --git a/apiserver/plane/utils/analytics_plot.py b/apiserver/plane/utils/analytics_plot.py
index 60e751459..bffbb4c2a 100644
--- a/apiserver/plane/utils/analytics_plot.py
+++ b/apiserver/plane/utils/analytics_plot.py
@@ -74,10 +74,10 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
 
     sorted_data = grouped_data
     if temp_axis == "priority":
-        order = ["low", "medium", "high", "urgent", "None"]
+        order = ["low", "medium", "high", "urgent", "none"]
         sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
     else:
-        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "None", x[0])))
+        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "none", x[0])))
     return sorted_data
 
 
diff --git a/apiserver/plane/utils/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index 226d909cd..3a869113c 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -40,9 +40,6 @@ def filter_priority(params, filter, method):
         priorities = params.get("priority").split(",")
         if len(priorities) and "" not in priorities:
             filter["priority__in"] = priorities
-    else:
-        if params.get("priority", None) and len(params.get("priority")):
-            filter["priority__in"] = params.get("priority")
     return filter
 
 
diff --git a/docker-compose-hub.yml b/docker-compose-hub.yml
index 0014dfe86..498f37b84 100644
--- a/docker-compose-hub.yml
+++ b/docker-compose-hub.yml
@@ -1,113 +1,61 @@
 version: "3.8"
 
-x-api-and-worker-env:
-        &api-and-worker-env
-        DEBUG: ${DEBUG}
-        SENTRY_DSN: ${SENTRY_DSN}
-        DJANGO_SETTINGS_MODULE: plane.settings.selfhosted
-        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-        REDIS_URL: redis://plane-redis:6379/
-        EMAIL_HOST: ${EMAIL_HOST}
-        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-        EMAIL_PORT: ${EMAIL_PORT}
-        EMAIL_FROM: ${EMAIL_FROM}
-        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-        AWS_REGION: ${AWS_REGION}
-        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-        WEB_URL: ${WEB_URL}
-        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-        DISABLE_COLLECTSTATIC: 1
-        DOCKERIZED: 1
-        OPENAI_API_BASE: ${OPENAI_API_BASE}
-        OPENAI_API_KEY: ${OPENAI_API_KEY}
-        GPT_ENGINE: ${GPT_ENGINE}
-        SECRET_KEY: ${SECRET_KEY}
-        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-        USE_MINIO: ${USE_MINIO}
-        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
-
 services:
-        plane-web:
-                container_name: planefrontend
+        web:
+                container_name: web
                 image: makeplane/plane-frontend:latest
                 restart: always
                 command: /usr/local/bin/start.sh web/server.js web
                 env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
-                        NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
-                        NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
-                        NEXT_PUBLIC_GITHUB_APP_NAME: "0"
-                        NEXT_PUBLIC_GITHUB_ID: "0"
-                        NEXT_PUBLIC_SENTRY_DSN: "0"
-                        NEXT_PUBLIC_ENABLE_OAUTH: "0"
-                        NEXT_PUBLIC_ENABLE_SENTRY: "0"
-                        NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
-                        NEXT_PUBLIC_TRACK_EVENTS: "0"
+                        - ./web/.env
                 depends_on:
-                        - plane-api
-                        - plane-worker
+                        - api
+                        - worker
 
-        plane-deploy:
-                container_name: planedeploy
-                image: makeplane/plane-deploy:latest
+        space:
+                container_name: space
+                image: makeplane/plane-space:latest
                 restart: always
                 command: /usr/local/bin/start.sh space/server.js space
                 env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
+                        - ./space/.env
                 depends_on:
-                        - plane-api
-                        - plane-worker
-                        - plane-web
+                        - api
+                        - worker
+                        - web
 
-        plane-api:
-                container_name: planebackend
+        api:
+                container_name: api
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/takeoff
                 env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
+                        - ./apiserver/.env
                 depends_on:
                         - plane-db
                         - plane-redis
 
-        plane-worker:
-                container_name: planebgworker
+        worker:
+                container_name: bgworker
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/worker
                 env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
+                        - ./apiserver/.env
                 depends_on:
-                        - plane-api
+                        - api
                         - plane-db
                         - plane-redis
 
-        plane-beat-worker:
-                container_name: planebeatworker
+        beat-worker:
+                container_name: beatworker
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/beat
                 env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
+                        - ./apiserver/.env
                 depends_on:
-                        - plane-api
+                        - api
                         - plane-db
                         - plane-redis
 
@@ -157,8 +105,8 @@ services:
                         - plane-minio
 
         # Comment this if you already have a reverse proxy running
-        plane-proxy:
-                container_name: planeproxy
+        proxy:
+                container_name: proxy
                 image: makeplane/plane-proxy:latest
                 ports:
                         - ${NGINX_PORT}:80
@@ -168,8 +116,9 @@ services:
                         FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
                         BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
                 depends_on:
-                        - plane-web
-                        - plane-api
+                        - web
+                        - api
+                        - space
 
 volumes:
         pgdata:
diff --git a/docker-compose.yml b/docker-compose.yml
index e3c1b37be..0895aa1ae 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,8 +1,8 @@
 version: "3.8"
 
 services:
-  plane-web:
-    container_name: planefrontend
+  web:
+    container_name: web
     build:
       context: .
       dockerfile: ./web/Dockerfile.web
@@ -11,11 +11,11 @@ services:
     restart: always
     command: /usr/local/bin/start.sh web/server.js web
     depends_on:
-      - plane-api
-      - plane-worker
+      - api
+      - worker
 
-  plane-deploy:
-    container_name: planedeploy
+  space:
+    container_name: space
     build:
       context: .
       dockerfile: ./space/Dockerfile.space
@@ -24,12 +24,12 @@ services:
     restart: always
     command: /usr/local/bin/start.sh space/server.js space
     depends_on:
-      - plane-api
-      - plane-worker
-      - plane-web
+      - api
+      - worker
+      - web
 
-  plane-api:
-    container_name: planebackend
+  api:
+    container_name: api
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -43,8 +43,8 @@ services:
       - plane-db
       - plane-redis
 
-  plane-worker:
-    container_name: planebgworker
+  worker:
+    container_name: bgworker
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -55,12 +55,12 @@ services:
     env_file:
       - ./apiserver/.env
     depends_on:
-      - plane-api
+      - api
       - plane-db
       - plane-redis
 
-  plane-beat-worker:
-    container_name: planebeatworker
+  beat-worker:
+    container_name: beatworker
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -71,7 +71,7 @@ services:
     env_file:
       - ./apiserver/.env
     depends_on:
-      - plane-api
+      - api
       - plane-db
       - plane-redis
 
@@ -118,8 +118,8 @@ services:
       - plane-minio
 
   # Comment this if you already have a reverse proxy running
-  plane-proxy:
-    container_name: planeproxy
+  proxy:
+    container_name: proxy
     build:
       context: ./nginx
       dockerfile: Dockerfile
@@ -130,8 +130,9 @@ services:
       FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
       BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
     depends_on:
-      - plane-web
-      - plane-api
+      - web
+      - api
+      - space
 
 volumes:
   pgdata:
diff --git a/nginx/nginx.conf.template b/nginx/nginx.conf.template
index 36a68fa55..af80b04fa 100644
--- a/nginx/nginx.conf.template
+++ b/nginx/nginx.conf.template
@@ -1,25 +1,26 @@
-events { }
+events {
+}
 
 http {
     sendfile on;
 
     server {
-        listen       80;
-        root   /www/data/;
+        listen 80;
+        root /www/data/;
         access_log /var/log/nginx/access.log;
 
         client_max_body_size ${FILE_SIZE_LIMIT};
 
         location / {
-            proxy_pass http://planefrontend:3000/;       
+            proxy_pass http://web:3000/;
         }
 
         location /api/ {
-            proxy_pass http://planebackend:8000/api/;
+            proxy_pass http://api:8000/api/;
         }
 
         location /spaces/ {
-            proxy_pass http://planedeploy:3000/spaces/;
+            proxy_pass http://space:3000/spaces/;
         }
 
         location /${BUCKET_NAME}/ {
diff --git a/space/.env.example b/space/.env.example
index 56e9f1e95..7700ec946 100644
--- a/space/.env.example
+++ b/space/.env.example
@@ -1,4 +1,2 @@
-# Google Client ID for Google OAuth
-NEXT_PUBLIC_GOOGLE_CLIENTID=""
 # Flag to toggle OAuth
 NEXT_PUBLIC_ENABLE_OAUTH=0
\ No newline at end of file
diff --git a/web/.env.example b/web/.env.example
index 88a2064c5..3868cd834 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -1,24 +1,4 @@
-# Extra image domains that need to be added for Next Image
-NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
-# Google Client ID for Google OAuth
-NEXT_PUBLIC_GOOGLE_CLIENTID=""
-# GitHub App ID for GitHub OAuth
-NEXT_PUBLIC_GITHUB_ID=""
-# GitHub App Name for GitHub Integration
-NEXT_PUBLIC_GITHUB_APP_NAME=""
-# Sentry DSN for error monitoring
-NEXT_PUBLIC_SENTRY_DSN=""
 # Enable/Disable OAUTH - default 0 for selfhosted instance
 NEXT_PUBLIC_ENABLE_OAUTH=0
-# Enable/Disable Sentry
-NEXT_PUBLIC_ENABLE_SENTRY=0
-# Enable/Disable session recording
-NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
-# Enable/Disable event tracking
-NEXT_PUBLIC_TRACK_EVENTS=0
-# Slack Client ID for Slack Integration
-NEXT_PUBLIC_SLACK_CLIENT_ID=""
-# For Telemetry, set it to "app.plane.so"
-NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
 # Public boards deploy URL
-NEXT_PUBLIC_DEPLOY_URL="http://localhost:3000/spaces"
\ No newline at end of file
+NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
\ No newline at end of file
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
index 349f9884d..733d17437 100644
--- a/web/components/analytics/custom-analytics/graph/index.tsx
+++ b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -9,7 +9,6 @@ import { findStringWithMostCharacters } from "helpers/array.helper";
 import { generateBarColor } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
-// constants
 
 type Props = {
   analytics: IAnalyticsResponse;
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index 7c2798e7a..c76f1aece 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -1,5 +1,9 @@
 import { useRouter } from "next/router";
 
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
 // icons
 import { Icon, Tooltip } from "components/ui";
 import { CopyPlus } from "lucide-react";
@@ -10,6 +14,8 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IIssueActivity } from "types";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
 
 const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
@@ -52,6 +58,26 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
   );
 };
 
+const LabelPill = ({ labelId }: { labelId: string }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: labels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <span
+      className="h-1.5 w-1.5 rounded-full"
+      style={{
+        backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
 const activityDetails: {
   [key: string]: {
     message: (
@@ -325,14 +351,8 @@ const activityDetails: {
         return (
           <>
             added a new label{" "}
-            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
+            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <LabelPill labelId={activity.new_identifier ?? ""} />
               <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             </span>
             {showIssue && (
@@ -348,13 +368,7 @@ const activityDetails: {
           <>
             removed the label{" "}
             <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
+              <LabelPill labelId={activity.old_identifier ?? ""} />
               <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             </span>
             {showIssue && (
diff --git a/web/components/core/views/board-view/all-boards.tsx b/web/components/core/views/board-view/all-boards.tsx
index ea5ebb2b1..37503043a 100644
--- a/web/components/core/views/board-view/all-boards.tsx
+++ b/web/components/core/views/board-view/all-boards.tsx
@@ -76,7 +76,7 @@ export const AllBoards: React.FC<Props> = ({
         readOnly={disableUserActions}
       />
       {groupedIssues ? (
-        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
+        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
           {Object.keys(groupedIssues).map((singleGroup, index) => {
             const currentState =
               displayFilters?.group_by === "state"
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index d76e5ddd2..62fc04723 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -35,6 +35,7 @@ type Props = {
   data: IIssue | null;
   user: ICurrentUserResponse | undefined;
   onSubmit?: () => Promise<void>;
+  redirection?: boolean;
 };
 
 export const DeleteIssueModal: React.FC<Props> = ({
@@ -43,6 +44,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
   data,
   user,
   onSubmit,
+  redirection = true,
 }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -132,7 +134,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
           message: "Issue deleted successfully",
         });
 
-        if (issueId) router.back();
+        if (issueId && redirection) router.back();
       })
       .catch((error) => {
         console.log(error);
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index 1c51031f3..6b83e7ef4 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -12,7 +12,6 @@ export * from "./main-content";
 export * from "./modal";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
-export * from "./sub-issues-list";
 export * from "./label";
 export * from "./issue-reaction";
 export * from "./peek-overview";
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index b7b154ce2..c4c9a780a 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -18,9 +18,9 @@ import {
   IssueAttachmentUpload,
   IssueAttachments,
   IssueDescriptionForm,
-  SubIssuesList,
   IssueReaction,
 } from "components/issues";
+import { SubIssuesRoot } from "./sub-issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
@@ -43,7 +43,7 @@ export const IssueMainContent: React.FC<Props> = ({
   uneditable = false,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
         <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
 
         <div className="mt-2 space-y-2">
-          <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
+          <SubIssuesRoot parentIssue={issueDetails} user={user} />
         </div>
       </div>
       <div className="flex flex-col gap-3 py-3">
diff --git a/web/components/issues/sub-issues-list.tsx b/web/components/issues/sub-issues-list.tsx
deleted file mode 100644
index 9ba920ff5..000000000
--- a/web/components/issues/sub-issues-list.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import { FC, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// components
-import { ExistingIssuesListModal } from "components/core";
-import { CreateUpdateIssueModal } from "components/issues";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// types
-import { ICurrentUserResponse, IIssue, ISearchIssueResponse, ISubIssueResponse } from "types";
-// fetch-keys
-import { SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  parentIssue: IIssue;
-  user: ICurrentUserResponse | undefined;
-  disabled?: boolean;
-};
-
-export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }) => {
-  // states
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { memberRole } = useProjectMyMembership();
-
-  const { data: subIssuesResponse } = useSWR(
-    workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
-    workspaceSlug && parentIssue
-      ? () => issuesService.subIssues(workspaceSlug as string, parentIssue.project, parentIssue.id)
-      : null
-  );
-
-  const addAsSubIssue = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !parentIssue) return;
-
-    const payload = {
-      sub_issue_ids: data.map((i) => i.id),
-    };
-
-    await issuesService
-      .addSubIssues(workspaceSlug as string, parentIssue.project, parentIssue.id, payload)
-      .finally(() => mutate(SUB_ISSUES(parentIssue.id)));
-  };
-
-  const handleSubIssueRemove = (issue: IIssue) => {
-    if (!workspaceSlug || !parentIssue) return;
-
-    mutate<ISubIssueResponse>(
-      SUB_ISSUES(parentIssue.id),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        const stateDistribution = { ...prevData.state_distribution };
-
-        const issueGroup = issue.state_detail.group;
-        stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1;
-
-        return {
-          state_distribution: stateDistribution,
-          sub_issues: prevData.sub_issues.filter((i) => i.id !== issue.id),
-        };
-      },
-      false
-    );
-
-    issuesService
-      .patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user)
-      .finally(() => mutate(SUB_ISSUES(parentIssue.id)));
-  };
-
-  const handleCreateIssueModal = () => {
-    setCreateIssueModal(true);
-
-    setPreloadedData({
-      parent: parentIssue.id,
-    });
-  };
-
-  const completedSubIssue = subIssuesResponse?.state_distribution.completed ?? 0;
-  const cancelledSubIssue = subIssuesResponse?.state_distribution.cancelled ?? 0;
-
-  const totalCompletedSubIssues = completedSubIssue + cancelledSubIssue;
-
-  const totalSubIssues = subIssuesResponse ? subIssuesResponse.sub_issues.length : 0;
-
-  const completionPercentage = (totalCompletedSubIssues / totalSubIssues) * 100;
-
-  const isNotAllowed = memberRole.isGuest || memberRole.isViewer || disabled;
-
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal}
-        prePopulateData={{ ...preloadedData }}
-        handleClose={() => setCreateIssueModal(false)}
-      />
-      <ExistingIssuesListModal
-        isOpen={subIssuesListModal}
-        handleClose={() => setSubIssuesListModal(false)}
-        searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
-        handleOnSubmit={addAsSubIssue}
-        workspaceLevelToggle
-      />
-      {subIssuesResponse && subIssuesResponse.sub_issues.length > 0 ? (
-        <Disclosure defaultOpen={true}>
-          {({ open }) => (
-            <>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center justify-start gap-3 text-custom-text-200">
-                  <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-100 hover:bg-custom-background-80">
-                    <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
-                    Sub-issues{" "}
-                    <span className="ml-1 text-custom-text-200">
-                      {subIssuesResponse.sub_issues.length}
-                    </span>
-                  </Disclosure.Button>
-                  <div className="flex w-60 items-center gap-2">
-                    <div className="bar relative h-1.5 w-full rounded bg-custom-background-80">
-                      <div
-                        className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
-                        style={{
-                          width: `${
-                            isNaN(completionPercentage)
-                              ? 0
-                              : completionPercentage > 100
-                              ? 100
-                              : completionPercentage.toFixed(0)
-                          }%`,
-                        }}
-                      />
-                    </div>
-                    <span className="whitespace-nowrap text-xs">
-                      {isNaN(completionPercentage)
-                        ? 0
-                        : completionPercentage > 100
-                        ? 100
-                        : completionPercentage.toFixed(0)}
-                      % Done
-                    </span>
-                  </div>
-                </div>
-
-                {open && !isNotAllowed ? (
-                  <div className="flex items-center">
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80"
-                      onClick={handleCreateIssueModal}
-                    >
-                      <PlusIcon className="h-3 w-3" />
-                      Create new
-                    </button>
-
-                    <CustomMenu ellipsis>
-                      <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-                ) : null}
-              </div>
-              <Transition
-                enter="transition duration-100 ease-out"
-                enterFrom="transform scale-95 opacity-0"
-                enterTo="transform scale-100 opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform scale-100 opacity-100"
-                leaveTo="transform scale-95 opacity-0"
-              >
-                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
-                  {subIssuesResponse.sub_issues.map((issue) => (
-                    <Link
-                      key={issue.id}
-                      href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
-                    >
-                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-90">
-                        <div className="flex items-center gap-2 rounded text-xs">
-                          <span
-                            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                            style={{
-                              backgroundColor: issue.state_detail.color,
-                            }}
-                          />
-                          <span className="flex-shrink-0 text-custom-text-200">
-                            {issue.project_detail.identifier}-{issue.sequence_id}
-                          </span>
-                          <span className="max-w-sm break-words font-medium">{issue.name}</span>
-                        </div>
-
-                        {!isNotAllowed && (
-                          <button
-                            type="button"
-                            className="cursor-pointer opacity-0 group-hover:opacity-100"
-                            onClick={(e) => {
-                              e.preventDefault();
-                              e.stopPropagation();
-                              handleSubIssueRemove(issue);
-                            }}
-                          >
-                            <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
-                          </button>
-                        )}
-                      </a>
-                    </Link>
-                  ))}
-                </Disclosure.Panel>
-              </Transition>
-            </>
-          )}
-        </Disclosure>
-      ) : (
-        !isNotAllowed && (
-          <CustomMenu
-            label={
-              <>
-                <PlusIcon className="h-3 w-3" />
-                Add sub-issue
-              </>
-            }
-            buttonClassName="whitespace-nowrap"
-            position="left"
-            noBorder
-            noChevron
-          >
-            <CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
-              Add an existing issue
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        )
-      )}
-    </>
-  );
-};
diff --git a/web/components/issues/sub-issues/index.ts b/web/components/issues/sub-issues/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/web/components/issues/sub-issues/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
new file mode 100644
index 000000000..2adb7c6f9
--- /dev/null
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -0,0 +1,188 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// lucide icons
+import {
+  ChevronDown,
+  ChevronRight,
+  X,
+  Pencil,
+  Trash,
+  Link as LinkIcon,
+  Loader,
+} from "lucide-react";
+// components
+import { SubIssuesRootList } from "./issues-list";
+import { IssueProperty } from "./properties";
+// ui
+import { Tooltip, CustomMenu } from "components/ui";
+// types
+import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+
+export interface ISubIssues {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  issue: any;
+  spacingLeft?: number;
+  user: ICurrentUserResponse | undefined;
+  editable: boolean;
+  removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
+  copyText: (text: string) => void;
+  handleIssueCrudOperation: (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string,
+    issue?: IIssue | null
+  ) => void;
+}
+
+export const SubIssues: React.FC<ISubIssues> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  issue,
+  spacingLeft = 0,
+  user,
+  editable,
+  removeIssueFromSubIssues,
+  issuesLoader,
+  handleIssuesLoader,
+  copyText,
+  handleIssueCrudOperation,
+}) => (
+  <div>
+    {issue && (
+      <div
+        className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
+        style={{ paddingLeft: `${spacingLeft}px` }}
+      >
+        <div className="flex-shrink-0 w-[22px] h-[22px]">
+          {issue?.sub_issues_count > 0 && (
+            <>
+              {issuesLoader.sub_issues.includes(issue?.id) ? (
+                <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+                </div>
+              ) : (
+                <div
+                  className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
+                >
+                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
+                    <ChevronDown width={14} strokeWidth={2} />
+                  ) : (
+                    <ChevronRight width={14} strokeWidth={2} />
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+          <a className="w-full flex items-center gap-2">
+            <div
+              className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
+              style={{
+                backgroundColor: issue.state_detail.color,
+              }}
+            />
+            <div className="flex-shrink-0 text-xs text-custom-text-200">
+              {issue.project_detail.identifier}-{issue?.sequence_id}
+            </div>
+            <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
+              <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
+            </Tooltip>
+          </a>
+        </Link>
+
+        <div className="flex-shrink-0 text-sm">
+          <IssueProperty
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            parentIssue={parentIssue}
+            issue={issue}
+            user={user}
+            editable={editable}
+          />
+        </div>
+
+        <div className="flex-shrink-0 text-sm">
+          <CustomMenu width="auto" ellipsis>
+            {editable && (
+              <CustomMenu.MenuItem
+                onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <Pencil width={14} strokeWidth={2} />
+                  <span>Edit issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+
+            {editable && (
+              <CustomMenu.MenuItem
+                onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <Trash width={14} strokeWidth={2} />
+                  <span>Delete issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+
+            <CustomMenu.MenuItem
+              onClick={() =>
+                copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
+              }
+            >
+              <div className="flex items-center justify-start gap-2">
+                <LinkIcon width={14} strokeWidth={2} />
+                <span>Copy issue link</span>
+              </div>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+
+        {editable && (
+          <>
+            {issuesLoader.delete.includes(issue?.id) ? (
+              <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
+                <Loader width={14} strokeWidth={2} className="animate-spin" />
+              </div>
+            ) : (
+              <div
+                className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
+                onClick={() => {
+                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+                  removeIssueFromSubIssues(parentIssue?.id, issue);
+                }}
+              >
+                <X width={14} strokeWidth={2} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    )}
+
+    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
+      <SubIssuesRootList
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        parentIssue={issue}
+        spacingLeft={spacingLeft + 22}
+        user={user}
+        editable={editable}
+        removeIssueFromSubIssues={removeIssueFromSubIssues}
+        issuesLoader={issuesLoader}
+        handleIssuesLoader={handleIssuesLoader}
+        copyText={copyText}
+        handleIssueCrudOperation={handleIssueCrudOperation}
+      />
+    )}
+  </div>
+);
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
new file mode 100644
index 000000000..9fc77992e
--- /dev/null
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+// swr
+import useSWR from "swr";
+// components
+import { SubIssues } from "./issue";
+// types
+import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+// services
+import issuesService from "services/issues.service";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+export interface ISubIssuesRootList {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  spacingLeft?: number;
+  user: ICurrentUserResponse | undefined;
+  editable: boolean;
+  removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
+  copyText: (text: string) => void;
+  handleIssueCrudOperation: (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string,
+    issue?: IIssue | null
+  ) => void;
+}
+
+export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  spacingLeft = 10,
+  user,
+  editable,
+  removeIssueFromSubIssues,
+  issuesLoader,
+  handleIssuesLoader,
+  copyText,
+  handleIssueCrudOperation,
+}) => {
+  const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? SUB_ISSUES(parentIssue?.id)
+      : null,
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      : null
+  );
+
+  React.useEffect(() => {
+    if (isLoading) {
+      handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+    } else {
+      if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
+        handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+      }
+    }
+  }, [isLoading]);
+
+  return (
+    <div className="relative">
+      {issues &&
+        issues.sub_issues &&
+        issues.sub_issues.length > 0 &&
+        issues.sub_issues.map((issue: IIssue) => (
+          <SubIssues
+            key={`${issue?.id}`}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            parentIssue={parentIssue}
+            issue={issue}
+            spacingLeft={spacingLeft}
+            user={user}
+            editable={editable}
+            removeIssueFromSubIssues={removeIssueFromSubIssues}
+            issuesLoader={issuesLoader}
+            handleIssuesLoader={handleIssuesLoader}
+            copyText={copyText}
+            handleIssueCrudOperation={handleIssueCrudOperation}
+          />
+        ))}
+
+      <div
+        className={`absolute top-0 bottom-0  ${
+          spacingLeft > 10 ? `border-l border-custom-border-100` : ``
+        }`}
+        style={{ left: `${spacingLeft - 12}px` }}
+      />
+    </div>
+  );
+};
diff --git a/web/components/issues/sub-issues/progressbar.tsx b/web/components/issues/sub-issues/progressbar.tsx
new file mode 100644
index 000000000..dee91263b
--- /dev/null
+++ b/web/components/issues/sub-issues/progressbar.tsx
@@ -0,0 +1,25 @@
+export interface IProgressBar {
+  total: number;
+  done: number;
+}
+
+export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
+  const calPercentage = (doneValue: number, totalValue: number): string => {
+    if (doneValue === 0 || totalValue === 0) return (0).toFixed(0);
+    return ((100 * doneValue) / totalValue).toFixed(0);
+  };
+
+  return (
+    <div className="relative flex items-center gap-2">
+      <div className="w-full">
+        <div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
+          <div
+            className="bg-green-500 h-[6px] rounded-full transition-all"
+            style={{ width: `${calPercentage(done, total)}%` }}
+          />
+        </div>
+      </div>
+      <div className="flex-shrink-0 text-xs font-medium">{calPercentage(done, total)}% Done</div>
+    </div>
+  );
+};
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
new file mode 100644
index 000000000..4f2dca43b
--- /dev/null
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -0,0 +1,206 @@
+import React from "react";
+// swr
+import { mutate } from "swr";
+// components
+import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
+import { MembersSelect, PrioritySelect } from "components/project";
+import { StateSelect } from "components/states";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+// types
+import { ICurrentUserResponse, IIssue, IState } from "types";
+// fetch-keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+// services
+import issuesService from "services/issues.service";
+import trackEventServices from "services/track-event.service";
+
+export interface IIssueProperty {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  issue: IIssue;
+  user: ICurrentUserResponse | undefined;
+  editable: boolean;
+}
+
+export const IssueProperty: React.FC<IIssueProperty> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  issue,
+  user,
+  editable,
+}) => {
+  const [properties] = useIssuesProperties(workspaceSlug, projectId);
+
+  const handlePriorityChange = (data: any) => {
+    partialUpdateIssue({ priority: data });
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_PRIORITY",
+      user
+    );
+  };
+
+  const handleStateChange = (data: string, states: IState[] | undefined) => {
+    const oldState = states?.find((s) => s.id === issue.state);
+    const newState = states?.find((s) => s.id === data);
+
+    partialUpdateIssue({
+      state: data,
+      state_detail: newState,
+    });
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_STATE",
+      user
+    );
+    if (oldState?.group !== "completed" && newState?.group !== "completed") {
+      trackEventServices.trackIssueMarkedAsDoneEvent(
+        {
+          workspaceSlug: issue.workspace_detail.slug,
+          workspaceId: issue.workspace_detail.id,
+          projectId: issue.project_detail.id,
+          projectIdentifier: issue.project_detail.identifier,
+          projectName: issue.project_detail.name,
+          issueId: issue.id,
+        },
+        user
+      );
+    }
+  };
+
+  const handleAssigneeChange = (data: any) => {
+    let newData = issue.assignees ?? [];
+
+    if (newData && newData.length > 0) {
+      if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
+      else newData = [...newData, data];
+    } else newData = [...newData, data];
+
+    partialUpdateIssue({ assignees_list: data, assignees: data });
+
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
+      user
+    );
+  };
+
+  const partialUpdateIssue = async (data: Partial<IIssue>) => {
+    mutate(
+      workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
+      (elements: any) => {
+        const _elements = { ...elements };
+        const _issues = _elements.sub_issues.map((element: IIssue) =>
+          element.id === issue.id ? { ...element, ...data } : element
+        );
+        _elements["sub_issues"] = [..._issues];
+        return _elements;
+      },
+      false
+    );
+
+    const issueResponse = await issuesService.patchIssue(
+      workspaceSlug as string,
+      issue.project,
+      issue.id,
+      data,
+      user
+    );
+
+    mutate(
+      SUB_ISSUES(parentIssue.id),
+      (elements: any) => {
+        const _elements = elements.sub_issues.map((element: IIssue) =>
+          element.id === issue.id ? issueResponse : element
+        );
+        elements["sub_issues"] = _elements;
+        return elements;
+      },
+      true
+    );
+  };
+
+  return (
+    <div className="relative flex items-center gap-1">
+      {properties.priority && (
+        <div className="flex-shrink-0">
+          <PrioritySelect
+            value={issue.priority}
+            onChange={handlePriorityChange}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+
+      {properties.state && (
+        <div className="flex-shrink-0">
+          <StateSelect
+            value={issue.state_detail}
+            onChange={handleStateChange}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+
+      {properties.start_date && issue.start_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          <ViewStartDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            user={user}
+            isNotAllowed={!editable}
+          />
+        </div>
+      )}
+
+      {properties.due_date && issue.target_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          <ViewDueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            user={user}
+            isNotAllowed={!editable}
+          />
+        </div>
+      )}
+
+      {properties.assignee && (
+        <div className="flex-shrink-0">
+          <MembersSelect
+            value={issue.assignees}
+            onChange={handleAssigneeChange}
+            membersDetails={issue.assignee_details}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
new file mode 100644
index 000000000..305a9150b
--- /dev/null
+++ b/web/components/issues/sub-issues/root.tsx
@@ -0,0 +1,328 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// swr
+import useSWR, { mutate } from "swr";
+// lucide icons
+import { Plus, ChevronRight, ChevronDown } from "lucide-react";
+// components
+import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { SubIssuesRootList } from "./issues-list";
+import { ProgressBar } from "./progressbar";
+// ui
+import { CustomMenu } from "components/ui";
+// hooks
+import { useProjectMyMembership } from "contexts/project-member.context";
+import useToast from "hooks/use-toast";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+// services
+import issuesService from "services/issues.service";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+export interface ISubIssuesRoot {
+  parentIssue: IIssue;
+  user: ICurrentUserResponse | undefined;
+}
+
+export interface ISubIssuesRootLoaders {
+  visibility: string[];
+  delete: string[];
+  sub_issues: string[];
+}
+export interface ISubIssuesRootLoadersHandler {
+  key: "visibility" | "delete" | "sub_issues";
+  issueId: string;
+}
+
+export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+
+  const { memberRole } = useProjectMyMembership();
+  const { setToastAlert } = useToast();
+
+  const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? SUB_ISSUES(parentIssue?.id)
+      : null,
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      : null
+  );
+
+  const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
+    visibility: [parentIssue?.id],
+    delete: [],
+    sub_issues: [],
+  });
+  const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
+    setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
+      ...previousData,
+      [key]: previousData[key].includes(issueId)
+        ? previousData[key].filter((i: string) => i !== issueId)
+        : [...previousData[key], issueId],
+    }));
+  };
+
+  const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
+    create: { toggle: boolean; issueId: string | null };
+    existing: { toggle: boolean; issueId: string | null };
+    edit: { toggle: boolean; issueId: string | null; issue: IIssue | null };
+    delete: { toggle: boolean; issueId: string | null; issue: IIssue | null };
+  }>({
+    create: {
+      toggle: false,
+      issueId: null,
+    },
+    existing: {
+      toggle: false,
+      issueId: null,
+    },
+    edit: {
+      toggle: false,
+      issueId: null, // parent issue id for mutation
+      issue: null,
+    },
+    delete: {
+      toggle: false,
+      issueId: null, // parent issue id for mutation
+      issue: null,
+    },
+  });
+  const handleIssueCrudOperation = (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string | null,
+    issue: IIssue | null = null
+  ) => {
+    setIssueCrudOperation({
+      ...issueCrudOperation,
+      [key]: {
+        toggle: !issueCrudOperation[key].toggle,
+        issueId: issueId,
+        issue: issue,
+      },
+    });
+  };
+
+  const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
+    const issueId = issueCrudOperation?.existing?.issueId;
+    const payload = {
+      sub_issue_ids: data.map((i) => i.id),
+    };
+    await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
+      if (issueId) mutate(SUB_ISSUES(issueId));
+    });
+  };
+
+  const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
+    if (!workspaceSlug || !parentIssue || !issue?.id) return;
+    issuesService
+      .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
+      .then(async () => {
+        if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "success",
+          title: `Issue removed!`,
+          message: `Issue removed successfully.`,
+        });
+      })
+      .catch(() => {
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "warning",
+          title: `Error!`,
+          message: `Error, Please try again later.`,
+        });
+      });
+  };
+
+  const copyText = (text: string) => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${text}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const isEditable = memberRole?.isGuest || memberRole?.isViewer ? false : true;
+
+  const mutateSubIssues = (parentIssueId: string | null) => {
+    if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
+  };
+
+  return (
+    <div className="w-full h-full space-y-2">
+      {!issues && isLoading ? (
+        <div className="py-3 text-center text-sm  text-custom-text-300 font-medium">Loading...</div>
+      ) : (
+        <>
+          {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
+            <>
+              {/* header */}
+              <div className="relative flex items-center gap-4 text-xs">
+                <div
+                  className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
+                  onClick={() =>
+                    handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
+                  }
+                >
+                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                    {issuesLoader.visibility.includes(parentIssue?.id) ? (
+                      <ChevronDown width={16} strokeWidth={2} />
+                    ) : (
+                      <ChevronRight width={14} strokeWidth={2} />
+                    )}
+                  </div>
+                  <div>Sub-issues</div>
+                  <div>({issues?.sub_issues?.length || 0})</div>
+                </div>
+
+                <div className="w-full max-w-[250px] select-none">
+                  <ProgressBar
+                    total={issues?.sub_issues?.length || 0}
+                    done={
+                      (issues?.state_distribution?.cancelled || 0) +
+                      (issues?.state_distribution?.completed || 0)
+                    }
+                  />
+                </div>
+
+                {isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
+                  <div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
+                    >
+                      Add sub-issue
+                    </div>
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
+                    >
+                      Add an existing issue
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* issues */}
+              {issuesLoader.visibility.includes(parentIssue?.id) && (
+                <div className="border border-b-0 border-custom-border-100">
+                  <SubIssuesRootList
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    parentIssue={parentIssue}
+                    user={undefined}
+                    editable={isEditable}
+                    removeIssueFromSubIssues={removeIssueFromSubIssues}
+                    issuesLoader={issuesLoader}
+                    handleIssuesLoader={handleIssuesLoader}
+                    copyText={copyText}
+                    handleIssueCrudOperation={handleIssueCrudOperation}
+                  />
+                </div>
+              )}
+            </>
+          ) : (
+            isEditable && (
+              <div className="text-xs py-2 text-custom-text-300 font-medium">
+                <div className="py-3 text-center">No sub issues are available</div>
+                <>
+                  <CustomMenu
+                    label={
+                      <>
+                        <Plus className="h-3 w-3" />
+                        Add sub-issue
+                      </>
+                    }
+                    buttonClassName="whitespace-nowrap"
+                    position="left"
+                    noBorder
+                    noChevron
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("create", parentIssue?.id);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("existing", parentIssue?.id);
+                      }}
+                    >
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </>
+              </div>
+            )
+          )}
+          {isEditable && issueCrudOperation?.create?.toggle && (
+            <CreateUpdateIssueModal
+              isOpen={issueCrudOperation?.create?.toggle}
+              prePopulateData={{
+                parent: issueCrudOperation?.create?.issueId,
+              }}
+              handleClose={() => {
+                mutateSubIssues(issueCrudOperation?.create?.issueId);
+                handleIssueCrudOperation("create", null);
+              }}
+            />
+          )}
+          {isEditable &&
+            issueCrudOperation?.existing?.toggle &&
+            issueCrudOperation?.existing?.issueId && (
+              <ExistingIssuesListModal
+                isOpen={issueCrudOperation?.existing?.toggle}
+                handleClose={() => handleIssueCrudOperation("existing", null)}
+                searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
+                handleOnSubmit={addAsSubIssueFromExistingIssues}
+                workspaceLevelToggle
+              />
+            )}
+          {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
+            <>
+              <CreateUpdateIssueModal
+                isOpen={issueCrudOperation?.edit?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.edit?.issueId);
+                  handleIssueCrudOperation("edit", null, null);
+                }}
+                data={issueCrudOperation?.edit?.issue}
+              />
+            </>
+          )}
+          {isEditable &&
+            issueCrudOperation?.delete?.toggle &&
+            issueCrudOperation?.delete?.issueId && (
+              <DeleteIssueModal
+                isOpen={issueCrudOperation?.delete?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.delete?.issueId);
+                  handleIssueCrudOperation("delete", null, null);
+                }}
+                data={issueCrudOperation?.delete?.issue}
+                user={user}
+                redirection={false}
+              />
+            )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
index b0337ecd4..035e8b990 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -51,7 +51,6 @@ export const ProfileIssuesView = () => {
     groupedIssues,
     mutateProfileIssues,
     displayFilters,
-    setDisplayFilters,
     isEmpty,
     filters,
     setFilters,
diff --git a/web/components/project/members-select.tsx b/web/components/project/members-select.tsx
index f99d85174..4ffad72b9 100644
--- a/web/components/project/members-select.tsx
+++ b/web/components/project/members-select.tsx
@@ -82,7 +82,7 @@ export const MembersSelect: React.FC<Props> = ({
     <Tooltip
       tooltipHeading="Assignee"
       tooltipContent={
-        membersDetails.length > 0
+        membersDetails && membersDetails.length > 0
           ? membersDetails.map((assignee) => assignee?.display_name).join(", ")
           : "No Assignee"
       }
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index b142f8325..4f5bad7b3 100644
--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@@ -1,15 +1,16 @@
 import React from "react";
+
 import useSWR from "swr";
 
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// component
-import { MarkdownRenderer, Spinner } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
 // services
 import workspaceService from "services/workspace.service";
-// helper
+// components
+import { Loader, MarkdownRenderer } from "components/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+// helpers
 import { renderLongDateFormat } from "helpers/date-time.helper";
 
 type Props = {
@@ -34,8 +35,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="grid place-items-center min-h-full text-center p-4">
+        <div className="fixed inset-0 z-20 h-full w-full">
+          <div className="grid place-items-center h-full w-full p-4">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -45,49 +46,62 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl">
-                <div className="max-h-[90vh] overflow-y-auto p-5">
-                  <div className="sm:flex sm:items-start">
-                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        <span>Product Updates</span>
-                        <span>
-                          <button type="button" onClick={() => setIsOpen(false)}>
-                            <XMarkIcon
-                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </span>
-                      </Dialog.Title>
-                      {updates && updates.length > 0 ? (
-                        updates.map((item, index) => (
-                          <React.Fragment key={item.id}>
-                            <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
-                                {item.tag_name}
+              <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
+                <div className="flex flex-col p-4 max-h-[90vh] w-full">
+                  <Dialog.Title
+                    as="h3"
+                    className="flex items-center justify-between text-lg font-semibold"
+                  >
+                    <span>Product Updates</span>
+                    <span>
+                      <button type="button" onClick={() => setIsOpen(false)}>
+                        <XMarkIcon
+                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </span>
+                  </Dialog.Title>
+                  {updates && updates.length > 0 ? (
+                    <div className="h-full overflow-y-auto mt-4 space-y-4">
+                      {updates.map((item, index) => (
+                        <React.Fragment key={item.id}>
+                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              {item.tag_name}
+                            </span>
+                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            {index === 0 && (
+                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                New
                               </span>
-                              <span>{renderLongDateFormat(item.published_at)}</span>
-                              {index === 0 && (
-                                <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
-                                  New
-                                </span>
-                              )}
-                            </div>
-                            <MarkdownRenderer markdown={item.body} />
-                          </React.Fragment>
-                        ))
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                          Loading...
-                        </div>
-                      )}
+                            )}
+                          </div>
+                          <MarkdownRenderer markdown={item.body} />
+                        </React.Fragment>
+                      ))}
                     </div>
-                  </div>
+                  ) : (
+                    <div className="grid place-items-center w-full mt-4">
+                      <Loader className="space-y-6 w-full">
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                      </Loader>
+                    </div>
+                  )}
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/contexts/profile-issues-context.tsx b/web/contexts/profile-issues-context.tsx
index 39b8020d7..44c17b50a 100644
--- a/web/contexts/profile-issues-context.tsx
+++ b/web/contexts/profile-issues-context.tsx
@@ -71,9 +71,8 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         display_filters: {
           ...state.display_filters,
-          ...payload,
+          ...payload?.display_filters,
         },
-        issueView: payload?.display_filters?.layout || "list",
       };
 
       return {
@@ -100,7 +99,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
     case "SET_PROPERTIES": {
       const newState = {
         ...state,
-        properties: {
+        display_properties: {
           ...state.display_properties,
           ...payload?.display_properties,
         },
@@ -129,7 +128,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         type: "SET_DISPLAY_FILTERS",
         payload: {
           display_filters: {
-            ...state.display_filters,
             ...displayFilter,
           },
         },
@@ -179,7 +177,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         type: "SET_PROPERTIES",
         payload: {
           display_properties: {
-            ...state.display_properties,
             [key]: !state.display_properties[key],
           },
         },
diff --git a/web/helpers/array.helper.ts b/web/helpers/array.helper.ts
index bcadbe3c8..a682b0a1c 100644
--- a/web/helpers/array.helper.ts
+++ b/web/helpers/array.helper.ts
@@ -38,10 +38,13 @@ export const orderArrayBy = (
 
 export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
 
-export const findStringWithMostCharacters = (strings: string[]) =>
-  strings.reduce((longestString, currentString) =>
+export const findStringWithMostCharacters = (strings: string[]): string => {
+  if (!strings || strings.length === 0) return "";
+
+  return strings.reduce((longestString, currentString) =>
     currentString.length > longestString.length ? currentString : longestString
   );
+};
 
 export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
   if (!arr1 || !arr2) return false;