diff --git a/.gitignore b/.gitignore
index ad72521ff..4933d309e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,6 @@ yarn-error.log
 *.sln
 package-lock.json
 .vscode
+
+# Sentry
+.sentryclirc
\ No newline at end of file
diff --git a/README.md b/README.md
index 0480ee4fd..6af8396ac 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 </p>
 
 <p align="center">
-<a href="https://discord.com/invite/29tPNhaV">
+<a href="https://discord.com/invite/A92xrEGCge">
 <img alt="Discord" src="https://img.shields.io/discord/1031547764020084846?color=5865F2&label=Discord&style=for-the-badge" />
 </a>
 <img alt="Discord" src="https://img.shields.io/github/commit-activity/m/makeplane/plane?style=for-the-badge" />
@@ -48,4 +48,4 @@ Our [Code of Conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CON
 
 ## Security
 
-If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@plane.so to disclose any security vulnerabilities.
\ No newline at end of file
+If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@plane.so to disclose any security vulnerabilities.
diff --git a/apiserver/back_migration.py b/apiserver/back_migration.py
index 57ded0ba4..9613412a3 100644
--- a/apiserver/back_migration.py
+++ b/apiserver/back_migration.py
@@ -1,11 +1,13 @@
 # All the python scripts that are used for back migrations
+import uuid
 from plane.db.models import ProjectIdentifier
-from plane.db.models import Issue, IssueComment
+from plane.db.models import Issue, IssueComment, User
+from django.contrib.auth.hashers import make_password
+
 
 # Update description and description html values for old descriptions
 def update_description():
     try:
-
         issues = Issue.objects.all()
         updated_issues = []
 
@@ -25,7 +27,6 @@ def update_description():
 
 def update_comments():
     try:
-
         issue_comments = IssueComment.objects.all()
         updated_issue_comments = []
 
@@ -44,9 +45,11 @@ def update_comments():
 
 def update_project_identifiers():
     try:
-        project_identifiers = ProjectIdentifier.objects.filter(workspace_id=None).select_related("project", "project__workspace")
+        project_identifiers = ProjectIdentifier.objects.filter(
+            workspace_id=None
+        ).select_related("project", "project__workspace")
         updated_identifiers = []
-    
+
         for identifier in project_identifiers:
             identifier.workspace_id = identifier.project.workspace_id
             updated_identifiers.append(identifier)
@@ -58,3 +61,21 @@ def update_project_identifiers():
     except Exception as e:
         print(e)
         print("Failed")
+
+
+def update_user_empty_password():
+    try:
+        users = User.objects.filter(password="")
+        updated_users = []
+
+        for user in users:
+            user.password = make_password(uuid.uuid4().hex)
+            user.is_password_autoset = True
+            updated_users.append(user)
+
+        User.objects.bulk_update(updated_users, ["password"], batch_size=50)
+        print("Success")
+
+    except Exception as e:
+        print(e)
+        print("Failed")
diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index a148cbfb5..3add8f965 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -40,12 +40,12 @@ class IssueFlatSerializer(BaseSerializer):
             "start_date",
             "target_date",
             "sequence_id",
+            "sort_order",
         ]
 
 
 # Issue Serializer with state details
 class IssueStateSerializer(BaseSerializer):
-
     state_detail = StateSerializer(read_only=True, source="state")
     project_detail = ProjectSerializer(read_only=True, source="project")
 
@@ -57,7 +57,6 @@ class IssueStateSerializer(BaseSerializer):
 ##TODO: Find a better way to write this serializer
 ## Find a better approach to save manytomany?
 class IssueCreateSerializer(BaseSerializer):
-
     state_detail = StateSerializer(read_only=True, source="state")
     created_by_detail = UserLiteSerializer(read_only=True, source="created_by")
     project_detail = ProjectSerializer(read_only=True, source="project")
@@ -176,7 +175,6 @@ class IssueCreateSerializer(BaseSerializer):
         return issue
 
     def update(self, instance, validated_data):
-
         blockers = validated_data.pop("blockers_list", None)
         assignees = validated_data.pop("assignees_list", None)
         labels = validated_data.pop("labels_list", None)
@@ -254,7 +252,6 @@ class IssueCreateSerializer(BaseSerializer):
 
 
 class IssueActivitySerializer(BaseSerializer):
-
     actor_detail = UserLiteSerializer(read_only=True, source="actor")
 
     class Meta:
@@ -263,7 +260,6 @@ class IssueActivitySerializer(BaseSerializer):
 
 
 class IssueCommentSerializer(BaseSerializer):
-
     actor_detail = UserLiteSerializer(read_only=True, source="actor")
     issue_detail = IssueFlatSerializer(read_only=True, source="issue")
     project_detail = ProjectSerializer(read_only=True, source="project")
@@ -319,7 +315,6 @@ class LabelSerializer(BaseSerializer):
 
 
 class IssueLabelSerializer(BaseSerializer):
-
     # label_details = LabelSerializer(read_only=True, source="label")
 
     class Meta:
@@ -332,7 +327,6 @@ class IssueLabelSerializer(BaseSerializer):
 
 
 class BlockedIssueSerializer(BaseSerializer):
-
     blocked_issue_detail = IssueFlatSerializer(source="block", read_only=True)
 
     class Meta:
@@ -341,7 +335,6 @@ class BlockedIssueSerializer(BaseSerializer):
 
 
 class BlockerIssueSerializer(BaseSerializer):
-
     blocker_issue_detail = IssueFlatSerializer(source="blocked_by", read_only=True)
 
     class Meta:
@@ -350,7 +343,6 @@ class BlockerIssueSerializer(BaseSerializer):
 
 
 class IssueAssigneeSerializer(BaseSerializer):
-
     assignee_details = UserLiteSerializer(read_only=True, source="assignee")
 
     class Meta:
@@ -373,7 +365,6 @@ class CycleBaseSerializer(BaseSerializer):
 
 
 class IssueCycleDetailSerializer(BaseSerializer):
-
     cycle_detail = CycleBaseSerializer(read_only=True, source="cycle")
 
     class Meta:
@@ -404,7 +395,6 @@ class ModuleBaseSerializer(BaseSerializer):
 
 
 class IssueModuleDetailSerializer(BaseSerializer):
-
     module_detail = ModuleBaseSerializer(read_only=True, source="module")
 
     class Meta:
diff --git a/apiserver/plane/api/views/api_token.py b/apiserver/plane/api/views/api_token.py
index 4ed3d9de0..2508b06ac 100644
--- a/apiserver/plane/api/views/api_token.py
+++ b/apiserver/plane/api/views/api_token.py
@@ -15,12 +15,16 @@ from plane.api.serializers import APITokenSerializer
 class ApiTokenEndpoint(BaseAPIView):
     def post(self, request):
         try:
-
             label = request.data.get("label", str(uuid4().hex))
+            workspace = request.data.get("workspace", False)
+
+            if not workspace:
+                return Response(
+                    {"error": "Workspace is required"}, status=status.HTTP_200_OK
+                )
 
             api_token = APIToken.objects.create(
-                label=label,
-                user=request.user,
+                label=label, user=request.user, workspace_id=workspace
             )
 
             serializer = APITokenSerializer(api_token)
diff --git a/apiserver/plane/api/views/authentication.py b/apiserver/plane/api/views/authentication.py
index c77bdd160..ac218837d 100644
--- a/apiserver/plane/api/views/authentication.py
+++ b/apiserver/plane/api/views/authentication.py
@@ -9,6 +9,7 @@ from django.utils import timezone
 from django.core.exceptions import ValidationError
 from django.core.validators import validate_email
 from django.conf import settings
+from django.contrib.auth.hashers import make_password
 
 # Third party imports
 from rest_framework.response import Response
@@ -35,12 +36,10 @@ def get_tokens_for_user(user):
 
 
 class SignUpEndpoint(BaseAPIView):
-
     permission_classes = (AllowAny,)
 
     def post(self, request):
         try:
-
             email = request.data.get("email", False)
             password = request.data.get("password", False)
 
@@ -216,14 +215,12 @@ class SignOutEndpoint(BaseAPIView):
 
 
 class MagicSignInGenerateEndpoint(BaseAPIView):
-
     permission_classes = [
         AllowAny,
     ]
 
     def post(self, request):
         try:
-
             email = request.data.get("email", False)
 
             if not email:
@@ -269,7 +266,6 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
                 ri.set(key, json.dumps(value), ex=expiry)
 
             else:
-
                 value = {"current_attempt": 0, "email": email, "token": token}
                 expiry = 600
 
@@ -293,14 +289,12 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
 
 
 class MagicSignInEndpoint(BaseAPIView):
-
     permission_classes = [
         AllowAny,
     ]
 
     def post(self, request):
         try:
-
             user_token = request.data.get("token", "").strip().lower()
             key = request.data.get("key", False)
 
@@ -313,19 +307,20 @@ class MagicSignInEndpoint(BaseAPIView):
             ri = redis_instance()
 
             if ri.exists(key):
-
                 data = json.loads(ri.get(key))
 
                 token = data["token"]
                 email = data["email"]
 
                 if str(token) == str(user_token):
-
                     if User.objects.filter(email=email).exists():
                         user = User.objects.get(email=email)
                     else:
                         user = User.objects.create(
-                            email=email, username=uuid.uuid4().hex
+                            email=email,
+                            username=uuid.uuid4().hex,
+                            password=make_password(uuid.uuid4().hex),
+                            is_password_autoset=True,
                         )
 
                     user.last_active = timezone.now()
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index d1b291d9a..2b18aab96 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -1,5 +1,9 @@
+# Python imports
+import json
+
 # Django imports
 from django.db.models import OuterRef, Func, F
+from django.core import serializers
 
 # Third party imports
 from rest_framework.response import Response
@@ -11,10 +15,10 @@ from . import BaseViewSet
 from plane.api.serializers import CycleSerializer, CycleIssueSerializer
 from plane.api.permissions import ProjectEntityPermission
 from plane.db.models import Cycle, CycleIssue, Issue
+from plane.bgtasks.issue_activites_task import issue_activity
 
 
 class CycleViewSet(BaseViewSet):
-
     serializer_class = CycleSerializer
     model = Cycle
     permission_classes = [
@@ -41,7 +45,6 @@ class CycleViewSet(BaseViewSet):
 
 
 class CycleIssueViewSet(BaseViewSet):
-
     serializer_class = CycleIssueSerializer
     model = CycleIssue
 
@@ -79,7 +82,6 @@ class CycleIssueViewSet(BaseViewSet):
 
     def create(self, request, slug, project_id, cycle_id):
         try:
-
             issues = request.data.get("issues", [])
 
             if not len(issues):
@@ -91,29 +93,77 @@ class CycleIssueViewSet(BaseViewSet):
                 workspace__slug=slug, project_id=project_id, pk=cycle_id
             )
 
-            issues = Issue.objects.filter(
-                pk__in=issues, workspace__slug=slug, project_id=project_id
-            )
+            # Get all CycleIssues already created
+            cycle_issues = list(CycleIssue.objects.filter(issue_id__in=issues))
+            records_to_update = []
+            update_cycle_issue_activity = []
+            record_to_create = []
 
-            # Delete old records in order to maintain the database integrity
-            CycleIssue.objects.filter(issue_id__in=issues).delete()
+            for issue in issues:
+                cycle_issue = [
+                    cycle_issue
+                    for cycle_issue in cycle_issues
+                    if str(cycle_issue.issue_id) in issues
+                ]
+                # Update only when cycle changes
+                if len(cycle_issue):
+                    if cycle_issue[0].cycle_id != cycle_id:
+                        update_cycle_issue_activity.append(
+                            {
+                                "old_cycle_id": str(cycle_issue[0].cycle_id),
+                                "new_cycle_id": str(cycle_id),
+                                "issue_id": str(cycle_issue[0].issue_id),
+                            }
+                        )
+                        cycle_issue[0].cycle_id = cycle_id
+                        records_to_update.append(cycle_issue[0])
+                else:
+                    record_to_create.append(
+                        CycleIssue(
+                            project_id=project_id,
+                            workspace=cycle.workspace,
+                            created_by=request.user,
+                            updated_by=request.user,
+                            cycle=cycle,
+                            issue_id=issue,
+                        )
+                    )
 
             CycleIssue.objects.bulk_create(
-                [
-                    CycleIssue(
-                        project_id=project_id,
-                        workspace=cycle.workspace,
-                        created_by=request.user,
-                        updated_by=request.user,
-                        cycle=cycle,
-                        issue=issue,
-                    )
-                    for issue in issues
-                ],
+                record_to_create,
                 batch_size=10,
                 ignore_conflicts=True,
             )
-            return Response({"message": "Success"}, status=status.HTTP_200_OK)
+            CycleIssue.objects.bulk_update(
+                records_to_update,
+                ["cycle"],
+                batch_size=10,
+            )
+
+            # Capture Issue Activity
+            issue_activity.delay(
+                {
+                    "type": "issue.activity",
+                    "requested_data": json.dumps({"cycles_list": issues}),
+                    "actor_id": str(self.request.user.id),
+                    "issue_id": str(self.kwargs.get("pk", None)),
+                    "project_id": str(self.kwargs.get("project_id", None)),
+                    "current_instance": json.dumps(
+                        {
+                            "updated_cycle_issues": update_cycle_issue_activity,
+                            "created_cycle_issues": serializers.serialize(
+                                "json", record_to_create
+                            ),
+                        }
+                    ),
+                },
+            )
+
+            # Return all Cycle Issues
+            return Response(
+                CycleIssueSerializer(self.get_queryset(), many=True).data,
+                status=status.HTTP_200_OK,
+            )
 
         except Cycle.DoesNotExist:
             return Response(
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 9955ded76..a1cda9834 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -1,6 +1,10 @@
+# Python imports
+import json
+
 # Django Imports
 from django.db import IntegrityError
 from django.db.models import Prefetch, F, OuterRef, Func
+from django.core import serializers
 
 # Third party imports
 from rest_framework.response import Response
@@ -22,10 +26,10 @@ from plane.db.models import (
     Issue,
     ModuleLink,
 )
+from plane.bgtasks.issue_activites_task import issue_activity
 
 
 class ModuleViewSet(BaseViewSet):
-
     model = Module
     permission_classes = [
         ProjectEntityPermission,
@@ -95,7 +99,6 @@ class ModuleViewSet(BaseViewSet):
 
 
 class ModuleIssueViewSet(BaseViewSet):
-
     serializer_class = ModuleIssueSerializer
     model = ModuleIssue
 
@@ -148,29 +151,77 @@ class ModuleIssueViewSet(BaseViewSet):
                 workspace__slug=slug, project_id=project_id, pk=module_id
             )
 
-            issues = Issue.objects.filter(
-                pk__in=issues, workspace__slug=slug, project_id=project_id
-            )
+            module_issues = list(ModuleIssue.objects.filter(issue_id__in=issues))
 
-            # Delete old records in order to maintain the database integrity
-            ModuleIssue.objects.filter(issue_id__in=issues).delete()
+            update_module_issue_activity = []
+            records_to_update = []
+            record_to_create = []
+
+            for issue in issues:
+                module_issue = [
+                    module_issue
+                    for module_issue in module_issues
+                    if str(module_issue.issue_id) in issues
+                ]
+
+                if len(module_issue):
+                    if module_issue[0].module_id != module_id:
+                        update_module_issue_activity.append(
+                            {
+                                "old_module_id": str(module_issue[0].module_id),
+                                "new_module_id": str(module_id),
+                                "issue_id": str(module_issue[0].issue_id),
+                            }
+                        )
+                        module_issue[0].module_id = module_id
+                        records_to_update.append(module_issue[0])
+                else:
+                    record_to_create.append(
+                        ModuleIssue(
+                            module=module,
+                            issue_id=issue,
+                            project_id=project_id,
+                            workspace=module.workspace,
+                            created_by=request.user,
+                            updated_by=request.user,
+                        )
+                    )
 
             ModuleIssue.objects.bulk_create(
-                [
-                    ModuleIssue(
-                        module=module,
-                        issue=issue,
-                        project_id=project_id,
-                        workspace=module.workspace,
-                        created_by=request.user,
-                        updated_by=request.user,
-                    )
-                    for issue in issues
-                ],
+                record_to_create,
                 batch_size=10,
                 ignore_conflicts=True,
             )
-            return Response({"message": "Success"}, status=status.HTTP_200_OK)
+
+            ModuleIssue.objects.bulk_update(
+                records_to_update,
+                ["module"],
+                batch_size=10,
+            )
+
+            # Capture Issue Activity
+            issue_activity.delay(
+                {
+                    "type": "issue.activity",
+                    "requested_data": json.dumps({"modules_list": issues}),
+                    "actor_id": str(self.request.user.id),
+                    "issue_id": str(self.kwargs.get("pk", None)),
+                    "project_id": str(self.kwargs.get("project_id", None)),
+                    "current_instance": json.dumps(
+                        {
+                            "updated_module_issues": update_module_issue_activity,
+                            "created_module_issues": serializers.serialize(
+                                "json", record_to_create
+                            ),
+                        }
+                    ),
+                },
+            )
+
+            return Response(
+                ModuleIssueSerializer(self.get_queryset(), many=True).data,
+                status=status.HTTP_200_OK,
+            )
         except Module.DoesNotExist:
             return Response(
                 {"error": "Module Does not exists"}, status=status.HTTP_400_BAD_REQUEST
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index f6debc921..7e0e3f6ff 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -6,7 +6,16 @@ from django_rq import job
 from sentry_sdk import capture_exception
 
 # Module imports
-from plane.db.models import User, Issue, Project, Label, IssueActivity, State
+from plane.db.models import (
+    User,
+    Issue,
+    Project,
+    Label,
+    IssueActivity,
+    State,
+    Cycle,
+    Module,
+)
 
 
 # Track Chnages in name
@@ -44,7 +53,6 @@ def track_parent(
     issue_activities,
 ):
     if current_instance.get("parent") != requested_data.get("parent"):
-
         if requested_data.get("parent") == None:
             old_parent = Issue.objects.get(pk=current_instance.get("parent"))
             issue_activities.append(
@@ -134,7 +142,6 @@ def track_state(
     issue_activities,
 ):
     if current_instance.get("state") != requested_data.get("state"):
-
         new_state = State.objects.get(pk=requested_data.get("state", None))
         old_state = State.objects.get(pk=current_instance.get("state", None))
 
@@ -167,7 +174,6 @@ def track_description(
     if current_instance.get("description_html") != requested_data.get(
         "description_html"
     ):
-
         issue_activities.append(
             IssueActivity(
                 issue_id=issue_id,
@@ -274,7 +280,6 @@ def track_labels(
 ):
     # Label Addition
     if len(requested_data.get("labels_list")) > len(current_instance.get("labels")):
-
         for label in requested_data.get("labels_list"):
             if label not in current_instance.get("labels"):
                 label = Label.objects.get(pk=label)
@@ -296,7 +301,6 @@ def track_labels(
 
     # Label Removal
     if len(requested_data.get("labels_list")) < len(current_instance.get("labels")):
-
         for label in current_instance.get("labels"):
             if label not in requested_data.get("labels_list"):
                 label = Label.objects.get(pk=label)
@@ -326,12 +330,10 @@ def track_assignees(
     actor,
     issue_activities,
 ):
-
     # Assignee Addition
     if len(requested_data.get("assignees_list")) > len(
         current_instance.get("assignees")
     ):
-
         for assignee in requested_data.get("assignees_list"):
             if assignee not in current_instance.get("assignees"):
                 assignee = User.objects.get(pk=assignee)
@@ -354,7 +356,6 @@ def track_assignees(
     if len(requested_data.get("assignees_list")) < len(
         current_instance.get("assignees")
     ):
-
         for assignee in current_instance.get("assignees"):
             if assignee not in requested_data.get("assignees_list"):
                 assignee = User.objects.get(pk=assignee)
@@ -386,7 +387,6 @@ def track_blocks(
     if len(requested_data.get("blocks_list")) > len(
         current_instance.get("blocked_issues")
     ):
-
         for block in requested_data.get("blocks_list"):
             if (
                 len(
@@ -418,7 +418,6 @@ def track_blocks(
     if len(requested_data.get("blocks_list")) < len(
         current_instance.get("blocked_issues")
     ):
-
         for blocked in current_instance.get("blocked_issues"):
             if blocked.get("block") not in requested_data.get("blocks_list"):
                 issue = Issue.objects.get(pk=blocked.get("block"))
@@ -450,7 +449,6 @@ def track_blockings(
     if len(requested_data.get("blockers_list")) > len(
         current_instance.get("blocker_issues")
     ):
-
         for block in requested_data.get("blockers_list"):
             if (
                 len(
@@ -482,7 +480,6 @@ def track_blockings(
     if len(requested_data.get("blockers_list")) < len(
         current_instance.get("blocker_issues")
     ):
-
         for blocked in current_instance.get("blocker_issues"):
             if blocked.get("blocked_by") not in requested_data.get("blockers_list"):
                 issue = Issue.objects.get(pk=blocked.get("blocked_by"))
@@ -502,6 +499,119 @@ def track_blockings(
                 )
 
 
+def track_cycles(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    # Updated Records:
+    updated_records = current_instance.get("updated_cycle_issues", [])
+    created_records = json.loads(current_instance.get("created_cycle_issues", []))
+
+    for updated_record in updated_records:
+        old_cycle = Cycle.objects.filter(
+            pk=updated_record.get("old_cycle_id", None)
+        ).first()
+        new_cycle = Cycle.objects.filter(
+            pk=updated_record.get("new_cycle_id", None)
+        ).first()
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=updated_record.get("issue_id"),
+                actor=actor,
+                verb="updated",
+                old_value=old_cycle.name,
+                new_value=new_cycle.name,
+                field="cycles",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} updated cycle from {old_cycle.name} to {new_cycle.name}",
+                old_identifier=old_cycle.id,
+                new_identifier=new_cycle.id,
+            )
+        )
+
+    for created_record in created_records:
+        cycle = Cycle.objects.filter(
+            pk=created_record.get("fields").get("cycle")
+        ).first()
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=created_record.get("fields").get("issue"),
+                actor=actor,
+                verb="created",
+                old_value="",
+                new_value=cycle.name,
+                field="cycles",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} added cycle {cycle.name}",
+                new_identifier=cycle.id,
+            )
+        )
+
+
+def track_modules(
+    requested_data,
+    current_instance,
+    issue_id,
+    project,
+    actor,
+    issue_activities,
+):
+    # Updated Records:
+    updated_records = current_instance.get("updated_module_issues", [])
+    created_records = json.loads(current_instance.get("created_module_issues", []))
+
+    for updated_record in updated_records:
+        old_module = Module.objects.filter(
+            pk=updated_record.get("old_module_id", None)
+        ).first()
+        new_module = Module.objects.filter(
+            pk=updated_record.get("new_module_id", None)
+        ).first()
+
+        issue_activities.append(
+            IssueActivity(
+                issue_id=updated_record.get("issue_id"),
+                actor=actor,
+                verb="updated",
+                old_value=old_module.name,
+                new_value=new_module.name,
+                field="modules",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} updated module from {old_module.name} to {new_module.name}",
+                old_identifier=old_module.id,
+                new_identifier=new_module.id,
+            )
+        )
+
+    for created_record in created_records:
+        module = Module.objects.filter(
+            pk=created_record.get("fields").get("module")
+        ).first()
+        issue_activities.append(
+            IssueActivity(
+                issue_id=created_record.get("fields").get("issue"),
+                actor=actor,
+                verb="created",
+                old_value="",
+                new_value=module.name,
+                field="modules",
+                project=project,
+                workspace=project.workspace,
+                comment=f"{actor.email} added module {module.name}",
+                new_identifier=module.id,
+            )
+        )
+
+
 # Receive message from room group
 @job("default")
 def issue_activity(event):
@@ -510,7 +620,7 @@ def issue_activity(event):
 
         requested_data = json.loads(event.get("requested_data"))
         current_instance = json.loads(event.get("current_instance"))
-        issue_id = event.get("issue_id")
+        issue_id = event.get("issue_id", None)
         actor_id = event.get("actor_id")
         project_id = event.get("project_id")
 
@@ -530,6 +640,8 @@ def issue_activity(event):
             "assignees_list": track_assignees,
             "blocks_list": track_blocks,
             "blockers_list": track_blockings,
+            "cycles_list": track_cycles,
+            "modules_list": track_modules,
         }
 
         for key in requested_data:
diff --git a/apiserver/plane/db/models/api_token.py b/apiserver/plane/db/models/api_token.py
index 32ba013bc..b4009e6eb 100644
--- a/apiserver/plane/db/models/api_token.py
+++ b/apiserver/plane/db/models/api_token.py
@@ -17,7 +17,6 @@ def generate_token():
 
 
 class APIToken(BaseModel):
-
     token = models.CharField(max_length=255, unique=True, default=generate_token)
     label = models.CharField(max_length=255, default=generate_label_token)
     user = models.ForeignKey(
@@ -28,6 +27,9 @@ class APIToken(BaseModel):
     user_type = models.PositiveSmallIntegerField(
         choices=((0, "Human"), (1, "Bot")), default=0
     )
+    workspace = models.ForeignKey(
+        "db.Workspace", related_name="api_tokens", on_delete=models.CASCADE, null=True
+    )
 
     class Meta:
         verbose_name = "API Token"
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index c3984b3d2..3331b0832 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -9,6 +9,7 @@ from django.dispatch import receiver
 from . import ProjectBaseModel
 from plane.utils.html_processor import strip_tags
 
+
 # TODO: Handle identifiers for Bulk Inserts - nk
 class Issue(ProjectBaseModel):
     PRIORITY_CHOICES = (
@@ -32,8 +33,8 @@ class Issue(ProjectBaseModel):
         related_name="state_issue",
     )
     name = models.CharField(max_length=255, verbose_name="Issue Name")
-    description = models.JSONField(blank=True, null=True)
-    description_html = models.TextField(blank=True, null=True)
+    description = models.JSONField(blank=True, default=dict)
+    description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
     priority = models.CharField(
         max_length=30,
@@ -56,6 +57,7 @@ class Issue(ProjectBaseModel):
     labels = models.ManyToManyField(
         "db.Label", blank=True, related_name="labels", through="IssueLabel"
     )
+    sort_order = models.FloatField(default=65535)
 
     class Meta:
         verbose_name = "Issue"
@@ -196,8 +198,8 @@ class TimelineIssue(ProjectBaseModel):
 
 class IssueComment(ProjectBaseModel):
     comment_stripped = models.TextField(verbose_name="Comment", blank=True)
-    comment_json = models.JSONField(blank=True, null=True)
-    comment_html = models.TextField(blank=True)
+    comment_json = models.JSONField(blank=True, default=dict)
+    comment_html = models.TextField(blank=True, default="<p></p>")
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
     issue = models.ForeignKey(Issue, on_delete=models.CASCADE)
     # System can also create comment
@@ -246,7 +248,6 @@ class IssueProperty(ProjectBaseModel):
 
 
 class Label(ProjectBaseModel):
-
     parent = models.ForeignKey(
         "self",
         on_delete=models.CASCADE,
@@ -256,7 +257,7 @@ class Label(ProjectBaseModel):
     )
     name = models.CharField(max_length=255)
     description = models.TextField(blank=True)
-    colour = models.CharField(max_length=255, blank=True)
+    color = models.CharField(max_length=255, blank=True)
 
     class Meta:
         verbose_name = "Label"
@@ -269,7 +270,6 @@ class Label(ProjectBaseModel):
 
 
 class IssueLabel(ProjectBaseModel):
-
     issue = models.ForeignKey(
         "db.Issue", on_delete=models.CASCADE, related_name="label_issue"
     )
@@ -288,7 +288,6 @@ class IssueLabel(ProjectBaseModel):
 
 
 class IssueSequence(ProjectBaseModel):
-
     issue = models.ForeignKey(
         Issue, on_delete=models.SET_NULL, related_name="issue_sequence", null=True
     )
@@ -305,7 +304,6 @@ class IssueSequence(ProjectBaseModel):
 # TODO: Find a better method to save the model
 @receiver(post_save, sender=Issue)
 def create_issue_sequence(sender, instance, created, **kwargs):
-
     if created:
         IssueSequence.objects.create(
             issue=instance, sequence=instance.sequence_id, project=instance.project
diff --git a/apiserver/plane/db/models/project.py b/apiserver/plane/db/models/project.py
index 545bcd8a6..4a180642b 100644
--- a/apiserver/plane/db/models/project.py
+++ b/apiserver/plane/db/models/project.py
@@ -29,7 +29,6 @@ def get_default_props():
 
 
 class Project(BaseModel):
-
     NETWORK_CHOICES = ((0, "Secret"), (2, "Public"))
     name = models.CharField(max_length=255, verbose_name="Project Name")
     description = models.TextField(verbose_name="Project Description", blank=True)
@@ -63,6 +62,8 @@ class Project(BaseModel):
         blank=True,
     )
     icon = models.CharField(max_length=255, null=True, blank=True)
+    module_view = models.BooleanField(default=True)
+    cycle_view = models.BooleanField(default=True)
 
     def __str__(self):
         """Return name of the project"""
@@ -82,7 +83,6 @@ class Project(BaseModel):
 
 
 class ProjectBaseModel(BaseModel):
-
     project = models.ForeignKey(
         Project, on_delete=models.CASCADE, related_name="project_%(class)s"
     )
@@ -117,7 +117,6 @@ class ProjectMemberInvite(ProjectBaseModel):
 
 
 class ProjectMember(ProjectBaseModel):
-
     member = models.ForeignKey(
         settings.AUTH_USER_MODEL,
         on_delete=models.CASCADE,
@@ -141,9 +140,9 @@ class ProjectMember(ProjectBaseModel):
         """Return members of the project"""
         return f"{self.member.email} <{self.project.name}>"
 
+
 # TODO: Remove workspace relation later
 class ProjectIdentifier(AuditModel):
-
     workspace = models.ForeignKey(
         "db.Workspace", models.CASCADE, related_name="project_identifiers", null=True
     )
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 578235003..e9ca677db 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -1,6 +1,6 @@
 # base requirements
 
-Django==3.2.16
+Django==3.2.17
 django-braces==1.15.0
 django-taggit==2.1.0
 psycopg2==2.9.3
diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index 03f9ea822..93298b4e0 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -35,7 +35,6 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
   });
 
   const onSubmit = ({ email }: EmailCodeFormValues) => {
-    console.log(email);
     authenticationService
       .emailCode({ email })
       .then((res) => {
diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
index 441fb31fa..e6138da94 100644
--- a/apps/app/components/command-palette/index.tsx
+++ b/apps/app/components/command-palette/index.tsx
@@ -1,37 +1,38 @@
 // TODO: Refactor this component: into a different file, use this file to export the components
 import React, { useState, useCallback, useEffect } from "react";
-// next
+
 import { useRouter } from "next/router";
-// swr
+
 import useSWR from "swr";
-// hooks
+
+// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+// services
+import userService from "services/user.service";
+// hooks
+import useTheme from "hooks/use-theme";
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// components
+import ShortcutsModal from "components/command-palette/shortcuts";
+import { BulkDeleteIssuesModal } from "components/core";
+import { CreateProjectModal } from "components/project";
+import { CreateUpdateIssueModal } from "components/issues";
+import { CreateUpdateModuleModal } from "components/modules";
+import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
+// ui
+import { Button } from "components/ui";
+// icons
 import {
   FolderIcon,
   RectangleStackIcon,
   ClipboardDocumentListIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/24/outline";
-import useTheme from "hooks/use-theme";
-import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-// services
-import userService from "services/user.service";
-// components
-import ShortcutsModal from "components/command-palette/shortcuts";
-import { CreateProjectModal } from "components/project";
-import { CreateUpdateIssueModal } from "components/issues/modal";
-import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
-import CreateUpdateModuleModal from "components/project/modules/create-update-module-modal";
-import BulkDeleteIssuesModal from "components/common/bulk-delete-issues-modal";
-// headless ui
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
-// ui
-import { Button } from "components/ui";
-// icons
 // fetch-keys
 import { USER_ISSUE } from "constants/fetch-keys";
 
@@ -74,7 +75,7 @@ const CommandPalette: React.FC = () => {
       name: "Add new issue...",
       icon: RectangleStackIcon,
       hide: !projectId,
-      shortcut: "I",
+      shortcut: "C",
       onClick: () => {
         setIsIssueModalOpen(true);
       },
@@ -111,7 +112,6 @@ const CommandPalette: React.FC = () => {
             if (!router.query.issueId) return;
 
             const url = new URL(window.location.href);
-            console.log(url);
             copyTextToClipboard(url.href)
               .then(() => {
                 setToastAlert({
@@ -179,7 +179,6 @@ const CommandPalette: React.FC = () => {
           <CreateUpdateModuleModal
             isOpen={isCreateModuleModalOpen}
             setIsOpen={setIsCreateModuleModalOpen}
-            projectId={projectId as string}
           />
         </>
       )}
@@ -330,7 +329,6 @@ const CommandPalette: React.FC = () => {
                                       />
                                       <span className="ml-3 flex-auto truncate">{action.name}</span>
                                       <span className="ml-3 flex-none text-xs font-semibold text-gray-500">
-                                        <kbd className="font-sans">⌘</kbd>
                                         <kbd className="font-sans">{action.shortcut}</kbd>
                                       </span>
                                     </>
diff --git a/apps/app/components/common/board-view/single-board.tsx b/apps/app/components/common/board-view/single-board.tsx
deleted file mode 100644
index aedc969b5..000000000
--- a/apps/app/components/common/board-view/single-board.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-const SingleBoard = () => <></>;
-
-export default SingleBoard;
diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
deleted file mode 100644
index cd84697e9..000000000
--- a/apps/app/components/common/board-view/single-issue.tsx
+++ /dev/null
@@ -1,464 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DraggableStateSnapshot } from "react-beautiful-dnd";
-// react-datepicker
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// constants
-import { TrashIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
-import stateService from "services/state.service";
-import projectService from "services/project.service";
-// components
-import { AssigneesList, CustomDatePicker } from "components/ui";
-// helpers
-import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import {
-  CycleIssueResponse,
-  IIssue,
-  IssueResponse,
-  IUserLite,
-  IWorkspaceMember,
-  ModuleIssueResponse,
-  Properties,
-  UserAuth,
-} from "types";
-// common
-import { PRIORITIES } from "constants/";
-import {
-  STATE_LIST,
-  PROJECT_DETAILS,
-  CYCLE_ISSUES,
-  MODULE_ISSUES,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
-import { getPriorityIcon } from "constants/global";
-
-type Props = {
-  type?: string;
-  typeId?: string;
-  issue: IIssue;
-  properties: Properties;
-  snapshot?: DraggableStateSnapshot;
-  assignees: Partial<IUserLite>[] | (Partial<IUserLite> | undefined)[];
-  people: IWorkspaceMember[] | undefined;
-  handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
-  userAuth: UserAuth;
-};
-
-const SingleBoardIssue: React.FC<Props> = ({
-  type,
-  typeId,
-  issue,
-  properties,
-  snapshot,
-  assignees,
-  people,
-  handleDeleteIssue,
-  userAuth,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const partialUpdateIssue = (formData: Partial<IIssue>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    if (typeId) {
-      mutate<CycleIssueResponse[]>(
-        CYCLE_ISSUES(typeId ?? ""),
-        (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
-              return {
-                ...p,
-                issue_detail: {
-                  ...p.issue_detail,
-                  ...formData,
-                },
-              };
-            }
-            return p;
-          });
-          return [...updatedIssues];
-        },
-        false
-      );
-
-      mutate<ModuleIssueResponse[]>(
-        MODULE_ISSUES(typeId ?? ""),
-        (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
-              return {
-                ...p,
-                issue_detail: {
-                  ...p.issue_detail,
-                  ...formData,
-                },
-              };
-            }
-            return p;
-          });
-          return [...updatedIssues];
-        },
-        false
-      );
-    }
-
-    mutate<IssueResponse>(
-      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-      (prevData) => ({
-        ...(prevData as IssueResponse),
-        results: (prevData?.results ?? []).map((p) => {
-          if (p.id === issue.id) return { ...p, ...formData };
-          return p;
-        }),
-      }),
-      false
-    );
-
-    issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
-      .then((res) => {
-        if (typeId) {
-          mutate(CYCLE_ISSUES(typeId ?? ""));
-          mutate(MODULE_ISSUES(typeId ?? ""));
-        }
-
-        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
-  return (
-    <div
-      className={`rounded border bg-white shadow-sm ${
-        snapshot && snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
-      }`}
-    >
-      <div className="group/card relative select-none p-2">
-        {handleDeleteIssue && !isNotAllowed && (
-          <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
-            <button
-              type="button"
-              className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
-              onClick={() => handleDeleteIssue(issue.id)}
-            >
-              <TrashIcon className="h-4 w-4" />
-            </button>
-          </div>
-        )}
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a>
-            {properties.key && (
-              <div className="mb-2 text-xs font-medium text-gray-500">
-                {projectDetails?.identifier}-{issue.sequence_id}
-              </div>
-            )}
-            <h5
-              className="mb-3 text-sm group-hover:text-theme"
-              style={{ lineClamp: 3, WebkitLineClamp: 3 }}
-            >
-              {issue.name}
-            </h5>
-          </a>
-        </Link>
-        <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-          {properties.priority && (
-            <Listbox
-              as="div"
-              value={issue.priority}
-              onChange={(data: string) => {
-                partialUpdateIssue({ priority: data });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button
-                      className={`grid ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } place-items-center rounded px-2 py-1 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                        issue.priority === "urgent"
-                          ? "bg-red-100 text-red-600"
-                          : issue.priority === "high"
-                          ? "bg-orange-100 text-orange-500"
-                          : issue.priority === "medium"
-                          ? "bg-yellow-100 text-yellow-500"
-                          : issue.priority === "low"
-                          ? "bg-green-100 text-green-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      {getPriorityIcon(issue?.priority ?? "None")}
-                    </Listbox.Button>
-
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options className="absolute z-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {PRIORITIES?.map((priority) => (
-                          <Listbox.Option
-                            key={priority}
-                            className={({ active }) =>
-                              `flex cursor-pointer select-none items-center gap-2 px-3 py-2 capitalize ${
-                                active ? "bg-indigo-50" : "bg-white"
-                              }`
-                            }
-                            value={priority}
-                          >
-                            {getPriorityIcon(priority)}
-                            {priority}
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                </>
-              )}
-            </Listbox>
-          )}
-          {properties.state && (
-            <Listbox
-              as="div"
-              value={issue.state}
-              onChange={(data: string) => {
-                partialUpdateIssue({ state: data });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button
-                      className={`flex ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
-                    >
-                      <span
-                        className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                        style={{
-                          backgroundColor: issue.state_detail.color,
-                        }}
-                      />
-                      {addSpaceIfCamelCase(issue.state_detail.name)}
-                    </Listbox.Button>
-
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options className="absolute z-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {states?.map((state) => (
-                          <Listbox.Option
-                            key={state.id}
-                            className={({ active }) =>
-                              `flex cursor-pointer select-none items-center gap-2 px-3 py-2 ${
-                                active ? "bg-indigo-50" : "bg-white"
-                              }`
-                            }
-                            value={state.id}
-                          >
-                            <span
-                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                              style={{
-                                backgroundColor: state.color,
-                              }}
-                            />
-                            {addSpaceIfCamelCase(state.name)}
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                </>
-              )}
-            </Listbox>
-          )}
-          {/* {properties.cycle && !typeId && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-              {issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
-            </div>
-          )} */}
-          {properties.due_date && (
-            <div
-              className={`group relative ${
-                issue.target_date === null
-                  ? ""
-                  : issue.target_date < new Date().toISOString()
-                  ? "text-red-600"
-                  : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-              }`}
-            >
-              <CustomDatePicker
-                placeholder="N/A"
-                value={issue?.target_date}
-                onChange={(val) =>
-                  partialUpdateIssue({
-                    target_date: val,
-                  })
-                }
-                className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
-              />
-              {/* <DatePicker
-                placeholderText="N/A"
-                value={
-                  issue?.target_date ? `${renderShortNumericDateFormat(issue.target_date)}` : "N/A"
-                }
-                selected={issue?.target_date ? new Date(issue.target_date) : null}
-                onChange={(val: Date) => {
-                  partialUpdateIssue({
-                    target_date: val
-                      ? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
-                      : null,
-                  });
-                }}
-                dateFormat="dd-MM-yyyy"
-                className={`cursor-pointer rounded-md border px-2 py-[3px] text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                  issue?.target_date ? "w-[4.5rem]" : "w-[3rem] text-center"
-                }`}
-                isClearable
-              /> */}
-            </div>
-          )}
-          {properties.sub_issue_count && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
-          {properties.assignee && (
-            <Listbox
-              as="div"
-              value={issue.assignees}
-              onChange={(data: any) => {
-                const newData = issue.assignees ?? [];
-
-                if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-                else newData.push(data);
-
-                partialUpdateIssue({ assignees_list: newData });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <div>
-                  <Listbox.Button>
-                    <div
-                      className={`flex ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } items-center gap-1 text-xs`}
-                    >
-                      <AssigneesList users={assignees} length={3} />
-                    </div>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={React.Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options className="absolute left-0 z-20 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      {people?.map((person) => (
-                        <Listbox.Option
-                          key={person.id}
-                          className={({ active }) =>
-                            `cursor-pointer select-none p-2 ${active ? "bg-indigo-50" : "bg-white"}`
-                          }
-                          value={person.member.id}
-                        >
-                          <div
-                            className={`flex items-center gap-x-1 ${
-                              assignees.includes({
-                                id: person.member.last_name,
-                                first_name: person.member.first_name,
-                                last_name: person.member.last_name,
-                                email: person.member.email,
-                                avatar: person.member.avatar,
-                              })
-                                ? "font-medium"
-                                : "font-normal"
-                            }`}
-                          >
-                            {person.member.avatar && person.member.avatar !== "" ? (
-                              <div className="relative h-4 w-4">
-                                <Image
-                                  src={person.member.avatar}
-                                  alt="avatar"
-                                  className="rounded-full"
-                                  layout="fill"
-                                  objectFit="cover"
-                                  priority={false}
-                                  loading="lazy"
-                                />
-                              </div>
-                            ) : (
-                              <div className="grid h-4 w-4 place-items-center rounded-full bg-gray-700 capitalize text-white">
-                                {person.member.first_name && person.member.first_name !== ""
-                                  ? person.member.first_name.charAt(0)
-                                  : person.member.email.charAt(0)}
-                              </div>
-                            )}
-                            <p>
-                              {person.member.first_name && person.member.first_name !== ""
-                                ? person.member.first_name
-                                : person.member.email}
-                            </p>
-                          </div>
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              )}
-            </Listbox>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SingleBoardIssue;
diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx
deleted file mode 100644
index 262f332b5..000000000
--- a/apps/app/components/common/list-view/single-issue.tsx
+++ /dev/null
@@ -1,434 +0,0 @@
-import React, { useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-import workspaceService from "services/workspace.service";
-import stateService from "services/state.service";
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// ui
-import { CustomMenu, CustomSelect, AssigneesList, Avatar, CustomDatePicker } from "components/ui";
-// components
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-// helpers
-import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import {
-  CycleIssueResponse,
-  IIssue,
-  IssueResponse,
-  IWorkspaceMember,
-  ModuleIssueResponse,
-  Properties,
-  UserAuth,
-} from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES,
-  MODULE_ISSUES,
-  PROJECT_ISSUES_LIST,
-  STATE_LIST,
-  WORKSPACE_MEMBERS,
-} from "constants/fetch-keys";
-// constants
-import { getPriorityIcon } from "constants/global";
-import { PRIORITIES } from "constants/";
-
-type Props = {
-  type?: string;
-  typeId?: string;
-  issue: IIssue;
-  properties: Properties;
-  editIssue: () => void;
-  removeIssue?: () => void;
-  userAuth: UserAuth;
-};
-
-const SingleListIssue: React.FC<Props> = ({
-  type,
-  typeId,
-  issue,
-  properties,
-  editIssue,
-  removeIssue,
-  userAuth,
-}) => {
-  const [deleteIssue, setDeleteIssue] = useState<IIssue | undefined>();
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const partialUpdateIssue = (formData: Partial<IIssue>) => {
-    if (!workspaceSlug || !projectId) return;
-
-    if (typeId) {
-      mutate<CycleIssueResponse[]>(
-        CYCLE_ISSUES(typeId ?? ""),
-        (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
-              return {
-                ...p,
-                issue_detail: {
-                  ...p.issue_detail,
-                  ...formData,
-                },
-              };
-            }
-            return p;
-          });
-          return [...updatedIssues];
-        },
-        false
-      );
-
-      mutate<ModuleIssueResponse[]>(
-        MODULE_ISSUES(typeId ?? ""),
-        (prevData) => {
-          const updatedIssues = (prevData ?? []).map((p) => {
-            if (p.issue_detail.id === issue.id) {
-              return {
-                ...p,
-                issue_detail: {
-                  ...p.issue_detail,
-                  ...formData,
-                },
-              };
-            }
-            return p;
-          });
-          return [...updatedIssues];
-        },
-        false
-      );
-    }
-
-    mutate<IssueResponse>(
-      PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-      (prevData) => ({
-        ...(prevData as IssueResponse),
-        results: (prevData?.results ?? []).map((p) => {
-          if (p.id === issue.id) return { ...p, ...formData };
-          return p;
-        }),
-      }),
-      false
-    );
-
-    issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
-      .then((res) => {
-        if (typeId) {
-          mutate(CYCLE_ISSUES(typeId ?? ""));
-          mutate(MODULE_ISSUES(typeId ?? ""));
-        }
-
-        mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
-  return (
-    <>
-      <ConfirmIssueDeletion
-        handleClose={() => setDeleteIssue(undefined)}
-        isOpen={!!deleteIssue}
-        data={deleteIssue}
-      />
-      <div className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
-        <div className="flex items-center gap-2">
-          <span
-            className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
-            style={{
-              backgroundColor: issue.state_detail.color,
-            }}
-          />
-          <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-            <a className="group relative flex items-center gap-2">
-              {properties.key && (
-                <span className="flex-shrink-0 text-xs text-gray-500">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              )}
-              <span>{issue.name}</span>
-            </a>
-          </Link>
-        </div>
-        <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-          {properties.priority && (
-            <Listbox
-              as="div"
-              value={issue.priority}
-              onChange={(data: string) => {
-                partialUpdateIssue({ priority: data });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button
-                      className={`flex ${
-                        isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                      } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-                        issue.priority === "urgent"
-                          ? "bg-red-100 text-red-600"
-                          : issue.priority === "high"
-                          ? "bg-orange-100 text-orange-500"
-                          : issue.priority === "medium"
-                          ? "bg-yellow-100 text-yellow-500"
-                          : issue.priority === "low"
-                          ? "bg-green-100 text-green-500"
-                          : "bg-gray-100"
-                      }`}
-                    >
-                      {getPriorityIcon(
-                        issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-                        "text-sm"
-                      )}
-                    </Listbox.Button>
-
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {PRIORITIES?.map((priority) => (
-                          <Listbox.Option
-                            key={priority}
-                            className={({ active }) =>
-                              `flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
-                                active ? "bg-indigo-50" : "bg-white"
-                              }`
-                            }
-                            value={priority}
-                          >
-                            {getPriorityIcon(priority, "text-sm")}
-                            {priority ?? "None"}
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                  <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-                    <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
-                    <div
-                      className={`capitalize ${
-                        issue.priority === "urgent"
-                          ? "text-red-600"
-                          : issue.priority === "high"
-                          ? "text-orange-500"
-                          : issue.priority === "medium"
-                          ? "text-yellow-500"
-                          : issue.priority === "low"
-                          ? "text-green-500"
-                          : ""
-                      }`}
-                    >
-                      {issue.priority ?? "None"}
-                    </div>
-                  </div>
-                </>
-              )}
-            </Listbox>
-          )}
-          {properties.state && (
-            <CustomSelect
-              label={
-                <>
-                  <span
-                    className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                    style={{
-                      backgroundColor: issue.state_detail.color,
-                    }}
-                  />
-                  {addSpaceIfCamelCase(issue.state_detail.name)}
-                </>
-              }
-              value={issue.state}
-              onChange={(data: string) => {
-                partialUpdateIssue({ state: data });
-              }}
-              maxHeight="md"
-              noChevron
-              disabled={isNotAllowed}
-            >
-              {states?.map((state) => (
-                <CustomSelect.Option key={state.id} value={state.id}>
-                  <>
-                    <span
-                      className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                      style={{
-                        backgroundColor: state.color,
-                      }}
-                    />
-                    {addSpaceIfCamelCase(state.name)}
-                  </>
-                </CustomSelect.Option>
-              ))}
-            </CustomSelect>
-          )}
-          {/* {properties.cycle && !typeId && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-              {issue.issue_cycle ? issue.issue_cycle.cycle_detail.name : "None"}
-            </div>
-          )} */}
-          {properties.due_date && (
-            <div
-              className={`group relative ${
-                issue.target_date === null
-                  ? ""
-                  : issue.target_date < new Date().toISOString()
-                  ? "text-red-600"
-                  : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-              }`}
-            >
-              <CustomDatePicker
-                placeholder="N/A"
-                value={issue?.target_date}
-                onChange={(val) =>
-                  partialUpdateIssue({
-                    target_date: val,
-                  })
-                }
-                className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
-              />
-              <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-                <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
-                <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
-                <div>
-                  {issue.target_date
-                    ? issue.target_date < new Date().toISOString()
-                      ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
-                      : findHowManyDaysLeft(issue.target_date) <= 3
-                      ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
-                      : "Due date"
-                    : "N/A"}
-                </div>
-              </div>
-            </div>
-          )}
-          {properties.sub_issue_count && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
-              {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-            </div>
-          )}
-          {properties.assignee && (
-            <Listbox
-              as="div"
-              value={issue.assignees}
-              onChange={(data: any) => {
-                const newData = issue.assignees ?? [];
-
-                if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-                else newData.push(data);
-
-                partialUpdateIssue({ assignees_list: newData });
-              }}
-              className="group relative flex-shrink-0"
-              disabled={isNotAllowed}
-            >
-              {({ open }) => (
-                <>
-                  <div>
-                    <Listbox.Button>
-                      <div
-                        className={`flex ${
-                          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-                        } items-center gap-1 text-xs`}
-                      >
-                        <AssigneesList userIds={issue.assignees ?? []} />
-                      </div>
-                    </Listbox.Button>
-
-                    <Transition
-                      show={open}
-                      as={React.Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {people?.map((person) => (
-                          <Listbox.Option
-                            key={person.id}
-                            className={({ active, selected }) =>
-                              `flex items-center gap-x-1 cursor-pointer select-none p-2 ${
-                                active ? "bg-indigo-50" : ""
-                              } ${
-                                selected || issue.assignees?.includes(person.member.id)
-                                  ? "bg-indigo-50 font-medium"
-                                  : "font-normal"
-                              }`
-                            }
-                            value={person.member.id}
-                          >
-                            <Avatar user={person.member} />
-                            <p>
-                              {person.member.first_name && person.member.first_name !== ""
-                                ? person.member.first_name
-                                : person.member.email}
-                            </p>
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                  <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-                    <h5 className="mb-1 font-medium">Assigned to</h5>
-                    <div>
-                      {issue.assignee_details?.length > 0
-                        ? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
-                        : "No one"}
-                    </div>
-                  </div>
-                </>
-              )}
-            </Listbox>
-          )}
-          {type && !isNotAllowed && (
-            <CustomMenu width="auto" ellipsis>
-              <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
-              {type !== "issue" && (
-                <CustomMenu.MenuItem onClick={removeIssue}>
-                  <>Remove from {type}</>
-                </CustomMenu.MenuItem>
-              )}
-              <CustomMenu.MenuItem onClick={() => setDeleteIssue(issue)}>
-                Delete permanently
-              </CustomMenu.MenuItem>
-            </CustomMenu>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default SingleListIssue;
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
new file mode 100644
index 000000000..77c36e548
--- /dev/null
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -0,0 +1,82 @@
+// react-beautiful-dnd
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
+// hooks
+import useIssueView from "hooks/use-issue-view";
+// components
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { SingleBoard } from "components/core/board-view/single-board";
+// types
+import { IIssue, IProjectMember, IState, UserAuth } from "types";
+
+type Props = {
+  type: "issue" | "cycle" | "module";
+  issues: IIssue[];
+  states: IState[] | undefined;
+  members: IProjectMember[] | undefined;
+  addIssueToState: (groupTitle: string, stateId: string | null) => void;
+  openIssuesListModal?: (() => void) | null;
+  handleDeleteIssue: (issue: IIssue) => void;
+  handleOnDragEnd: (result: DropResult) => void;
+  userAuth: UserAuth;
+};
+
+export const AllBoards: React.FC<Props> = ({
+  type,
+  issues,
+  states,
+  members,
+  addIssueToState,
+  openIssuesListModal,
+  handleDeleteIssue,
+  handleOnDragEnd,
+  userAuth,
+}) => {
+  const { groupedByIssues, groupByProperty: selectedGroup, orderBy } = useIssueView(issues);
+
+  return (
+    <>
+      {groupedByIssues ? (
+        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
+          <DragDropContext onDragEnd={handleOnDragEnd}>
+            <div className="h-full w-full overflow-hidden">
+              <div className="h-full w-full">
+                <div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
+                  {Object.keys(groupedByIssues).map((singleGroup, index) => {
+                    const stateId =
+                      selectedGroup === "state_detail.name"
+                        ? states?.find((s) => s.name === singleGroup)?.id ?? null
+                        : null;
+
+                    const bgColor =
+                      selectedGroup === "state_detail.name"
+                        ? states?.find((s) => s.name === singleGroup)?.color
+                        : "#000000";
+
+                    return (
+                      <SingleBoard
+                        key={index}
+                        type={type}
+                        bgColor={bgColor}
+                        groupTitle={singleGroup}
+                        groupedByIssues={groupedByIssues}
+                        selectedGroup={selectedGroup}
+                        members={members}
+                        addIssueToState={() => addIssueToState(singleGroup, stateId)}
+                        handleDeleteIssue={handleDeleteIssue}
+                        openIssuesListModal={openIssuesListModal ?? null}
+                        orderBy={orderBy}
+                        userAuth={userAuth}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </DragDropContext>
+        </div>
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">Loading...</div>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/common/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
similarity index 76%
rename from apps/app/components/common/board-view/board-header.tsx
rename to apps/app/components/core/board-view/board-header.tsx
index c04bc95d5..3a7753366 100644
--- a/apps/app/components/common/board-view/board-header.tsx
+++ b/apps/app/components/core/board-view/board-header.tsx
@@ -12,27 +12,23 @@ import {
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, NestedKeyOf } from "types";
+import { IIssue } from "types";
 type Props = {
   isCollapsed: boolean;
   setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
   groupedByIssues: {
     [key: string]: IIssue[];
   };
-  selectedGroup: NestedKeyOf<IIssue> | null;
   groupTitle: string;
   createdBy: string | null;
-  bgColor: string;
+  bgColor?: string;
   addIssueToState: () => void;
-  provided?: DraggableProvided;
 };
 
-const BoardHeader: React.FC<Props> = ({
+export const BoardHeader: React.FC<Props> = ({
   isCollapsed,
   setIsCollapsed,
-  provided,
   groupedByIssues,
-  selectedGroup,
   groupTitle,
   createdBy,
   bgColor,
@@ -44,18 +40,6 @@ const BoardHeader: React.FC<Props> = ({
     }`}
   >
     <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
-      {provided && (
-        <button
-          type="button"
-          {...provided.dragHandleProps}
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${
-            !isCollapsed ? "" : "rotate-90"
-          } ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`}
-        >
-          <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
-          <EllipsisHorizontalIcon className="mt-[-0.7rem] h-4 w-4 text-gray-600" />
-        </button>
-      )}
       <div
         className={`flex cursor-pointer items-center gap-x-1 rounded-md bg-slate-900 px-2 ${
           !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
@@ -105,5 +89,3 @@ const BoardHeader: React.FC<Props> = ({
     </div>
   </div>
 );
-
-export default BoardHeader;
diff --git a/apps/app/components/core/board-view/index.ts b/apps/app/components/core/board-view/index.ts
new file mode 100644
index 000000000..6e5cdf8bf
--- /dev/null
+++ b/apps/app/components/core/board-view/index.ts
@@ -0,0 +1,4 @@
+export * from "./all-boards";
+export * from "./board-header";
+export * from "./single-board";
+export * from "./single-issue";
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
new file mode 100644
index 000000000..82d789a07
--- /dev/null
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -0,0 +1,146 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+// react-beautiful-dnd
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { Draggable } from "react-beautiful-dnd";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+// components
+import { BoardHeader, SingleBoardIssue } from "components/core";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
+
+type Props = {
+  type?: "issue" | "cycle" | "module";
+  bgColor?: string;
+  groupTitle: string;
+  groupedByIssues: {
+    [key: string]: IIssue[];
+  };
+  selectedGroup: NestedKeyOf<IIssue> | null;
+  members: IProjectMember[] | undefined;
+  addIssueToState: () => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
+  userAuth: UserAuth;
+};
+
+export const SingleBoard: React.FC<Props> = ({
+  type,
+  bgColor,
+  groupTitle,
+  groupedByIssues,
+  selectedGroup,
+  members,
+  addIssueToState,
+  handleDeleteIssue,
+  openIssuesListModal,
+  orderBy,
+  userAuth,
+}) => {
+  // collapse/expand
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+
+  const createdBy =
+    selectedGroup === "created_by"
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      : null;
+
+  if (selectedGroup === "priority")
+    groupTitle === "high"
+      ? (bgColor = "#dc2626")
+      : groupTitle === "medium"
+      ? (bgColor = "#f97316")
+      : groupTitle === "low"
+      ? (bgColor = "#22c55e")
+      : (bgColor = "#ff0000");
+
+  return (
+    <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
+      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
+        <BoardHeader
+          addIssueToState={addIssueToState}
+          bgColor={bgColor}
+          createdBy={createdBy}
+          groupTitle={groupTitle}
+          groupedByIssues={groupedByIssues}
+          isCollapsed={isCollapsed}
+          setIsCollapsed={setIsCollapsed}
+        />
+        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
+          {(provided, snapshot) => (
+            <div
+              className={`relative mt-3 h-full space-y-3 px-3 pb-3 ${
+                snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
+              } ${!isCollapsed ? "hidden" : "block"}`}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {groupedByIssues[groupTitle].map((issue, index: number) => (
+                <SingleBoardIssue
+                  key={index}
+                  index={index}
+                  type={type}
+                  issue={issue}
+                  selectedGroup={selectedGroup}
+                  properties={properties}
+                  handleDeleteIssue={handleDeleteIssue}
+                  orderBy={orderBy}
+                  userAuth={userAuth}
+                />
+              ))}
+              <span
+                style={{
+                  display: orderBy === "manual" ? "inline" : "none",
+                }}
+              >
+                {provided.placeholder}
+              </span>
+              {type === "issue" ? (
+                <button
+                  type="button"
+                  className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
+                  onClick={addIssueToState}
+                >
+                  <PlusIcon className="mr-1 h-3 w-3" />
+                  Create
+                </button>
+              ) : (
+                <CustomMenu
+                  label={
+                    <span className="flex items-center gap-1">
+                      <PlusIcon className="h-3 w-3" />
+                      Add issue
+                    </span>
+                  }
+                  className="mt-1"
+                  optionsPosition="left"
+                  noBorder
+                >
+                  <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                  {openIssuesListModal && (
+                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+              )}
+            </div>
+          )}
+        </StrictModeDroppable>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
new file mode 100644
index 000000000..59786ea7c
--- /dev/null
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -0,0 +1,240 @@
+import React, { useCallback } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-beautiful-dnd
+import {
+  Draggable,
+  DraggableStateSnapshot,
+  DraggingStyle,
+  NotDraggingStyle,
+} from "react-beautiful-dnd";
+// constants
+import { TrashIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issues.service";
+// components
+import {
+  ViewAssigneeSelect,
+  ViewDueDateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues/view-select";
+// types
+import {
+  CycleIssueResponse,
+  IIssue,
+  IssueResponse,
+  ModuleIssueResponse,
+  NestedKeyOf,
+  Properties,
+  UserAuth,
+} from "types";
+// fetch-keys
+import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+
+type Props = {
+  index: number;
+  type?: string;
+  issue: IIssue;
+  selectedGroup: NestedKeyOf<IIssue> | null;
+  properties: Properties;
+  handleDeleteIssue: (issue: IIssue) => void;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
+  userAuth: UserAuth;
+};
+
+export const SingleBoardIssue: React.FC<Props> = ({
+  index,
+  type,
+  issue,
+  selectedGroup,
+  properties,
+  handleDeleteIssue,
+  orderBy,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      if (cycleId)
+        mutate<CycleIssueResponse[]>(
+          CYCLE_ISSUES(cycleId as string),
+          (prevData) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
+              if (p.issue_detail.id === issue.id) {
+                return {
+                  ...p,
+                  issue_detail: {
+                    ...p.issue_detail,
+                    ...formData,
+                  },
+                };
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      if (moduleId)
+        mutate<ModuleIssueResponse[]>(
+          MODULE_ISSUES(moduleId as string),
+          (prevData) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
+              if (p.issue_detail.id === issue.id) {
+                return {
+                  ...p,
+                  issue_detail: {
+                    ...p.issue_detail,
+                    ...formData,
+                  },
+                };
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      mutate<IssueResponse>(
+        PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+        (prevData) => ({
+          ...(prevData as IssueResponse),
+          results: (prevData?.results ?? []).map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
+            return p;
+          }),
+        }),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then((res) => {
+          if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
+          if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
+
+          mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, cycleId, moduleId, issue]
+  );
+
+  function getStyle(
+    style: DraggingStyle | NotDraggingStyle | undefined,
+    snapshot: DraggableStateSnapshot
+  ) {
+    if (orderBy === "manual") return style;
+    if (!snapshot.isDragging) return {};
+    if (!snapshot.isDropAnimating) {
+      return style;
+    }
+
+    return {
+      ...style,
+      transitionDuration: `0.001s`,
+    };
+  }
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <Draggable
+      key={issue.id}
+      draggableId={issue.id}
+      index={index}
+      isDragDisabled={selectedGroup === "created_by"}
+    >
+      {(provided, snapshot) => (
+        <div
+          className={`rounded border bg-white shadow-sm ${
+            snapshot.isDragging ? "border-theme bg-indigo-50 shadow-lg" : ""
+          }`}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          style={getStyle(provided.draggableProps.style, snapshot)}
+        >
+          <div className="group/card relative select-none p-2">
+            {!isNotAllowed && (
+              <div className="absolute top-1.5 right-1.5 z-10 opacity-0 group-hover/card:opacity-100">
+                <button
+                  type="button"
+                  className="grid h-7 w-7 place-items-center rounded bg-white p-1 text-red-500 outline-none duration-300 hover:bg-red-50"
+                  onClick={() => handleDeleteIssue(issue)}
+                >
+                  <TrashIcon className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+            <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+              <a>
+                {properties.key && (
+                  <div className="mb-2 text-xs font-medium text-gray-500">
+                    {issue.project_detail.identifier}-{issue.sequence_id}
+                  </div>
+                )}
+                <h5
+                  className="mb-3 text-sm group-hover:text-theme"
+                  style={{ lineClamp: 3, WebkitLineClamp: 3 }}
+                >
+                  {issue.name}
+                </h5>
+              </a>
+            </Link>
+            <div className="flex flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+              {properties.priority && (
+                <ViewPrioritySelect
+                  issue={issue}
+                  partialUpdateIssue={partialUpdateIssue}
+                  isNotAllowed={isNotAllowed}
+                  position="left"
+                />
+              )}
+              {properties.state && (
+                <ViewStateSelect
+                  issue={issue}
+                  partialUpdateIssue={partialUpdateIssue}
+                  isNotAllowed={isNotAllowed}
+                />
+              )}
+              {properties.due_date && (
+                <ViewDueDateSelect
+                  issue={issue}
+                  partialUpdateIssue={partialUpdateIssue}
+                  isNotAllowed={isNotAllowed}
+                />
+              )}
+              {properties.sub_issue_count && (
+                <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                  {issue.sub_issues_count}{" "}
+                  {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+                </div>
+              )}
+              {properties.assignee && (
+                <ViewAssigneeSelect
+                  issue={issue}
+                  partialUpdateIssue={partialUpdateIssue}
+                  isNotAllowed={isNotAllowed}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+};
diff --git a/apps/app/components/common/bulk-delete-issues-modal.tsx b/apps/app/components/core/bulk-delete-issues-modal.tsx
similarity index 92%
rename from apps/app/components/common/bulk-delete-issues-modal.tsx
rename to apps/app/components/core/bulk-delete-issues-modal.tsx
index 64a65c22a..6e879d885 100644
--- a/apps/app/components/common/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/bulk-delete-issues-modal.tsx
@@ -1,27 +1,26 @@
-// react
 import React, { useState } from "react";
-// next
+
 import { useRouter } from "next/router";
-// swr
+
 import useSWR, { mutate } from "swr";
+
 // react hook form
 import { SubmitHandler, useForm } from "react-hook-form";
-// services
+// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-import { FolderIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// services
 import issuesServices from "services/issues.service";
-import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
-// headless ui
 // ui
 import { Button } from "components/ui";
 // icons
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue, IssueResponse } from "types";
 // fetch keys
-import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
 type FormInput = {
   delete_issue_ids: string[];
@@ -32,7 +31,7 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
+export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const [query, setQuery] = useState("");
 
   const router = useRouter();
@@ -50,13 +49,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
       : null
   );
 
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { setToastAlert } = useToast();
 
   const {
@@ -213,7 +205,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                   }}
                                 />
                                 <span className="flex-shrink-0 text-xs text-gray-500">
-                                  {projectDetails?.identifier}-{issue.sequence_id}
+                                  {issue.project_detail.identifier}-{issue.sequence_id}
                                 </span>
                                 <span>{issue.name}</span>
                               </div>
@@ -226,7 +218,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         <LayerDiagonalIcon height="56" width="56" />
                         <h3 className="text-gray-500">
                           No issues found. Create a new issue with{" "}
-                          <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
+                          <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
                         </h3>
                       </div>
                     )}
@@ -256,5 +248,3 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
     </Transition.Root>
   );
 };
-
-export default BulkDeleteIssuesModal;
diff --git a/apps/app/components/common/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx
similarity index 91%
rename from apps/app/components/common/existing-issues-list-modal.tsx
rename to apps/app/components/core/existing-issues-list-modal.tsx
index 5179facd4..15a313cb0 100644
--- a/apps/app/components/common/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/existing-issues-list-modal.tsx
@@ -1,24 +1,17 @@
 import React, { useState } from "react";
 
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
 // react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // hooks
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
-// services
-import projectService from "services/project.service";
 // headless ui
 // ui
 import { Button } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue } from "types";
-// fetch-keys
-import { PROJECT_DETAILS } from "constants/fetch-keys";
 
 type FormInput = {
   issues: string[];
@@ -32,7 +25,7 @@ type Props = {
   handleOnSubmit: any;
 };
 
-const ExistingIssuesListModal: React.FC<Props> = ({
+export const ExistingIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
   issues,
@@ -41,16 +34,6 @@ const ExistingIssuesListModal: React.FC<Props> = ({
 }) => {
   const [query, setQuery] = useState("");
 
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -175,7 +158,7 @@ const ExistingIssuesListModal: React.FC<Props> = ({
                                           }}
                                         />
                                         <span className="flex-shrink-0 text-xs text-gray-500">
-                                          {projectDetails?.identifier}-{issue.sequence_id}
+                                          {issue.project_detail.identifier}-{issue.sequence_id}
                                         </span>
                                         {issue.name}
                                       </>
@@ -189,7 +172,7 @@ const ExistingIssuesListModal: React.FC<Props> = ({
                               <LayerDiagonalIcon height="56" width="56" />
                               <h3 className="text-gray-500">
                                 No issues found. Create a new issue with{" "}
-                                <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
+                                <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
                               </h3>
                             </div>
                           )}
@@ -233,5 +216,3 @@ const ExistingIssuesListModal: React.FC<Props> = ({
     </>
   );
 };
-
-export default ExistingIssuesListModal;
diff --git a/apps/app/components/common/image-upload-modal.tsx b/apps/app/components/core/image-upload-modal.tsx
similarity index 100%
rename from apps/app/components/common/image-upload-modal.tsx
rename to apps/app/components/core/image-upload-modal.tsx
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index 8266a5111..0865ea441 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -1 +1,8 @@
+export * from "./board-view";
+export * from "./list-view";
+export * from "./bulk-delete-issues-modal";
+export * from "./existing-issues-list-modal";
+export * from "./image-upload-modal";
+export * from "./issues-view-filter";
+export * from "./issues-view";
 export * from "./not-authorized-view";
diff --git a/apps/app/components/core/view.tsx b/apps/app/components/core/issues-view-filter.tsx
similarity index 87%
rename from apps/app/components/core/view.tsx
rename to apps/app/components/core/issues-view-filter.tsx
index 1fe147f22..7225f5148 100644
--- a/apps/app/components/core/view.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -17,13 +17,13 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import { IIssue, Properties } from "types";
 // common
-import { filterIssueOptions, groupByOptions, orderByOptions } from "constants/";
+import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
 
 type Props = {
   issues?: IIssue[];
 };
 
-const View: React.FC<Props> = ({ issues }) => {
+export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -99,31 +99,33 @@ const View: React.FC<Props> = ({ issues }) => {
                             <h4 className="text-sm text-gray-600">Group by</h4>
                             <CustomMenu
                               label={
-                                groupByOptions.find((option) => option.key === groupByProperty)
+                                GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
                                   ?.name ?? "Select"
                               }
                               width="lg"
                             >
-                              {groupByOptions.map((option) => (
-                                <CustomMenu.MenuItem
-                                  key={option.key}
-                                  onClick={() => setGroupByProperty(option.key)}
-                                >
-                                  {option.name}
-                                </CustomMenu.MenuItem>
-                              ))}
+                              {GROUP_BY_OPTIONS.map((option) =>
+                                issueView === "kanban" && option.key === null ? null : (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => setGroupByProperty(option.key)}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                )
+                              )}
                             </CustomMenu>
                           </div>
                           <div className="flex items-center justify-between">
                             <h4 className="text-sm text-gray-600">Order by</h4>
                             <CustomMenu
                               label={
-                                orderByOptions.find((option) => option.key === orderBy)?.name ??
+                                ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
                                 "Select"
                               }
                               width="lg"
                             >
-                              {orderByOptions.map((option) =>
+                              {ORDER_BY_OPTIONS.map((option) =>
                                 groupByProperty === "priority" &&
                                 option.key === "priority" ? null : (
                                   <CustomMenu.MenuItem
@@ -140,12 +142,12 @@ const View: React.FC<Props> = ({ issues }) => {
                             <h4 className="text-sm text-gray-600">Issue type</h4>
                             <CustomMenu
                               label={
-                                filterIssueOptions.find((option) => option.key === filterIssue)
+                                FILTER_ISSUE_OPTIONS.find((option) => option.key === filterIssue)
                                   ?.name ?? "Select"
                               }
                               width="lg"
                             >
-                              {filterIssueOptions.map((option) => (
+                              {FILTER_ISSUE_OPTIONS.map((option) => (
                                 <CustomMenu.MenuItem
                                   key={option.key}
                                   onClick={() => setFilterIssue(option.key)}
@@ -203,5 +205,3 @@ const View: React.FC<Props> = ({ issues }) => {
     </>
   );
 };
-
-export default View;
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
new file mode 100644
index 000000000..5f1d2c289
--- /dev/null
+++ b/apps/app/components/core/issues-view.tsx
@@ -0,0 +1,405 @@
+import { useCallback, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// react-beautiful-dnd
+import { DropResult } from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+import stateService from "services/state.service";
+import projectService from "services/project.service";
+import modulesService from "services/modules.service";
+// hooks
+import useIssueView from "hooks/use-issue-view";
+// components
+import { AllLists, AllBoards, ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+// types
+import {
+  CycleIssueResponse,
+  IIssue,
+  IssueResponse,
+  IState,
+  ModuleIssueResponse,
+  UserAuth,
+} from "types";
+// fetch-keys
+import {
+  CYCLE_ISSUES,
+  MODULE_ISSUES,
+  PROJECT_ISSUES_LIST,
+  PROJECT_MEMBERS,
+  STATE_LIST,
+} from "constants/fetch-keys";
+
+type Props = {
+  type?: "issue" | "cycle" | "module";
+  issues: IIssue[];
+  openIssuesListModal?: () => void;
+  userAuth: UserAuth;
+};
+
+export const IssuesView: React.FC<Props> = ({
+  type = "issue",
+  issues,
+  openIssuesListModal,
+  userAuth,
+}) => {
+  // create issue modal
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // updates issue modal
+  const [editIssueModal, setEditIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<
+    (IIssue & { actionType: "edit" | "delete" }) | undefined
+  >(undefined);
+
+  // delete issue modal
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
+
+  const { data: states } = useSWR<IState[]>(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: members } = useSWR(
+    projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleOnDragEnd = useCallback(
+    (result: DropResult) => {
+      if (!result.destination || !workspaceSlug || !projectId) return;
+
+      const { source, destination } = result;
+
+      const draggedItem = groupedByIssues[source.droppableId][source.index];
+
+      if (source.droppableId !== destination.droppableId) {
+        const sourceGroup = source.droppableId; // source group id
+        const destinationGroup = destination.droppableId; // destination group id
+
+        if (!sourceGroup || !destinationGroup) return;
+
+        if (selectedGroup === "priority") {
+          // update the removed item for mutation
+          draggedItem.priority = destinationGroup;
+
+          if (cycleId)
+            mutate<CycleIssueResponse[]>(
+              CYCLE_ISSUES(cycleId as string),
+              (prevData) => {
+                if (!prevData) return prevData;
+                const updatedIssues = prevData.map((issue) => {
+                  if (issue.issue_detail.id === draggedItem.id) {
+                    return {
+                      ...issue,
+                      issue_detail: {
+                        ...draggedItem,
+                        priority: destinationGroup,
+                      },
+                    };
+                  }
+                  return issue;
+                });
+                return [...updatedIssues];
+              },
+              false
+            );
+
+          if (moduleId)
+            mutate<ModuleIssueResponse[]>(
+              MODULE_ISSUES(moduleId as string),
+              (prevData) => {
+                if (!prevData) return prevData;
+                const updatedIssues = prevData.map((issue) => {
+                  if (issue.issue_detail.id === draggedItem.id) {
+                    return {
+                      ...issue,
+                      issue_detail: {
+                        ...draggedItem,
+                        priority: destinationGroup,
+                      },
+                    };
+                  }
+                  return issue;
+                });
+                return [...updatedIssues];
+              },
+              false
+            );
+
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+            (prevData) => {
+              if (!prevData) return prevData;
+
+              const updatedIssues = prevData.results.map((issue) => {
+                if (issue.id === draggedItem.id)
+                  return {
+                    ...draggedItem,
+                    priority: destinationGroup,
+                  };
+
+                return issue;
+              });
+
+              return {
+                ...prevData,
+                results: updatedIssues,
+              };
+            },
+            false
+          );
+
+          // patch request
+          issuesService
+            .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+              priority: destinationGroup,
+            })
+            .then((res) => {
+              if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
+              if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
+
+              mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+            });
+        } else if (selectedGroup === "state_detail.name") {
+          const destinationState = states?.find((s) => s.name === destinationGroup);
+          const destinationStateId = destinationState?.id;
+
+          // update the removed item for mutation
+          if (!destinationStateId || !destinationState) return;
+          draggedItem.state = destinationStateId;
+          draggedItem.state_detail = destinationState;
+
+          if (cycleId)
+            mutate<CycleIssueResponse[]>(
+              CYCLE_ISSUES(cycleId as string),
+              (prevData) => {
+                if (!prevData) return prevData;
+                const updatedIssues = prevData.map((issue) => {
+                  if (issue.issue_detail.id === draggedItem.id) {
+                    return {
+                      ...issue,
+                      issue_detail: {
+                        ...draggedItem,
+                        state_detail: destinationState,
+                        state: destinationStateId,
+                      },
+                    };
+                  }
+                  return issue;
+                });
+                return [...updatedIssues];
+              },
+              false
+            );
+
+          if (moduleId)
+            mutate<ModuleIssueResponse[]>(
+              MODULE_ISSUES(moduleId as string),
+              (prevData) => {
+                if (!prevData) return prevData;
+                const updatedIssues = prevData.map((issue) => {
+                  if (issue.issue_detail.id === draggedItem.id) {
+                    return {
+                      ...issue,
+                      issue_detail: {
+                        ...draggedItem,
+                        state_detail: destinationState,
+                        state: destinationStateId,
+                      },
+                    };
+                  }
+                  return issue;
+                });
+                return [...updatedIssues];
+              },
+              false
+            );
+
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+            (prevData) => {
+              if (!prevData) return prevData;
+
+              const updatedIssues = prevData.results.map((issue) => {
+                if (issue.id === draggedItem.id)
+                  return {
+                    ...draggedItem,
+                    state_detail: destinationState,
+                    state: destinationStateId,
+                  };
+
+                return issue;
+              });
+
+              return {
+                ...prevData,
+                results: updatedIssues,
+              };
+            },
+            false
+          );
+
+          // patch request
+          issuesService
+            .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
+              state: destinationStateId,
+            })
+            .then((res) => {
+              if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
+              if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
+
+              mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+            });
+        }
+      }
+    },
+    [workspaceSlug, cycleId, moduleId, groupedByIssues, projectId, selectedGroup, states]
+  );
+
+  const addIssueToState = (groupTitle: string, stateId: string | null) => {
+    setCreateIssueModal(true);
+    if (selectedGroup)
+      setPreloadedData({
+        state: stateId ?? undefined,
+        [selectedGroup]: groupTitle,
+        actionType: "createIssue",
+      });
+    else setPreloadedData({ actionType: "createIssue" });
+  };
+
+  const handleEditIssue = (issue: IIssue) => {
+    setEditIssueModal(true);
+    setIssueToEdit({
+      ...issue,
+      actionType: "edit",
+      cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
+      module: issue.issue_module ? issue.issue_module.module : null,
+    });
+  };
+
+  const handleDeleteIssue = (issue: IIssue) => {
+    setDeleteIssueModal(true);
+    setIssueToDelete(issue);
+  };
+
+  const removeIssueFromCycle = (bridgeId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<CycleIssueResponse[]>(
+      CYCLE_ISSUES(cycleId as string),
+      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+      false
+    );
+
+    issuesService
+      .removeIssueFromCycle(
+        workspaceSlug as string,
+        projectId as string,
+        cycleId as string,
+        bridgeId
+      )
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const removeIssueFromModule = (bridgeId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<ModuleIssueResponse[]>(
+      MODULE_ISSUES(moduleId as string),
+      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+      false
+    );
+
+    modulesService
+      .removeIssueFromModule(
+        workspaceSlug as string,
+        projectId as string,
+        moduleId as string,
+        bridgeId
+      )
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+        handleClose={() => setCreateIssueModal(false)}
+        prePopulateData={{
+          ...preloadedData,
+        }}
+      />
+      <CreateUpdateIssueModal
+        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+        prePopulateData={{ ...issueToEdit }}
+        handleClose={() => setEditIssueModal(false)}
+        data={issueToEdit}
+      />
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+      />
+      {issueView === "list" ? (
+        <AllLists
+          type={type}
+          issues={issues}
+          states={states}
+          members={members}
+          addIssueToState={addIssueToState}
+          handleEditIssue={handleEditIssue}
+          handleDeleteIssue={handleDeleteIssue}
+          openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+          removeIssue={
+            type === "cycle"
+              ? removeIssueFromCycle
+              : type === "module"
+              ? removeIssueFromModule
+              : null
+          }
+          userAuth={userAuth}
+        />
+      ) : (
+        <AllBoards
+          type={type}
+          issues={issues}
+          states={states}
+          members={members}
+          addIssueToState={addIssueToState}
+          openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+          handleDeleteIssue={handleDeleteIssue}
+          handleOnDragEnd={handleOnDragEnd}
+          userAuth={userAuth}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/core/list-view/all-lists.tsx b/apps/app/components/core/list-view/all-lists.tsx
new file mode 100644
index 000000000..c2b6c498a
--- /dev/null
+++ b/apps/app/components/core/list-view/all-lists.tsx
@@ -0,0 +1,63 @@
+// hooks
+import useIssueView from "hooks/use-issue-view";
+// components
+import { SingleList } from "components/core/list-view/single-list";
+// types
+import { IIssue, IProjectMember, IState, UserAuth } from "types";
+
+// types
+type Props = {
+  type: "issue" | "cycle" | "module";
+  issues: IIssue[];
+  states: IState[] | undefined;
+  members: IProjectMember[] | undefined;
+  addIssueToState: (groupTitle: string, stateId: string | null) => void;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  removeIssue: ((bridgeId: string) => void) | null;
+  userAuth: UserAuth;
+};
+
+export const AllLists: React.FC<Props> = ({
+  type,
+  issues,
+  states,
+  members,
+  addIssueToState,
+  openIssuesListModal,
+  handleEditIssue,
+  handleDeleteIssue,
+  removeIssue,
+  userAuth,
+}) => {
+  const { groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
+
+  return (
+    <div className="flex flex-col space-y-5">
+      {Object.keys(groupedByIssues).map((singleGroup) => {
+        const stateId =
+          selectedGroup === "state_detail.name"
+            ? states?.find((s) => s.name === singleGroup)?.id ?? null
+            : null;
+
+        return (
+          <SingleList
+            key={singleGroup}
+            type={type}
+            groupTitle={singleGroup}
+            groupedByIssues={groupedByIssues}
+            selectedGroup={selectedGroup}
+            members={members}
+            addIssueToState={() => addIssueToState(singleGroup, stateId)}
+            handleEditIssue={handleEditIssue}
+            handleDeleteIssue={handleDeleteIssue}
+            openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+            removeIssue={removeIssue}
+            userAuth={userAuth}
+          />
+        );
+      })}
+    </div>
+  );
+};
diff --git a/apps/app/components/core/list-view/index.ts b/apps/app/components/core/list-view/index.ts
new file mode 100644
index 000000000..c515ed1c2
--- /dev/null
+++ b/apps/app/components/core/list-view/index.ts
@@ -0,0 +1,3 @@
+export * from "./all-lists";
+export * from "./single-issue";
+export * from "./single-list";
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
new file mode 100644
index 000000000..b779db594
--- /dev/null
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -0,0 +1,198 @@
+import React, { useCallback } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// components
+import {
+  ViewAssigneeSelect,
+  ViewDueDateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues/view-select";
+// ui
+import { CustomMenu } from "components/ui";
+// types
+import {
+  CycleIssueResponse,
+  IIssue,
+  IssueResponse,
+  ModuleIssueResponse,
+  Properties,
+  UserAuth,
+} from "types";
+// fetch-keys
+import { CYCLE_ISSUES, MODULE_ISSUES, PROJECT_ISSUES_LIST, STATE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  type?: string;
+  issue: IIssue;
+  properties: Properties;
+  editIssue: () => void;
+  removeIssue?: (() => void) | null;
+  handleDeleteIssue: (issue: IIssue) => void;
+  userAuth: UserAuth;
+};
+
+export const SingleListIssue: React.FC<Props> = ({
+  type,
+  issue,
+  properties,
+  editIssue,
+  removeIssue,
+  handleDeleteIssue,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      if (cycleId)
+        mutate<CycleIssueResponse[]>(
+          CYCLE_ISSUES(cycleId as string),
+          (prevData) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
+              if (p.issue_detail.id === issue.id) {
+                return {
+                  ...p,
+                  issue_detail: {
+                    ...p.issue_detail,
+                    ...formData,
+                  },
+                };
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      if (moduleId)
+        mutate<ModuleIssueResponse[]>(
+          MODULE_ISSUES(moduleId as string),
+          (prevData) => {
+            const updatedIssues = (prevData ?? []).map((p) => {
+              if (p.issue_detail.id === issue.id) {
+                return {
+                  ...p,
+                  issue_detail: {
+                    ...p.issue_detail,
+                    ...formData,
+                  },
+                };
+              }
+              return p;
+            });
+            return [...updatedIssues];
+          },
+          false
+        );
+
+      mutate<IssueResponse>(
+        PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
+        (prevData) => ({
+          ...(prevData as IssueResponse),
+          results: (prevData?.results ?? []).map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
+            return p;
+          }),
+        }),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then((res) => {
+          if (cycleId) mutate(CYCLE_ISSUES(cycleId as string));
+          if (moduleId) mutate(MODULE_ISSUES(moduleId as string));
+
+          mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, cycleId, moduleId, issue]
+  );
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
+      <div className="flex items-center gap-2">
+        <span
+          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: issue.state_detail.color,
+          }}
+        />
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
+          <a className="group relative flex items-center gap-2">
+            {properties.key && (
+              <span className="flex-shrink-0 text-xs text-gray-500">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
+            )}
+            <span>{issue.name}</span>
+          </a>
+        </Link>
+      </div>
+      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+        {properties.priority && (
+          <ViewPrioritySelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {properties.state && (
+          <ViewStateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {properties.due_date && (
+          <ViewDueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {properties.sub_issue_count && (
+          <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
+            {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+          </div>
+        )}
+        {properties.assignee && (
+          <ViewAssigneeSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {type && !isNotAllowed && (
+          <CustomMenu width="auto" ellipsis>
+            <CustomMenu.MenuItem onClick={editIssue}>Edit</CustomMenu.MenuItem>
+            {type !== "issue" && removeIssue && (
+              <CustomMenu.MenuItem onClick={removeIssue}>
+                <>Remove from {type}</>
+              </CustomMenu.MenuItem>
+            )}
+            <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
+              Delete permanently
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
new file mode 100644
index 000000000..4309b2d33
--- /dev/null
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -0,0 +1,155 @@
+import { useRouter } from "next/router";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+// components
+import { SingleListIssue } from "components/core";
+// icons
+import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
+import { CustomMenu } from "components/ui";
+
+type Props = {
+  type?: "issue" | "cycle" | "module";
+  groupTitle: string;
+  groupedByIssues: {
+    [key: string]: IIssue[];
+  };
+  selectedGroup: NestedKeyOf<IIssue> | null;
+  members: IProjectMember[] | undefined;
+  addIssueToState: () => void;
+  handleEditIssue: (issue: IIssue) => void;
+  handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  removeIssue: ((bridgeId: string) => void) | null;
+  userAuth: UserAuth;
+};
+
+export const SingleList: React.FC<Props> = ({
+  type,
+  groupTitle,
+  groupedByIssues,
+  selectedGroup,
+  members,
+  addIssueToState,
+  handleEditIssue,
+  handleDeleteIssue,
+  openIssuesListModal,
+  removeIssue,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+
+  const createdBy =
+    selectedGroup === "created_by"
+      ? members?.find((m) => m.member.id === groupTitle)?.member.first_name ?? "loading..."
+      : null;
+
+  return (
+    <Disclosure key={groupTitle} as="div" defaultOpen>
+      {({ open }) => (
+        <div className="rounded-lg bg-white">
+          <div className="rounded-t-lg bg-gray-100 px-4 py-3">
+            <Disclosure.Button>
+              <div className="flex items-center gap-x-2">
+                <span>
+                  <ChevronDownIcon
+                    className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
+                  />
+                </span>
+                {selectedGroup !== null ? (
+                  <h2 className="font-medium capitalize leading-5">
+                    {groupTitle === null || groupTitle === "null"
+                      ? "None"
+                      : createdBy
+                      ? createdBy
+                      : addSpaceIfCamelCase(groupTitle)}
+                  </h2>
+                ) : (
+                  <h2 className="font-medium leading-5">All Issues</h2>
+                )}
+                <p className="text-sm text-gray-500">
+                  {groupedByIssues[groupTitle as keyof IIssue].length}
+                </p>
+              </div>
+            </Disclosure.Button>
+          </div>
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              <div className="divide-y-2">
+                {groupedByIssues[groupTitle] ? (
+                  groupedByIssues[groupTitle].length > 0 ? (
+                    groupedByIssues[groupTitle].map((issue: IIssue) => (
+                      <SingleListIssue
+                        key={issue.id}
+                        type={type}
+                        issue={issue}
+                        properties={properties}
+                        editIssue={() => handleEditIssue(issue)}
+                        handleDeleteIssue={handleDeleteIssue}
+                        removeIssue={() => {
+                          removeIssue && removeIssue(issue.bridge);
+                        }}
+                        userAuth={userAuth}
+                      />
+                    ))
+                  ) : (
+                    <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
+                  )
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">Loading...</div>
+                )}
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+          <div className="p-3">
+            {type === "issue" ? (
+              <button
+                type="button"
+                className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                onClick={addIssueToState}
+              >
+                <PlusIcon className="h-3 w-3" />
+                Add issue
+              </button>
+            ) : (
+              <CustomMenu
+                label={
+                  <span className="flex items-center gap-1">
+                    <PlusIcon className="h-3 w-3" />
+                    Add issue
+                  </span>
+                }
+                optionsPosition="left"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
+          </div>
+        </div>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 9a53a2949..76e1c5ad1 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -61,9 +61,8 @@ export const CycleModal: React.FC<CycleModalProps> = (props) => {
     if (workspaceSlug && projectId) {
       const payload = {
         ...formValues,
-        start_date: formValues.start_date ? renderDateFormat(formValues.start_date) : null,
-        end_date: formValues.end_date ? renderDateFormat(formValues.end_date) : null,
       };
+
       if (initialData) {
         updateCycle(initialData.id, payload);
       } else {
diff --git a/apps/app/components/dnd/StrictModeDroppable.tsx b/apps/app/components/dnd/StrictModeDroppable.tsx
index e63cab246..9ed01d3bf 100644
--- a/apps/app/components/dnd/StrictModeDroppable.tsx
+++ b/apps/app/components/dnd/StrictModeDroppable.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+
 // react beautiful dnd
 import { Droppable, DroppableProps } from "react-beautiful-dnd";
 
@@ -14,9 +15,7 @@ const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
     };
   }, []);
 
-  if (!enabled) {
-    return null;
-  }
+  if (!enabled) return null;
 
   return <Droppable {...props}>{children}</Droppable>;
 };
diff --git a/apps/app/components/emoji-icon-picker/index.tsx b/apps/app/components/emoji-icon-picker/index.tsx
index c2930e95b..a441cd4cb 100644
--- a/apps/app/components/emoji-icon-picker/index.tsx
+++ b/apps/app/components/emoji-icon-picker/index.tsx
@@ -7,7 +7,7 @@ import { Props } from "./types";
 import emojis from "./emojis.json";
 // helpers
 import { getRecentEmojis, saveRecentEmoji } from "./helpers";
-import { getRandomEmoji } from "helpers/functions.helper";
+import { getRandomEmoji } from "helpers/common.helper";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
diff --git a/apps/app/constants/global.tsx b/apps/app/components/icons/priority-icon.tsx
similarity index 100%
rename from apps/app/constants/global.tsx
rename to apps/app/components/icons/priority-icon.tsx
diff --git a/apps/app/components/project/issues/issue-detail/activity/index.tsx b/apps/app/components/issues/activity.tsx
similarity index 92%
rename from apps/app/components/project/issues/issue-detail/activity/index.tsx
rename to apps/app/components/issues/activity.tsx
index 3594bf7a8..2bcc3853d 100644
--- a/apps/app/components/project/issues/issue-detail/activity/index.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -8,17 +8,18 @@ import {
   CalendarDaysIcon,
   ChartBarIcon,
   ChatBubbleBottomCenterTextIcon,
+  RectangleGroupIcon,
   Squares2X2Icon,
   UserIcon,
 } from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
 // components
-import CommentCard from "components/project/issues/issue-detail/comment/issue-comment-card";
+import { CommentCard } from "components/issues/comment";
 // ui
 import { Loader } from "components/ui";
 // icons
-import { BlockedIcon, BlockerIcon, TagIcon, UserGroupIcon } from "components/icons";
+import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
 import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -47,9 +48,17 @@ const activityDetails: {
     message: "marked this issue is blocking",
     icon: <BlockerIcon height="16" width="16" />,
   },
+  cycles: {
+    message: "set the cycle to",
+    icon: <CyclesIcon height="16" width="16" />,
+  },
   labels: {
     icon: <TagIcon height="16" width="16" />,
   },
+  modules: {
+    message: "set the module to",
+    icon: <RectangleGroupIcon className="h-4 w-4" />,
+  },
   state: {
     message: "set the state to",
     icon: <Squares2X2Icon className="h-4 w-4" />,
@@ -76,10 +85,12 @@ const activityDetails: {
   },
 };
 
-const IssueActivitySection: React.FC<{
+type Props = {
   issueActivities: IIssueActivity[];
   mutate: KeyedMutator<IIssueActivity[]>;
-}> = ({ issueActivities, mutate }) => {
+};
+
+export const IssueActivitySection: React.FC<Props> = ({ issueActivities, mutate }) => {
   const router = useRouter();
 
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -183,7 +194,9 @@ const IssueActivitySection: React.FC<{
                               ?.message}{" "}
                       </span>
                       <span className="font-medium">
-                        {activity.verb === "created" ? (
+                        {activity.verb === "created" &&
+                        activity.field !== "cycles" &&
+                        activity.field !== "modules" ? (
                           <span className="text-gray-600">created this issue.</span>
                         ) : activity.field === "description" ? null : activity.field === "state" ? (
                           activity.new_value ? (
@@ -216,7 +229,7 @@ const IssueActivitySection: React.FC<{
                   </div>
                 </div>
               );
-            } else if ("comment_json" in activity) {
+            } else if ("comment_json" in activity)
               return (
                 <CommentCard
                   key={activity.id}
@@ -225,7 +238,6 @@ const IssueActivitySection: React.FC<{
                   handleCommentDeletion={onCommentDelete}
                 />
               );
-            }
           })}
         </div>
       ) : (
@@ -247,5 +259,3 @@ const IssueActivitySection: React.FC<{
     </>
   );
 };
-
-export default IssueActivitySection;
diff --git a/apps/app/components/project/issues/issue-detail/comment/issue-comment-section.tsx b/apps/app/components/issues/comment/add-comment.tsx
similarity index 95%
rename from apps/app/components/project/issues/issue-detail/comment/issue-comment-section.tsx
rename to apps/app/components/issues/comment/add-comment.tsx
index 5ac7e061a..9b31a2423 100644
--- a/apps/app/components/project/issues/issue-detail/comment/issue-comment-section.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -10,7 +10,7 @@ import issuesServices from "services/issues.service";
 // ui
 import { Loader } from "components/ui";
 // helpers
-import { debounce } from "helpers/functions.helper";
+import { debounce } from "helpers/common.helper";
 // types
 import type { IIssueActivity, IIssueComment } from "types";
 import type { KeyedMutator } from "swr";
@@ -28,7 +28,8 @@ const defaultValues: Partial<IIssueComment> = {
   comment_html: "",
   comment_json: "",
 };
-const AddIssueComment: React.FC<{
+
+export const AddComment: React.FC<{
   mutate: KeyedMutator<IIssueActivity[]>;
 }> = ({ mutate }) => {
   const {
@@ -111,5 +112,3 @@ const AddIssueComment: React.FC<{
     </div>
   );
 };
-
-export default AddIssueComment;
diff --git a/apps/app/components/project/issues/issue-detail/comment/issue-comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
similarity index 97%
rename from apps/app/components/project/issues/issue-detail/comment/issue-comment-card.tsx
rename to apps/app/components/issues/comment/comment-card.tsx
index ec270ff25..79582df3f 100644
--- a/apps/app/components/project/issues/issue-detail/comment/issue-comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -24,7 +24,7 @@ type Props = {
   handleCommentDeletion: (comment: string) => void;
 };
 
-const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
+export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion }) => {
   const { user } = useUser();
 
   const [isEditing, setIsEditing] = useState(false);
@@ -130,5 +130,3 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
     </div>
   );
 };
-
-export default CommentCard;
diff --git a/apps/app/components/issues/comment/index.ts b/apps/app/components/issues/comment/index.ts
new file mode 100644
index 000000000..cf13ca91e
--- /dev/null
+++ b/apps/app/components/issues/comment/index.ts
@@ -0,0 +1,2 @@
+export * from "./add-comment";
+export * from "./comment-card";
diff --git a/apps/app/components/project/issues/confirm-issue-deletion.tsx b/apps/app/components/issues/delete-issue-modal.tsx
similarity index 92%
rename from apps/app/components/project/issues/confirm-issue-deletion.tsx
rename to apps/app/components/issues/delete-issue-modal.tsx
index 12b8c63e9..bbc6552ba 100644
--- a/apps/app/components/project/issues/confirm-issue-deletion.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -17,20 +17,20 @@ import { Button } from "components/ui";
 // types
 import type { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse } from "types";
 // fetch-keys
-import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES } from "constants/fetch-keys";
+import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, MODULE_ISSUES, USER_ISSUE } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
-  data?: IIssue;
+  data: IIssue | null;
 };
 
-const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
   const cancelButtonRef = useRef(null);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId: queryProjectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -43,15 +43,40 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
     handleClose();
   };
 
-  console.log(data);
-
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
     if (!data || !workspaceSlug) return;
+
     const projectId = data.project;
     await issueServices
       .deleteIssue(workspaceSlug as string, projectId, data.id)
       .then(() => {
+        const cycleId = data?.cycle;
+        const moduleId = data?.module;
+
+        if (cycleId) {
+          mutate<CycleIssueResponse[]>(
+            CYCLE_ISSUES(cycleId),
+            (prevData) => prevData?.filter((i) => i.issue !== data.id),
+            false
+          );
+        }
+
+        if (moduleId) {
+          mutate<ModuleIssueResponse[]>(
+            MODULE_ISSUES(moduleId),
+            (prevData) => prevData?.filter((i) => i.issue !== data.id),
+            false
+          );
+        }
+
+        if (!queryProjectId)
+          mutate<IIssue[]>(
+            USER_ISSUE(workspaceSlug as string),
+            (prevData) => prevData?.filter((i) => i.id !== data.id),
+            false
+          );
+
         mutate<IssueResponse>(
           PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
           (prevData) => ({
@@ -62,24 +87,6 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
           false
         );
 
-        const moduleId = data?.module;
-        const cycleId = data?.cycle;
-
-        if (moduleId) {
-          mutate<ModuleIssueResponse[]>(
-            MODULE_ISSUES(moduleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-        if (cycleId) {
-          mutate<CycleIssueResponse[]>(
-            CYCLE_ISSUES(cycleId),
-            (prevData) => prevData?.filter((i) => i.issue !== data.id),
-            false
-          );
-        }
-
         handleClose();
         setToastAlert({
           title: "Success",
@@ -173,5 +180,3 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
     </Transition.Root>
   );
 };
-
-export default ConfirmIssueDeletion;
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index a2233fc52..5e034822a 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -16,7 +16,7 @@ import {
   IssueStateSelect,
 } from "components/issues/select";
 import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
+import { CreateUpdateStateModal } from "components/states";
 import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 // ui
 import { Button, CustomDatePicker, CustomMenu, Input, Loader } from "components/ui";
diff --git a/apps/app/components/issues/index.ts b/apps/app/components/issues/index.ts
index 5608866d4..ab62034b5 100644
--- a/apps/app/components/issues/index.ts
+++ b/apps/app/components/issues/index.ts
@@ -1,5 +1,12 @@
-export * from "./list-item";
+export * from "./comment";
+export * from "./sidebar-select";
+export * from "./activity";
+export * from "./delete-issue-modal";
 export * from "./description-form";
-export * from "./sub-issue-list";
 export * from "./form";
 export * from "./modal";
+export * from "./my-issues-list-item";
+export * from "./parent-issues-list-modal";
+export * from "./sidebar";
+export * from "./sub-issues-list";
+export * from "./sub-issues-list-modal";
diff --git a/apps/app/components/issues/list-item.tsx b/apps/app/components/issues/list-item.tsx
deleted file mode 100644
index 603d8d299..000000000
--- a/apps/app/components/issues/list-item.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// components
-import { AssigneesList } from "components/ui/avatar";
-// icons
-import { CalendarDaysIcon } from "@heroicons/react/24/outline";
-// helpers
-import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { IIssue, Properties } from "types";
-// constants
-import { getPriorityIcon } from "constants/global";
-
-type Props = {
-  type?: string;
-  issue: IIssue;
-  properties: Properties;
-  editIssue?: () => void;
-  handleDeleteIssue?: () => void;
-  removeIssue?: () => void;
-};
-
-export const IssueListItem: React.FC<Props> = (props) => {
-  // const { type, issue, properties, editIssue, handleDeleteIssue, removeIssue } = props;
-  const { issue, properties } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
-      <div className="flex items-center gap-2">
-        <span
-          className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
-          style={{
-            backgroundColor: issue.state_detail.color,
-          }}
-        />
-        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
-          <a className="group relative flex items-center gap-2">
-            {properties?.key && (
-              <span className="flex-shrink-0 text-xs text-gray-500">
-                {issue.project_detail?.identifier}-{issue.sequence_id}
-              </span>
-            )}
-            <span>{issue.name}</span>
-          </a>
-        </Link>
-      </div>
-      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-        {properties.priority && (
-          <div
-            className={`group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded px-2 py-1 text-xs capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-              issue.priority === "urgent"
-                ? "bg-red-100 text-red-600"
-                : issue.priority === "high"
-                ? "bg-orange-100 text-orange-500"
-                : issue.priority === "medium"
-                ? "bg-yellow-100 text-yellow-500"
-                : issue.priority === "low"
-                ? "bg-green-100 text-green-500"
-                : "bg-gray-100"
-            }`}
-          >
-            {getPriorityIcon(issue.priority)}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Priority</h5>
-              <div
-                className={`capitalize ${
-                  issue.priority === "urgent"
-                    ? "text-red-600"
-                    : issue.priority === "high"
-                    ? "text-orange-500"
-                    : issue.priority === "medium"
-                    ? "text-yellow-500"
-                    : issue.priority === "low"
-                    ? "text-green-500"
-                    : ""
-                }`}
-              >
-                {issue.priority ?? "None"}
-              </div>
-            </div>
-          </div>
-        )}
-        {properties.state && (
-          <div className="group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-            <span
-              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-              style={{
-                backgroundColor: issue?.state_detail?.color,
-              }}
-            />
-            {addSpaceIfCamelCase(issue?.state_detail.name)}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium">State</h5>
-              <div>{issue?.state_detail.name}</div>
-            </div>
-          </div>
-        )}
-        {properties.due_date && (
-          <div
-            className={`group group relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-              issue.target_date === null
-                ? ""
-                : issue.target_date < new Date().toISOString()
-                ? "text-red-600"
-                : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-            }`}
-          >
-            <CalendarDaysIcon className="h-4 w-4" />
-            {issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
-            <div className="absolute bottom-full right-0 z-10 mb-2 hidden whitespace-nowrap rounded-md bg-white p-2 shadow-md group-hover:block">
-              <h5 className="mb-1 font-medium text-gray-900">Due date</h5>
-              <div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
-              <div>
-                {issue.target_date &&
-                  (issue.target_date < new Date().toISOString()
-                    ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
-                    : findHowManyDaysLeft(issue.target_date) <= 3
-                    ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
-                    : "Due date")}
-              </div>
-            </div>
-          </div>
-        )}
-        {properties.sub_issue_count && (
-          <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-            {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-          </div>
-        )}
-        {properties.assignee && (
-          <div className="flex items-center gap-1">
-            <AssigneesList userIds={issue.assignees ?? []} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index 3f7555435..c7ff0c2d7 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -16,11 +16,7 @@ import issuesService from "services/issues.service";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // components
-import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
-import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
 import { IssueForm } from "components/issues";
-// common
-import { renderDateFormat } from "helpers/date-time.helper";
 // types
 import type { IIssue, IssueResponse } from "types";
 // fetch keys
@@ -54,7 +50,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const [activeProject, setActiveProject] = useState<string | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
+  if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
 
   const { user } = useUser();
   const { setToastAlert } = useToast();
@@ -176,7 +175,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       .then((res) => {
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
-        } else
+        } else {
           mutate<IssueResponse>(
             PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
             (prevData) => ({
@@ -187,8 +186,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
               }),
             })
           );
+        }
 
         if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
 
         if (!createMore) handleClose();
 
@@ -206,15 +207,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   };
 
   const handleFormSubmit = async (formData: Partial<IIssue>) => {
-    if (workspaceSlug && activeProject) {
-      const payload: Partial<IIssue> = {
-        ...formData,
-        target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
-      };
+    if (!workspaceSlug || !activeProject) return;
 
-      if (!data) await createIssue(payload);
-      else await updateIssue(payload);
-    }
+    const payload: Partial<IIssue> = {
+      ...formData,
+      description: formData.description ? formData.description : "",
+      description_html: formData.description_html ? formData.description_html : "<p></p>",
+    };
+
+    if (!data) await createIssue(payload);
+    else await updateIssue(payload);
   };
 
   return (
diff --git a/apps/app/components/issues/my-issues-list-item.tsx b/apps/app/components/issues/my-issues-list-item.tsx
new file mode 100644
index 000000000..130c777af
--- /dev/null
+++ b/apps/app/components/issues/my-issues-list-item.tsx
@@ -0,0 +1,127 @@
+import React, { useCallback } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+// components
+import {
+  ViewDueDateSelect,
+  ViewPrioritySelect,
+  ViewStateSelect,
+} from "components/issues/view-select";
+// ui
+import { AssigneesList } from "components/ui/avatar";
+import { CustomMenu } from "components/ui";
+// types
+import { IIssue, Properties } from "types";
+// fetch-keys
+import { USER_ISSUE } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+  properties: Properties;
+  projectId: string;
+  handleDeleteIssue: () => void;
+};
+
+export const MyIssuesListItem: React.FC<Props> = ({
+  issue,
+  properties,
+  projectId,
+  handleDeleteIssue,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const partialUpdateIssue = useCallback(
+    (formData: Partial<IIssue>) => {
+      if (!workspaceSlug) return;
+
+      mutate<IIssue[]>(
+        USER_ISSUE(workspaceSlug as string),
+        (prevData) =>
+          prevData?.map((p) => {
+            if (p.id === issue.id) return { ...p, ...formData };
+
+            return p;
+          }),
+        false
+      );
+
+      issuesService
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+        .then((res) => {
+          mutate(USER_ISSUE(workspaceSlug as string));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    [workspaceSlug, projectId, issue]
+  );
+
+  const isNotAllowed = false;
+
+  return (
+    <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
+      <div className="flex items-center gap-2">
+        <span
+          className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
+          style={{
+            backgroundColor: issue.state_detail.color,
+          }}
+        />
+        <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
+          <a className="group relative flex items-center gap-2">
+            {properties?.key && (
+              <span className="flex-shrink-0 text-xs text-gray-500">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
+            )}
+            <span>{issue.name}</span>
+          </a>
+        </Link>
+      </div>
+      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+        {properties.priority && (
+          <ViewPrioritySelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {properties.state && (
+          <ViewStateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {properties.due_date && (
+          <ViewDueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+        {properties.sub_issue_count && (
+          <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
+            {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+          </div>
+        )}
+        {properties.assignee && (
+          <div className="flex items-center gap-1">
+            <AssigneesList userIds={issue.assignees ?? []} />
+          </div>
+        )}
+        <CustomMenu width="auto" ellipsis>
+          <CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete permanently</CustomMenu.MenuItem>
+        </CustomMenu>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/project/issues/issues-list-modal.tsx b/apps/app/components/issues/parent-issues-list-modal.tsx
similarity index 98%
rename from apps/app/components/project/issues/issues-list-modal.tsx
rename to apps/app/components/issues/parent-issues-list-modal.tsx
index 9c56d6406..dc4de5329 100644
--- a/apps/app/components/project/issues/issues-list-modal.tsx
+++ b/apps/app/components/issues/parent-issues-list-modal.tsx
@@ -21,7 +21,7 @@ type Props = {
   customDisplay?: JSX.Element;
 };
 
-const IssuesListModal: React.FC<Props> = ({
+export const ParentIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
   value,
@@ -212,7 +212,7 @@ const IssuesListModal: React.FC<Props> = ({
                           <LayerDiagonalIcon height="56" width="56" />
                           <h3 className="text-gray-500">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
@@ -227,5 +227,3 @@ const IssuesListModal: React.FC<Props> = ({
     </>
   );
 };
-
-export default IssuesListModal;
diff --git a/apps/app/components/issues/select/index.ts b/apps/app/components/issues/select/index.ts
index de43d9b0e..4338b3162 100644
--- a/apps/app/components/issues/select/index.ts
+++ b/apps/app/components/issues/select/index.ts
@@ -1,6 +1,6 @@
 export * from "./assignee";
 export * from "./label";
-export * from "./parent-issue";
+export * from "./parent";
 export * from "./priority";
 export * from "./project";
 export * from "./state";
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 42f441cba..b1b1c4338 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -72,7 +72,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }
   const options = issueLabels?.map((label) => ({
     value: label.id,
     display: label.name,
-    color: label.colour,
+    color: label.color,
   }));
 
   const filteredOptions =
diff --git a/apps/app/components/issues/select/parent-issue.tsx b/apps/app/components/issues/select/parent.tsx
similarity index 86%
rename from apps/app/components/issues/select/parent-issue.tsx
rename to apps/app/components/issues/select/parent.tsx
index d08020d20..c04e89b92 100644
--- a/apps/app/components/issues/select/parent-issue.tsx
+++ b/apps/app/components/issues/select/parent.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Controller, Control } from "react-hook-form";
 // components
-import IssuesListModal from "components/project/issues/issues-list-modal";
+import { ParentIssuesListModal } from "components/issues";
 // types
 import type { IIssue } from "types";
 
@@ -17,7 +17,7 @@ export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen,
     control={control}
     name="parent"
     render={({ field: { onChange } }) => (
-      <IssuesListModal
+      <ParentIssuesListModal
         isOpen={isOpen}
         handleClose={() => setIsOpen(false)}
         onChange={onChange}
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index e85f2deac..1347e2765 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -2,9 +2,10 @@ import React from "react";
 
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { getPriorityIcon } from "components/icons/priority-icon";
 // constants
-import { getPriorityIcon } from "constants/global";
-import { PRIORITIES } from "constants/";
+import { PRIORITIES } from "constants/project";
 
 type Props = {
   value: string | null;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx b/apps/app/components/issues/sidebar-select/assignee.tsx
similarity index 98%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
rename to apps/app/components/issues/sidebar-select/assignee.tsx
index ceefa5e7a..369d03368 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
+++ b/apps/app/components/issues/sidebar-select/assignee.tsx
@@ -27,7 +27,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -143,5 +143,3 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) =
     </div>
   );
 };
-
-export default SelectAssignee;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
similarity index 97%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
rename to apps/app/components/issues/sidebar-select/blocked.tsx
index 0e8ec0881..38da455bd 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -16,7 +16,7 @@ import issuesService from "services/issues.service";
 // ui
 import { Button } from "components/ui";
 // icons
-import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue, UserAuth } from "types";
@@ -34,7 +34,12 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
+export const SidebarBlockedSelect: React.FC<Props> = ({
+  submitChanges,
+  issuesList,
+  watch,
+  userAuth,
+}) => {
   const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
@@ -172,7 +177,6 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
                   <form>
                     <Combobox
                       onChange={(val: string) => {
-                        console.log("Triggered");
                         const selectedIssues = watchBlocked("blocked_issue_ids");
                         if (selectedIssues.includes(val))
                           setValue(
@@ -262,7 +266,7 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
                             <LayerDiagonalIcon height="56" width="56" />
                             <h3 className="text-gray-500">
                               No issues found. Create a new issue with{" "}
-                              <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
+                              <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
                             </h3>
                           </div>
                         )}
@@ -301,5 +305,3 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, user
     </div>
   );
 };
-
-export default SelectBlocked;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
similarity index 98%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
rename to apps/app/components/issues/sidebar-select/blocker.tsx
index 433f5c9fe..659728e73 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -16,7 +16,7 @@ import issuesServices from "services/issues.service";
 // ui
 import { Button } from "components/ui";
 // icons
-import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue, UserAuth } from "types";
@@ -34,7 +34,12 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
+export const SidebarBlockerSelect: React.FC<Props> = ({
+  submitChanges,
+  issuesList,
+  watch,
+  userAuth,
+}) => {
   const [query, setQuery] = useState("");
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
@@ -261,7 +266,7 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, user
                           <LayerDiagonalIcon height="56" width="56" />
                           <h3 className="text-gray-500">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
@@ -299,5 +304,3 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, user
     </div>
   );
 };
-
-export default SelectBlocker;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
similarity index 95%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
rename to apps/app/components/issues/sidebar-select/cycle.tsx
index 159f96c68..353bc5121 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -22,7 +22,11 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
+export const SidebarCycleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleCycleChange,
+  userAuth,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
@@ -71,7 +75,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth
           onChange={(value: any) => {
             value === null
               ? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
-              : handleCycleChange(cycles?.find((c) => c.id === value) as any);
+              : handleCycleChange(cycles?.find((c) => c.id === value) as ICycle);
           }}
           disabled={isNotAllowed}
         >
@@ -98,5 +102,3 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth
     </div>
   );
 };
-
-export default SelectCycle;
diff --git a/apps/app/components/issues/sidebar-select/index.ts b/apps/app/components/issues/sidebar-select/index.ts
new file mode 100644
index 000000000..9070d2d2e
--- /dev/null
+++ b/apps/app/components/issues/sidebar-select/index.ts
@@ -0,0 +1,8 @@
+export * from "./assignee";
+export * from "./blocked";
+export * from "./blocker";
+export * from "./cycle";
+export * from "./module";
+export * from "./parent";
+export * from "./priority";
+export * from "./state";
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
new file mode 100644
index 000000000..e57688887
--- /dev/null
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import modulesService from "services/modules.service";
+// ui
+import { Spinner, CustomSelect } from "components/ui";
+// icons
+import { RectangleGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IModule, UserAuth } from "types";
+// fetch-keys
+import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  issueDetail: IIssue | undefined;
+  handleModuleChange: (module: IModule) => void;
+  userAuth: UserAuth;
+};
+
+export const SidebarModuleSelect: React.FC<Props> = ({
+  issueDetail,
+  handleModuleChange,
+  userAuth,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { data: modules } = useSWR(
+    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const removeIssueFromModule = (bridgeId: string, moduleId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    modulesService
+      .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(issueId as string));
+
+        mutate(MODULE_ISSUES(moduleId));
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  };
+
+  const issueModule = issueDetail?.issue_module;
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Module</p>
+      </div>
+      <div className="space-y-1 sm:basis-1/2">
+        <CustomSelect
+          label={
+            <span
+              className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
+            >
+              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+            </span>
+          }
+          value={issueModule?.module_detail?.id}
+          onChange={(value: any) => {
+            value === null
+              ? removeIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
+              : handleModuleChange(modules?.find((m) => m.id === value) as IModule);
+          }}
+          disabled={isNotAllowed}
+        >
+          {modules ? (
+            modules.length > 0 ? (
+              <>
+                <CustomSelect.Option value={null} className="capitalize">
+                  None
+                </CustomSelect.Option>
+                {modules.map((option) => (
+                  <CustomSelect.Option key={option.id} value={option.id}>
+                    {option.name}
+                  </CustomSelect.Option>
+                ))}
+              </>
+            ) : (
+              <div className="text-center">No modules found</div>
+            )
+          ) : (
+            <Spinner />
+          )}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
similarity index 94%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
rename to apps/app/components/issues/sidebar-select/parent.tsx
index 7cb298324..1af86c359 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -10,7 +10,7 @@ import { UserIcon } from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
 // components
-import IssuesListModal from "components/project/issues/issues-list-modal";
+import { ParentIssuesListModal } from "components/issues";
 // icons
 // types
 import { IIssue, UserAuth } from "types";
@@ -26,7 +26,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectParent: React.FC<Props> = ({
+export const SidebarParentSelect: React.FC<Props> = ({
   control,
   submitChanges,
   issuesList,
@@ -61,7 +61,7 @@ const SelectParent: React.FC<Props> = ({
           control={control}
           name="parent"
           render={({ field: { value, onChange } }) => (
-            <IssuesListModal
+            <ParentIssuesListModal
               isOpen={isParentModalOpen}
               handleClose={() => setIsParentModalOpen(false)}
               onChange={(val) => {
@@ -93,5 +93,3 @@ const SelectParent: React.FC<Props> = ({
     </div>
   );
 };
-
-export default SelectParent;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx b/apps/app/components/issues/sidebar-select/priority.tsx
similarity index 86%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
rename to apps/app/components/issues/sidebar-select/priority.tsx
index 8057b14ec..7583f16f4 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
+++ b/apps/app/components/issues/sidebar-select/priority.tsx
@@ -1,17 +1,16 @@
-// react
 import React from "react";
+
 // react-hook-form
-import { Control, Controller, UseFormWatch } from "react-hook-form";
+import { Control, Controller } from "react-hook-form";
 // ui
-import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { CustomSelect } from "components/ui";
 // icons
+import { ChartBarIcon } from "@heroicons/react/24/outline";
+import { getPriorityIcon } from "components/icons/priority-icon";
 // types
 import { IIssue, UserAuth } from "types";
-// common
 // constants
-import { getPriorityIcon } from "constants/global";
-import { PRIORITIES } from "constants/";
+import { PRIORITIES } from "constants/project";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -19,7 +18,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarPrioritySelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -65,5 +64,3 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) =
     </div>
   );
 };
-
-export default SelectPriority;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx b/apps/app/components/issues/sidebar-select/state.tsx
similarity index 96%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
rename to apps/app/components/issues/sidebar-select/state.tsx
index 8906de605..bbe57cc7a 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
+++ b/apps/app/components/issues/sidebar-select/state.tsx
@@ -22,7 +22,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
+export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -100,5 +100,3 @@ const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
     </div>
   );
 };
-
-export default SelectState;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/issues/sidebar.tsx
similarity index 86%
rename from apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
rename to apps/app/components/issues/sidebar.tsx
index fb18d4ebd..62a99eac1 100644
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -14,18 +14,21 @@ import { Popover, Listbox, Transition } from "@headlessui/react";
 import useToast from "hooks/use-toast";
 // services
 import issuesServices from "services/issues.service";
+import modulesService from "services/modules.service";
 // components
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import SelectState from "components/project/issues/issue-detail/issue-detail-sidebar/select-state";
-import SelectPriority from "components/project/issues/issue-detail/issue-detail-sidebar/select-priority";
-import SelectParent from "components/project/issues/issue-detail/issue-detail-sidebar/select-parent";
-import SelectCycle from "components/project/issues/issue-detail/issue-detail-sidebar/select-cycle";
-import SelectAssignee from "components/project/issues/issue-detail/issue-detail-sidebar/select-assignee";
-import SelectBlocker from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocker";
-import SelectBlocked from "components/project/issues/issue-detail/issue-detail-sidebar/select-blocked";
+import {
+  DeleteIssueModal,
+  SidebarAssigneeSelect,
+  SidebarBlockedSelect,
+  SidebarBlockerSelect,
+  SidebarCycleSelect,
+  SidebarModuleSelect,
+  SidebarParentSelect,
+  SidebarPrioritySelect,
+  SidebarStateSelect,
+} from "components/issues";
 // ui
 import { Input, Button, Spinner, CustomDatePicker } from "components/ui";
-import DatePicker from "react-datepicker";
 // icons
 import {
   TagIcon,
@@ -39,12 +42,10 @@ import {
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
+import type { ICycle, IIssue, IIssueLabels, IModule, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 
-import "react-datepicker/dist/react-datepicker.css";
-
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
@@ -55,10 +56,10 @@ type Props = {
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  colour: "#ff0000",
+  color: "#ff0000",
 };
 
-const IssueDetailSidebar: React.FC<Props> = ({
+export const IssueDetailsSidebar: React.FC<Props> = ({
   control,
   submitChanges,
   issueDetail,
@@ -112,26 +113,44 @@ const IssueDetailSidebar: React.FC<Props> = ({
       });
   };
 
-  const handleCycleChange = (cycleDetail: ICycle) => {
-    if (!workspaceSlug || !projectId || !issueDetail) return;
+  const handleCycleChange = useCallback(
+    (cycleDetail: ICycle) => {
+      if (!workspaceSlug || !projectId || !issueDetail) return;
 
-    issuesServices
-      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
-        issues: [issueDetail.id],
-      })
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueId as string));
-      });
-  };
+      issuesServices
+        .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then((res) => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail]
+  );
+
+  const handleModuleChange = useCallback(
+    (moduleDetail: IModule) => {
+      if (!workspaceSlug || !projectId || !issueDetail) return;
+
+      modulesService
+        .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then((res) => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail]
+  );
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
     <>
-      <ConfirmIssueDeletion
+      <DeleteIssueModal
         handleClose={() => setDeleteIssueModal(false)}
         isOpen={deleteIssueModal}
-        data={issueDetail}
+        data={issueDetail ?? null}
       />
       <div className="w-full divide-y-2 divide-gray-100 sticky top-5">
         <div className="flex items-center justify-between pb-3">
@@ -175,12 +194,24 @@ const IssueDetailSidebar: React.FC<Props> = ({
         </div>
         <div className="divide-y-2 divide-gray-100">
           <div className="py-1">
-            <SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
-            <SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
-            <SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
+            <SidebarStateSelect
+              control={control}
+              submitChanges={submitChanges}
+              userAuth={userAuth}
+            />
+            <SidebarAssigneeSelect
+              control={control}
+              submitChanges={submitChanges}
+              userAuth={userAuth}
+            />
+            <SidebarPrioritySelect
+              control={control}
+              submitChanges={submitChanges}
+              userAuth={userAuth}
+            />
           </div>
           <div className="py-1">
-            <SelectParent
+            <SidebarParentSelect
               control={control}
               submitChanges={submitChanges}
               issuesList={
@@ -210,13 +241,13 @@ const IssueDetailSidebar: React.FC<Props> = ({
               watch={watchIssue}
               userAuth={userAuth}
             />
-            <SelectBlocker
+            <SidebarBlockerSelect
               submitChanges={submitChanges}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
               userAuth={userAuth}
             />
-            <SelectBlocked
+            <SidebarBlockedSelect
               submitChanges={submitChanges}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
@@ -247,11 +278,16 @@ const IssueDetailSidebar: React.FC<Props> = ({
             </div>
           </div>
           <div className="py-1">
-            <SelectCycle
+            <SidebarCycleSelect
               issueDetail={issueDetail}
               handleCycleChange={handleCycleChange}
               userAuth={userAuth}
             />
+            <SidebarModuleSelect
+              issueDetail={issueDetail}
+              handleModuleChange={handleModuleChange}
+              userAuth={userAuth}
+            />
           </div>
         </div>
         <div className="space-y-3 pt-3">
@@ -280,7 +316,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                     >
                       <span
                         className="h-2 w-2 flex-shrink-0 rounded-full"
-                        style={{ backgroundColor: singleLabel?.colour ?? "green" }}
+                        style={{ backgroundColor: singleLabel?.color ?? "green" }}
                       />
                       {singleLabel.name}
                       <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
@@ -336,7 +372,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                                         >
                                           <span
                                             className="h-2 w-2 flex-shrink-0 rounded-full"
-                                            style={{ backgroundColor: label.colour ?? "green" }}
+                                            style={{ backgroundColor: label.color ?? "green" }}
                                           />
                                           {label.name}
                                         </Listbox.Option>
@@ -386,11 +422,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
                       <Popover.Button
                         className={`flex items-center gap-1 rounded-md bg-white p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
                       >
-                        {watch("colour") && watch("colour") !== "" && (
+                        {watch("color") && watch("color") !== "" && (
                           <span
                             className="h-5 w-5 rounded"
                             style={{
-                              backgroundColor: watch("colour") ?? "green",
+                              backgroundColor: watch("color") ?? "green",
                             }}
                           />
                         )}
@@ -408,7 +444,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                       >
                         <Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
                           <Controller
-                            name="colour"
+                            name="color"
                             control={controlLabel}
                             render={({ field: { value, onChange } }) => (
                               <TwitterPicker
@@ -446,5 +482,3 @@ const IssueDetailSidebar: React.FC<Props> = ({
     </>
   );
 };
-
-export default IssueDetailSidebar;
diff --git a/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx b/apps/app/components/issues/sub-issues-list-modal.tsx
similarity index 89%
rename from apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
rename to apps/app/components/issues/sub-issues-list-modal.tsx
index 95eae4555..897a9d097 100644
--- a/apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
+++ b/apps/app/components/issues/sub-issues-list-modal.tsx
@@ -10,6 +10,8 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue, IssueResponse } from "types";
 // constants
@@ -17,11 +19,11 @@ import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleClose: () => void;
   parent: IIssue | undefined;
 };
 
-const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
+export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
   const [query, setQuery] = useState("");
 
   const router = useRouter();
@@ -43,15 +45,28 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
         [];
 
   const handleCommandPaletteClose = () => {
-    setIsOpen(false);
+    handleClose();
     setQuery("");
   };
 
-  const addAsSubIssue = (issueId: string) => {
+  const addAsSubIssue = (issue: IIssue) => {
     if (!workspaceSlug || !projectId) return;
 
+    mutate<IIssue[]>(
+      SUB_ISSUES(parent?.id ?? ""),
+      (prevData) => {
+        let newSubIssues = [...(prevData as IIssue[])];
+        newSubIssues.push(issue);
+
+        newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
+
+        return newSubIssues;
+      },
+      false
+    );
+
     issuesServices
-      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
+      .patchIssue(workspaceSlug as string, projectId as string, issue.id, { parent: parent?.id })
       .then((res) => {
         mutate(SUB_ISSUES(parent?.id ?? ""));
         mutate<IssueResponse>(
@@ -146,12 +161,12 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
                                     }`
                                   }
                                   onClick={() => {
-                                    addAsSubIssue(issue.id);
-                                    setIsOpen(false);
+                                    addAsSubIssue(issue);
+                                    handleClose();
                                   }}
                                 >
                                   <span
-                                    className={`block h-1.5 w-1.5 rounded-full`}
+                                    className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
                                     style={{
                                       backgroundColor: issue.state_detail.color,
                                     }}
@@ -188,5 +203,3 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
     </Transition.Root>
   );
 };
-
-export default AddAsSubIssue;
diff --git a/apps/app/components/issues/sub-issue-list.tsx b/apps/app/components/issues/sub-issues-list.tsx
similarity index 89%
rename from apps/app/components/issues/sub-issue-list.tsx
rename to apps/app/components/issues/sub-issues-list.tsx
index f8944f379..a903f3b62 100644
--- a/apps/app/components/issues/sub-issue-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@@ -4,8 +4,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
 // components
 import { CustomMenu } from "components/ui";
-import { CreateUpdateIssueModal } from "components/issues";
-import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
+import { CreateUpdateIssueModal, SubIssuesListModal } from "components/issues";
 // types
 import { IIssue, UserAuth } from "types";
 
@@ -18,7 +17,7 @@ export interface SubIssueListProps {
   userAuth: UserAuth;
 }
 
-export const SubIssueList: FC<SubIssueListProps> = ({
+export const SubIssuesList: FC<SubIssueListProps> = ({
   issues = [],
   handleSubIssueRemove,
   parentIssue,
@@ -28,7 +27,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
 }) => {
   // states
   const [isIssueModalActive, setIssueModalActive] = useState(false);
-  const [isSubIssueModalActive, setSubIssueModalActive] = useState(false);
+  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
   const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
 
   const openIssueModal = () => {
@@ -40,11 +39,11 @@ export const SubIssueList: FC<SubIssueListProps> = ({
   };
 
   const openSubIssueModal = () => {
-    setSubIssueModalActive(true);
+    setSubIssuesListModal(true);
   };
 
   const closeSubIssueModal = () => {
-    setSubIssueModalActive(false);
+    setSubIssuesListModal(false);
   };
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
@@ -56,9 +55,9 @@ export const SubIssueList: FC<SubIssueListProps> = ({
         prePopulateData={{ ...preloadedData }}
         handleClose={closeIssueModal}
       />
-      <AddAsSubIssue
-        isOpen={isSubIssueModalActive}
-        setIsOpen={setSubIssueModalActive}
+      <SubIssuesListModal
+        isOpen={subIssuesListModal}
+        handleClose={() => setSubIssuesListModal(false)}
         parent={parentIssue}
       />
       <Disclosure defaultOpen={true}>
@@ -88,7 +87,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
                   <CustomMenu ellipsis>
                     <CustomMenu.MenuItem
                       onClick={() => {
-                        setSubIssueModalActive(true);
+                        setSubIssuesListModal(true);
                       }}
                     >
                       Add an existing issue
@@ -114,7 +113,7 @@ export const SubIssueList: FC<SubIssueListProps> = ({
                     <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}>
                       <a className="flex items-center gap-2 rounded text-xs">
                         <span
-                          className={`block h-1.5 w-1.5 rounded-full`}
+                          className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
                           style={{
                             backgroundColor: issue.state_detail.color,
                           }}
diff --git a/apps/app/components/issues/view-select/assignee.tsx b/apps/app/components/issues/view-select/assignee.tsx
new file mode 100644
index 000000000..54d667841
--- /dev/null
+++ b/apps/app/components/issues/view-select/assignee.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
+// services
+import projectService from "services/project.service";
+// ui
+import { AssigneesList, Avatar } from "components/ui";
+// types
+import { IIssue } from "types";
+// fetch-keys
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  isNotAllowed: boolean;
+};
+
+export const ViewAssigneeSelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position = "right",
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: members } = useSWR(
+    projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <Listbox
+      as="div"
+      value={issue.assignees}
+      onChange={(data: any) => {
+        const newData = issue.assignees ?? [];
+
+        if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
+        else newData.push(data);
+
+        partialUpdateIssue({ assignees_list: newData });
+      }}
+      className="group relative flex-shrink-0"
+      disabled={isNotAllowed}
+    >
+      {({ open }) => (
+        <div>
+          <Listbox.Button>
+            <div
+              className={`flex ${
+                isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+              } items-center gap-1 text-xs`}
+            >
+              <AssigneesList userIds={issue.assignees ?? []} />
+            </div>
+          </Listbox.Button>
+
+          <Transition
+            show={open}
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options
+              className={`absolute z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+                position === "left" ? "left-0" : "right-0"
+              }`}
+            >
+              {members?.map((member) => (
+                <Listbox.Option
+                  key={member.member.id}
+                  className={({ active, selected }) =>
+                    `flex items-center gap-x-1 cursor-pointer select-none p-2 whitespace-nowrap ${
+                      active ? "bg-indigo-50" : ""
+                    } ${
+                      selected || issue.assignees?.includes(member.member.id)
+                        ? "bg-indigo-50 font-medium"
+                        : "font-normal"
+                    }`
+                  }
+                  value={member.member.id}
+                >
+                  <Avatar user={member.member} />
+                  {member.member.first_name && member.member.first_name !== ""
+                    ? member.member.first_name
+                    : member.member.email}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      )}
+    </Listbox>
+  );
+};
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
new file mode 100644
index 000000000..9033e95e3
--- /dev/null
+++ b/apps/app/components/issues/view-select/due-date.tsx
@@ -0,0 +1,36 @@
+// ui
+import { CustomDatePicker } from "components/ui";
+// helpers
+import { findHowManyDaysLeft } from "helpers/date-time.helper";
+// types
+import { IIssue } from "types";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  isNotAllowed: boolean;
+};
+
+export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
+  <div
+    className={`group relative ${
+      issue.target_date === null
+        ? ""
+        : issue.target_date < new Date().toISOString()
+        ? "text-red-600"
+        : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+    }`}
+  >
+    <CustomDatePicker
+      placeholder="N/A"
+      value={issue?.target_date}
+      onChange={(val) =>
+        partialUpdateIssue({
+          target_date: val,
+        })
+      }
+      className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
+      disabled={isNotAllowed}
+    />
+  </div>
+);
diff --git a/apps/app/components/issues/view-select/index.ts b/apps/app/components/issues/view-select/index.ts
new file mode 100644
index 000000000..c5f427971
--- /dev/null
+++ b/apps/app/components/issues/view-select/index.ts
@@ -0,0 +1,4 @@
+export * from "./assignee";
+export * from "./due-date";
+export * from "./priority";
+export * from "./state";
diff --git a/apps/app/components/issues/view-select/priority.tsx b/apps/app/components/issues/view-select/priority.tsx
new file mode 100644
index 000000000..5517494b2
--- /dev/null
+++ b/apps/app/components/issues/view-select/priority.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+
+// ui
+import { Listbox, Transition } from "@headlessui/react";
+// icons
+import { getPriorityIcon } from "components/icons/priority-icon";
+// types
+import { IIssue } from "types";
+// constants
+import { PRIORITIES } from "constants/project";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  isNotAllowed: boolean;
+};
+
+export const ViewPrioritySelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position = "right",
+  isNotAllowed,
+}) => (
+  <Listbox
+    as="div"
+    value={issue.priority}
+    onChange={(data: string) => {
+      partialUpdateIssue({ priority: data });
+    }}
+    className="group relative flex-shrink-0"
+    disabled={isNotAllowed}
+  >
+    {({ open }) => (
+      <div>
+        <Listbox.Button
+          className={`flex ${
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+          } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+            issue.priority === "urgent"
+              ? "bg-red-100 text-red-600"
+              : issue.priority === "high"
+              ? "bg-orange-100 text-orange-500"
+              : issue.priority === "medium"
+              ? "bg-yellow-100 text-yellow-500"
+              : issue.priority === "low"
+              ? "bg-green-100 text-green-500"
+              : "bg-gray-100"
+          }`}
+        >
+          {getPriorityIcon(
+            issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+            "text-sm"
+          )}
+        </Listbox.Button>
+
+        <Transition
+          show={open}
+          as={React.Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options
+            className={`absolute z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+              position === "left" ? "left-0" : "right-0"
+            }`}
+          >
+            {PRIORITIES?.map((priority) => (
+              <Listbox.Option
+                key={priority}
+                className={({ active }) =>
+                  `flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize ${
+                    active ? "bg-indigo-50" : "bg-white"
+                  }`
+                }
+                value={priority}
+              >
+                {getPriorityIcon(priority, "text-sm")}
+                {priority ?? "None"}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    )}
+  </Listbox>
+);
diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
new file mode 100644
index 000000000..ce54d8293
--- /dev/null
+++ b/apps/app/components/issues/view-select/state.tsx
@@ -0,0 +1,75 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import stateService from "services/state.service";
+// ui
+import { CustomSelect } from "components/ui";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { IIssue, IState } from "types";
+// fetch-keys
+import { STATE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  issue: IIssue;
+  partialUpdateIssue: (formData: Partial<IIssue>) => void;
+  position?: "left" | "right";
+  isNotAllowed: boolean;
+};
+
+export const ViewStateSelect: React.FC<Props> = ({
+  issue,
+  partialUpdateIssue,
+  position,
+  isNotAllowed,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: states } = useSWR<IState[]>(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <CustomSelect
+      label={
+        <>
+          <span
+            className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+            style={{
+              backgroundColor: states?.find((s) => s.id === issue.state)?.color,
+            }}
+          />
+          {addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")}
+        </>
+      }
+      value={issue.state}
+      onChange={(data: string) => {
+        partialUpdateIssue({ state: data });
+      }}
+      maxHeight="md"
+      noChevron
+      disabled={isNotAllowed}
+    >
+      {states?.map((state) => (
+        <CustomSelect.Option key={state.id} value={state.id}>
+          <>
+            <span
+              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+              style={{
+                backgroundColor: state.color,
+              }}
+            />
+            {addSpaceIfCamelCase(state.name)}
+          </>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};
diff --git a/apps/app/components/project/modules/confirm-module-deletion.tsx b/apps/app/components/modules/delete-module-modal.tsx
similarity index 97%
rename from apps/app/components/project/modules/confirm-module-deletion.tsx
rename to apps/app/components/modules/delete-module-modal.tsx
index df3f32fea..317f49a68 100644
--- a/apps/app/components/project/modules/confirm-module-deletion.tsx
+++ b/apps/app/components/modules/delete-module-modal.tsx
@@ -25,7 +25,7 @@ type Props = {
   data?: IModule;
 };
 
-const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -152,5 +152,3 @@ const ConfirmModuleDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
     </Transition.Root>
   );
 };
-
-export default ConfirmModuleDeletion;
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
new file mode 100644
index 000000000..60fd93059
--- /dev/null
+++ b/apps/app/components/modules/form.tsx
@@ -0,0 +1,128 @@
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// components
+import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
+// ui
+import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
+// types
+import { IModule } from "types";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IModule>) => void;
+  handleClose: () => void;
+  status: boolean;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: null,
+  lead: null,
+  members_list: [],
+};
+
+export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">
+          {status ? "Update" : "Create"} Module
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              label="Name"
+              name="name"
+              type="name"
+              placeholder="Enter name"
+              autoComplete="off"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              label="Description"
+              placeholder="Enter description"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+          <div className="flex gap-x-2">
+            <div className="w-full">
+              <h6 className="text-gray-500">Start Date</h6>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="start_date"
+                  render={({ field: { value, onChange } }) => (
+                    <CustomDatePicker renderAs="input" value={value} onChange={onChange} />
+                  )}
+                />
+              </div>
+            </div>
+            <div className="w-full">
+              <h6 className="text-gray-500">Target Date</h6>
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value, onChange } }) => (
+                    <CustomDatePicker renderAs="input" value={value} onChange={onChange} />
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <ModuleStatusSelect control={control} error={errors.status} />
+            <ModuleLeadSelect control={control} />
+            <ModuleMembersSelect control={control} />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button theme="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Module..."
+              : "Update Module"
+            : isSubmitting
+            ? "Creating Module..."
+            : "Create Module"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/modules/index.ts b/apps/app/components/modules/index.ts
new file mode 100644
index 000000000..6f3121292
--- /dev/null
+++ b/apps/app/components/modules/index.ts
@@ -0,0 +1,8 @@
+export * from "./select";
+export * from "./sidebar-select";
+export * from "./delete-module-modal";
+export * from "./form";
+export * from "./modal";
+export * from "./module-link-modal";
+export * from "./sidebar";
+export * from "./single-module-card";
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
new file mode 100644
index 000000000..22f9a7e49
--- /dev/null
+++ b/apps/app/components/modules/modal.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// components
+import { ModuleForm } from "components/modules";
+// services
+import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import type { IModule } from "types";
+// fetch-keys
+import { MODULE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IModule;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: null,
+  lead: null,
+  members_list: [],
+};
+
+export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    reset(defaultValues);
+  };
+
+  const { reset, setError } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const createModule = async (payload: Partial<IModule>) => {
+    await modulesService
+      .createModule(workspaceSlug as string, projectId as string, payload)
+      .then(() => {
+        mutate(MODULE_LIST(projectId as string));
+        handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Module created successfully",
+        });
+      })
+      .catch((err) => {
+        Object.keys(err).map((key) => {
+          setError(key as keyof typeof defaultValues, {
+            message: err[key].join(", "),
+          });
+        });
+      });
+  };
+
+  const updateModule = async (payload: Partial<IModule>) => {
+    await modulesService
+      .updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
+      .then((res) => {
+        mutate<IModule[]>(
+          MODULE_LIST(projectId as string),
+          (prevData) => {
+            const newData = prevData?.map((item) => {
+              if (item.id === res.id) {
+                return res;
+              }
+              return item;
+            });
+            return newData;
+          },
+          false
+        );
+        handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Module updated successfully",
+        });
+      })
+      .catch((err) => {
+        Object.keys(err).map((key) => {
+          setError(key as keyof typeof defaultValues, {
+            message: err[key].join(", "),
+          });
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<IModule> = {
+      ...formData,
+    };
+
+    if (!data) await createModule(payload);
+    else await updateModule(payload);
+  };
+
+  useEffect(() => {
+    if (data) {
+      setIsOpen(true);
+      reset(data);
+    } else {
+      reset(defaultValues);
+    }
+  }, [data, setIsOpen, reset]);
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <ModuleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/project/modules/module-link-modal.tsx b/apps/app/components/modules/module-link-modal.tsx
similarity index 87%
rename from apps/app/components/project/modules/module-link-modal.tsx
rename to apps/app/components/modules/module-link-modal.tsx
index 18fdd5f6d..2917717ad 100644
--- a/apps/app/components/project/modules/module-link-modal.tsx
+++ b/apps/app/components/modules/module-link-modal.tsx
@@ -4,18 +4,18 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { useForm } from "react-hook-form";
-
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// hooks
-// types
-import type { IModule, ModuleLink } from "types";
 // services
 import modulesService from "services/modules.service";
 // ui
 import { Button, Input } from "components/ui";
+// types
+import type { IModule, ModuleLink } from "types";
 // fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
+import { MODULE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -28,7 +28,7 @@ const defaultValues: ModuleLink = {
   url: "",
 };
 
-const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
+export const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
@@ -43,23 +43,18 @@ const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
   });
 
   const onSubmit = async (formData: ModuleLink) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId || !moduleId) return;
 
-    const previousLinks = module.link_module.map((l) => ({ title: l.title, url: l.url }));
+    const previousLinks = module?.link_module.map((l) => ({ title: l.title, url: l.url }));
 
     const payload: Partial<IModule> = {
-      links_list: [...previousLinks, formData],
+      links_list: [...(previousLinks ?? []), formData],
     };
 
     await modulesService
-      .patchModule(workspaceSlug as string, projectId as string, module.id, payload)
-      .then(() => {
-        mutate<IModule[]>(projectId && MODULE_LIST(projectId as string), (prevData) =>
-          (prevData ?? []).map((module) => {
-            if (module.id === moduleId) return { ...module, ...payload };
-            return module;
-          })
-        );
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
+      .then((res) => {
+        mutate(MODULE_DETAILS(moduleId as string));
         onClose();
       })
       .catch((err) => {
@@ -163,5 +158,3 @@ const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
     </Transition.Root>
   );
 };
-
-export default ModuleLinkModal;
diff --git a/apps/app/components/modules/select/index.ts b/apps/app/components/modules/select/index.ts
new file mode 100644
index 000000000..83a4811fa
--- /dev/null
+++ b/apps/app/components/modules/select/index.ts
@@ -0,0 +1,3 @@
+export * from "./select-lead";
+export * from "./select-members";
+export * from "./select-status";
diff --git a/apps/app/components/project/modules/create-update-module-modal/select-lead.tsx b/apps/app/components/modules/select/select-lead.tsx
similarity index 91%
rename from apps/app/components/project/modules/create-update-module-modal/select-lead.tsx
rename to apps/app/components/modules/select/select-lead.tsx
index 3b3fa9e54..e89add487 100644
--- a/apps/app/components/project/modules/create-update-module-modal/select-lead.tsx
+++ b/apps/app/components/modules/select/select-lead.tsx
@@ -4,16 +4,16 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// react-hook-form
 import { Controller, Control } from "react-hook-form";
-import { UserIcon } from "@heroicons/react/24/outline";
-// import type { Control } from "react-hook-form";
-// service
-import type { IModule } from "types";
+// services
 import projectServices from "services/project.service";
 // ui
 import SearchListbox from "components/search-listbox";
 // icons
+import { UserIcon } from "@heroicons/react/24/outline";
 // types
+import type { IModule } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -21,7 +21,7 @@ type Props = {
   control: Control<IModule, any>;
 };
 
-const SelectLead: React.FC<Props> = ({ control }) => {
+export const ModuleLeadSelect: React.FC<Props> = ({ control }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -55,5 +55,3 @@ const SelectLead: React.FC<Props> = ({ control }) => {
     />
   );
 };
-
-export default SelectLead;
diff --git a/apps/app/components/project/modules/create-update-module-modal/select-members.tsx b/apps/app/components/modules/select/select-members.tsx
similarity index 90%
rename from apps/app/components/project/modules/create-update-module-modal/select-members.tsx
rename to apps/app/components/modules/select/select-members.tsx
index efddc36cb..9ad8b532f 100644
--- a/apps/app/components/project/modules/create-update-module-modal/select-members.tsx
+++ b/apps/app/components/modules/select/select-members.tsx
@@ -4,16 +4,16 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// react-hook-form
 import { Controller, Control } from "react-hook-form";
-import { UserIcon } from "@heroicons/react/24/outline";
-// import type { Control } from "react-hook-form";
-// service
-import type { IModule } from "types";
+// services
 import projectServices from "services/project.service";
 // ui
 import SearchListbox from "components/search-listbox";
 // icons
+import { UserIcon } from "@heroicons/react/24/outline";
 // types
+import type { IModule } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -21,7 +21,7 @@ type Props = {
   control: Control<IModule, any>;
 };
 
-const SelectMembers: React.FC<Props> = ({ control }) => {
+export const ModuleMembersSelect: React.FC<Props> = ({ control }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -56,5 +56,3 @@ const SelectMembers: React.FC<Props> = ({ control }) => {
     />
   );
 };
-
-export default SelectMembers;
diff --git a/apps/app/components/project/modules/create-update-module-modal/select-status.tsx b/apps/app/components/modules/select/select-status.tsx
similarity index 89%
rename from apps/app/components/project/modules/create-update-module-modal/select-status.tsx
rename to apps/app/components/modules/select/select-status.tsx
index 591b0e9c6..06e476210 100644
--- a/apps/app/components/project/modules/create-update-module-modal/select-status.tsx
+++ b/apps/app/components/modules/select/select-status.tsx
@@ -9,14 +9,14 @@ import { Squares2X2Icon } from "@heroicons/react/24/outline";
 // types
 import type { IModule } from "types";
 // constants
-import { MODULE_STATUS } from "constants/";
+import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   control: Control<IModule, any>;
   error?: FieldError;
 };
 
-const SelectStatus: React.FC<Props> = ({ control, error }) => (
+export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
   <Controller
     control={control}
     rules={{ required: true }}
@@ -45,4 +45,3 @@ const SelectStatus: React.FC<Props> = ({ control, error }) => (
     )}
   />
 );
-export default SelectStatus;
diff --git a/apps/app/components/modules/sidebar-select/index.ts b/apps/app/components/modules/sidebar-select/index.ts
new file mode 100644
index 000000000..83a4811fa
--- /dev/null
+++ b/apps/app/components/modules/sidebar-select/index.ts
@@ -0,0 +1,3 @@
+export * from "./select-lead";
+export * from "./select-members";
+export * from "./select-status";
diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
similarity index 98%
rename from apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
rename to apps/app/components/modules/sidebar-select/select-lead.tsx
index 3b02f1f01..84f230692 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -25,7 +25,7 @@ type Props = {
   lead: IUserLite | null;
 };
 
-const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
+export const SidebarLeadSelect: React.FC<Props> = ({ control, submitChanges, lead }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -164,5 +164,3 @@ const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
     </div>
   );
 };
-
-export default SelectLead;
diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
similarity index 98%
rename from apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
rename to apps/app/components/modules/sidebar-select/select-members.tsx
index de7861aa1..d99dee135 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -23,7 +23,7 @@ type Props = {
   submitChanges: (formData: Partial<IModule>) => void;
 };
 
-const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
+export const SidebarMembersSelect: React.FC<Props> = ({ control, submitChanges }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -132,5 +132,3 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
     </div>
   );
 };
-
-export default SelectMembers;
diff --git a/apps/app/components/project/modules/module-detail-sidebar/select-status.tsx b/apps/app/components/modules/sidebar-select/select-status.tsx
similarity index 92%
rename from apps/app/components/project/modules/module-detail-sidebar/select-status.tsx
rename to apps/app/components/modules/sidebar-select/select-status.tsx
index 3da42e6f2..2156b4357 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/select-status.tsx
+++ b/apps/app/components/modules/sidebar-select/select-status.tsx
@@ -10,7 +10,7 @@ import { CustomSelect } from "components/ui";
 import { IModule } from "types";
 // common
 // constants
-import { MODULE_STATUS } from "constants/";
+import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   control: Control<Partial<IModule>, any>;
@@ -18,7 +18,7 @@ type Props = {
   watch: UseFormWatch<Partial<IModule>>;
 };
 
-const SelectStatus: React.FC<Props> = ({ control, submitChanges, watch }) => (
+export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
   <div className="flex flex-wrap items-center py-2">
     <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
       <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
@@ -67,5 +67,3 @@ const SelectStatus: React.FC<Props> = ({ control, submitChanges, watch }) => (
     </div>
   </div>
 );
-
-export default SelectStatus;
diff --git a/apps/app/components/project/modules/module-detail-sidebar/index.tsx b/apps/app/components/modules/sidebar.tsx
similarity index 90%
rename from apps/app/components/project/modules/module-detail-sidebar/index.tsx
rename to apps/app/components/modules/sidebar.tsx
index 74e7beb93..57c9e765b 100644
--- a/apps/app/components/project/modules/module-detail-sidebar/index.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -8,6 +8,22 @@ import { mutate } from "swr";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
+import modulesService from "services/modules.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  ModuleLinkModal,
+  SidebarLeadSelect,
+  SidebarMembersSelect,
+  SidebarStatusSelect,
+} from "components/modules";
+// progress-bar
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+// ui
+import { CustomDatePicker, Loader } from "components/ui";
+// icons
 import {
   CalendarDaysIcon,
   ChartPieIcon,
@@ -15,20 +31,6 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import modulesService from "services/modules.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import SelectLead from "components/project/modules/module-detail-sidebar/select-lead";
-import SelectMembers from "components/project/modules/module-detail-sidebar/select-members";
-import SelectStatus from "components/project/modules/module-detail-sidebar/select-status";
-import ModuleLinkModal from "components/project/modules/module-link-modal";
-//progress-bar
-import { CircularProgressbar } from "react-circular-progressbar";
-import "react-circular-progressbar/dist/styles.css";
-// ui
-import { CustomDatePicker, Loader } from "components/ui";
-// icons
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -36,9 +38,10 @@ import { groupBy } from "helpers/array.helper";
 // types
 import { IModule, ModuleIssueResponse } from "types";
 // fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
+import { MODULE_DETAILS } from "constants/fetch-keys";
 
 const defaultValues: Partial<IModule> = {
+  lead: "",
   members_list: [],
   start_date: null,
   target_date: null,
@@ -52,7 +55,7 @@ type Props = {
   handleDeleteModule: () => void;
 };
 
-const ModuleDetailSidebar: React.FC<Props> = ({
+export const ModuleDetailsSidebar: React.FC<Props> = ({
   module,
   isOpen,
   moduleIssues,
@@ -69,14 +72,6 @@ const ModuleDetailSidebar: React.FC<Props> = ({
     defaultValues,
   });
 
-  useEffect(() => {
-    if (module)
-      reset({
-        ...module,
-        members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
-      });
-  }, [module, reset]);
-
   const groupedIssues = {
     backlog: [],
     unstarted: [],
@@ -87,29 +82,36 @@ const ModuleDetailSidebar: React.FC<Props> = ({
   };
 
   const submitChanges = (data: Partial<IModule>) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId || !moduleId) return;
 
-    mutate<IModule[]>(
-      projectId && MODULE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((module) => {
-          if (module.id === moduleId) return { ...module, ...data };
-          return module;
-        }),
+    mutate<IModule>(
+      MODULE_DETAILS(moduleId as string),
+      (prevData) => ({
+        ...(prevData as IModule),
+        ...data,
+      }),
       false
     );
 
     modulesService
-      .patchModule(workspaceSlug as string, projectId as string, module.id, data)
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, data)
       .then((res) => {
         console.log(res);
-        mutate(MODULE_LIST(projectId as string));
+        mutate(MODULE_DETAILS(moduleId as string));
       })
       .catch((e) => {
         console.log(e);
       });
   };
 
+  useEffect(() => {
+    if (module)
+      reset({
+        ...module,
+        members_list: module.members_list ?? module.members_detail?.map((m) => m.id),
+      });
+  }, [module, reset]);
+
   return (
     <>
       <ModuleLinkModal
@@ -161,12 +163,12 @@ const ModuleDetailSidebar: React.FC<Props> = ({
             </div>
             <div className="divide-y-2 divide-gray-100 text-xs">
               <div className="py-1">
-                <SelectLead
+                <SidebarLeadSelect
                   control={control}
                   submitChanges={submitChanges}
                   lead={module.lead_detail}
                 />
-                <SelectMembers control={control} submitChanges={submitChanges} />
+                <SidebarMembersSelect control={control} submitChanges={submitChanges} />
                 <div className="flex flex-wrap items-center py-2">
                   <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
                     <ChartPieIcon className="h-4 w-4 flex-shrink-0" />
@@ -233,7 +235,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
                 </div>
               </div>
               <div className="py-1">
-                <SelectStatus control={control} submitChanges={submitChanges} watch={watch} />
+                <SidebarStatusSelect
+                  control={control}
+                  submitChanges={submitChanges}
+                  watch={watch}
+                />
               </div>
               <div className="py-1">
                 <div className="flex items-center justify-between gap-2">
@@ -302,5 +308,3 @@ const ModuleDetailSidebar: React.FC<Props> = ({
     </>
   );
 };
-
-export default ModuleDetailSidebar;
diff --git a/apps/app/components/project/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
similarity index 96%
rename from apps/app/components/project/modules/single-module-card.tsx
rename to apps/app/components/modules/single-module-card.tsx
index acd6d4d98..6bd59d14f 100644
--- a/apps/app/components/project/modules/single-module-card.tsx
+++ b/apps/app/components/modules/single-module-card.tsx
@@ -1,23 +1,26 @@
 import React, { useState } from "react";
+
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
-import ConfirmModuleDeletion from "./confirm-module-deletion";
+
+// components
+import { DeleteModuleModal } from "components/modules";
 // icons
+import { CalendarDaysIcon, TrashIcon } from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
 // types
 import { IModule, SelectModuleType } from "types";
 // common
-import { MODULE_STATUS } from "constants/";
+import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   module: IModule;
 };
 
-const SingleModuleCard: React.FC<Props> = ({ module }) => {
+export const SingleModuleCard: React.FC<Props> = ({ module }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
@@ -40,7 +43,7 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
           <TrashIcon className="h-4 w-4" />
         </button>
       </div>
-      <ConfirmModuleDeletion
+      <DeleteModuleModal
         isOpen={
           moduleDeleteModal &&
           !!selectedModuleForDelete &&
@@ -147,5 +150,3 @@ const SingleModuleCard: React.FC<Props> = ({ module }) => {
     </div>
   );
 };
-
-export default SingleModuleCard;
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 786459c08..b8011a2c0 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -16,10 +16,10 @@ import workspaceService from "services/workspace.service";
 import { CustomSelect, Input } from "components/ui";
 // types
 import { IWorkspace, IWorkspaceMemberInvitation } from "types";
-// constants
-import { companySize } from "constants/";
 // fetch-keys
 import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+// constants
+import { COMPANY_SIZE } from "constants/workspace";
 
 type Props = {
   setStep: React.Dispatch<React.SetStateAction<number>>;
@@ -186,7 +186,7 @@ const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
                           label={value ? value.toString() : "Select company size"}
                           input
                         >
-                          {companySize?.map((item) => (
+                          {COMPANY_SIZE?.map((item) => (
                             <CustomSelect.Option key={item.value} value={item.value}>
                               {item.label}
                             </CustomSelect.Option>
diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx
index db91e43ef..08a085e49 100644
--- a/apps/app/components/project/create-project-modal.tsx
+++ b/apps/app/components/project/create-project-modal.tsx
@@ -17,13 +17,13 @@ import { Button, Input, TextArea, CustomSelect } from "components/ui";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 // helpers
-import { getRandomEmoji } from "helpers/functions.helper";
+import { getRandomEmoji } from "helpers/common.helper";
 // types
 import { IProject } from "types";
 // fetch-keys
 import { PROJECTS_LIST, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 // constants
-import { NETWORK_CHOICES } from "constants/";
+import { NETWORK_CHOICES } from "constants/project";
 
 type Props = {
   isOpen: boolean;
diff --git a/apps/app/components/project/cycles/board-view/index.tsx b/apps/app/components/project/cycles/board-view/index.tsx
deleted file mode 100644
index ee37b9c75..000000000
--- a/apps/app/components/project/cycles/board-view/index.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, { useCallback } from "react";
-// swr
-import useSWR, { mutate } from "swr";
-// services
-import { useRouter } from "next/router";
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-import stateService from "services/state.service";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssueView from "hooks/use-issue-view";
-// components
-import SingleBoard from "components/project/cycles/board-view/single-board";
-// ui
-import { Spinner } from "components/ui";
-// types
-import { CycleIssueResponse, IIssue, IProjectMember, UserAuth } from "types";
-import issuesService from "services/issues.service";
-// constants
-import { STATE_LIST, CYCLE_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  issues: IIssue[];
-  members: IProjectMember[] | undefined;
-  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: () => void;
-  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | null
-    >
-  >;
-  userAuth: UserAuth;
-};
-
-const CyclesBoardView: React.FC<Props> = ({
-  issues,
-  members,
-  openCreateIssueModal,
-  openIssuesListModal,
-  handleDeleteIssue,
-  setPreloadedData,
-  userAuth,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query;
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const handleOnDragEnd = useCallback(
-    (result: DropResult) => {
-      if (!result.destination) return;
-      const { source, destination } = result;
-
-      if (source.droppableId !== destination.droppableId) {
-        const sourceGroup = source.droppableId; // source group id
-        const destinationGroup = destination.droppableId; // destination group id
-        if (!sourceGroup || !destinationGroup) return;
-
-        // removed/dragged item
-        const removedItem = groupedByIssues[source.droppableId][source.index];
-
-        if (selectedGroup === "priority") {
-          // update the removed item for mutation
-          removedItem.priority = destinationGroup;
-
-          // patch request
-          issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
-            priority: destinationGroup,
-          });
-        } else if (selectedGroup === "state_detail.name") {
-          const destinationState = states?.find((s) => s.name === destinationGroup);
-          const destinationStateId = destinationState?.id;
-
-          // update the removed item for mutation
-          if (!destinationStateId || !destinationState) return;
-          removedItem.state = destinationStateId;
-          removedItem.state_detail = destinationState;
-
-          // patch request
-          issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
-            state: destinationStateId,
-          });
-
-          if (!cycleId) return;
-          mutate<CycleIssueResponse[]>(
-            CYCLE_ISSUES(cycleId as string),
-            (prevData) => {
-              if (!prevData) return prevData;
-              const updatedIssues = prevData.map((issue) => {
-                if (issue.issue_detail.id === removedItem.id) {
-                  return {
-                    ...issue,
-                    issue_detail: removedItem,
-                  };
-                }
-                return issue;
-              });
-              return [...updatedIssues];
-            },
-            false
-          );
-        }
-
-        // remove item from the source group
-        groupedByIssues[source.droppableId].splice(source.index, 1);
-        // add item to the destination group
-        groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
-      }
-    },
-    [workspaceSlug, groupedByIssues, projectId, selectedGroup, states, cycleId]
-  );
-
-  if (issueView !== "kanban") return <></>;
-
-  return (
-    <>
-      {groupedByIssues ? (
-        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
-          <DragDropContext onDragEnd={handleOnDragEnd}>
-            <div className="h-full w-full overflow-hidden">
-              <div className="h-full w-full">
-                <div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
-                  {Object.keys(groupedByIssues).map((singleGroup) => (
-                    <SingleBoard
-                      key={singleGroup}
-                      selectedGroup={selectedGroup}
-                      groupTitle={singleGroup}
-                      createdBy={
-                        selectedGroup === "created_by"
-                          ? members?.find((m) => m.member.id === singleGroup)?.member.first_name ??
-                            "loading..."
-                          : null
-                      }
-                      groupedByIssues={groupedByIssues}
-                      bgColor={
-                        selectedGroup === "state_detail.name"
-                          ? states?.find((s) => s.name === singleGroup)?.color
-                          : "#000000"
-                      }
-                      properties={properties}
-                      openIssuesListModal={openIssuesListModal}
-                      openCreateIssueModal={openCreateIssueModal}
-                      handleDeleteIssue={handleDeleteIssue}
-                      setPreloadedData={setPreloadedData}
-                      stateId={
-                        selectedGroup === "state_detail.name"
-                          ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                          : null
-                      }
-                      userAuth={userAuth}
-                    />
-                  ))}
-                </div>
-              </div>
-            </div>
-          </DragDropContext>
-        </div>
-      ) : (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default CyclesBoardView;
diff --git a/apps/app/components/project/cycles/board-view/single-board.tsx b/apps/app/components/project/cycles/board-view/single-board.tsx
deleted file mode 100644
index ab028c2cf..000000000
--- a/apps/app/components/project/cycles/board-view/single-board.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-beautiful-dnd
-import { Draggable } from "react-beautiful-dnd";
-// services
-import workspaceService from "services/workspace.service";
-// components
-import SingleIssue from "components/common/board-view/single-issue";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import BoardHeader from "components/common/board-view/board-header";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, UserAuth } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  properties: Properties;
-  groupedByIssues: {
-    [key: string]: IIssue[];
-  };
-  selectedGroup: NestedKeyOf<IIssue> | null;
-  groupTitle: string;
-  createdBy: string | null;
-  bgColor?: string;
-  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: () => void;
-  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | null
-    >
-  >;
-  stateId: string | null;
-  userAuth: UserAuth;
-};
-
-const SingleModuleBoard: React.FC<Props> = ({
-  properties,
-  groupedByIssues,
-  selectedGroup,
-  groupTitle,
-  createdBy,
-  bgColor,
-  openCreateIssueModal,
-  openIssuesListModal,
-  handleDeleteIssue,
-  setPreloadedData,
-  stateId,
-  userAuth,
-}) => {
-  // collapse/expand
-  const [isCollapsed, setIsCollapsed] = useState(true);
-
-  const router = useRouter();
-
-  const { workspaceSlug, cycleId } = router.query;
-
-  if (selectedGroup === "priority")
-    groupTitle === "high"
-      ? (bgColor = "#dc2626")
-      : groupTitle === "medium"
-      ? (bgColor = "#f97316")
-      : groupTitle === "low"
-      ? (bgColor = "#22c55e")
-      : (bgColor = "#ff0000");
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  return (
-    <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
-        <BoardHeader
-          addIssueToState={() => {
-            openCreateIssueModal();
-            if (selectedGroup !== null) {
-              setPreloadedData({
-                state: stateId !== null ? stateId : undefined,
-                [selectedGroup]: groupTitle,
-                actionType: "createIssue",
-              });
-            }
-          }}
-          bgColor={bgColor ?? ""}
-          createdBy={createdBy}
-          groupTitle={groupTitle}
-          groupedByIssues={groupedByIssues}
-          isCollapsed={isCollapsed}
-          setIsCollapsed={setIsCollapsed}
-          selectedGroup={selectedGroup}
-        />
-        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-          {(provided, snapshot) => (
-            <div
-              className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
-                snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
-              } ${!isCollapsed ? "hidden" : "block"}`}
-              {...provided.droppableProps}
-              ref={provided.innerRef}
-            >
-              {groupedByIssues[groupTitle].map((childIssue, index: number) => {
-                const assignees = [
-                  ...(childIssue?.assignees_list ?? []),
-                  ...(childIssue?.assignees ?? []),
-                ]?.map((assignee) => {
-                  const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
-
-                  return tempPerson;
-                });
-
-                return (
-                  <Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
-                    {(provided, snapshot) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        <SingleIssue
-                          type="cycle"
-                          typeId={cycleId as string}
-                          issue={childIssue}
-                          properties={properties}
-                          snapshot={snapshot}
-                          assignees={assignees}
-                          people={people}
-                          handleDeleteIssue={handleDeleteIssue}
-                          userAuth={userAuth}
-                        />
-                      </div>
-                    )}
-                  </Draggable>
-                );
-              })}
-              {provided.placeholder}
-              <CustomMenu
-                label={
-                  <span className="flex items-center gap-1">
-                    <PlusIcon className="h-3 w-3" />
-                    Add issue
-                  </span>
-                }
-                className="mt-1"
-                optionsPosition="left"
-                noBorder
-              >
-                <CustomMenu.MenuItem
-                  onClick={() => {
-                    openCreateIssueModal();
-                    if (selectedGroup !== null) {
-                      setPreloadedData({
-                        state: stateId !== null ? stateId : undefined,
-                        [selectedGroup]: groupTitle,
-                        actionType: "createIssue",
-                      });
-                    }
-                  }}
-                >
-                  Create new
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
-                  Add an existing issue
-                </CustomMenu.MenuItem>
-              </CustomMenu>
-            </div>
-          )}
-        </StrictModeDroppable>
-      </div>
-    </div>
-  );
-};
-
-export default SingleModuleBoard;
diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
index 323b4f5f8..a98a2b433 100644
--- a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
+++ b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
@@ -15,7 +15,7 @@ import cyclesService from "services/cycles.service";
 import useToast from "hooks/use-toast";
 // ui
 import { Loader, CustomDatePicker } from "components/ui";
-//progress-bar
+// progress-bar
 import { CircularProgressbar } from "react-circular-progressbar";
 import "react-circular-progressbar/dist/styles.css";
 // helpers
@@ -24,7 +24,7 @@ import { groupBy } from "helpers/array.helper";
 // types
 import { CycleIssueResponse, ICycle } from "types";
 // fetch-keys
-import { CYCLE_LIST } from "constants/fetch-keys";
+import { CYCLE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   cycle: ICycle | undefined;
@@ -57,23 +57,19 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
   };
 
   const submitChanges = (data: Partial<ICycle>) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId || !cycleId) return;
 
-    mutate<ICycle[]>(
-      projectId && CYCLE_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((tempCycle) => {
-          if (tempCycle.id === cycleId) return { ...tempCycle, ...data };
-          return tempCycle;
-        }),
+    mutate<ICycle>(
+      CYCLE_DETAILS(cycleId as string),
+      (prevData) => ({ ...(prevData as ICycle), ...data }),
       false
     );
 
     cyclesService
-      .patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data)
+      .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data)
       .then((res) => {
         console.log(res);
-        mutate(CYCLE_LIST(projectId as string));
+        mutate(CYCLE_DETAILS(cycleId as string));
       })
       .catch((e) => {
         console.log(e);
diff --git a/apps/app/components/project/cycles/list-view/index.tsx b/apps/app/components/project/cycles/list-view/index.tsx
deleted file mode 100644
index e86ec8de4..000000000
--- a/apps/app/components/project/cycles/list-view/index.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// icons
-import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
-// services
-import workspaceService from "services/workspace.service";
-import stateService from "services/state.service";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssueView from "hooks/use-issue-view";
-// components
-import SingleListIssue from "components/common/list-view/single-issue";
-// ui
-import { CustomMenu, Spinner } from "components/ui";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { IIssue, IWorkspaceMember, UserAuth } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS, STATE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  issues: IIssue[];
-  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: () => void;
-  removeIssueFromCycle: (bridgeId: string) => void;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | null
-    >
-  >;
-  userAuth: UserAuth;
-};
-
-const CyclesListView: React.FC<Props> = ({
-  issues,
-  openCreateIssueModal,
-  openIssuesListModal,
-  removeIssueFromCycle,
-  setPreloadedData,
-  userAuth,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query;
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  if (issueView !== "list") return <></>;
-
-  return (
-    <div className="flex flex-col space-y-5">
-      {Object.keys(groupedByIssues).map((singleGroup) => {
-        const stateId =
-          selectedGroup === "state_detail.name"
-            ? states?.find((s) => s.name === singleGroup)?.id ?? null
-            : null;
-
-        return (
-          <Disclosure key={singleGroup} as="div" defaultOpen>
-            {({ open }) => (
-              <div className="rounded-lg bg-white">
-                <div className="rounded-t-lg bg-gray-100 px-4 py-3">
-                  <Disclosure.Button>
-                    <div className="flex items-center gap-x-2">
-                      <span>
-                        <ChevronDownIcon
-                          className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
-                        />
-                      </span>
-                      {selectedGroup !== null ? (
-                        <h2 className="font-medium capitalize leading-5">
-                          {singleGroup === null || singleGroup === "null"
-                            ? selectedGroup === "priority" && "No priority"
-                            : addSpaceIfCamelCase(singleGroup)}
-                        </h2>
-                      ) : (
-                        <h2 className="font-medium leading-5">All Issues</h2>
-                      )}
-                      <p className="text-sm text-gray-500">
-                        {groupedByIssues[singleGroup as keyof IIssue].length}
-                      </p>
-                    </div>
-                  </Disclosure.Button>
-                </div>
-                <Transition
-                  show={open}
-                  enter="transition duration-100 ease-out"
-                  enterFrom="transform opacity-0"
-                  enterTo="transform opacity-100"
-                  leave="transition duration-75 ease-out"
-                  leaveFrom="transform opacity-100"
-                  leaveTo="transform opacity-0"
-                >
-                  <Disclosure.Panel>
-                    <div className="divide-y-2">
-                      {groupedByIssues[singleGroup] ? (
-                        groupedByIssues[singleGroup].length > 0 ? (
-                          groupedByIssues[singleGroup].map((issue) => {
-                            const assignees = [
-                              ...(issue?.assignees_list ?? []),
-                              ...(issue?.assignees ?? []),
-                            ]?.map((assignee) => {
-                              const tempPerson = people?.find(
-                                (p) => p.member.id === assignee
-                              )?.member;
-
-                              return {
-                                avatar: tempPerson?.avatar,
-                                first_name: tempPerson?.first_name,
-                                email: tempPerson?.email,
-                              };
-                            });
-
-                            return (
-                              <SingleListIssue
-                                key={issue.id}
-                                type="cycle"
-                                typeId={cycleId as string}
-                                issue={issue}
-                                properties={properties}
-                                editIssue={() => openCreateIssueModal(issue, "edit")}
-                                removeIssue={() => removeIssueFromCycle(issue.bridge ?? "")}
-                                userAuth={userAuth}
-                              />
-                            );
-                          })
-                        ) : (
-                          <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
-                        )
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                        </div>
-                      )}
-                    </div>
-                  </Disclosure.Panel>
-                </Transition>
-                <div className="p-3">
-                  <CustomMenu
-                    label={
-                      <span className="flex items-center gap-1">
-                        <PlusIcon className="h-3 w-3" />
-                        Add issue
-                      </span>
-                    }
-                    optionsPosition="left"
-                    noBorder
-                  >
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        openCreateIssueModal();
-                        if (selectedGroup !== null) {
-                          setPreloadedData({
-                            state: stateId !== null ? stateId : undefined,
-                            [selectedGroup]: singleGroup,
-                            actionType: "createIssue",
-                          });
-                        }
-                      }}
-                    >
-                      Create new
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </div>
-              </div>
-            )}
-          </Disclosure>
-        );
-      })}
-    </div>
-  );
-};
-
-export default CyclesListView;
diff --git a/apps/app/components/project/cycles/stats-view/index.tsx b/apps/app/components/project/cycles/stats-view/index.tsx
index 58f316464..354bab4a1 100644
--- a/apps/app/components/project/cycles/stats-view/index.tsx
+++ b/apps/app/components/project/cycles/stats-view/index.tsx
@@ -64,7 +64,7 @@ const CycleStatsView: React.FC<TCycleStatsViewProps> = ({
           )}
           <h3 className="text-gray-500">
             No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
-            <pre className="inline rounded bg-gray-100 px-2 py-1">Q</pre>.
+            <pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre>.
           </h3>
         </div>
       )}
diff --git a/apps/app/components/project/issues/BoardView/index.tsx b/apps/app/components/project/issues/BoardView/index.tsx
deleted file mode 100644
index 6243e88dd..000000000
--- a/apps/app/components/project/issues/BoardView/index.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-// hook
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssueView from "hooks/use-issue-view";
-// services
-import stateServices from "services/state.service";
-import issuesServices from "services/issues.service";
-import projectService from "services/project.service";
-// components
-import SingleBoard from "components/project/issues/BoardView/single-board";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { CreateUpdateIssueModal } from "components/issues/modal";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-// ui
-import { Spinner } from "components/ui";
-// types
-import type { IState, IIssue, IssueResponse, UserAuth } from "types";
-// fetch-keys
-import { STATE_LIST, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  issues: IIssue[];
-  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  userAuth: UserAuth;
-};
-
-const BoardView: React.FC<Props> = ({ issues, handleDeleteIssue, userAuth }) => {
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
-  const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
-
-  const { data: states, mutate: mutateState } = useSWR<IState[]>(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug
-      ? () => stateServices.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null,
-    {
-      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
-        if (err?.status === 403) return;
-        setTimeout(() => revalidate(revalidateOpts), 5000);
-      },
-    }
-  );
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
-  const handleOnDragEnd = useCallback(
-    (result: DropResult) => {
-      if (!result.destination || !workspaceSlug || !projectId) return;
-
-      const { source, destination, type } = result;
-
-      if (destination.droppableId === "trashBox") {
-        // setIssueDeletionData(draggedItem);
-        setIsIssueDeletionOpen(true);
-      } else {
-        if (type === "state") {
-          const newStates = Array.from(states ?? []);
-          const [reorderedState] = newStates.splice(source.index, 1);
-          newStates.splice(destination.index, 0, reorderedState);
-          const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
-          const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
-
-          const sequenceNumber =
-            prevSequenceNumber && nextSequenceNumber
-              ? (prevSequenceNumber + nextSequenceNumber) / 2
-              : nextSequenceNumber
-              ? nextSequenceNumber - 15000 / 2
-              : prevSequenceNumber
-              ? prevSequenceNumber + 15000 / 2
-              : 15000;
-
-          newStates[destination.index].sequence = sequenceNumber;
-
-          mutateState(newStates, false);
-
-          stateServices
-            .patchState(
-              workspaceSlug as string,
-              projectId as string,
-              newStates[destination.index].id,
-              {
-                sequence: sequenceNumber,
-              }
-            )
-            .then((response) => {
-              console.log(response);
-            })
-            .catch((err) => {
-              console.error(err);
-            });
-        } else {
-          const draggedItem = groupedByIssues[source.droppableId][source.index];
-          if (source.droppableId !== destination.droppableId) {
-            const sourceGroup = source.droppableId; // source group id
-            const destinationGroup = destination.droppableId; // destination group id
-
-            if (!sourceGroup || !destinationGroup) return;
-
-            if (selectedGroup === "priority") {
-              // update the removed item for mutation
-              draggedItem.priority = destinationGroup;
-
-              // patch request
-              issuesServices.patchIssue(
-                workspaceSlug as string,
-                projectId as string,
-                draggedItem.id,
-                {
-                  priority: destinationGroup,
-                }
-              );
-            } else if (selectedGroup === "state_detail.name") {
-              const destinationState = states?.find((s) => s.name === destinationGroup);
-              const destinationStateId = destinationState?.id;
-
-              // update the removed item for mutation
-              if (!destinationStateId || !destinationState) return;
-              draggedItem.state = destinationStateId;
-              draggedItem.state_detail = destinationState;
-
-              mutate<IssueResponse>(
-                PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
-                (prevData) => {
-                  if (!prevData) return prevData;
-
-                  const updatedIssues = prevData.results.map((issue) => {
-                    if (issue.id === draggedItem.id)
-                      return {
-                        ...draggedItem,
-                        state_detail: destinationState,
-                        state: destinationStateId,
-                      };
-
-                    return issue;
-                  });
-
-                  return {
-                    ...prevData,
-                    results: updatedIssues,
-                  };
-                },
-                false
-              );
-
-              // patch request
-              issuesServices
-                .patchIssue(workspaceSlug as string, projectId as string, draggedItem.id, {
-                  state: destinationStateId,
-                })
-                .then((res) => {
-                  mutate(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
-                });
-            }
-          }
-        }
-      }
-    },
-    [workspaceSlug, mutateState, groupedByIssues, projectId, selectedGroup, states]
-  );
-
-  if (issueView !== "kanban") return <></>;
-
-  return (
-    <>
-      <ConfirmIssueDeletion
-        isOpen={isIssueDeletionOpen}
-        handleClose={() => setIsIssueDeletionOpen(false)}
-        data={issueDeletionData}
-      />
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-      />
-      {groupedByIssues ? (
-        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
-          <DragDropContext onDragEnd={handleOnDragEnd}>
-            <div className="h-full w-full overflow-hidden">
-              <StrictModeDroppable droppableId="state" type="state" direction="horizontal">
-                {(provided) => (
-                  <div
-                    className="h-full w-full"
-                    {...provided.droppableProps}
-                    ref={provided.innerRef}
-                  >
-                    <div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
-                      {Object.keys(groupedByIssues).map((singleGroup, index) => (
-                        <SingleBoard
-                          key={singleGroup}
-                          selectedGroup={selectedGroup}
-                          groupTitle={singleGroup}
-                          createdBy={
-                            selectedGroup === "created_by"
-                              ? members?.find((m) => m.member.id === singleGroup)?.member
-                                  .first_name ?? "loading..."
-                              : null
-                          }
-                          groupedByIssues={groupedByIssues}
-                          index={index}
-                          setIsIssueOpen={setCreateIssueModal}
-                          properties={properties}
-                          setPreloadedData={setPreloadedData}
-                          stateId={
-                            selectedGroup === "state_detail.name"
-                              ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                              : null
-                          }
-                          bgColor={
-                            selectedGroup === "state_detail.name"
-                              ? states?.find((s) => s.name === singleGroup)?.color
-                              : "#000000"
-                          }
-                          handleDeleteIssue={handleDeleteIssue}
-                          userAuth={userAuth}
-                        />
-                      ))}
-                    </div>
-                    {provided.placeholder}
-                  </div>
-                )}
-              </StrictModeDroppable>
-            </div>
-          </DragDropContext>
-        </div>
-      ) : (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default BoardView;
diff --git a/apps/app/components/project/issues/BoardView/single-board.tsx b/apps/app/components/project/issues/BoardView/single-board.tsx
deleted file mode 100644
index 8630f223c..000000000
--- a/apps/app/components/project/issues/BoardView/single-board.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-beautiful-dnd
-import { Draggable } from "react-beautiful-dnd";
-// components
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import SingleIssue from "components/common/board-view/single-issue";
-import BoardHeader from "components/common/board-view/board-header";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// services
-import workspaceService from "services/workspace.service";
-// types
-import { IIssue, Properties, NestedKeyOf, IWorkspaceMember, UserAuth } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  selectedGroup: NestedKeyOf<IIssue> | null;
-  groupTitle: string;
-  groupedByIssues: {
-    [key: string]: IIssue[];
-  };
-  index: number;
-  setIsIssueOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  properties: Properties;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | undefined
-    >
-  >;
-  bgColor?: string;
-  stateId: string | null;
-  createdBy: string | null;
-  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  userAuth: UserAuth;
-};
-
-const SingleBoard: React.FC<Props> = ({
-  selectedGroup,
-  groupTitle,
-  groupedByIssues,
-  index,
-  setIsIssueOpen,
-  properties,
-  setPreloadedData,
-  bgColor = "#0f2b16",
-  stateId,
-  createdBy,
-  handleDeleteIssue,
-  userAuth,
-}) => {
-  // Collapse/Expand
-  const [isCollapsed, setIsCollapsed] = useState(true);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  if (selectedGroup === "priority")
-    groupTitle === "high"
-      ? (bgColor = "#dc2626")
-      : groupTitle === "medium"
-      ? (bgColor = "#f97316")
-      : groupTitle === "low"
-      ? (bgColor = "#22c55e")
-      : (bgColor = "#ff0000");
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const addIssueToState = () => {
-    setIsIssueOpen(true);
-    if (selectedGroup)
-      setPreloadedData({
-        state: stateId !== null ? stateId : undefined,
-        [selectedGroup]: groupTitle,
-        actionType: "createIssue",
-      });
-  };
-
-  return (
-    <Draggable draggableId={groupTitle} index={index}>
-      {(provided, snapshot) => (
-        <div
-          className={`h-full flex-shrink-0 rounded ${
-            snapshot.isDragging ? "border-theme shadow-lg" : ""
-          } ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}
-          ref={provided.innerRef}
-          {...provided.draggableProps}
-        >
-          <div
-            className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}
-          >
-            <BoardHeader
-              addIssueToState={addIssueToState}
-              bgColor={bgColor}
-              createdBy={createdBy}
-              groupTitle={groupTitle}
-              groupedByIssues={groupedByIssues}
-              isCollapsed={isCollapsed}
-              setIsCollapsed={setIsCollapsed}
-              selectedGroup={selectedGroup}
-              provided={provided}
-            />
-            <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-              {(provided, snapshot) => (
-                <div
-                  className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
-                    snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
-                  } ${!isCollapsed ? "hidden" : "block"}`}
-                  {...provided.droppableProps}
-                  ref={provided.innerRef}
-                >
-                  {groupedByIssues[groupTitle].map((childIssue, index: number) => {
-                    const assignees = [
-                      ...(childIssue?.assignees_list ?? []),
-                      ...(childIssue?.assignees ?? []),
-                    ]?.map((assignee) => {
-                      const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
-
-                      return tempPerson;
-                    });
-
-                    return (
-                      <Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
-                        {(provided, snapshot) => (
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                          >
-                            <SingleIssue
-                              issue={childIssue}
-                              properties={properties}
-                              snapshot={snapshot}
-                              people={people}
-                              assignees={assignees}
-                              handleDeleteIssue={handleDeleteIssue}
-                              userAuth={userAuth}
-                            />
-                          </div>
-                        )}
-                      </Draggable>
-                    );
-                  })}
-                  {provided.placeholder}
-                  <button
-                    type="button"
-                    className="flex items-center rounded p-2 text-xs font-medium outline-none duration-300 hover:bg-gray-100"
-                    onClick={addIssueToState}
-                  >
-                    <PlusIcon className="mr-1 h-3 w-3" />
-                    Create
-                  </button>
-                </div>
-              )}
-            </StrictModeDroppable>
-          </div>
-        </div>
-      )}
-    </Draggable>
-  );
-};
-
-export default SingleBoard;
diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-module.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-module.tsx
deleted file mode 100644
index 1deac86e4..000000000
--- a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-module.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-import { Control, Controller } from "react-hook-form";
-// constants
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
-// services
-import modulesService from "services/modules.service";
-// ui
-import { Spinner, CustomSelect } from "components/ui";
-// icons
-// types
-import { IIssue, IModule } from "types";
-import { MODULE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  control: Control<IIssue, any>;
-  handleModuleChange: (module: IModule) => void;
-};
-
-const SelectModule: React.FC<Props> = ({ control, handleModuleChange }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: modules } = useSWR(
-    workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => modulesService.getModules(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Module</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <Controller
-          control={control}
-          name="issue_module"
-          render={({ field: { value } }) => (
-            <CustomSelect
-              label={
-                <span
-                  className={`hidden truncate text-left sm:block ${value ? "" : "text-gray-900"}`}
-                >
-                  {value ? modules?.find((m) => m.id === value?.module_detail.id)?.name : "None"}
-                </span>
-              }
-              value={value}
-              onChange={(value: any) => {
-                handleModuleChange(modules?.find((m) => m.id === value) as any);
-              }}
-            >
-              {modules ? (
-                modules.length > 0 ? (
-                  modules.map((option) => (
-                    <CustomSelect.Option key={option.id} value={option.id}>
-                      {option.name}
-                    </CustomSelect.Option>
-                  ))
-                ) : (
-                  <div className="text-center">No cycles found</div>
-                )
-              ) : (
-                <Spinner />
-              )}
-            </CustomSelect>
-          )}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SelectModule;
diff --git a/apps/app/components/project/issues/list-view/index.tsx b/apps/app/components/project/issues/list-view/index.tsx
deleted file mode 100644
index 102295f84..000000000
--- a/apps/app/components/project/issues/list-view/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-import { Disclosure, Transition } from "@headlessui/react";
-// hooks
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssueView from "hooks/use-issue-view";
-// services
-import stateService from "services/state.service";
-import workspaceService from "services/workspace.service";
-// ui
-import { Spinner } from "components/ui";
-// components
-import { CreateUpdateIssueModal } from "components/issues/modal";
-import SingleListIssue from "components/common/list-view/single-issue";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { IIssue, IWorkspaceMember, UserAuth } from "types";
-// fetch-keys
-import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-// types
-type Props = {
-  issues: IIssue[];
-  handleEditIssue: (issue: IIssue) => void;
-  userAuth: UserAuth;
-};
-
-const ListView: React.FC<Props> = ({ issues, handleEditIssue, userAuth }) => {
-  const [isCreateIssuesModalOpen, setIsCreateIssuesModalOpen] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
-  if (issueView !== "list") return <></>;
-
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={isCreateIssuesModalOpen && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setIsCreateIssuesModalOpen(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-      />
-      <div className="flex flex-col space-y-5">
-        {Object.keys(groupedByIssues).map((singleGroup) => (
-          <Disclosure key={singleGroup} as="div" defaultOpen>
-            {({ open }) => (
-              <div className="rounded-lg bg-white">
-                <div className="rounded-t-lg bg-gray-100 px-4 py-3">
-                  <Disclosure.Button>
-                    <div className="flex items-center gap-x-2">
-                      <span>
-                        <ChevronDownIcon
-                          className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
-                        />
-                      </span>
-                      {selectedGroup !== null ? (
-                        <h2 className="font-medium capitalize leading-5">
-                          {singleGroup === null || singleGroup === "null"
-                            ? selectedGroup === "priority" && "No priority"
-                            : selectedGroup === "created_by"
-                            ? people?.find((p) => p.member.id === singleGroup)?.member
-                                ?.first_name ?? "Loading..."
-                            : addSpaceIfCamelCase(singleGroup)}
-                        </h2>
-                      ) : (
-                        <h2 className="font-medium leading-5">All Issues</h2>
-                      )}
-                      <p className="text-sm text-gray-500">
-                        {groupedByIssues[singleGroup as keyof IIssue].length}
-                      </p>
-                    </div>
-                  </Disclosure.Button>
-                </div>
-                <Transition
-                  show={open}
-                  enter="transition duration-100 ease-out"
-                  enterFrom="transform opacity-0"
-                  enterTo="transform opacity-100"
-                  leave="transition duration-75 ease-out"
-                  leaveFrom="transform opacity-100"
-                  leaveTo="transform opacity-0"
-                >
-                  <Disclosure.Panel>
-                    <div className="divide-y-2">
-                      {groupedByIssues[singleGroup] ? (
-                        groupedByIssues[singleGroup].length > 0 ? (
-                          groupedByIssues[singleGroup].map((issue: IIssue) => {
-                            const assignees = [
-                              ...(issue?.assignees_list ?? []),
-                              ...(issue?.assignees ?? []),
-                            ]?.map((assignee) => {
-                              const tempPerson = people?.find(
-                                (p) => p.member.id === assignee
-                              )?.member;
-
-                              return tempPerson;
-                            });
-
-                            return (
-                              <SingleListIssue
-                                key={issue.id}
-                                type="issue"
-                                issue={issue}
-                                properties={properties}
-                                editIssue={() => handleEditIssue(issue)}
-                                userAuth={userAuth}
-                              />
-                            );
-                          })
-                        ) : (
-                          <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
-                        )
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                        </div>
-                      )}
-                    </div>
-                  </Disclosure.Panel>
-                </Transition>
-                <div className="p-3">
-                  <button
-                    type="button"
-                    className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
-                    onClick={() => {
-                      setIsCreateIssuesModalOpen(true);
-                      if (selectedGroup !== null) {
-                        const stateId =
-                          selectedGroup === "state_detail.name"
-                            ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                            : null;
-                        setPreloadedData({
-                          state: stateId !== null ? stateId : undefined,
-                          [selectedGroup]: singleGroup,
-                          actionType: "createIssue",
-                        });
-                      } else {
-                        setPreloadedData({
-                          actionType: "createIssue",
-                        });
-                      }
-                    }}
-                  >
-                    <PlusIcon className="h-3 w-3" />
-                    Add issue
-                  </button>
-                </div>
-              </div>
-            )}
-          </Disclosure>
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default ListView;
diff --git a/apps/app/components/project/issues/my-issues/change-state-dropdown.tsx b/apps/app/components/project/issues/my-issues/change-state-dropdown.tsx
deleted file mode 100644
index 375632148..000000000
--- a/apps/app/components/project/issues/my-issues/change-state-dropdown.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// headless ui
-import { Listbox, Transition } from "@headlessui/react";
-// services
-import stateServices from "services/state.service";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { IIssue, IState } from "types";
-// fetch-keys
-import { STATE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  issue: IIssue;
-  updateIssues: (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    issue: Partial<IIssue>
-  ) => void;
-};
-
-const ChangeStateDropdown: React.FC<Props> = ({ issue, updateIssues }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: states } = useSWR<IState[]>(
-    workspaceSlug ? STATE_LIST(issue.project) : null,
-    workspaceSlug ? () => stateServices.getStates(workspaceSlug as string, issue.project) : null
-  );
-
-  return (
-    <>
-      <Listbox
-        as="div"
-        value={issue.state}
-        onChange={(data: string) => {
-          if (!workspaceSlug) return;
-          updateIssues(workspaceSlug as string, issue.project, issue.id, {
-            state: data,
-            state_detail: states?.find((state) => state.id === data),
-          });
-        }}
-        className="flex-shrink-0"
-      >
-        {({ open }) => (
-          <>
-            <div>
-              <Listbox.Button
-                className="inline-flex items-center whitespace-nowrap rounded-full border bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100"
-                style={{
-                  border: `2px solid ${issue.state_detail.color}`,
-                  backgroundColor: `${issue.state_detail.color}20`,
-                }}
-              >
-                <span
-                  className={`hidden w-16 capitalize sm:block ${
-                    issue.state ? "" : "text-gray-900"
-                  }`}
-                >
-                  {addSpaceIfCamelCase(issue.state_detail.name)}
-                </span>
-              </Listbox.Button>
-
-              <Transition
-                show={open}
-                as={React.Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Listbox.Options className="fixed z-10 mt-1 max-h-28 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  {states?.map((state) => (
-                    <Listbox.Option
-                      key={state.id}
-                      className={({ active }) =>
-                        `cursor-pointer select-none px-3 py-2 ${
-                          active ? "bg-indigo-50" : "bg-white"
-                        }`
-                      }
-                      value={state.id}
-                    >
-                      {addSpaceIfCamelCase(state.name)}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Listbox>
-    </>
-  );
-};
-
-export default ChangeStateDropdown;
diff --git a/apps/app/components/project/modules/board-view/index.tsx b/apps/app/components/project/modules/board-view/index.tsx
deleted file mode 100644
index 4951f80af..000000000
--- a/apps/app/components/project/modules/board-view/index.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { useCallback } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-// services
-import stateService from "services/state.service";
-import issuesService from "services/issues.service";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssueView from "hooks/use-issue-view";
-// components
-import SingleBoard from "components/project/modules/board-view/single-board";
-// ui
-import { Spinner } from "components/ui";
-// types
-import { IIssue, IProjectMember, ModuleIssueResponse, UserAuth } from "types";
-// constants
-import { STATE_LIST, MODULE_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  issues: IIssue[];
-  members: IProjectMember[] | undefined;
-  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: () => void;
-  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | null
-    >
-  >;
-  userAuth: UserAuth;
-};
-
-const ModulesBoardView: React.FC<Props> = ({
-  issues,
-  members,
-  openCreateIssueModal,
-  openIssuesListModal,
-  handleDeleteIssue,
-  setPreloadedData,
-  userAuth,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const handleOnDragEnd = useCallback(
-    (result: DropResult) => {
-      if (!result.destination) return;
-      const { source, destination } = result;
-
-      if (source.droppableId !== destination.droppableId) {
-        const sourceGroup = source.droppableId; // source group id
-        const destinationGroup = destination.droppableId; // destination group id
-        if (!sourceGroup || !destinationGroup) return;
-
-        // removed/dragged item
-        const removedItem = groupedByIssues[source.droppableId][source.index];
-
-        if (selectedGroup === "priority") {
-          // update the removed item for mutation
-          removedItem.priority = destinationGroup;
-
-          // patch request
-          issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
-            priority: destinationGroup,
-          });
-        } else if (selectedGroup === "state_detail.name") {
-          const destinationState = states?.find((s) => s.name === destinationGroup);
-          const destinationStateId = destinationState?.id;
-
-          // update the removed item for mutation
-          if (!destinationStateId || !destinationState) return;
-          removedItem.state = destinationStateId;
-          removedItem.state_detail = destinationState;
-
-          // patch request
-          issuesService.patchIssue(workspaceSlug as string, projectId as string, removedItem.id, {
-            state: destinationStateId,
-          });
-
-          if (!moduleId) return;
-          mutate<ModuleIssueResponse[]>(
-            MODULE_ISSUES(moduleId as string),
-            (prevData) => {
-              if (!prevData) return prevData;
-              const updatedIssues = prevData.map((issue) => {
-                if (issue.issue_detail.id === removedItem.id) {
-                  return {
-                    ...issue,
-                    issue_detail: removedItem,
-                  };
-                }
-                return issue;
-              });
-              return [...updatedIssues];
-            },
-            false
-          );
-        }
-
-        // remove item from the source group
-        groupedByIssues[source.droppableId].splice(source.index, 1);
-        // add item to the destination group
-        groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
-      }
-    },
-    [workspaceSlug, groupedByIssues, projectId, selectedGroup, states, moduleId]
-  );
-
-  if (issueView !== "kanban") return <></>;
-
-  return (
-    <>
-      {groupedByIssues ? (
-        <div className="h-[calc(100vh-157px)] lg:h-[calc(100vh-115px)] w-full">
-          <DragDropContext onDragEnd={handleOnDragEnd}>
-            <div className="h-full w-full overflow-hidden">
-              <div className="h-full w-full">
-                <div className="flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
-                  {Object.keys(groupedByIssues).map((singleGroup) => (
-                    <SingleBoard
-                      key={singleGroup}
-                      selectedGroup={selectedGroup}
-                      groupTitle={singleGroup}
-                      createdBy={
-                        selectedGroup === "created_by"
-                          ? members?.find((m) => m.member.id === singleGroup)?.member.first_name ??
-                            "loading..."
-                          : null
-                      }
-                      groupedByIssues={groupedByIssues}
-                      bgColor={
-                        selectedGroup === "state_detail.name"
-                          ? states?.find((s) => s.name === singleGroup)?.color
-                          : "#000000"
-                      }
-                      properties={properties}
-                      openIssuesListModal={openIssuesListModal}
-                      openCreateIssueModal={openCreateIssueModal}
-                      handleDeleteIssue={handleDeleteIssue}
-                      setPreloadedData={setPreloadedData}
-                      stateId={
-                        selectedGroup === "state_detail.name"
-                          ? states?.find((s) => s.name === singleGroup)?.id ?? null
-                          : null
-                      }
-                      userAuth={userAuth}
-                    />
-                  ))}
-                </div>
-              </div>
-            </div>
-          </DragDropContext>
-        </div>
-      ) : (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ModulesBoardView;
diff --git a/apps/app/components/project/modules/board-view/single-board.tsx b/apps/app/components/project/modules/board-view/single-board.tsx
deleted file mode 100644
index f6f1cebb8..000000000
--- a/apps/app/components/project/modules/board-view/single-board.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-beautiful-dnd
-import { Draggable } from "react-beautiful-dnd";
-// services
-import workspaceService from "services/workspace.service";
-// components
-import SingleIssue from "components/common/board-view/single-issue";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import BoardHeader from "components/common/board-view/board-header";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// types
-import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, UserAuth } from "types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  properties: Properties;
-  groupedByIssues: {
-    [key: string]: IIssue[];
-  };
-  selectedGroup: NestedKeyOf<IIssue> | null;
-  groupTitle: string;
-  createdBy: string | null;
-  bgColor?: string;
-  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: () => void;
-  handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | null
-    >
-  >;
-  stateId: string | null;
-  userAuth: UserAuth;
-};
-
-const SingleModuleBoard: React.FC<Props> = ({
-  properties,
-  groupedByIssues,
-  selectedGroup,
-  groupTitle,
-  createdBy,
-  bgColor,
-  openCreateIssueModal,
-  openIssuesListModal,
-  handleDeleteIssue,
-  setPreloadedData,
-  stateId,
-  userAuth,
-}) => {
-  // Collapse/Expand
-  const [isCollapsed, setIsCollapsed] = useState(true);
-
-  const router = useRouter();
-  const { workspaceSlug, moduleId } = router.query;
-
-  if (selectedGroup === "priority")
-    groupTitle === "high"
-      ? (bgColor = "#dc2626")
-      : groupTitle === "medium"
-      ? (bgColor = "#f97316")
-      : groupTitle === "low"
-      ? (bgColor = "#22c55e")
-      : (bgColor = "#ff0000");
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  return (
-    <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
-        <BoardHeader
-          addIssueToState={() => {
-            openCreateIssueModal();
-            if (selectedGroup !== null) {
-              setPreloadedData({
-                state: stateId !== null ? stateId : undefined,
-                [selectedGroup]: groupTitle,
-                actionType: "createIssue",
-              });
-            }
-          }}
-          bgColor={bgColor ?? ""}
-          createdBy={createdBy}
-          groupTitle={groupTitle}
-          groupedByIssues={groupedByIssues}
-          isCollapsed={isCollapsed}
-          setIsCollapsed={setIsCollapsed}
-          selectedGroup={selectedGroup}
-        />
-        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-          {(provided, snapshot) => (
-            <div
-              className={`mt-3 h-full space-y-3 overflow-y-auto px-3 pb-3 ${
-                snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
-              } ${!isCollapsed ? "hidden" : "block"}`}
-              {...provided.droppableProps}
-              ref={provided.innerRef}
-            >
-              {groupedByIssues[groupTitle].map((issue, index: number) => {
-                const assignees = [
-                  ...(issue?.assignees_list ?? []),
-                  ...(issue?.assignees ?? []),
-                ]?.map((assignee) => {
-                  const tempPerson = people?.find((p) => p.member.id === assignee)?.member;
-
-                  return tempPerson;
-                });
-
-                return (
-                  <Draggable key={issue.id} draggableId={issue.id} index={index}>
-                    {(provided, snapshot) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        <SingleIssue
-                          type="module"
-                          typeId={moduleId as string}
-                          issue={issue}
-                          properties={properties}
-                          snapshot={snapshot}
-                          assignees={assignees}
-                          people={people}
-                          handleDeleteIssue={handleDeleteIssue}
-                          userAuth={userAuth}
-                        />
-                      </div>
-                    )}
-                  </Draggable>
-                );
-              })}
-              {provided.placeholder}
-              <CustomMenu
-                label={
-                  <span className="flex items-center gap-1">
-                    <PlusIcon className="h-3 w-3" />
-                    Add issue
-                  </span>
-                }
-                className="mt-1"
-                optionsPosition="left"
-                noBorder
-              >
-                <CustomMenu.MenuItem
-                  onClick={() => {
-                    openCreateIssueModal();
-                    if (selectedGroup !== null) {
-                      setPreloadedData({
-                        state: stateId !== null ? stateId : undefined,
-                        [selectedGroup]: groupTitle,
-                        actionType: "createIssue",
-                      });
-                    }
-                  }}
-                >
-                  Create new
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
-                  Add an existing issue
-                </CustomMenu.MenuItem>
-              </CustomMenu>
-            </div>
-          )}
-        </StrictModeDroppable>
-      </div>
-    </div>
-  );
-};
-
-export default SingleModuleBoard;
diff --git a/apps/app/components/project/modules/create-update-module-modal/index.tsx b/apps/app/components/project/modules/create-update-module-modal/index.tsx
deleted file mode 100644
index d4482ab9e..000000000
--- a/apps/app/components/project/modules/create-update-module-modal/index.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// components
-import SelectLead from "components/project/modules/create-update-module-modal/select-lead";
-import SelectMembers from "components/project/modules/create-update-module-modal/select-members";
-import SelectStatus from "components/project/modules/create-update-module-modal/select-status";
-// ui
-import { Button, CustomDatePicker, Input, TextArea } from "components/ui";
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useToast from "hooks/use-toast";
-// helpers
-import { renderDateFormat } from "helpers/date-time.helper";
-// types
-import type { IModule } from "types";
-// fetch-keys
-import { MODULE_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  projectId: string;
-  data?: IModule;
-};
-
-const defaultValues: Partial<IModule> = {
-  name: "",
-  description: "",
-  status: null,
-  lead: null,
-  members_list: [],
-};
-
-const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, projectId }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    control,
-    reset,
-    setError,
-  } = useForm<IModule>({
-    defaultValues,
-  });
-
-  const onSubmit = async (formData: IModule) => {
-    if (!workspaceSlug) return;
-    const payload = {
-      ...formData,
-      start_date: formData.start_date ? renderDateFormat(formData.start_date) : null,
-      target_date: formData.target_date ? renderDateFormat(formData.target_date) : null,
-    };
-    if (!data) {
-      await modulesService
-        .createModule(workspaceSlug as string, projectId, payload)
-        .then(() => {
-          mutate(MODULE_LIST(projectId));
-          handleClose();
-
-          setToastAlert({
-            title: "Success",
-            type: "success",
-            message: "Module created successfully",
-          });
-        })
-        .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof typeof defaultValues, {
-              message: err[key].join(", "),
-            });
-          });
-        });
-    } else {
-      await modulesService
-        .updateModule(workspaceSlug as string, projectId, data.id, payload)
-        .then((res) => {
-          mutate<IModule[]>(
-            MODULE_LIST(projectId),
-            (prevData) => {
-              const newData = prevData?.map((item) => {
-                if (item.id === res.id) {
-                  return res;
-                }
-                return item;
-              });
-              return newData;
-            },
-            false
-          );
-          handleClose();
-
-          setToastAlert({
-            title: "Success",
-            type: "success",
-            message: "Module updated successfully",
-          });
-        })
-        .catch((err) => {
-          Object.keys(err).map((key) => {
-            setError(key as keyof typeof defaultValues, {
-              message: err[key].join(", "),
-            });
-          });
-        });
-    }
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    reset(defaultValues);
-  };
-
-  useEffect(() => {
-    if (data) {
-      setIsOpen(true);
-      reset(data);
-    } else {
-      reset(defaultValues);
-    }
-  }, [data, setIsOpen, reset]);
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
-                      {data ? "Update" : "Create"} Module
-                    </Dialog.Title>
-                    <div className="space-y-3">
-                      <div>
-                        <Input
-                          id="name"
-                          label="Name"
-                          name="name"
-                          type="name"
-                          placeholder="Enter name"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          validations={{
-                            required: "Name is required",
-                            maxLength: {
-                              value: 255,
-                              message: "Name should be less than 255 characters",
-                            },
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <TextArea
-                          id="description"
-                          name="description"
-                          label="Description"
-                          placeholder="Enter description"
-                          error={errors.description}
-                          register={register}
-                        />
-                      </div>
-                      <div className="flex gap-x-2">
-                        <div className="w-full">
-                          <h6 className="text-gray-500">Start Date</h6>
-                          <div className="w-full">
-                            <Controller
-                              control={control}
-                              name="start_date"
-                              rules={{ required: "Start date is required" }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomDatePicker
-                                  renderAs="input"
-                                  value={value}
-                                  onChange={onChange}
-                                  error={errors.start_date ? true : false}
-                                />
-                              )}
-                            />
-                            {errors.start_date && (
-                              <h6 className="text-sm text-red-500">{errors.start_date.message}</h6>
-                            )}
-                          </div>
-                        </div>
-                        <div className="w-full">
-                          <h6 className="text-gray-500">Target Date</h6>
-                          <div className="w-full">
-                            <Controller
-                              control={control}
-                              name="target_date"
-                              rules={{ required: "Target date is required" }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomDatePicker
-                                  renderAs="input"
-                                  value={value}
-                                  onChange={onChange}
-                                  error={errors.target_date ? true : false}
-                                />
-                              )}
-                            />
-                            {errors.target_date && (
-                              <h6 className="text-sm text-red-500">{errors.target_date.message}</h6>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex flex-wrap items-center gap-2">
-                        <SelectStatus control={control} error={errors.status} />
-                        <SelectLead control={control} />
-                        <SelectMembers control={control} />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <Button theme="secondary" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button type="submit" disabled={isSubmitting}>
-                      {data
-                        ? isSubmitting
-                          ? "Updating Module..."
-                          : "Update Module"
-                        : isSubmitting
-                        ? "Creating Module..."
-                        : "Create Module"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-export default CreateUpdateModuleModal;
diff --git a/apps/app/components/project/modules/list-view/index.tsx b/apps/app/components/project/modules/list-view/index.tsx
deleted file mode 100644
index 5abbcc31c..000000000
--- a/apps/app/components/project/modules/list-view/index.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-
-// icons
-import { Disclosure, Transition } from "@headlessui/react";
-import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
-// services
-import workspaceService from "services/workspace.service";
-import stateService from "services/state.service";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
-import useIssueView from "hooks/use-issue-view";
-// components
-import SingleListIssue from "components/common/list-view/single-issue";
-// ui
-import { CustomMenu, Spinner } from "components/ui";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { IIssue, IWorkspaceMember, UserAuth } from "types";
-// fetch-keys
-import { STATE_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  issues: IIssue[];
-  openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
-  openIssuesListModal: () => void;
-  removeIssueFromModule: (issueId: string) => void;
-  setPreloadedData: React.Dispatch<
-    React.SetStateAction<
-      | (Partial<IIssue> & {
-          actionType: "createIssue" | "edit" | "delete";
-        })
-      | null
-    >
-  >;
-  userAuth: UserAuth;
-};
-
-const ModulesListView: React.FC<Props> = ({
-  issues,
-  openCreateIssueModal,
-  openIssuesListModal,
-  removeIssueFromModule,
-  setPreloadedData,
-  userAuth,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-  const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
-
-  const { data: people } = useSWR<IWorkspaceMember[]>(
-    workspaceSlug ? WORKSPACE_MEMBERS : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const { data: states } = useSWR(
-    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  if (issueView !== "list") return <></>;
-
-  return (
-    <div className="flex h-full flex-col space-y-5">
-      {Object.keys(groupedByIssues).map((singleGroup) => {
-        const stateId =
-          selectedGroup === "state_detail.name"
-            ? states?.find((s) => s.name === singleGroup)?.id ?? null
-            : null;
-
-        return (
-          <Disclosure key={singleGroup} as="div" defaultOpen>
-            {({ open }) => (
-              <div className="rounded-lg bg-white">
-                <div className="rounded-t-lg bg-gray-100 px-4 py-3">
-                  <Disclosure.Button>
-                    <div className="flex items-center gap-x-2">
-                      <span>
-                        <ChevronDownIcon
-                          className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
-                        />
-                      </span>
-                      {selectedGroup !== null ? (
-                        <h2 className="font-medium capitalize leading-5">
-                          {singleGroup === null || singleGroup === "null"
-                            ? selectedGroup === "priority" && "No priority"
-                            : addSpaceIfCamelCase(singleGroup)}
-                        </h2>
-                      ) : (
-                        <h2 className="font-medium leading-5">All Issues</h2>
-                      )}
-                      <p className="text-sm text-gray-500">
-                        {groupedByIssues[singleGroup as keyof IIssue].length}
-                      </p>
-                    </div>
-                  </Disclosure.Button>
-                </div>
-                <Transition
-                  show={open}
-                  enter="transition duration-100 ease-out"
-                  enterFrom="transform opacity-0"
-                  enterTo="transform opacity-100"
-                  leave="transition duration-75 ease-out"
-                  leaveFrom="transform opacity-100"
-                  leaveTo="transform opacity-0"
-                >
-                  <Disclosure.Panel>
-                    <div className="divide-y-2">
-                      {groupedByIssues[singleGroup] ? (
-                        groupedByIssues[singleGroup].length > 0 ? (
-                          groupedByIssues[singleGroup].map((issue) => {
-                            const assignees = [
-                              ...(issue?.assignees_list ?? []),
-                              ...(issue?.assignees ?? []),
-                            ]?.map((assignee) => {
-                              const tempPerson = people?.find(
-                                (p) => p.member.id === assignee
-                              )?.member;
-
-                              return {
-                                avatar: tempPerson?.avatar,
-                                first_name: tempPerson?.first_name,
-                                email: tempPerson?.email,
-                              };
-                            });
-
-                            return (
-                              <SingleListIssue
-                                key={issue.id}
-                                type="module"
-                                typeId={moduleId as string}
-                                issue={issue}
-                                properties={properties}
-                                editIssue={() => openCreateIssueModal(issue, "edit")}
-                                removeIssue={() => removeIssueFromModule(issue.bridge ?? "")}
-                                userAuth={userAuth}
-                              />
-                            );
-                          })
-                        ) : (
-                          <p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
-                        )
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                        </div>
-                      )}
-                    </div>
-                  </Disclosure.Panel>
-                </Transition>
-                <div className="p-3">
-                  <CustomMenu
-                    label={
-                      <span className="flex items-center gap-1">
-                        <PlusIcon className="h-3 w-3" />
-                        Add issue
-                      </span>
-                    }
-                    optionsPosition="left"
-                    noBorder
-                  >
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        openCreateIssueModal();
-                        if (selectedGroup !== null) {
-                          setPreloadedData({
-                            state: stateId !== null ? stateId : undefined,
-                            [selectedGroup]: singleGroup,
-                            actionType: "createIssue",
-                          });
-                        }
-                      }}
-                    >
-                      Create new
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </div>
-              </div>
-            )}
-          </Disclosure>
-        );
-      })}
-    </div>
-  );
-};
-
-export default ModulesListView;
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index a7908421a..5eb007af0 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -8,8 +8,8 @@ import { useForm, Controller } from "react-hook-form";
 
 import { Dialog, Transition, Listbox } from "@headlessui/react";
 // ui
-import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
-import { Button, CustomSelect, Select, TextArea } from "components/ui";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { Button, CustomSelect, TextArea } from "components/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // services
@@ -17,10 +17,10 @@ import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
 // types
 import { IProjectMemberInvitation } from "types";
-// constants
-import { ROLE } from "constants/";
+// fetch - keys
 import { PROJECT_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
-// icons
+// constants
+import { ROLE } from "constants/workspace";
 
 type Props = {
   isOpen: boolean;
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
index 8fc46c6b0..c58fb608f 100644
--- a/apps/app/components/project/settings/single-label.tsx
+++ b/apps/app/components/project/settings/single-label.tsx
@@ -21,7 +21,7 @@ type Props = {
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  colour: "#ff0000",
+  color: "#ff0000",
 };
 
 const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLabelDelete }) => {
@@ -45,7 +45,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
               <span
                 className="h-3 w-3 flex-shrink-0 rounded-full"
                 style={{
-                  backgroundColor: label.colour,
+                  backgroundColor: label.color,
                 }}
               />
               <h6 className="text-sm">{label.name}</h6>
@@ -68,11 +68,11 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                         open ? "text-gray-900" : "text-gray-500"
                       }`}
                     >
-                      {watch("colour") && watch("colour") !== "" && (
+                      {watch("color") && watch("color") !== "" && (
                         <span
                           className="h-4 w-4 rounded"
                           style={{
-                            backgroundColor: watch("colour") ?? "green",
+                            backgroundColor: watch("color") ?? "green",
                           }}
                         />
                       )}
@@ -89,7 +89,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                     >
                       <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
                         <Controller
-                          name="colour"
+                          name="color"
                           control={control}
                           render={({ field: { value, onChange } }) => (
                             <TwitterPicker
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 769ecf6b9..106cf69b1 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -143,27 +143,34 @@ export const ProjectSidebarList: FC = () => {
                             sidebarCollapse ? "" : "ml-[2.25rem]"
                           } flex flex-col gap-y-1`}
                         >
-                          {navigation(workspaceSlug as string, project?.id).map((item) => (
-                            <Link key={item.name} href={item.href}>
-                              <a
-                                className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
-                                  item.href === router.asPath
-                                    ? "bg-gray-200 text-gray-900"
-                                    : "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
-                                } ${sidebarCollapse ? "justify-center" : ""}`}
-                              >
-                                <item.icon
-                                  className={`h-4 w-4 flex-shrink-0 ${
+                          {navigation(workspaceSlug as string, project?.id).map((item) => {
+                            const hi = "hi";
+
+                            if (item.name === "Cycles" && !project.cycle_view) return;
+                            if (item.name === "Modules" && !project.module_view) return;
+
+                            return (
+                              <Link key={item.name} href={item.href}>
+                                <a
+                                  className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
                                     item.href === router.asPath
-                                      ? "text-gray-900"
-                                      : "text-gray-500 group-hover:text-gray-900"
-                                  } ${!sidebarCollapse ? "mr-3" : ""}`}
-                                  aria-hidden="true"
-                                />
-                                {!sidebarCollapse && item.name}
-                              </a>
-                            </Link>
-                          ))}
+                                      ? "bg-gray-200 text-gray-900"
+                                      : "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
+                                  } ${sidebarCollapse ? "justify-center" : ""}`}
+                                >
+                                  <item.icon
+                                    className={`h-4 w-4 flex-shrink-0 ${
+                                      item.href === router.asPath
+                                        ? "text-gray-900"
+                                        : "text-gray-500 group-hover:text-gray-900"
+                                    } ${!sidebarCollapse ? "mr-3" : ""}`}
+                                    aria-hidden="true"
+                                  />
+                                  {!sidebarCollapse && item.name}
+                                </a>
+                              </Link>
+                            );
+                          })}
                         </Disclosure.Panel>
                       </Transition>
                     </>
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 2bddfe5f6..39558cde6 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -36,6 +36,7 @@ import { Spinner } from "components/ui";
 // components
 import { RichTextToolbar } from "./toolbar";
 import { MentionAutoComplete } from "./mention-autocomplete";
+import { FloatingLinkToolbar } from "./toolbar/link";
 
 export interface IRemirrorRichTextEditor {
   placeholder?: string;
@@ -125,7 +126,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
       new CalloutExtension({ defaultType: "warn" }),
       new CodeBlockExtension(),
       new CodeExtension(),
-      new PlaceholderExtension({ placeholder: placeholder || `Enter text...` }),
+      new PlaceholderExtension({ placeholder: placeholder || "Enter text..." }),
       new HistoryExtension(),
       new LinkExtension({ autoLink: true }),
       new ImageExtension({
@@ -152,7 +153,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     (value: any) => {
       // Clear out old state when setting data from outside
       // This prevents e.g. the user from using CTRL-Z to go back to the old state
-      manager.view.updateState(manager.createState({ content: value }));
+      manager.view.updateState(manager.createState({ content: value ? value : "" }));
     },
     [manager]
   );
@@ -165,6 +166,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     setJsonValue(json);
     onJSONChange(json);
   };
+
   const handleHTMLChange = (value: string) => {
     setHtmlValue(value);
     onHTMLChange(value);
@@ -194,6 +196,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
             </div>
           )}
           {/* <TableComponents /> */}
+          <FloatingLinkToolbar />
           <MentionAutoComplete mentions={mentions} tags={tags} />
           {<OnChangeJSON onChange={handleJSONChange} />}
           {<OnChangeHTML onChange={handleHTMLChange} />}
diff --git a/apps/app/components/rich-text-editor/toolbar/index.tsx b/apps/app/components/rich-text-editor/toolbar/index.tsx
index f5ff2db70..1167c8d22 100644
--- a/apps/app/components/rich-text-editor/toolbar/index.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/index.tsx
@@ -6,7 +6,6 @@ import { BoldButton } from "./bold";
 import { ItalicButton } from "./italic";
 import { UnderlineButton } from "./underline";
 import { StrikeButton } from "./strike";
-import { LinkButton } from "./link";
 // headings
 import HeadingControls from "./heading-controls";
 // list
diff --git a/apps/app/components/rich-text-editor/toolbar/link.tsx b/apps/app/components/rich-text-editor/toolbar/link.tsx
index 8c1d65fdb..bef931520 100644
--- a/apps/app/components/rich-text-editor/toolbar/link.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/link.tsx
@@ -1,241 +1,196 @@
-import { useCommands, useActive } from "@remirror/react";
+import React, {
+  ChangeEvent,
+  HTMLProps,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
-export const LinkButton = () => {
-  const { focus } = useCommands();
+import { createMarkPositioner, LinkExtension, ShortcutHandlerProps } from "remirror/extensions";
+import {
+  CommandButton,
+  FloatingToolbar,
+  FloatingWrapper,
+  useActive,
+  useAttrs,
+  useChainedCommands,
+  useCurrentSelection,
+  useExtensionEvent,
+  useUpdateReason,
+} from "@remirror/react";
 
-  const active = useActive();
+const useLinkShortcut = () => {
+  const [linkShortcut, setLinkShortcut] = useState<ShortcutHandlerProps | undefined>();
+  const [isEditing, setIsEditing] = useState(false);
 
-  return (
-    <button
-      type="button"
-      onClick={() => {
-        // toggleLink();
-        focus();
-      }}
-      className={`${active.link() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        height="18"
-        width="18"
-        fill="black"
-        viewBox="0 0 48 48"
-      >
-        <path d="M22.5 34H14q-4.15 0-7.075-2.925T4 24q0-4.15 2.925-7.075T14 14h8.5v3H14q-2.9 0-4.95 2.05Q7 21.1 7 24q0 2.9 2.05 4.95Q11.1 31 14 31h8.5Zm-6.25-8.5v-3h15.5v3ZM25.5 34v-3H34q2.9 0 4.95-2.05Q41 26.9 41 24q0-2.9-2.05-4.95Q36.9 17 34 17h-8.5v-3H34q4.15 0 7.075 2.925T44 24q0 4.15-2.925 7.075T34 34Z" />
-      </svg>
-    </button>
+  useExtensionEvent(
+    LinkExtension,
+    "onShortcut",
+    useCallback(
+      (props) => {
+        if (!isEditing) {
+          setIsEditing(true);
+        }
+
+        return setLinkShortcut(props);
+      },
+      [isEditing]
+    )
+  );
+
+  return { linkShortcut, isEditing, setIsEditing };
+};
+
+const useFloatingLinkState = () => {
+  const chain = useChainedCommands();
+  const { isEditing, linkShortcut, setIsEditing } = useLinkShortcut();
+  const { to, empty } = useCurrentSelection();
+
+  const url = (useAttrs().link()?.href as string) ?? "";
+  const [href, setHref] = useState<string>(url);
+
+  // A positioner which only shows for links.
+  const linkPositioner = useMemo(() => createMarkPositioner({ type: "link" }), []);
+
+  const onRemove = useCallback(() => chain.removeLink().focus().run(), [chain]);
+
+  const updateReason = useUpdateReason();
+
+  useLayoutEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    if (updateReason.doc || updateReason.selection) {
+      setIsEditing(false);
+    }
+  }, [isEditing, setIsEditing, updateReason.doc, updateReason.selection]);
+
+  useEffect(() => {
+    setHref(url);
+  }, [url]);
+
+  const submitHref = useCallback(() => {
+    setIsEditing(false);
+    const range = linkShortcut ?? undefined;
+
+    if (href === "") {
+      chain.removeLink();
+    } else {
+      chain.updateLink({ href, auto: false }, range);
+    }
+
+    chain.focus(range?.to ?? to).run();
+  }, [setIsEditing, linkShortcut, chain, href, to]);
+
+  const cancelHref = useCallback(() => {
+    setIsEditing(false);
+  }, [setIsEditing]);
+
+  const clickEdit = useCallback(() => {
+    if (empty) {
+      chain.selectLink();
+    }
+
+    setIsEditing(true);
+  }, [chain, empty, setIsEditing]);
+
+  return useMemo(
+    () => ({
+      href,
+      setHref,
+      linkShortcut,
+      linkPositioner,
+      isEditing,
+      clickEdit,
+      onRemove,
+      submitHref,
+      cancelHref,
+    }),
+    [href, linkShortcut, linkPositioner, isEditing, clickEdit, onRemove, submitHref, cancelHref]
   );
 };
 
-// import type { ChangeEvent, HTMLProps, KeyboardEvent } from 'react';
-// import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-// import { createMarkPositioner, LinkExtension, ShortcutHandlerProps } from 'remirror/extensions';
-// import {
-//   CommandButton,
-//   EditorComponent,
-//   FloatingToolbar,
-//   FloatingWrapper,
-//   Remirror,
-//   ThemeProvider,
-//   useActive,
-//   useAttrs,
-//   useChainedCommands,
-//   useCurrentSelection,
-//   useExtensionEvent,
-//   useRemirror,
-//   useUpdateReason,
-// } from '@remirror/react';
+const DelayAutoFocusInput = ({ autoFocus, ...rest }: HTMLProps<HTMLInputElement>) => {
+  const inputRef = useRef<HTMLInputElement>(null);
 
-// function useLinkShortcut() {
-//   const [linkShortcut, setLinkShortcut] = useState<ShortcutHandlerProps | undefined>();
-//   const [isEditing, setIsEditing] = useState(false);
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
 
-//   useExtensionEvent(
-//     LinkExtension,
-//     'onShortcut',
-//     useCallback(
-//       (props) => {
-//         if (!isEditing) {
-//           setIsEditing(true);
-//         }
+    const frame = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
 
-//         return setLinkShortcut(props);
-//       },
-//       [isEditing],
-//     ),
-//   );
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [autoFocus]);
 
-//   return { linkShortcut, isEditing, setIsEditing };
-// }
+  return <input ref={inputRef} {...rest} />;
+};
 
-// function useFloatingLinkState() {
-//   const chain = useChainedCommands();
-//   const { isEditing, linkShortcut, setIsEditing } = useLinkShortcut();
-//   const { to, empty } = useCurrentSelection();
+export const FloatingLinkToolbar = () => {
+  const { isEditing, linkPositioner, clickEdit, onRemove, submitHref, href, setHref, cancelHref } =
+    useFloatingLinkState();
+  const active = useActive();
+  const activeLink = active.link();
+  const { empty } = useCurrentSelection();
 
-//   const url = (useAttrs().link()?.href as string) ?? '';
-//   const [href, setHref] = useState<string>(url);
+  const handleClickEdit = useCallback(() => {
+    clickEdit();
+  }, [clickEdit]);
 
-//   // A positioner which only shows for links.
-//   const linkPositioner = useMemo(() => createMarkPositioner({ type: 'link' }), []);
+  const linkEditButtons = activeLink ? (
+    <>
+      <CommandButton
+        commandName="updateLink"
+        onSelect={handleClickEdit}
+        icon="pencilLine"
+        enabled
+      />
+      <CommandButton commandName="removeLink" onSelect={onRemove} icon="linkUnlink" enabled />
+    </>
+  ) : (
+    <CommandButton commandName="updateLink" onSelect={handleClickEdit} icon="link" enabled />
+  );
 
-//   const onRemove = useCallback(() => {
-//     return chain.removeLink().focus().run();
-//   }, [chain]);
+  return (
+    <>
+      {!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
+      {!isEditing && empty && (
+        <FloatingToolbar positioner={linkPositioner}>{linkEditButtons}</FloatingToolbar>
+      )}
 
-//   const updateReason = useUpdateReason();
+      <FloatingWrapper
+        positioner="always"
+        placement="bottom"
+        enabled={isEditing}
+        renderOutsideEditor
+      >
+        <DelayAutoFocusInput
+          autoFocus
+          placeholder="Enter link..."
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setHref(e.target.value)}
+          value={href}
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+            const { code } = e;
 
-//   useLayoutEffect(() => {
-//     if (!isEditing) {
-//       return;
-//     }
+            if (code === "Enter") {
+              submitHref();
+            }
 
-//     if (updateReason.doc || updateReason.selection) {
-//       setIsEditing(false);
-//     }
-//   }, [isEditing, setIsEditing, updateReason.doc, updateReason.selection]);
-
-//   useEffect(() => {
-//     setHref(url);
-//   }, [url]);
-
-//   const submitHref = useCallback(() => {
-//     setIsEditing(false);
-//     const range = linkShortcut ?? undefined;
-
-//     if (href === '') {
-//       chain.removeLink();
-//     } else {
-//       chain.updateLink({ href, auto: false }, range);
-//     }
-
-//     chain.focus(range?.to ?? to).run();
-//   }, [setIsEditing, linkShortcut, chain, href, to]);
-
-//   const cancelHref = useCallback(() => {
-//     setIsEditing(false);
-//   }, [setIsEditing]);
-
-//   const clickEdit = useCallback(() => {
-//     if (empty) {
-//       chain.selectLink();
-//     }
-
-//     setIsEditing(true);
-//   }, [chain, empty, setIsEditing]);
-
-//   return useMemo(
-//     () => ({
-//       href,
-//       setHref,
-//       linkShortcut,
-//       linkPositioner,
-//       isEditing,
-//       clickEdit,
-//       onRemove,
-//       submitHref,
-//       cancelHref,
-//     }),
-//     [href, linkShortcut, linkPositioner, isEditing, clickEdit, onRemove, submitHref, cancelHref],
-//   );
-// }
-
-// const DelayAutoFocusInput = ({ autoFocus, ...rest }: HTMLProps<HTMLInputElement>) => {
-//   const inputRef = useRef<HTMLInputElement>(null);
-
-//   useEffect(() => {
-//     if (!autoFocus) {
-//       return;
-//     }
-
-//     const frame = window.requestAnimationFrame(() => {
-//       inputRef.current?.focus();
-//     });
-
-//     return () => {
-//       window.cancelAnimationFrame(frame);
-//     };
-//   }, [autoFocus]);
-
-//   return <input ref={inputRef} {...rest} />;
-// };
-
-// const FloatingLinkToolbar = () => {
-//   const { isEditing, linkPositioner, clickEdit, onRemove, submitHref, href, setHref, cancelHref } =
-//     useFloatingLinkState();
-//   const active = useActive();
-//   const activeLink = active.link();
-//   const { empty } = useCurrentSelection();
-
-//   const handleClickEdit = useCallback(() => {
-//     clickEdit();
-//   }, [clickEdit]);
-
-//   const linkEditButtons = activeLink ? (
-//     <>
-//       <CommandButton
-//         commandName='updateLink'
-//         onSelect={handleClickEdit}
-//         icon='pencilLine'
-//         enabled
-//       />
-//       <CommandButton commandName='removeLink' onSelect={onRemove} icon='linkUnlink' enabled />
-//     </>
-//   ) : (
-//     <CommandButton commandName='updateLink' onSelect={handleClickEdit} icon='link' enabled />
-//   );
-
-//   return (
-//     <>
-//       {!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
-//       {!isEditing && empty && (
-//         <FloatingToolbar positioner={linkPositioner}>{linkEditButtons}</FloatingToolbar>
-//       )}
-
-//       <FloatingWrapper
-//         positioner='always'
-//         placement='bottom'
-//         enabled={isEditing}
-//         renderOutsideEditor
-//       >
-//         <DelayAutoFocusInput
-//           style={{ zIndex: 20 }}
-//           autoFocus
-//           placeholder='Enter link...'
-//           onChange={(event: ChangeEvent<HTMLInputElement>) => setHref(event.target.value)}
-//           value={href}
-//           onKeyPress={(event: KeyboardEvent<HTMLInputElement>) => {
-//             const { code } = event;
-
-//             if (code === 'Enter') {
-//               submitHref();
-//             }
-
-//             if (code === 'Escape') {
-//               cancelHref();
-//             }
-//           }}
-//         />
-//       </FloatingWrapper>
-//     </>
-//   );
-// };
-
-// const EditDialog = (): JSX.Element => {
-//   const { manager, state } = useRemirror({
-//     extensions: () => [new LinkExtension({ autoLink: true })],
-//     content: `Click this <a href="https://remirror.io" target="_blank">link</a> to edit it`,
-//     stringHandler: 'html',
-//   });
-
-//   return (
-//     <ThemeProvider>
-//       <Remirror manager={manager} initialContent={state}>
-//         <EditorComponent />
-//         <FloatingLinkToolbar />
-//       </Remirror>
-//     </ThemeProvider>
-//   );
-// };
-
-// export default EditDialog;
+            if (code === "Escape") {
+              cancelHref();
+            }
+          }}
+        />
+      </FloatingWrapper>
+    </>
+  );
+};
diff --git a/apps/app/components/rich-text-editor/toolbar/undo.tsx b/apps/app/components/rich-text-editor/toolbar/undo.tsx
index bed64fc9c..6c35b96ae 100644
--- a/apps/app/components/rich-text-editor/toolbar/undo.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/undo.tsx
@@ -4,6 +4,7 @@ import { useCommands } from "@remirror/react";
 
 export const UndoButton = () => {
   const { undo } = useCommands();
+
   return (
     <button
       type="button"
diff --git a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx b/apps/app/components/states/create-update-state-inline.tsx
similarity index 98%
rename from apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
rename to apps/app/components/states/create-update-state-inline.tsx
index dcc5a2fcf..ddeee199a 100644
--- a/apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -13,13 +13,13 @@ import stateService from "services/state.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button, CustomSelect, Input, Select } from "components/ui";
+import { Button, CustomSelect, Input } from "components/ui";
 // types
 import type { IState } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
 // constants
-import { GROUP_CHOICES } from "constants/";
+import { GROUP_CHOICES } from "constants/project";
 
 type Props = {
   workspaceSlug?: string;
diff --git a/apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx b/apps/app/components/states/create-update-state-modal.tsx
similarity index 97%
rename from apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx
rename to apps/app/components/states/create-update-state-modal.tsx
index f621a2ad9..c757c501f 100644
--- a/apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx
+++ b/apps/app/components/states/create-update-state-modal.tsx
@@ -4,22 +4,24 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-
+// react-color
 import { TwitterPicker } from "react-color";
-
+// headless ui
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import type { IState } from "types";
 import stateService from "services/state.service";
-// fetch keys
-import { STATE_LIST } from "constants/fetch-keys";
-// constants
-import { GROUP_CHOICES } from "constants/";
 // ui
 import { Button, Input, Select, TextArea } from "components/ui";
 // icons
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+// types
+import type { IState } from "types";
+// fetch keys
+import { STATE_LIST } from "constants/fetch-keys";
+// constants
+import { GROUP_CHOICES } from "constants/project";
 
 // types
 type Props = {
@@ -36,7 +38,12 @@ const defaultValues: Partial<IState> = {
   group: "backlog",
 };
 
-const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
+export const CreateUpdateStateModal: React.FC<Props> = ({
+  isOpen,
+  data,
+  projectId,
+  handleClose,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -194,7 +201,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
                                       style={{
                                         backgroundColor: watch("color") ?? "green",
                                       }}
-                                     />
+                                    />
                                   )}
                                   <ChevronDownIcon
                                     className={`ml-2 h-5 w-5 group-hover:text-gray-500 ${
@@ -266,5 +273,3 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
     </Transition.Root>
   );
 };
-
-export default CreateUpdateStateModal;
diff --git a/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx b/apps/app/components/states/delete-state-modal.tsx
similarity index 98%
rename from apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
rename to apps/app/components/states/delete-state-modal.tsx
index ecf3e7874..b517ddbf9 100644
--- a/apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -28,7 +28,7 @@ type Props = {
   data: IState | null;
 };
 
-const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
+export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
 
@@ -175,5 +175,3 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
     </Transition.Root>
   );
 };
-
-export default ConfirmStateDeletion;
diff --git a/apps/app/components/states/index.ts b/apps/app/components/states/index.ts
new file mode 100644
index 000000000..63bb55a9c
--- /dev/null
+++ b/apps/app/components/states/index.ts
@@ -0,0 +1,3 @@
+export * from "./create-update-state-inline";
+export * from "./create-update-state-modal";
+export * from "./delete-state-modal";
diff --git a/apps/app/components/ui/datepicker.tsx b/apps/app/components/ui/datepicker.tsx
index 9a4494ee4..069543189 100644
--- a/apps/app/components/ui/datepicker.tsx
+++ b/apps/app/components/ui/datepicker.tsx
@@ -1,6 +1,8 @@
 // react-datepicker
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
 
 type Props = {
   renderAs?: "input" | "button";
@@ -30,16 +32,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     selected={value ? new Date(value) : null}
     onChange={(val) => {
       if (!val) onChange(null);
-      else {
-        const year = val.getFullYear();
-        let month: number | string = val.getMonth() + 1;
-        let date: number | string = val.getDate();
-
-        if (date < 10) date = `0${date}`;
-        if (month < 10) month = `0${month}`;
-
-        onChange(`${year}-${month}-${date}`);
-      }
+      else onChange(renderDateFormat(val));
     }}
     className={`${className} ${
       renderAs === "input"
diff --git a/apps/app/components/ui/progress-bar/index.tsx b/apps/app/components/ui/progress-bar/index.tsx
new file mode 100644
index 000000000..0bebcb93c
--- /dev/null
+++ b/apps/app/components/ui/progress-bar/index.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+type Props = {
+  maxValue?: number;
+  value?: number;
+  radius?: number;
+  strokeWidth?: number;
+  activeStrokeColor?: string;
+  inactiveStrokeColor?: string;
+};
+
+const ProgressBar: React.FC<Props> = ({
+  maxValue = 0,
+  value = 0,
+  radius = 8,
+  strokeWidth = 2,
+  activeStrokeColor = "#3e98c7",
+  inactiveStrokeColor = "#ddd",
+}) => {
+  // PIE Calc Fn
+  const generatePie = (value: any) => {
+    const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius;
+    const y = radius + Math.sin((2 * Math.PI) / (100 / value)) * radius;
+    const long = value <= 50 ? 0 : 1;
+    const d = `M${radius} ${radius} L${radius} ${0} A${radius} ${radius} 0 ${long} 1 ${y} ${x} Z`;
+
+    return d;
+  };
+
+  // ----  PIE Area Calc  --------
+  const calculatePieValue = (numberOfBars: any) => {
+    const angle = 360 / numberOfBars;
+    const pieValue = Math.floor(angle / 4);
+    return pieValue < 1 ? 1 : Math.floor(angle / 4);
+  };
+
+  // ----  PIE Render Fn --------
+  const renderPie = (i: any) => {
+    const DIRECTION = -1;
+    // Rotation Calc
+    const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
+    const rotationAngle =
+      -1 * DIRECTION * primaryRotationAngle + i * DIRECTION * primaryRotationAngle;
+    const rotationTransformation = `rotate(${rotationAngle}, ${radius}, ${radius})`;
+    const pieValue = calculatePieValue(maxValue);
+    const dValue = generatePie(pieValue);
+    const fillColor = value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;
+
+    return (
+      <path
+        style={{ opacity: i === 0 ? 0 : 1 }}
+        key={i}
+        d={dValue}
+        fill={fillColor}
+        transform={rotationTransformation}
+      />
+    );
+  };
+
+  // combining the Pies
+  const renderOuterCircle = () => [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+
+  return (
+    <svg width={radius * 2} height={radius * 2}>
+      {renderOuterCircle()}
+      <circle r={radius - strokeWidth} cx={radius} cy={radius} fill="#fff" />
+    </svg>
+  );
+};
+export default ProgressBar;
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 806bdf98b..cd6fce3c6 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -92,7 +92,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
           });
           document.dispatchEvent(e);
         }}
-        title="Help"
+        title="Shortcuts"
       >
         <BoltIcon className="h-4 w-4 text-gray-500" />
         {!sidebarCollapse && <span>Shortcuts</span>}
@@ -133,7 +133,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
           title="Help"
         >
           <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
-          {!sidebarCollapse && <span>Help ?</span>}
+          {!sidebarCollapse && <span>Help?</span>}
         </button>
       </div>
     </div>
diff --git a/apps/app/components/workspace/send-workspace-invitation-modal.tsx b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
index 0e0240987..0446e201c 100644
--- a/apps/app/components/workspace/send-workspace-invitation-modal.tsx
+++ b/apps/app/components/workspace/send-workspace-invitation-modal.tsx
@@ -13,6 +13,8 @@ import useToast from "hooks/use-toast";
 import { IWorkspaceMemberInvitation } from "types";
 // fetch keys
 import { WORKSPACE_INVITATIONS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
 
 type Props = {
   isOpen: boolean;
@@ -21,13 +23,6 @@ type Props = {
   members: any[];
 };
 
-const ROLE = {
-  5: "Guest",
-  10: "Viewer",
-  15: "Member",
-  20: "Admin",
-};
-
 const defaultValues: Partial<IWorkspaceMemberInvitation> = {
   email: "",
   role: 5,
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index 37466673e..77df1bc97 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -29,7 +29,7 @@ export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS
 
 export const CYCLE_LIST = (projectId: string) => `CYCLE_LIST_${projectId}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId}`;
-export const CYCLE_DETAIL = "CYCLE_DETAIL";
+export const CYCLE_DETAILS = (cycleId: string) => `CYCLE_DETAIL_${cycleId}`;
 
 export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
 export const STATE_DETAIL = "STATE_DETAIL";
@@ -39,7 +39,7 @@ export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${pro
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
 export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;
-export const MODULE_DETAIL = "MODULE_DETAIL";
+export const MODULE_DETAILS = (moduleId: string) => `MODULE_DETAIL_${moduleId}`;
 
 // Issues
 export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;
diff --git a/apps/app/constants/index.ts b/apps/app/constants/index.ts
deleted file mode 100644
index 49641dc1e..000000000
--- a/apps/app/constants/index.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { IIssue, NestedKeyOf } from "types";
-
-export const PRIORITIES = ["urgent", "high", "medium", "low", null];
-
-export const ROLE = {
-  5: "Guest",
-  10: "Viewer",
-  15: "Member",
-  20: "Admin",
-};
-
-export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
-
-export const GROUP_CHOICES = {
-  backlog: "Backlog",
-  unstarted: "Unstarted",
-  started: "Started",
-  completed: "Completed",
-  cancelled: "Cancelled",
-};
-
-export const MODULE_STATUS = [
-  { label: "Backlog", value: "backlog", color: "#5e6ad2" },
-  { label: "Planned", value: "planned", color: "#26b5ce" },
-  { label: "In Progress", value: "in-progress", color: "#f2c94c" },
-  { label: "Paused", value: "paused", color: "#ff6900" },
-  { label: "Completed", value: "completed", color: "#4cb782" },
-  { label: "Cancelled", value: "cancelled", color: "#cc1d10" },
-];
-
-export const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
-  { name: "State", key: "state_detail.name" },
-  { name: "Priority", key: "priority" },
-  { name: "Created By", key: "created_by" },
-  { name: "None", key: null },
-];
-
-export const orderByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
-  { name: "Last created", key: "created_at" },
-  { name: "Last updated", key: "updated_at" },
-  { name: "Priority", key: "priority" },
-  { name: "None", key: null },
-];
-
-export const filterIssueOptions: Array<{
-  name: string;
-  key: "activeIssue" | "backlogIssue" | null;
-}> = [
-  {
-    name: "All",
-    key: null,
-  },
-  {
-    name: "Active Issues",
-    key: "activeIssue",
-  },
-  {
-    name: "Backlog Issues",
-    key: "backlogIssue",
-  },
-];
-
-export const companySize = [
-  { value: 5, label: "5" },
-  { value: 10, label: "10" },
-  { value: 25, label: "25" },
-  { value: 50, label: "50" },
-];
diff --git a/apps/app/constants/issue.ts b/apps/app/constants/issue.ts
new file mode 100644
index 000000000..00bee0aa8
--- /dev/null
+++ b/apps/app/constants/issue.ts
@@ -0,0 +1,36 @@
+// types
+import { IIssue, NestedKeyOf } from "types";
+
+export const GROUP_BY_OPTIONS: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
+  { name: "State", key: "state_detail.name" },
+  { name: "Priority", key: "priority" },
+  { name: "Created By", key: "created_by" },
+  { name: "None", key: null },
+];
+
+export const ORDER_BY_OPTIONS: Array<{ name: string; key: NestedKeyOf<IIssue> | "manual" | null }> =
+  [
+    // { name: "Manual", key: "manual" },
+    { name: "Last created", key: "created_at" },
+    { name: "Last updated", key: "updated_at" },
+    { name: "Priority", key: "priority" },
+    // { name: "None", key: null },
+  ];
+
+export const FILTER_ISSUE_OPTIONS: Array<{
+  name: string;
+  key: "activeIssue" | "backlogIssue" | null;
+}> = [
+  {
+    name: "All",
+    key: null,
+  },
+  {
+    name: "Active Issues",
+    key: "activeIssue",
+  },
+  {
+    name: "Backlog Issues",
+    key: "backlogIssue",
+  },
+];
diff --git a/apps/app/constants/module.ts b/apps/app/constants/module.ts
new file mode 100644
index 000000000..ffacdfa3c
--- /dev/null
+++ b/apps/app/constants/module.ts
@@ -0,0 +1,8 @@
+export const MODULE_STATUS = [
+  { label: "Backlog", value: "backlog", color: "#5e6ad2" },
+  { label: "Planned", value: "planned", color: "#26b5ce" },
+  { label: "In Progress", value: "in-progress", color: "#f2c94c" },
+  { label: "Paused", value: "paused", color: "#ff6900" },
+  { label: "Completed", value: "completed", color: "#4cb782" },
+  { label: "Cancelled", value: "cancelled", color: "#cc1d10" },
+];
diff --git a/apps/app/constants/project.ts b/apps/app/constants/project.ts
new file mode 100644
index 000000000..fee47e28d
--- /dev/null
+++ b/apps/app/constants/project.ts
@@ -0,0 +1,11 @@
+export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
+
+export const GROUP_CHOICES = {
+  backlog: "Backlog",
+  unstarted: "Unstarted",
+  started: "Started",
+  completed: "Completed",
+  cancelled: "Cancelled",
+};
+
+export const PRIORITIES = ["urgent", "high", "medium", "low", null];
diff --git a/apps/app/constants/workspace.ts b/apps/app/constants/workspace.ts
new file mode 100644
index 000000000..0feb114cb
--- /dev/null
+++ b/apps/app/constants/workspace.ts
@@ -0,0 +1,13 @@
+export const ROLE = {
+  5: "Guest",
+  10: "Viewer",
+  15: "Member",
+  20: "Admin",
+};
+
+export const COMPANY_SIZE = [
+  { value: 5, label: "5" },
+  { value: 10, label: "10" },
+  { value: 25, label: "25" },
+  { value: 50, label: "50" },
+];
diff --git a/apps/app/contexts/issue-view.context.tsx b/apps/app/contexts/issue-view.context.tsx
index 149c1c31b..c2c655470 100644
--- a/apps/app/contexts/issue-view.context.tsx
+++ b/apps/app/contexts/issue-view.context.tsx
@@ -19,7 +19,7 @@ type IssueViewProps = {
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
-  orderBy: NestedKeyOf<IIssue> | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
 };
 
 type ReducerActionType = {
@@ -34,12 +34,12 @@ type ReducerActionType = {
 };
 
 type ContextType = {
-  orderBy: NestedKeyOf<IIssue> | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
   setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
-  setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
+  setOrderBy: (property: NestedKeyOf<IIssue> | "manual" | null) => void;
   setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
   resetFilterToDefault: () => void;
   setNewFilterDefaultView: () => void;
@@ -51,7 +51,7 @@ type StateType = {
   issueView: "list" | "kanban" | null;
   groupByProperty: NestedKeyOf<IIssue> | null;
   filterIssue: "activeIssue" | "backlogIssue" | null;
-  orderBy: NestedKeyOf<IIssue> | null;
+  orderBy: NestedKeyOf<IIssue> | "manual" | null;
 };
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
 
@@ -219,7 +219,7 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   );
 
   const setOrderBy = useCallback(
-    (property: NestedKeyOf<IIssue> | null) => {
+    (property: NestedKeyOf<IIssue> | "manual" | null) => {
       dispatch({
         type: "SET_ORDER_BY_PROPERTY",
         payload: {
diff --git a/apps/app/helpers/functions.helper.ts b/apps/app/helpers/common.helper.ts
similarity index 100%
rename from apps/app/helpers/functions.helper.ts
rename to apps/app/helpers/common.helper.ts
diff --git a/apps/app/helpers/date-time.helper.ts b/apps/app/helpers/date-time.helper.ts
index e84a81390..fa490d5d9 100644
--- a/apps/app/helpers/date-time.helper.ts
+++ b/apps/app/helpers/date-time.helper.ts
@@ -1,4 +1,6 @@
-export const renderDateFormat = (date: string | Date) => {
+export const renderDateFormat = (date: string | Date | null) => {
+  if (!date) return "N/A";
+
   var d = new Date(date),
     month = "" + (d.getMonth() + 1),
     day = "" + d.getDate(),
diff --git a/apps/app/hooks/use-issue-properties.tsx b/apps/app/hooks/use-issue-properties.tsx
index ea6c9f96b..c33cc3e61 100644
--- a/apps/app/hooks/use-issue-properties.tsx
+++ b/apps/app/hooks/use-issue-properties.tsx
@@ -51,6 +51,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
   const updateIssueProperties = useCallback(
     (key: keyof Properties) => {
       if (!workspaceSlug || !user) return;
+
       setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
       if (issueProperties && projectId) {
         mutateIssueProperties(
diff --git a/apps/app/hooks/use-issue-view.tsx b/apps/app/hooks/use-issue-view.tsx
index bb12fd392..671ca36ca 100644
--- a/apps/app/hooks/use-issue-view.tsx
+++ b/apps/app/hooks/use-issue-view.tsx
@@ -11,11 +11,11 @@ import { issueViewContext } from "contexts/issue-view.context";
 // helpers
 import { groupBy, orderArrayBy } from "helpers/array.helper";
 // types
-import { IIssue } from "types";
+import { IIssue, IState } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
 // constants
-import { PRIORITIES } from "constants/";
+import { PRIORITIES } from "constants/project";
 
 const useIssueView = (projectIssues: IIssue[]) => {
   const {
@@ -44,26 +44,52 @@ const useIssueView = (projectIssues: IIssue[]) => {
 
   let groupedByIssues: {
     [key: string]: IIssue[];
-  } = {
+  } = {};
+
+  const groupIssues = (states: IState[], issues: IIssue[]) => ({
     ...(groupByProperty === "state_detail.name"
       ? Object.fromEntries(
           states
             ?.sort((a, b) => a.sequence - b.sequence)
             ?.map((state) => [
               state.name,
-              projectIssues.filter((issue) => issue.state === state.name) ?? [],
+              issues.filter((issue) => issue.state === state.name) ?? [],
             ]) ?? []
         )
       : groupByProperty === "priority"
       ? Object.fromEntries(
           PRIORITIES.map((priority) => [
             priority,
-            projectIssues.filter((issue) => issue.priority === priority) ?? [],
+            issues.filter((issue) => issue.priority === priority) ?? [],
           ])
         )
       : {}),
-    ...groupBy(projectIssues ?? [], groupByProperty ?? ""),
-  };
+    ...groupBy(issues ?? [], groupByProperty ?? ""),
+  });
+
+  groupedByIssues = groupIssues(states ?? [], projectIssues);
+
+  if (filterIssue) {
+    if (filterIssue === "activeIssue") {
+      const filteredStates = states?.filter(
+        (s) => s.group === "started" || s.group === "unstarted"
+      );
+      const filteredIssues = projectIssues.filter(
+        (i) => i.state_detail.group === "started" || i.state_detail.group === "unstarted"
+      );
+
+      groupedByIssues = groupIssues(filteredStates ?? [], filteredIssues);
+    } else if (filterIssue === "backlogIssue") {
+      const filteredStates = states?.filter(
+        (s) => s.group === "backlog" || s.group === "cancelled"
+      );
+      const filteredIssues = projectIssues.filter(
+        (i) => i.state_detail.group === "backlog" || i.state_detail.group === "cancelled"
+      );
+
+      groupedByIssues = groupIssues(filteredStates ?? [], filteredIssues);
+    }
+  }
 
   if (orderBy) {
     groupedByIssues = Object.fromEntries(
@@ -74,36 +100,9 @@ const useIssueView = (projectIssues: IIssue[]) => {
     );
   }
 
-  if (filterIssue !== null) {
-    if (filterIssue === "activeIssue") {
-      const filteredStates = states?.filter(
-        (state) => state.group === "started" || state.group === "unstarted"
-      );
-      groupedByIssues = Object.fromEntries(
-        filteredStates
-          ?.sort((a, b) => a.sequence - b.sequence)
-          ?.map((state) => [
-            state.name,
-            projectIssues.filter((issue) => issue.state === state.id) ?? [],
-          ]) ?? []
-      );
-    } else if (filterIssue === "backlogIssue") {
-      const filteredStates = states?.filter(
-        (state) => state.group === "backlog" || state.group === "cancelled"
-      );
-      groupedByIssues = Object.fromEntries(
-        filteredStates
-          ?.sort((a, b) => a.sequence - b.sequence)
-          ?.map((state) => [
-            state.name,
-            projectIssues.filter((issue) => issue.state === state.id) ?? [],
-          ]) ?? []
-      );
-    }
-  }
-
-  if (groupByProperty === "priority" && orderBy === "priority") {
-    setOrderBy(null);
+  if (groupByProperty === "priority") {
+    delete groupedByIssues.None;
+    if (orderBy === "priority") setOrderBy("created_at");
   }
 
   return {
diff --git a/apps/app/hooks/use-my-issues-filter.tsx b/apps/app/hooks/use-my-issues-filter.tsx
index 583f58ed2..435e78bec 100644
--- a/apps/app/hooks/use-my-issues-filter.tsx
+++ b/apps/app/hooks/use-my-issues-filter.tsx
@@ -13,7 +13,7 @@ import { Properties, NestedKeyOf, IIssue } from "types";
 // fetch-keys
 import { STATE_LIST } from "constants/fetch-keys";
 // constants
-import { PRIORITIES } from "constants/";
+import { PRIORITIES } from "constants/project";
 
 const initialValues: Properties = {
   key: true,
diff --git a/apps/app/layouts/app-layout/index.tsx b/apps/app/layouts/app-layout/index.tsx
index 33d26168c..d6462fdd3 100644
--- a/apps/app/layouts/app-layout/index.tsx
+++ b/apps/app/layouts/app-layout/index.tsx
@@ -1,30 +1,38 @@
 import React, { FC, useState } from "react";
+
 import { useRouter } from "next/router";
+import Link from "next/link";
+
 import useSWR from "swr";
+
 // services
 import projectService from "services/project.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { Spinner } from "components/ui";
+import { Button, Spinner } from "components/ui";
 // components
+import { NotAuthorizedView } from "components/core";
 import CommandPalette from "components/command-palette";
 import { JoinProject } from "components/project";
 // local components
 import Container from "layouts/container";
-import AppSidebar from "./app-sidebar";
-import AppHeader from "./app-header";
+import AppSidebar from "layouts/app-layout/app-sidebar";
+import AppHeader from "layouts/app-layout/app-header";
+import SettingsSidebar from "layouts/settings-layout/settings-sidebar";
+// types
+import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
-export type Meta = {
+type Meta = {
   title?: string | null;
   description?: string | null;
   image?: string | null;
   url?: string | null;
 };
 
-export interface AppLayoutProps {
+type AppLayoutProps = {
   meta?: Meta;
   children: React.ReactNode;
   noPadding?: boolean;
@@ -33,7 +41,60 @@ export interface AppLayoutProps {
   breadcrumbs?: JSX.Element;
   left?: JSX.Element;
   right?: JSX.Element;
-}
+  settingsLayout?: "project" | "workspace";
+  memberType?: UserAuth;
+};
+
+const workspaceLinks: (wSlug: string) => Array<{
+  label: string;
+  href: string;
+}> = (workspaceSlug) => [
+  {
+    label: "General",
+    href: `/${workspaceSlug}/settings`,
+  },
+  {
+    label: "Members",
+    href: `/${workspaceSlug}/settings/members`,
+  },
+  {
+    label: "Billing & Plans",
+    href: `/${workspaceSlug}/settings/billing`,
+  },
+];
+
+const sidebarLinks: (
+  wSlug?: string,
+  pId?: string
+) => Array<{
+  label: string;
+  href: string;
+}> = (workspaceSlug, projectId) => [
+  {
+    label: "General",
+    href: `/${workspaceSlug}/projects/${projectId}/settings`,
+  },
+  {
+    label: "Control",
+    href: `/${workspaceSlug}/projects/${projectId}/settings/control`,
+  },
+  {
+    label: "Members",
+    href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
+  },
+  {
+    label: "Features",
+    href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
+  },
+  {
+    label: "States",
+    href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
+  },
+  {
+    label: "Labels",
+    href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
+  },
+];
 
 const AppLayout: FC<AppLayoutProps> = ({
   meta,
@@ -44,16 +105,18 @@ const AppLayout: FC<AppLayoutProps> = ({
   breadcrumbs,
   left,
   right,
+  settingsLayout,
+  memberType,
 }) => {
   // states
   const [toggleSidebar, setToggleSidebar] = useState(false);
   const [isJoiningProject, setIsJoiningProject] = useState(false);
-  // router
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-  // user info
+
   const { user } = useUser();
-  // fetching Project Members information
+
   const { data: projectMembers, mutate: projectMembersMutate } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
@@ -86,32 +149,71 @@ const AppLayout: FC<AppLayoutProps> = ({
       <CommandPalette />
       <div className="flex h-screen w-full overflow-x-hidden">
         <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-        <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
-          {!noHeader && (
-            <AppHeader
-              breadcrumbs={breadcrumbs}
-              left={left}
-              right={right}
-              setToggleSidebar={setToggleSidebar}
-            />
-          )}
-
-          {projectId && !projectMembers ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <Spinner />
-            </div>
-          ) : isMember ? (
-            <div
-              className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
-                bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
-              }`}
-            >
-              {children}
-            </div>
-          ) : (
-            <JoinProject isJoiningProject={isJoiningProject} handleJoin={handleJoin} />
-          )}
-        </main>
+        {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
+          <NotAuthorizedView
+            actionButton={
+              (memberType?.isViewer || memberType?.isGuest) && projectId ? (
+                <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
+                  <Button size="sm" theme="secondary">
+                    Go to Issues
+                  </Button>
+                </Link>
+              ) : (
+                (memberType?.isViewer || memberType?.isGuest) &&
+                workspaceSlug && (
+                  <Link href={`/${workspaceSlug}`}>
+                    <Button size="sm" theme="secondary">
+                      Go to workspace
+                    </Button>
+                  </Link>
+                )
+              )
+            }
+          />
+        ) : (
+          <>
+            {settingsLayout && (
+              <SettingsSidebar
+                links={
+                  settingsLayout === "workspace"
+                    ? workspaceLinks(workspaceSlug as string)
+                    : sidebarLinks(workspaceSlug as string, projectId as string)
+                }
+              />
+            )}
+            <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+              {!noHeader && (
+                <AppHeader
+                  breadcrumbs={breadcrumbs}
+                  left={left}
+                  right={right}
+                  setToggleSidebar={setToggleSidebar}
+                />
+              )}
+              {projectId && !projectMembers ? (
+                <div className="flex h-full w-full items-center justify-center">
+                  <Spinner />
+                </div>
+              ) : isMember ? (
+                <div
+                  className={`w-full flex-grow ${
+                    noPadding ? "" : settingsLayout ? "p-5 pb-5 lg:px-16 lg:pt-10" : "p-5"
+                  } ${
+                    bg === "primary"
+                      ? "bg-primary"
+                      : bg === "secondary"
+                      ? "bg-secondary"
+                      : "bg-primary"
+                  }`}
+                >
+                  {children}
+                </div>
+              ) : (
+                <JoinProject isJoiningProject={isJoiningProject} handleJoin={handleJoin} />
+              )}
+            </main>
+          </>
+        )}
       </div>
     </Container>
   );
diff --git a/apps/app/layouts/container.tsx b/apps/app/layouts/container.tsx
index aa7de0c59..5adf9430b 100644
--- a/apps/app/layouts/container.tsx
+++ b/apps/app/layouts/container.tsx
@@ -2,8 +2,6 @@ import React from "react";
 // next
 import Head from "next/head";
 import { useRouter } from "next/router";
-// types
-import type { Props } from "./types";
 // constants
 import {
   SITE_NAME,
@@ -14,6 +12,24 @@ import {
   SITE_TITLE,
 } from "constants/seo-variables";
 
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
+  noHeader?: boolean;
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+};
+
 const Container = ({ meta, children }: Props) => {
   const router = useRouter();
   const image = meta?.image || "/site-image.png";
diff --git a/apps/app/layouts/default-layout.tsx b/apps/app/layouts/default-layout.tsx
deleted file mode 100644
index 07ac71c7b..000000000
--- a/apps/app/layouts/default-layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// layouts
-import Container from "layouts/container";
-// types
-import type { Props } from "./types";
-
-const DefaultLayout: React.FC<Props> = ({ meta, children }) => (
-  <Container meta={meta}>
-    <div className="w-full h-screen overflow-auto bg-gray-50">
-      <>{children}</>
-    </div>
-  </Container>
-);
-
-export default DefaultLayout;
diff --git a/apps/app/layouts/default-layout/index.tsx b/apps/app/layouts/default-layout/index.tsx
new file mode 100644
index 000000000..ad50fb5f6
--- /dev/null
+++ b/apps/app/layouts/default-layout/index.tsx
@@ -0,0 +1,30 @@
+// layouts
+import Container from "layouts/container";
+
+type Meta = {
+  title?: string | null;
+  description?: string | null;
+  image?: string | null;
+  url?: string | null;
+};
+
+type Props = {
+  meta?: Meta;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  bg?: "primary" | "secondary";
+  noHeader?: boolean;
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+};
+
+const DefaultLayout: React.FC<Props> = ({ meta, children }) => (
+  <Container meta={meta}>
+    <div className="w-full h-screen overflow-auto bg-gray-50">
+      <>{children}</>
+    </div>
+  </Container>
+);
+
+export default DefaultLayout;
diff --git a/apps/app/layouts/navbar/header.tsx b/apps/app/layouts/navbar/header.tsx
deleted file mode 100644
index 4bafcc544..000000000
--- a/apps/app/layouts/navbar/header.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// ui
-import { Button } from "components/ui";
-// icons
-import { Bars3Icon } from "@heroicons/react/24/outline";
-
-type Props = {
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => {
-  return (
-    <>
-      <div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex items-center gap-2">
-          <div className="block md:hidden">
-            <Button
-              type="button"
-              theme="secondary"
-              className="h-8 w-8"
-              onClick={() => setToggleSidebar((prevData) => !prevData)}
-            >
-              <Bars3Icon className="h-5 w-5" />
-            </Button>
-          </div>
-          {breadcrumbs}
-          {left}
-        </div>
-        {right}
-      </div>
-    </>
-  );
-};
-
-export default Header;
diff --git a/apps/app/layouts/navbar/main-sidebar.tsx b/apps/app/layouts/navbar/main-sidebar.tsx
deleted file mode 100644
index 4d51fbcf9..000000000
--- a/apps/app/layouts/navbar/main-sidebar.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useRef, useState } from "react";
-import Link from "next/link";
-import { Transition } from "@headlessui/react";
-// hooks
-import useTheme from "hooks/use-theme";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import ProjectsList from "components/sidebar/projects-list";
-import WorkspaceOptions from "components/sidebar/workspace-options";
-// icons
-import {
-  Cog6ToothIcon,
-  RectangleStackIcon,
-  ArrowLongLeftIcon,
-  RectangleGroupIcon,
-} from "@heroicons/react/24/outline";
-import {
-  CyclesIcon,
-  QuestionMarkCircleIcon,
-  BoltIcon,
-  DocumentIcon,
-  DiscordIcon,
-  GithubIcon,
-  CommentIcon,
-} from "components/icons";
-
-type Props = {
-  toggleSidebar: boolean;
-  setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const helpOptions = [
-  {
-    name: "Documentation",
-    href: "https://docs.plane.so/",
-    Icon: DocumentIcon,
-  },
-  {
-    name: "Join our Discord",
-    href: "https://discord.com/invite/A92xrEGCge",
-    Icon: DiscordIcon,
-  },
-  {
-    name: "Report a bug",
-    href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: GithubIcon,
-  },
-  {
-    name: "Chat with us",
-    href: "mailto:hello@plane.so",
-    Icon: CommentIcon,
-  },
-];
-
-const navigation = (workspaceSlug: string, projectId: string) => [
-  {
-    name: "Issues",
-    href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    icon: RectangleStackIcon,
-  },
-  {
-    name: "Cycles",
-    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-    icon: CyclesIcon,
-  },
-  {
-    name: "Modules",
-    href: `/${workspaceSlug}/projects/${projectId}/modules`,
-    icon: RectangleGroupIcon,
-  },
-  {
-    name: "Settings",
-    href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    icon: Cog6ToothIcon,
-  },
-];
-
-const Sidebar: React.FC<Props> = ({ toggleSidebar, setToggleSidebar }) => {
-  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
-
-  const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
-
-  useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
-
-  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-
-  const helpOptionMode = sidebarCollapse ? "left-full" : "left-[-75px]";
-
-  return (
-    <nav className="relative z-20 h-screen">
-      <div
-        className={`${sidebarCollapse ? "" : "w-auto md:w-60"} fixed inset-y-0 top-0 ${
-          toggleSidebar ? "left-0" : "-left-60 md:left-0"
-        } flex h-full flex-col bg-white duration-300 md:relative`}
-      >
-        <div className="flex h-full flex-1 flex-col border-r border-gray-200">
-          <div className="flex h-full flex-1 flex-col pt-2">
-            <WorkspaceOptions sidebarCollapse={sidebarCollapse} />
-            <ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse} />
-            <div
-              className={`flex w-full items-center justify-between self-baseline bg-primary px-2 py-2 ${
-                sidebarCollapse ? "flex-col-reverse" : ""
-              }`}
-            >
-              <button
-                type="button"
-                className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:flex ${
-                  sidebarCollapse ? "w-full justify-center" : ""
-                }`}
-                onClick={() => toggleCollapsed()}
-              >
-                <ArrowLongLeftIcon
-                  className={`h-4 w-4 flex-shrink-0 text-gray-500 duration-300 group-hover:text-gray-900 ${
-                    sidebarCollapse ? "rotate-180" : ""
-                  }`}
-                />
-              </button>
-              <button
-                type="button"
-                className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:hidden"
-                onClick={() => setToggleSidebar(false)}
-              >
-                <ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
-              </button>
-              <button
-                type="button"
-                className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
-                  sidebarCollapse ? "w-full justify-center" : ""
-                }`}
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "h",
-                  });
-                  document.dispatchEvent(e);
-                }}
-                title="Help"
-              >
-                <BoltIcon className="h-4 w-4 text-gray-500" />
-                {!sidebarCollapse && <span>Shortcuts</span>}
-              </button>
-              <div className="relative">
-                <Transition
-                  show={isNeedHelpOpen}
-                  enter="transition ease-out duration-100"
-                  enterFrom="transform opacity-0 scale-95"
-                  enterTo="transform opacity-100 scale-100"
-                  leave="transition ease-in duration-75"
-                  leaveFrom="transform opacity-100 scale-100"
-                  leaveTo="transform opacity-0 scale-95"
-                >
-                  <div
-                    className={`absolute bottom-2 ${helpOptionMode}  space-y-2 rounded-sm bg-white py-3 shadow-md`}
-                    ref={helpOptionsRef}
-                  >
-                    {helpOptions.map(({ name, Icon, href }) => (
-                      <Link href={href} key={name}>
-                        <a
-                          target="_blank"
-                          className="mx-3 flex items-center gap-x-2 rounded-md whitespace-nowrap px-2 py-2 text-xs hover:bg-gray-100"
-                        >
-                          <Icon className="h-5 w-5 text-gray-500" />
-                          <span className="text-sm">{name}</span>
-                        </a>
-                      </Link>
-                    ))}
-                  </div>
-                </Transition>
-                <button
-                  type="button"
-                  className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
-                    sidebarCollapse ? "w-full justify-center" : ""
-                  }`}
-                  onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-                  title="Help"
-                >
-                  <QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
-                  {!sidebarCollapse && <span>Help ?</span>}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default Sidebar;
diff --git a/apps/app/layouts/settings-layout.tsx b/apps/app/layouts/settings-layout.tsx
deleted file mode 100644
index 7e99c1a96..000000000
--- a/apps/app/layouts/settings-layout.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// layouts
-import Container from "layouts/container";
-import Header from "layouts/navbar/header";
-import Sidebar from "layouts/navbar/main-sidebar";
-import SettingsSidebar from "layouts/navbar/settings-sidebar";
-// components
-import { NotAuthorizedView } from "components/core";
-import CommandPalette from "components/command-palette";
-// ui
-import { Button } from "components/ui";
-// types
-import { Meta } from "./types";
-import AppSidebar from "./app-layout/app-sidebar";
-
-type Props = {
-  meta?: Meta;
-  children: React.ReactNode;
-  noPadding?: boolean;
-  bg?: "primary" | "secondary";
-  noHeader?: boolean;
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-  type: "workspace" | "project";
-  memberType?: {
-    isMember: boolean;
-    isOwner: boolean;
-    isViewer: boolean;
-    isGuest: boolean;
-  };
-};
-
-const workspaceLinks: (wSlug: string) => Array<{
-  label: string;
-  href: string;
-}> = (workspaceSlug) => [
-  {
-    label: "General",
-    href: `/${workspaceSlug}/settings`,
-  },
-  {
-    label: "Members",
-    href: `/${workspaceSlug}/settings/members`,
-  },
-  {
-    label: "Features",
-    href: `/${workspaceSlug}/settings/features`,
-  },
-  {
-    label: "Billing & Plans",
-    href: `/${workspaceSlug}/settings/billing`,
-  },
-];
-
-const sidebarLinks: (
-  wSlug?: string,
-  pId?: string
-) => Array<{
-  label: string;
-  href: string;
-}> = (workspaceSlug, projectId) => [
-  {
-    label: "General",
-    href: `/${workspaceSlug}/projects/${projectId}/settings`,
-  },
-  {
-    label: "Control",
-    href: `/${workspaceSlug}/projects/${projectId}/settings/control`,
-  },
-  {
-    label: "Members",
-    href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
-  },
-  {
-    label: "States",
-    href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
-  },
-  {
-    label: "Labels",
-    href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
-  },
-];
-
-const SettingsLayout: React.FC<Props> = ({
-  meta,
-  children,
-  noPadding,
-  bg,
-  noHeader,
-  breadcrumbs,
-  left,
-  right,
-  type,
-  memberType,
-}) => {
-  const [toggleSidebar, setToggleSidebar] = useState(false);
-
-  const { isMember, isOwner, isViewer, isGuest } = memberType ?? {
-    isMember: false,
-    isOwner: false,
-    isViewer: false,
-    isGuest: false,
-  };
-
-  const {
-    query: { workspaceSlug, projectId },
-  } = useRouter();
-
-  return (
-    <Container meta={meta}>
-      <div className="flex h-screen w-full overflow-x-hidden">
-        <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-        <CommandPalette />
-        {isMember || isOwner ? (
-          <>
-            <SettingsSidebar
-              links={
-                type === "workspace"
-                  ? workspaceLinks(workspaceSlug as string)
-                  : sidebarLinks(workspaceSlug as string, projectId as string)
-              }
-            />
-            <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
-              {noHeader ? null : (
-                <Header
-                  breadcrumbs={breadcrumbs}
-                  left={left}
-                  right={right}
-                  setToggleSidebar={setToggleSidebar}
-                />
-              )}
-              <div
-                className={`w-full flex-grow ${noPadding ? "" : "p-5 pb-5 lg:px-16 lg:pt-10"} ${
-                  bg === "primary"
-                    ? "bg-primary"
-                    : bg === "secondary"
-                    ? "bg-secondary"
-                    : "bg-primary"
-                }`}
-              >
-                {children}
-              </div>
-            </main>
-          </>
-        ) : (
-          <NotAuthorizedView
-            actionButton={
-              (isViewer || isGuest) && projectId ? (
-                <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
-                  <Button size="sm" theme="secondary">
-                    Go to Issues
-                  </Button>
-                </Link>
-              ) : (
-                (isViewer || isGuest) &&
-                workspaceSlug && (
-                  <Link href={`/${workspaceSlug}`}>
-                    <Button size="sm" theme="secondary">
-                      Go to workspace
-                    </Button>
-                  </Link>
-                )
-              )
-            }
-          />
-        )}
-      </div>
-    </Container>
-  );
-};
-
-export default SettingsLayout;
diff --git a/apps/app/layouts/navbar/settings-sidebar.tsx b/apps/app/layouts/settings-layout/settings-sidebar.tsx
similarity index 94%
rename from apps/app/layouts/navbar/settings-sidebar.tsx
rename to apps/app/layouts/settings-layout/settings-sidebar.tsx
index d1c9439ba..93bad4b23 100644
--- a/apps/app/layouts/navbar/settings-sidebar.tsx
+++ b/apps/app/layouts/settings-layout/settings-sidebar.tsx
@@ -1,5 +1,4 @@
 // next
-import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
diff --git a/apps/app/layouts/types.d.ts b/apps/app/layouts/types.d.ts
deleted file mode 100644
index 3c7b7a46f..000000000
--- a/apps/app/layouts/types.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export type Meta = {
-  title?: string | null;
-  description?: string | null;
-  image?: string | null;
-  url?: string | null;
-};
-
-export type Props = {
-  meta?: Meta;
-  children: React.ReactNode;
-  noPadding?: boolean;
-  bg?: "primary" | "secondary";
-  noHeader?: boolean;
-  breadcrumbs?: JSX.Element;
-  left?: JSX.Element;
-  right?: JSX.Element;
-};
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
index 81d138b85..9dbb29c7e 100644
--- a/apps/app/next.config.js
+++ b/apps/app/next.config.js
@@ -1,3 +1,9 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+const { withSentryConfig } = require("@sentry/nextjs");
+
 /** @type {import('next').NextConfig} */
 const path = require("path");
 
@@ -5,7 +11,11 @@ const nextConfig = {
   reactStrictMode: false,
   swcMinify: true,
   images: {
-    domains: ["vinci-web.s3.amazonaws.com", "planefs-staging.s3.ap-south-1.amazonaws.com"],
+    domains: [
+      "vinci-web.s3.amazonaws.com",
+      "planefs-staging.s3.ap-south-1.amazonaws.com",
+      "planefs.s3.amazonaws.com",
+    ],
   },
   output: "standalone",
   experimental: {
@@ -37,3 +47,5 @@ module.exports = nextConfig;
 //     transpilePackages: ["components/ui"],
 //   },
 // });
+
+module.exports = withSentryConfig(module.exports, { silent: true }, { hideSourcemaps: true });
diff --git a/apps/app/package.json b/apps/app/package.json
index e81e581b7..8b1d8944c 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -15,6 +15,7 @@
     "@remirror/extension-react-tables": "^2.2.11",
     "@remirror/pm": "^2.0.3",
     "@remirror/react": "^2.0.24",
+    "@sentry/nextjs": "^7.36.0",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
diff --git a/apps/app/pages/404.tsx b/apps/app/pages/404.tsx
index 7e3a65dad..47a7c8e80 100644
--- a/apps/app/pages/404.tsx
+++ b/apps/app/pages/404.tsx
@@ -4,12 +4,13 @@ import Link from "next/link";
 import Image from "next/image";
 
 // layouts
-import type { NextPage } from "next";
 import DefaultLayout from "layouts/default-layout";
 // ui
 import { Button } from "components/ui";
 // images
 import Image404 from "public/404.svg";
+// types
+import type { NextPage } from "next";
 
 const PageNotFound: NextPage = () => (
   <DefaultLayout
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 83f9ff4dd..9c3407b5e 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -1,34 +1,34 @@
 import React from "react";
+
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+// lib
+import { requiredAuth } from "lib/auth";
+// layouts
+import AppLayout from "layouts/app-layout";
+// hooks
+import useProjects from "hooks/use-projects";
+import useWorkspaceDetails from "hooks/use-workspace-details";
+import useIssues from "hooks/use-issues";
+// components
+import { WorkspaceHomeCardsList, WorkspaceHomeGreetings } from "components/workspace";
+// ui
+import { Spinner } from "components/ui";
 // icons
 import {
   ArrowRightIcon,
   CalendarDaysIcon,
   ClipboardDocumentListIcon,
 } from "@heroicons/react/24/outline";
-// lib
-import { requiredAuth } from "lib/auth";
-// layouts
-import AppLayout from "layouts/app-layout";
-// components
-import { Spinner } from "components/ui";
-import { WorkspaceHomeCardsList, WorkspaceHomeGreetings } from "components/workspace";
-// hooks
-import useProjects from "hooks/use-projects";
-import useWorkspaceDetails from "hooks/use-workspace-details";
-import useIssues from "hooks/use-issues";
-// icons
 import { LayerDiagonalIcon } from "components/icons";
+import { getPriorityIcon } from "components/icons/priority-icon";
 // helpers
 import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
 import type { NextPage, NextPageContext } from "next";
-// constants
-import { getPriorityIcon } from "constants/global";
 
 const WorkspacePage: NextPage = () => {
   // router
@@ -164,7 +164,7 @@ const WorkspacePage: NextPage = () => {
                       <LayerDiagonalIcon height="56" width="56" />
                       <h3 className="text-gray-500">
                         No issues found. Create a new issue with{" "}
-                        <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre>.
+                        <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre>.
                       </h3>
                     </div>
                   )
@@ -191,7 +191,7 @@ const WorkspacePage: NextPage = () => {
                         <a className="flex items-center justify-between">
                           <div className="flex items-center gap-2 text-sm">
                             {project.icon ? (
-                              <span className="grid flex-shrink-0 place-items-center rounded uppercase text-white">
+                              <span className="grid flex-shrink-0 place-items-center rounded uppercase">
                                 {String.fromCodePoint(parseInt(project.icon))}
                               </span>
                             ) : (
diff --git a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
index ce6deebe6..899b4974f 100644
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 // headless ui
@@ -17,174 +17,194 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // types
 import { IIssue, Properties } from "types";
 // components
-import { IssueListItem } from "components/issues";
+import { DeleteIssueModal, MyIssuesListItem } from "components/issues";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import type { NextPage } from "next";
 
 const MyIssuesPage: NextPage = () => {
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   // fetching user issues
-  const { myIssues } = useIssues(workspaceSlug?.toString());
+  const { myIssues } = useIssues(workspaceSlug as string);
 
-  // FIXME: remove this hard-coded value
   const [properties, setProperties] = useIssuesProperties(
     workspaceSlug ? (workspaceSlug as string) : undefined,
     undefined
   );
 
+  const handleDeleteIssue = (issue: IIssue) => {
+    setDeleteIssueModal(true);
+    setIssueToDelete(issue);
+  };
+
   return (
-    <AppLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="My Issues" />
-        </Breadcrumbs>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <Popover className="relative">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
-                    open ? "bg-gray-100 text-gray-900" : "text-gray-500"
-                  }`}
-                >
-                  <span>View</span>
-                  <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
-                </Popover.Button>
+    <>
+      <DeleteIssueModal
+        handleClose={() => setDeleteIssueModal(false)}
+        isOpen={deleteIssueModal}
+        data={issueToDelete}
+      />
+      <AppLayout
+        breadcrumbs={
+          <Breadcrumbs>
+            <BreadcrumbItem title="My Issues" />
+          </Breadcrumbs>
+        }
+        right={
+          <div className="flex items-center gap-2">
+            <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={`group flex items-center gap-2 rounded-md border bg-transparent p-2 text-xs font-medium hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
+                      open ? "bg-gray-100 text-gray-900" : "text-gray-500"
+                    }`}
+                  >
+                    <span>View</span>
+                    <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+                  </Popover.Button>
 
-                <Transition
-                  as={React.Fragment}
-                  enter="transition ease-out duration-200"
-                  enterFrom="opacity-0 translate-y-1"
-                  enterTo="opacity-100 translate-y-0"
-                  leave="transition ease-in duration-150"
-                  leaveFrom="opacity-100 translate-y-0"
-                  leaveTo="opacity-0 translate-y-1"
-                >
-                  <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
-                    <div className="relative flex flex-col gap-1 gap-y-4">
-                      <div className="relative flex flex-col gap-1">
-                        <h4 className="text-base text-gray-600">Properties</h4>
-                        <div className="flex flex-wrap items-center gap-2">
-                          {Object.keys(properties).map((key) => (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`rounded border border-theme px-2 py-1 text-xs capitalize ${
-                                properties[key as keyof Properties]
-                                  ? "border-theme bg-theme text-white"
-                                  : ""
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-          <HeaderButton
-            Icon={PlusIcon}
-            label="Add Issue"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", {
-                key: "c",
-              });
-
-              document.dispatchEvent(e);
-            }}
-          />
-        </div>
-      }
-    >
-      <div className="flex h-full w-full flex-col space-y-5">
-        {myIssues ? (
-          <>
-            {myIssues.length > 0 ? (
-              <div className="flex flex-col space-y-5">
-                <Disclosure as="div" defaultOpen>
-                  {({ open }) => (
-                    <div className="rounded-lg bg-white">
-                      <div className="rounded-t-lg bg-gray-100 px-4 py-3">
-                        <Disclosure.Button>
-                          <div className="flex items-center gap-x-2">
-                            <span>
-                              <ChevronDownIcon
-                                className={`h-4 w-4 text-gray-500 ${
-                                  !open ? "-rotate-90 transform" : ""
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute right-1/2 z-10 mr-5 mt-1 w-screen max-w-xs translate-x-1/2 transform overflow-hidden rounded-lg bg-white p-3 shadow-lg">
+                      <div className="relative flex flex-col gap-1 gap-y-4">
+                        <div className="relative flex flex-col gap-1">
+                          <h4 className="text-base text-gray-600">Properties</h4>
+                          <div className="flex flex-wrap items-center gap-2">
+                            {Object.keys(properties).map((key) => (
+                              <button
+                                key={key}
+                                type="button"
+                                className={`rounded border border-theme px-2 py-1 text-xs capitalize ${
+                                  properties[key as keyof Properties]
+                                    ? "border-theme bg-theme text-white"
+                                    : ""
                                 }`}
-                              />
-                            </span>
-                            <h2 className="font-medium leading-5">My Issues</h2>
-                            <p className="text-sm text-gray-500">{myIssues.length}</p>
-                          </div>
-                        </Disclosure.Button>
-                      </div>
-                      <Transition
-                        show={open}
-                        enter="transition duration-100 ease-out"
-                        enterFrom="transform opacity-0"
-                        enterTo="transform opacity-100"
-                        leave="transition duration-75 ease-out"
-                        leaveFrom="transform opacity-100"
-                        leaveTo="transform opacity-0"
-                      >
-                        <Disclosure.Panel>
-                          <div className="divide-y-2">
-                            {myIssues.map((issue: IIssue) => (
-                              <IssueListItem key={issue.id} issue={issue} properties={properties} />
+                                onClick={() => setProperties(key as keyof Properties)}
+                              >
+                                {replaceUnderscoreIfSnakeCase(key)}
+                              </button>
                             ))}
                           </div>
-                        </Disclosure.Panel>
-                      </Transition>
-                    </div>
-                  )}
-                </Disclosure>
-              </div>
-            ) : (
-              <div className="flex h-full w-full flex-col items-center justify-center px-4">
-                <EmptySpace
-                  title="You don't have any issue assigned to you yet."
-                  description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-                  Icon={RectangleStackIcon}
-                >
-                  <EmptySpaceItem
-                    title="Create a new issue"
-                    description={
-                      <span>
-                        Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut
-                        to create a new issue
-                      </span>
-                    }
-                    Icon={PlusIcon}
-                    action={() => {
-                      const e = new KeyboardEvent("keydown", {
-                        key: "c",
-                      });
-                      document.dispatchEvent(e);
-                    }}
-                  />
-                </EmptySpace>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <Spinner />
+                        </div>
+                      </div>
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+            <HeaderButton
+              Icon={PlusIcon}
+              label="Add Issue"
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "c",
+                });
+
+                document.dispatchEvent(e);
+              }}
+            />
           </div>
-        )}
-      </div>
-    </AppLayout>
+        }
+      >
+        <div className="flex h-full w-full flex-col space-y-5">
+          {myIssues ? (
+            <>
+              {myIssues.length > 0 ? (
+                <div className="flex flex-col space-y-5">
+                  <Disclosure as="div" defaultOpen>
+                    {({ open }) => (
+                      <div className="rounded-lg bg-white">
+                        <div className="rounded-t-lg bg-gray-100 px-4 py-3">
+                          <Disclosure.Button>
+                            <div className="flex items-center gap-x-2">
+                              <span>
+                                <ChevronDownIcon
+                                  className={`h-4 w-4 text-gray-500 ${
+                                    !open ? "-rotate-90 transform" : ""
+                                  }`}
+                                />
+                              </span>
+                              <h2 className="font-medium leading-5">My Issues</h2>
+                              <p className="text-sm text-gray-500">{myIssues.length}</p>
+                            </div>
+                          </Disclosure.Button>
+                        </div>
+                        <Transition
+                          show={open}
+                          enter="transition duration-100 ease-out"
+                          enterFrom="transform opacity-0"
+                          enterTo="transform opacity-100"
+                          leave="transition duration-75 ease-out"
+                          leaveFrom="transform opacity-100"
+                          leaveTo="transform opacity-0"
+                        >
+                          <Disclosure.Panel>
+                            <div className="divide-y-2">
+                              {myIssues.map((issue: IIssue) => (
+                                <MyIssuesListItem
+                                  key={issue.id}
+                                  issue={issue}
+                                  properties={properties}
+                                  projectId={issue.project}
+                                  handleDeleteIssue={() => handleDeleteIssue(issue)}
+                                />
+                              ))}
+                            </div>
+                          </Disclosure.Panel>
+                        </Transition>
+                      </div>
+                    )}
+                  </Disclosure>
+                </div>
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center px-4">
+                  <EmptySpace
+                    title="You don't have any issue assigned to you yet."
+                    description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                    Icon={RectangleStackIcon}
+                  >
+                    <EmptySpaceItem
+                      title="Create a new issue"
+                      description={
+                        <span>
+                          Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut
+                          to create a new issue
+                        </span>
+                      }
+                      Icon={PlusIcon}
+                      action={() => {
+                        const e = new KeyboardEvent("keydown", {
+                          key: "c",
+                        });
+                        document.dispatchEvent(e);
+                      }}
+                    />
+                  </EmptySpace>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <Spinner />
+            </div>
+          )}
+        </div>
+      </AppLayout>
+    </>
   );
 };
 
diff --git a/apps/app/pages/[workspaceSlug]/me/profile.tsx b/apps/app/pages/[workspaceSlug]/me/profile.tsx
index 43ec74018..a9517d46d 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile.tsx
@@ -3,8 +3,29 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
+
+// react-hook-form
 import { useForm } from "react-hook-form";
+// lib
+import { requiredAuth } from "lib/auth";
+// services
+import projectService from "services/project.service";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
+// layouts
+import AppLayout from "layouts/app-layout";
+// services
+import userService from "services/user.service";
+import workspaceService from "services/workspace.service";
+// components
+import { ImageUploadModal } from "components/core";
+// ui
+import { Button, Input, Spinner } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
 import {
   ChevronRightIcon,
   ClipboardDocumentListIcon,
@@ -14,30 +35,11 @@ import {
   UserPlusIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import type { NextPage, NextPageContext } from "next";
-
-// hooks
-import type { IIssue, IUser } from "types";
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// lib
-import { requiredAuth } from "lib/auth";
-// services
-import projectService from "services/project.service";
-// layouts
-import AppLayout from "layouts/app-layout";
-// constants
-import { USER_ISSUE, USER_WORKSPACE_INVITATIONS, PROJECTS_LIST } from "constants/fetch-keys";
-// services
-import userService from "services/user.service";
-import workspaceService from "services/workspace.service";
-// components
-import { ImageUploadModal } from "components/common/image-upload-modal";
-// ui
-import { Button, Input, Spinner } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
 // types
+import type { NextPage, NextPageContext } from "next";
+import type { IIssue, IUser } from "types";
+// fetch-keys
+import { USER_ISSUE, USER_WORKSPACE_INVITATIONS, PROJECTS_LIST } from "constants/fetch-keys";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index d8851371f..a3f8acb8f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -11,13 +11,9 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import CyclesListView from "components/project/cycles/list-view";
-import CyclesBoardView from "components/project/cycles/board-view";
 import { CreateUpdateIssueModal } from "components/issues";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
+import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
 import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
-import View from "components/core/view";
 // services
 import issuesServices from "services/issues.service";
 import cycleServices from "services/cycles.service";
@@ -36,15 +32,14 @@ import {
   CYCLE_ISSUES,
   CYCLE_LIST,
   PROJECT_ISSUES_LIST,
-  PROJECT_MEMBERS,
   PROJECT_DETAILS,
+  CYCLE_DETAILS,
 } from "constants/fetch-keys";
 
 const SingleCycle: React.FC<UserAuth> = (props) => {
   const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
-  const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
   const [cycleSidebar, setCycleSidebar] = useState(true);
 
   const [preloadedData, setPreloadedData] = useState<
@@ -77,6 +72,18 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       : null
   );
 
+  const { data: cycleDetails } = useSWR(
+    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cycleServices.getCycleDetails(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string
+          )
+      : null
+  );
+
   const { data: cycleIssues } = useSWR<CycleIssueResponse[]>(
     workspaceSlug && projectId && cycleId ? CYCLE_ISSUES(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
@@ -95,19 +102,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
     cycle: cycleId as string,
   }));
 
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null,
-    {
-      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
-        if (err?.status === 403) return;
-        setTimeout(() => revalidate(revalidateOpts), 5000);
-      },
-    }
-  );
-
   const openCreateIssueModal = (
     issue?: IIssue,
     actionType: "create" | "edit" | "delete" = "create"
@@ -138,30 +132,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
       });
   };
 
-  const removeIssueFromCycle = (bridgeId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<CycleIssueResponse[]>(
-      CYCLE_ISSUES(cycleId as string),
-      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
-      false
-    );
-
-    issuesServices
-      .removeIssueFromCycle(
-        workspaceSlug as string,
-        projectId as string,
-        cycleId as string,
-        bridgeId
-      )
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
   return (
     <IssueViewContextProvider>
       <CreateUpdateIssueModal
@@ -181,11 +151,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
         issues={issues?.results.filter((i) => !i.issue_cycle) ?? []}
         handleOnSubmit={handleAddIssuesToCycle}
       />
-      <ConfirmIssueDeletion
-        handleClose={() => setDeleteIssue(undefined)}
-        isOpen={!!deleteIssue}
-        data={issues?.results.find((issue) => issue.id === deleteIssue)}
-      />
       <AppLayout
         breadcrumbs={
           <Breadcrumbs>
@@ -200,7 +165,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
             label={
               <>
                 <CyclesIcon className="h-3 w-3" />
-                {cycles?.find((c) => c.id === cycleId)?.name}
+                {cycleDetails?.name}
               </>
             }
             className="ml-1.5"
@@ -221,7 +186,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           <div
             className={`flex items-center gap-2 ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}
           >
-            <View issues={cycleIssuesArray ?? []} />
+            <IssuesFilterView issues={cycleIssuesArray ?? []} />
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
@@ -237,22 +202,11 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
         {cycleIssuesArray ? (
           cycleIssuesArray.length > 0 ? (
             <div className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} duration-300`}>
-              <CyclesListView
+              <IssuesView
+                type="cycle"
                 issues={cycleIssuesArray ?? []}
-                openCreateIssueModal={openCreateIssueModal}
-                openIssuesListModal={openIssuesListModal}
-                removeIssueFromCycle={removeIssueFromCycle}
-                setPreloadedData={setPreloadedData}
                 userAuth={props}
-              />
-              <CyclesBoardView
-                issues={cycleIssuesArray ?? []}
-                members={members}
-                openCreateIssueModal={openCreateIssueModal}
                 openIssuesListModal={openIssuesListModal}
-                handleDeleteIssue={setDeleteIssue}
-                setPreloadedData={setPreloadedData}
-                userAuth={props}
               />
             </div>
           ) : (
@@ -270,13 +224,13 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
                   title="Create a new issue"
                   description="Click to create a new issue inside the cycle."
                   Icon={PlusIcon}
-                  action={() => openCreateIssueModal()}
+                  action={openCreateIssueModal}
                 />
                 <EmptySpaceItem
                   title="Add an existing issue"
                   description="Open list"
                   Icon={ListBulletIcon}
-                  action={() => openIssuesListModal()}
+                  action={openIssuesListModal}
                 />
               </EmptySpace>
             </div>
@@ -287,7 +241,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
           </div>
         )}
         <CycleDetailSidebar
-          cycle={cycles?.find((c) => c.id === (cycleId as string))}
+          cycle={cycleDetails}
           isOpen={cycleSidebar}
           cycleIssues={cycleIssues ?? []}
         />
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 6112f0a82..7fb4afbd4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -177,7 +177,7 @@ const ProjectCycles: NextPage = () => {
                 title="Create a new cycle"
                 description={
                   <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">Q</pre> shortcut to
+                    Use <pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre> shortcut to
                     create a new cycle
                   </span>
                 }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index b74aa14d0..a35746d39 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -14,11 +14,15 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
 // components
-import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
-import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
-import AddIssueComment from "components/project/issues/issue-detail/comment/issue-comment-section";
-import IssueActivitySection from "components/project/issues/issue-detail/activity";
-import { IssueDescriptionForm, SubIssueList, CreateUpdateIssueModal } from "components/issues";
+import {
+  IssueDescriptionForm,
+  SubIssuesList,
+  CreateUpdateIssueModal,
+  IssueDetailsSidebar,
+  IssueActivitySection,
+  AddComment,
+  SubIssuesListModal,
+} from "components/issues";
 // ui
 import { Loader, CustomMenu } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
@@ -46,13 +50,14 @@ const defaultValues = {
   blocked_list: [],
   target_date: new Date().toString(),
   issue_cycle: null,
+  issue_module: null,
   labels_list: [],
 };
 
 const IssueDetailsPage: NextPage<UserAuth> = (props) => {
   // states
   const [isOpen, setIsOpen] = useState(false);
-  const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
+  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
   >(undefined);
@@ -68,7 +73,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
       : null
   );
 
-  const { data: subIssues } = useSWR(
+  const { data: subIssues } = useSWR<IIssue[] | undefined>(
     issueId && workspaceSlug && projectId ? SUB_ISSUES(issueId as string) : null,
     issueId && workspaceSlug && projectId
       ? () =>
@@ -104,25 +109,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
     defaultValues,
   });
 
-  useEffect(() => {
-    if (issueDetails) {
-      mutateIssueActivities();
-      reset({
-        ...issueDetails,
-        blockers_list:
-          issueDetails.blockers_list ??
-          issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id),
-        blocked_list:
-          issueDetails.blocked_list ??
-          issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
-        assignees_list:
-          issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
-        labels_list: issueDetails.labels_list ?? issueDetails.labels,
-        labels: issueDetails.labels_list ?? issueDetails.labels,
-      });
-    }
-  }, [issueDetails, reset, mutateIssueActivities]);
-
   const submitChanges = useCallback(
     (formData: Partial<IIssue>) => {
       if (!workspaceSlug || !projectId || !issueId) return;
@@ -140,7 +126,6 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
       issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload)
         .then((res) => {
-          console.log(res);
           mutateIssueDetails();
           mutateIssueActivities();
         })
@@ -154,11 +139,16 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
   const handleSubIssueRemove = (issueId: string) => {
     if (!workspaceSlug || !projectId) return;
 
+    mutate<IIssue[]>(
+      SUB_ISSUES(issueDetails?.id ?? ""),
+      (prevData) => prevData?.filter((i) => i.id !== issueId),
+      false
+    );
+
     issuesService
       .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: null })
       .then((res) => {
         mutate(SUB_ISSUES(issueDetails?.id ?? ""));
-        mutateIssueActivities();
 
         mutate<IssueResponse>(
           PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
@@ -182,6 +172,25 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
       });
   };
 
+  useEffect(() => {
+    if (!issueDetails) return;
+
+    mutateIssueActivities();
+    reset({
+      ...issueDetails,
+      blockers_list:
+        issueDetails.blockers_list ??
+        issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id),
+      blocked_list:
+        issueDetails.blocks_list ??
+        issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
+      assignees_list:
+        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
+      labels_list: issueDetails.labels_list ?? issueDetails.labels,
+      labels: issueDetails.labels_list ?? issueDetails.labels,
+    });
+  }, [issueDetails, reset, mutateIssueActivities]);
+
   const isNotAllowed = props.isGuest || props.isViewer;
 
   return (
@@ -211,10 +220,10 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
           }}
         />
       )}
-      {isAddAsSubIssueOpen && (
-        <AddAsSubIssue
-          isOpen={isAddAsSubIssueOpen}
-          setIsOpen={setIsAddAsSubIssueOpen}
+      {subIssuesListModal && (
+        <SubIssuesListModal
+          isOpen={subIssuesListModal}
+          handleClose={() => setSubIssuesListModal(false)}
           parent={issueDetails}
         />
       )}
@@ -275,9 +284,9 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                 userAuth={props}
               />
               <div className="mt-2">
-                {issueId && workspaceSlug && projectId && subIssues?.length > 0 ? (
-                  <SubIssueList
-                    issues={subIssues}
+                {issueId && workspaceSlug && projectId && subIssues && subIssues.length > 0 ? (
+                  <SubIssuesList
+                    issues={subIssues ?? []}
                     parentIssue={issueDetails}
                     projectId={projectId?.toString()}
                     workspaceSlug={workspaceSlug?.toString()}
@@ -309,7 +318,7 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                       </CustomMenu.MenuItem>
                       <CustomMenu.MenuItem
                         onClick={() => {
-                          setIsAddAsSubIssueOpen(true);
+                          setSubIssuesListModal(true);
                           setPreloadedData({
                             parent: issueDetails.id,
                             actionType: "createIssue",
@@ -329,11 +338,11 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                 issueActivities={issueActivities || []}
                 mutate={mutateIssueActivities}
               />
-              <AddIssueComment mutate={mutateIssueActivities} />
+              <AddComment mutate={mutateIssueActivities} />
             </div>
           </div>
           <div className="basis-1/3 space-y-5 border-l p-5">
-            <IssueDetailSidebar
+            <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}
               submitChanges={submitChanges}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 44f51354f..299bfc2f1 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import useSWR, { mutate } from "swr";
-import { RectangleStackIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "@heroicons/react/20/solid";
+
+import useSWR from "swr";
+
 // lib
 import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
@@ -13,30 +12,21 @@ import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import ListView from "components/project/issues/list-view";
-import BoardView from "components/project/issues/BoardView";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import { CreateUpdateIssueModal } from "components/issues";
-import View from "components/core/view";
+import { IssuesFilterView, IssuesView } from "components/core";
 // ui
 import { Spinner, EmptySpace, EmptySpaceItem, HeaderButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// icons
+import { RectangleStackIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
-import type { IIssue, UserAuth } from "types";
+import type { UserAuth } from "types";
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
 const ProjectIssues: NextPage<UserAuth> = (props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedIssue, setSelectedIssue] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-  const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
-
-  const {
-    query: { workspaceSlug, projectId },
-  } = useRouter();
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
 
   const { data: projectIssues } = useSWR(
     workspaceSlug && projectId
@@ -54,20 +44,6 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
       : null
   );
 
-  useEffect(() => {
-    if (!isOpen) {
-      const timer = setTimeout(() => {
-        setSelectedIssue(undefined);
-        clearTimeout(timer);
-      }, 500);
-    }
-  }, [isOpen]);
-
-  const handleEditIssue = (issue: IIssue) => {
-    setIsOpen(true);
-    setSelectedIssue({ ...issue, actionType: "edit" });
-  };
-
   return (
     <IssueViewContextProvider>
       <AppLayout
@@ -79,7 +55,9 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
         }
         right={
           <div className="flex items-center gap-2">
-            <View issues={projectIssues?.results.filter((p) => p.parent === null) ?? []} />
+            <IssuesFilterView
+              issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
+            />
             <HeaderButton
               Icon={PlusIcon}
               label="Add Issue"
@@ -93,54 +71,42 @@ const ProjectIssues: NextPage<UserAuth> = (props) => {
           </div>
         }
       >
-        <CreateUpdateIssueModal
-          isOpen={isOpen && selectedIssue?.actionType !== "delete"}
-          prePopulateData={{ ...selectedIssue }}
-          handleClose={() => setIsOpen(false)}
-          data={selectedIssue}
-        />
-        <ConfirmIssueDeletion
-          handleClose={() => setDeleteIssue(undefined)}
-          isOpen={!!deleteIssue}
-          data={projectIssues?.results.find((issue) => issue.id === deleteIssue)}
-        />
-        {!projectIssues ? (
+        {projectIssues ? (
+          projectIssues.count > 0 ? (
+            <IssuesView
+              issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
+              userAuth={props}
+            />
+          ) : (
+            <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+              <EmptySpace
+                title="You don't have any issue yet."
+                description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+                Icon={RectangleStackIcon}
+              >
+                <EmptySpaceItem
+                  title="Create a new issue"
+                  description={
+                    <span>
+                      Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to
+                      create a new issue
+                    </span>
+                  }
+                  Icon={PlusIcon}
+                  action={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "c",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                />
+              </EmptySpace>
+            </div>
+          )
+        ) : (
           <div className="flex h-full w-full items-center justify-center">
             <Spinner />
           </div>
-        ) : projectIssues.count > 0 ? (
-          <>
-            <ListView
-              issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
-              handleEditIssue={handleEditIssue}
-              userAuth={props}
-            />
-            <BoardView
-              issues={projectIssues?.results.filter((p) => p.parent === null) ?? []}
-              handleDeleteIssue={setDeleteIssue}
-              userAuth={props}
-            />
-          </>
-        ) : (
-          <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-            <EmptySpace
-              title="You don't have any issue yet."
-              description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-              Icon={RectangleStackIcon}
-            >
-              <EmptySpaceItem
-                title="Create a new issue"
-                description={
-                  <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">C</pre> shortcut to
-                    create a new issue
-                  </span>
-                }
-                Icon={PlusIcon}
-                action={() => setIsOpen(true)}
-              />
-            </EmptySpace>
-          </div>
         )}
       </AppLayout>
     </IssueViewContextProvider>
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 0a679f58d..a0f4d6246 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -8,21 +8,15 @@ import useSWR, { mutate } from "swr";
 import { requiredAdmin, requiredAuth } from "lib/auth";
 // services
 import modulesService from "services/modules.service";
-import projectService from "services/project.service";
 import issuesService from "services/issues.service";
 // layouts
 import AppLayout from "layouts/app-layout";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import ExistingIssuesListModal from "components/common/existing-issues-list-modal";
-import ModulesBoardView from "components/project/modules/board-view";
-import ModulesListView from "components/project/modules/list-view";
-import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
-import ModuleDetailSidebar from "components/project/modules/module-detail-sidebar";
-import ConfirmModuleDeletion from "components/project/modules/confirm-module-deletion";
+import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
 import { CreateUpdateIssueModal } from "components/issues";
-import View from "components/core/view";
+import { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
 // ui
 import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -46,11 +40,10 @@ import {
 import { NextPageContext } from "next";
 // fetch-keys
 import {
-  MODULE_DETAIL,
+  MODULE_DETAILS,
   MODULE_ISSUES,
   MODULE_LIST,
   PROJECT_ISSUES_LIST,
-  PROJECT_MEMBERS,
 } from "constants/fetch-keys";
 
 const SingleModule: React.FC<UserAuth> = (props) => {
@@ -59,7 +52,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
   const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(null);
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
-  const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
   const [selectedModuleForDelete, setSelectedModuleForDelete] = useState<SelectModuleType>();
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
@@ -96,8 +88,8 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const { data: moduleDetail } = useSWR<IModule>(
-    MODULE_DETAIL,
+  const { data: moduleDetails } = useSWR<IModule>(
+    moduleId ? MODULE_DETAILS(moduleId as string) : null,
     workspaceSlug && projectId
       ? () =>
           modulesService.getModuleDetails(
@@ -108,19 +100,6 @@ const SingleModule: React.FC<UserAuth> = (props) => {
       : null
   );
 
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null,
-    {
-      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
-        if (err?.status === 403) return;
-        setTimeout(() => revalidate(revalidateOpts), 5000);
-      },
-    }
-  );
-
   const moduleIssuesArray = moduleIssues?.map((issue) => ({
     ...issue.issue_detail,
     sub_issues_count: issue.sub_issues_count,
@@ -156,34 +135,10 @@ const SingleModule: React.FC<UserAuth> = (props) => {
     setModuleIssuesListModal(true);
   };
 
-  const removeIssueFromModule = (issueId: string) => {
-    if (!workspaceSlug || !projectId) return;
-
-    mutate<ModuleIssueResponse[]>(
-      MODULE_ISSUES(moduleId as string),
-      (prevData) => prevData?.filter((p) => p.id !== issueId),
-      false
-    );
-
-    modulesService
-      .removeIssueFromModule(
-        workspaceSlug as string,
-        projectId as string,
-        moduleId as string,
-        issueId
-      )
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
   const handleDeleteModule = () => {
-    if (!moduleDetail) return;
+    if (!moduleDetails) return;
 
-    setSelectedModuleForDelete({ ...moduleDetail, actionType: "delete" });
+    setSelectedModuleForDelete({ ...moduleDetails, actionType: "delete" });
     setModuleDeleteModal(true);
   };
 
@@ -208,12 +163,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
         issues={issues?.results.filter((i) => !i.issue_module) ?? []}
         handleOnSubmit={handleAddIssuesToModule}
       />
-      <ConfirmIssueDeletion
-        handleClose={() => setDeleteIssue(undefined)}
-        isOpen={!!deleteIssue}
-        data={moduleIssuesArray?.find((issue) => issue.id === deleteIssue)}
-      />
-      <ConfirmModuleDeletion
+      <DeleteModuleModal
         isOpen={
           moduleDeleteModal &&
           !!selectedModuleForDelete &&
@@ -226,7 +176,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${moduleDetail?.project_detail.name ?? "Project"} Modules`}
+              title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
               link={`/${workspaceSlug}/projects/${projectId}/modules`}
             />
           </Breadcrumbs>
@@ -236,7 +186,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
             label={
               <>
                 <RectangleGroupIcon className="h-3 w-3" />
-                {modules?.find((c) => c.id === moduleId)?.name}
+                {moduleDetails?.name}
               </>
             }
             className="ml-1.5"
@@ -257,7 +207,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
           <div
             className={`flex items-center gap-2 ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}
           >
-            <View issues={moduleIssuesArray ?? []} />
+            <IssuesFilterView issues={moduleIssuesArray ?? []} />
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-100 ${
@@ -273,22 +223,11 @@ const SingleModule: React.FC<UserAuth> = (props) => {
         {moduleIssuesArray ? (
           moduleIssuesArray.length > 0 ? (
             <div className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} duration-300`}>
-              <ModulesListView
+              <IssuesView
+                type="module"
                 issues={moduleIssuesArray ?? []}
-                openCreateIssueModal={openCreateIssueModal}
-                openIssuesListModal={openIssuesListModal}
-                removeIssueFromModule={removeIssueFromModule}
-                setPreloadedData={setPreloadedData}
                 userAuth={props}
-              />
-              <ModulesBoardView
-                issues={moduleIssuesArray ?? []}
-                members={members}
-                openCreateIssueModal={openCreateIssueModal}
                 openIssuesListModal={openIssuesListModal}
-                handleDeleteIssue={setDeleteIssue}
-                setPreloadedData={setPreloadedData}
-                userAuth={props}
               />
             </div>
           ) : (
@@ -306,13 +245,13 @@ const SingleModule: React.FC<UserAuth> = (props) => {
                   title="Create a new issue"
                   description="Click to create a new issue inside the module."
                   Icon={PlusIcon}
-                  action={() => openCreateIssueModal()}
+                  action={openCreateIssueModal}
                 />
                 <EmptySpaceItem
                   title="Add an existing issue"
                   description="Open list"
                   Icon={ListBulletIcon}
-                  action={() => openIssuesListModal()}
+                  action={openIssuesListModal}
                 />
               </EmptySpace>
             </div>
@@ -322,8 +261,8 @@ const SingleModule: React.FC<UserAuth> = (props) => {
             <Spinner />
           </div>
         )}
-        <ModuleDetailSidebar
-          module={modules?.find((m) => m.id === moduleId)}
+        <ModuleDetailsSidebar
+          module={moduleDetails}
           isOpen={moduleSidebar}
           moduleIssues={moduleIssues}
           handleDeleteModule={handleDeleteModule}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index e166d1a6f..fb67af9e1 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -12,7 +12,7 @@ import { requiredAuth } from "lib/auth";
 import projectService from "services/project.service";
 import modulesService from "services/modules.service";
 // components
-import SingleModuleCard from "components/project/modules/single-module-card";
+import { SingleModuleCard } from "components/modules";
 // ui
 import { EmptySpace, EmptySpaceItem, HeaderButton, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -85,7 +85,7 @@ const ProjectModules: NextPage = () => {
                 title="Create a new module"
                 description={
                   <span>
-                    Use <pre className="inline rounded bg-gray-100 px-2 py-1">M</pre> shortcut to
+                    Use <pre className="inline rounded bg-gray-200 px-2 py-1">M</pre> shortcut to
                     create a new module
                   </span>
                 }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index 4caba98a6..a752c8e56 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -103,8 +103,8 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
-      type="project"
+    <AppLayout
+      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
@@ -247,7 +247,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
           </div>
         </div>
       </form>
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
new file mode 100644
index 000000000..b75adef7b
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -0,0 +1,187 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import projectService from "services/project.service";
+// lib
+import { requiredAdmin } from "lib/auth";
+// layouts
+import AppLayout from "layouts/app-layout";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { IProject, UserAuth } from "types";
+import type { NextPage, NextPageContext } from "next";
+// fetch-keys
+import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+
+const FeaturesSettings: NextPage<UserAuth> = (props) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { data: projectDetails } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const handleSubmit = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    mutate<IProject>(
+      PROJECT_DETAILS(projectId as string),
+      (prevData) => ({ ...(prevData as IProject), ...formData }),
+      false
+    );
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === projectId)
+            return {
+              ...p,
+              ...formData,
+            };
+
+          return p;
+        }),
+      false
+    );
+
+    await projectService
+      .updateProject(workspaceSlug as string, projectId as string, formData)
+      .then((res) => {
+        mutate(PROJECT_DETAILS(projectId as string));
+        mutate(PROJECTS_LIST(workspaceSlug as string));
+
+        setToastAlert({
+          title: "Success!",
+          type: "success",
+          message: "Project features updated successfully.",
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  return (
+    <AppLayout
+      settingsLayout="project"
+      memberType={props}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+          />
+          <BreadcrumbItem title="Features Settings" />
+        </Breadcrumbs>
+      }
+    >
+      <section className="space-y-8">
+        <div>
+          <h3 className="text-3xl font-bold leading-6 text-gray-900">Project Features</h3>
+        </div>
+        <div className="space-y-8 md:w-2/3">
+          <div className="flex items-center justify-between gap-x-10 gap-y-2">
+            <div>
+              <h4 className="text-md mb-1 leading-6 text-gray-900">Use cycles</h4>
+              <p className="mb-3 text-sm text-gray-500">
+                Cycles are enabled for all the projects in this workspace. Access it from the
+                navigation bar.
+              </p>
+            </div>
+            <div>
+              <button
+                type="button"
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                  projectDetails?.cycle_view ? "bg-indigo-500" : "bg-gray-200"
+                }`}
+                role="switch"
+                aria-checked={projectDetails?.cycle_view}
+                onClick={() => handleSubmit({ cycle_view: !projectDetails?.cycle_view })}
+              >
+                <span className="sr-only">Use cycles</span>
+                <span
+                  aria-hidden="true"
+                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center justify-between gap-x-10 gap-y-2">
+            <div>
+              <h4 className="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
+              <p className="mb-3 text-sm text-gray-500">
+                Modules are enabled for all the projects in this workspace. Access it from the
+                navigation bar.
+              </p>
+            </div>
+            <div>
+              <button
+                type="button"
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                  projectDetails?.module_view ? "bg-indigo-500" : "bg-gray-200"
+                }`}
+                role="switch"
+                aria-checked={projectDetails?.module_view}
+                onClick={() => handleSubmit({ module_view: !projectDetails?.module_view })}
+              >
+                <span className="sr-only">Use cycles</span>
+                <span
+                  aria-hidden="true"
+                  className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                    projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <a href="https://plane.so/" target="_blank" rel="noreferrer">
+              <Button theme="secondary" size="rg" className="text-xs">
+                Plane is open-source, view Roadmap
+              </Button>
+            </a>
+            <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
+              <Button theme="secondary" size="rg" className="text-xs">
+                Star us on GitHub
+              </Button>
+            </a>
+          </div>
+        </div>
+      </section>
+    </AppLayout>
+  );
+};
+
+export const getServerSideProps = async (ctx: NextPageContext) => {
+  const projectId = ctx.query.projectId as string;
+  const workspaceSlug = ctx.query.workspaceSlug as string;
+
+  const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
+
+  return {
+    props: {
+      isOwner: memberDetail?.role === 20,
+      isMember: memberDetail?.role === 15,
+      isViewer: memberDetail?.role === 10,
+      isGuest: memberDetail?.role === 5,
+    },
+  };
+};
+
+export default FeaturesSettings;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 1e9cc6e16..e85000f11 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -6,11 +6,11 @@ import useSWR, { mutate } from "swr";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
-import { IProject, IWorkspace } from "types";
+import { IProject, IWorkspace, UserAuth } from "types";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -24,13 +24,13 @@ import { Button, Input, TextArea, Loader, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import OutlineButton from "components/ui/outline-button";
 // helpers
-import { debounce } from "helpers/functions.helper";
+import { debounce } from "helpers/common.helper";
 // types
 import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
-import { NETWORK_CHOICES } from "constants/";
+import { NETWORK_CHOICES } from "constants/project";
 
 const defaultValues: Partial<IProject> = {
   name: "",
@@ -39,14 +39,7 @@ const defaultValues: Partial<IProject> = {
   network: 0,
 };
 
-type TGeneralSettingsProps = {
-  isMember: boolean;
-  isOwner: boolean;
-  isViewer: boolean;
-  isGuest: boolean;
-};
-
-const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
+const GeneralSettings: NextPage<UserAuth> = (props) => {
   const { isMember, isOwner, isViewer, isGuest } = props;
 
   const [selectProject, setSelectedProject] = useState<string | null>(null);
@@ -100,6 +93,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
 
   const onSubmit = async (formData: IProject) => {
     if (!activeWorkspace || !projectDetails) return;
+
     const payload: Partial<IProject> = {
       name: formData.name,
       network: formData.network,
@@ -109,6 +103,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
       project_lead: formData.project_lead,
       icon: formData.icon,
     };
+
     await projectService
       .updateProject(activeWorkspace.slug, projectDetails.id, payload)
       .then((res) => {
@@ -130,9 +125,9 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
+    <AppLayout
+      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
-      type="project"
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
@@ -341,7 +336,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
           </div>
         </div>
       </form>
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 568f62392..b82f76d9e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -1,11 +1,15 @@
 import React, { useState } from "react";
+
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
+
+// react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { Popover, Transition } from "@headlessui/react";
+// react-color
 import { TwitterPicker } from "react-color";
-import type { NextPageContext, NextPage } from "next";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
 // services
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
@@ -13,20 +17,23 @@ import issuesService from "services/issues.service";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
 import SingleLabel from "components/project/settings/single-label";
 // ui
 import { Button, Input, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// fetch-keys
-import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
+// icons
+import { PlusIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
+import type { NextPageContext, NextPage } from "next";
+// fetch-keys
+import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 
 const defaultValues: Partial<IIssueLabels> = {
   name: "",
-  colour: "#ff0000",
+  color: "#ff0000",
 };
 
 type TLabelSettingsProps = {
@@ -52,7 +59,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
   );
 
-  const { data: activeProject } = useSWR(
+  const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.getProject(workspaceSlug as string, projectId as string)
@@ -77,9 +84,9 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   );
 
   const handleNewLabel: SubmitHandler<IIssueLabels> = async (formData) => {
-    if (!activeWorkspace || !activeProject || isSubmitting) return;
+    if (!activeWorkspace || !projectDetails || isSubmitting) return;
     await issuesService
-      .createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
+      .createIssueLabel(activeWorkspace.slug, projectDetails.id, formData)
       .then((res) => {
         reset(defaultValues);
         mutate((prevData) => [...(prevData ?? []), res], false);
@@ -89,16 +96,17 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
 
   const editLabel = (label: IIssueLabels) => {
     setNewLabelForm(true);
-    setValue("colour", label.colour);
+    setValue("color", label.color);
     setValue("name", label.name);
     setIsUpdating(true);
     setLabelIdForUpdate(label.id);
   };
 
   const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
-    if (!activeWorkspace || !activeProject || isSubmitting) return;
+    if (!activeWorkspace || !projectDetails || isSubmitting) return;
+
     await issuesService
-      .patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
+      .patchIssueLabel(activeWorkspace.slug, projectDetails.id, labelIdForUpdate ?? "", formData)
       .then((res) => {
         console.log(res);
         reset(defaultValues);
@@ -112,10 +120,10 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   };
 
   const handleLabelDelete = (labelId: string) => {
-    if (activeWorkspace && activeProject) {
+    if (activeWorkspace && projectDetails) {
       mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
       issuesService
-        .deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
+        .deleteIssueLabel(activeWorkspace.slug, projectDetails.id, labelId)
         .then((res) => {
           console.log(res);
         })
@@ -126,14 +134,14 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
-      type="project"
+    <AppLayout
+      settingsLayout="project"
       memberType={{ isMember, isOwner, isViewer, isGuest }}
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${activeProject?.name ?? "Project"}`}
-            link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+            title={`${projectDetails?.name ?? "Project"}`}
+            link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
           />
           <BreadcrumbItem title="Labels Settings" />
         </Breadcrumbs>
@@ -170,13 +178,13 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
                         open ? "text-gray-900" : "text-gray-500"
                       }`}
                     >
-                      {watch("colour") && watch("colour") !== "" && (
+                      {watch("color") && watch("color") !== "" && (
                         <span
                           className="h-4 w-4 rounded"
                           style={{
-                            backgroundColor: watch("colour") ?? "green",
+                            backgroundColor: watch("color") ?? "green",
                           }}
-                         />
+                        />
                       )}
                     </Popover.Button>
 
@@ -191,7 +199,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
                     >
                       <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
                         <Controller
-                          name="colour"
+                          name="color"
                           control={control}
                           render={({ field: { value, onChange } }) => (
                             <TwitterPicker
@@ -258,7 +266,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
           </>
         </div>
       </section>
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 0c9e90029..f8510b73a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -2,9 +2,8 @@ import { useState } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
-import { PlusIcon } from "@heroicons/react/24/outline";
-import type { NextPage, NextPageContext } from "next";
 
 // services
 import projectService from "services/project.service";
@@ -13,10 +12,8 @@ import workspaceService from "services/workspace.service";
 import { requiredAdmin } from "lib/auth";
 // hooks
 import useToast from "hooks/use-toast";
-// constants
-import { ROLE } from "constants/";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
@@ -24,6 +21,9 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
 import { Button, CustomListbox, CustomMenu, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import {
   PROJECT_DETAILS,
@@ -31,6 +31,8 @@ import {
   PROJECT_MEMBERS,
   WORKSPACE_DETAILS,
 } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
 
 type TMemberSettingsProps = {
   isMember: boolean;
@@ -58,7 +60,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
   );
 
-  const { data: activeProject } = useSWR(
+  const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.getProject(workspaceSlug as string, projectId as string)
@@ -120,11 +122,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
           (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
         )}
         handleDelete={async () => {
-          if (!activeWorkspace || !activeProject) return;
+          if (!activeWorkspace || !projectDetails) return;
           if (selectedRemoveMember) {
             await projectService.deleteProjectMember(
               activeWorkspace.slug,
-              activeProject.id,
+              projectDetails.id,
               selectedRemoveMember
             );
             mutateMembers(
@@ -135,7 +137,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
           if (selectedInviteRemoveMember) {
             await projectService.deleteProjectInvitation(
               activeWorkspace.slug,
-              activeProject.id,
+              projectDetails.id,
               selectedInviteRemoveMember
             );
             mutateInvitations(
@@ -155,14 +157,14 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
         setIsOpen={setInviteModal}
         members={members}
       />
-      <SettingsLayout
-        type="project"
+      <AppLayout
+        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${activeProject?.name ?? "Project"}`}
-              link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
             />
             <BreadcrumbItem title="Members Settings" />
           </Breadcrumbs>
@@ -235,11 +237,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
                               title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
                               value={member.role}
                               onChange={(value) => {
-                                if (!activeWorkspace || !activeProject) return;
+                                if (!activeWorkspace || !projectDetails) return;
                                 projectService
                                   .updateProjectMember(
                                     activeWorkspace.slug,
-                                    activeProject.id,
+                                    projectDetails.id,
                                     member.id,
                                     {
                                       role: value,
@@ -306,7 +308,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
             </div>
           )}
         </section>
-      </SettingsLayout>
+      </AppLayout>
     </>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 1234b7063..52a095b2a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -11,13 +11,9 @@ import projectService from "services/project.service";
 // lib
 import { requiredAdmin } from "lib/auth";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
-import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
-import {
-  CreateUpdateStateInline,
-  StateGroup,
-} from "components/project/issues/BoardView/state/create-update-state-inline";
+import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "components/states";
 // ui
 import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -47,7 +43,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
     query: { workspaceSlug, projectId },
   } = useRouter();
 
-  const { data: activeProject } = useSWR(
+  const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => projectService.getProject(workspaceSlug as string, projectId as string)
@@ -67,19 +63,19 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
 
   return (
     <>
-      <ConfirmStateDeletion
+      <DeleteStateModal
         isOpen={!!selectDeleteState}
         data={states?.find((state) => state.id === selectDeleteState) ?? null}
         onClose={() => setSelectDeleteState(null)}
       />
-      <SettingsLayout
-        type="project"
+      <AppLayout
+        settingsLayout="project"
         memberType={{ isMember, isOwner, isViewer, isGuest }}
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${activeProject?.name ?? "Project"}`}
-              link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
+              title={`${projectDetails?.name ?? "Project"}`}
+              link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
             />
             <BreadcrumbItem title="States Settings" />
           </Breadcrumbs>
@@ -91,7 +87,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
             <p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
           </div>
           <div className="flex flex-col justify-between gap-4">
-            {states && activeProject ? (
+            {states && projectDetails ? (
               Object.keys(groupedStates).map((key) => (
                 <div key={key}>
                   <div className="mb-2 flex w-full justify-between md:w-2/3">
@@ -108,7 +104,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                   <div className="space-y-1 rounded-xl border p-1 md:w-2/3">
                     {key === activeGroup && (
                       <CreateUpdateStateInline
-                        projectId={activeProject.id}
+                        projectId={projectDetails.id}
                         onClose={() => {
                           setActiveGroup(null);
                           setSelectedState(null);
@@ -147,7 +143,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
                       ) : (
                         <div className="border-b last:border-b-0" key={state.id}>
                           <CreateUpdateStateInline
-                            projectId={activeProject.id}
+                            projectId={projectDetails.id}
                             onClose={() => {
                               setActiveGroup(null);
                               setSelectedState(null);
@@ -172,7 +168,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
             )}
           </div>
         </div>
-      </SettingsLayout>
+      </AppLayout>
     </>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 794ab433d..8b8d0408a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -88,7 +88,7 @@ const ProjectsPage: NextPage = () => {
                   title="Create a new project"
                   description={
                     <span>
-                      Use <pre className="inline rounded bg-gray-100 px-2 py-1">P</pre> shortcut to
+                      Use <pre className="inline rounded bg-gray-200 px-2 py-1">P</pre> shortcut to
                       create a new project
                     </span>
                   }
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index b1af24365..38758ffdc 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -1,19 +1,21 @@
 import React from "react";
 
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
 
 // lib
-import type { NextPage, GetServerSideProps } from "next";
 import { requiredWorkspaceAdmin } from "lib/auth";
-// constants
 // services
 import workspaceService from "services/workspace.service";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // ui
 import { Button } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import type { NextPage, GetServerSideProps } from "next";
+// fetch-keys
 import { WORKSPACE_DETAILS } from "constants/fetch-keys";
 
 type TBillingSettingsProps = {
@@ -35,9 +37,9 @@ const BillingSettings: NextPage<TBillingSettingsProps> = (props) => {
 
   return (
     <>
-      <SettingsLayout
-        memberType={{ ...props }}
-        type="workspace"
+      <AppLayout
+        settingsLayout="workspace"
+        memberType={props}
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
@@ -75,7 +77,7 @@ const BillingSettings: NextPage<TBillingSettingsProps> = (props) => {
             </div>
           </div>
         </section>
-      </SettingsLayout>
+      </AppLayout>
     </>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/settings/features.tsx
deleted file mode 100644
index a5deede27..000000000
--- a/apps/app/pages/[workspaceSlug]/settings/features.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-import useSWR from "swr";
-
-// lib
-import type { GetServerSideProps, NextPage } from "next";
-import { requiredWorkspaceAdmin } from "lib/auth";
-// constants
-// services
-import workspaceService from "services/workspace.service";
-// layouts
-import SettingsLayout from "layouts/settings-layout";
-// ui
-import { Button } from "components/ui";
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { WORKSPACE_DETAILS } from "constants/fetch-keys";
-
-type TFeatureSettingsProps = {
-  isOwner: boolean;
-  isMember: boolean;
-  isViewer: boolean;
-  isGuest: boolean;
-};
-
-const FeaturesSettings: NextPage<TFeatureSettingsProps> = (props) => {
-  const {
-    query: { workspaceSlug },
-  } = useRouter();
-
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  return (
-    <>
-      <SettingsLayout
-        memberType={{
-          ...props,
-        }}
-        type="workspace"
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${activeWorkspace?.name ?? "Workspace"}`}
-              link={`/${workspaceSlug}`}
-            />
-            <BreadcrumbItem title="Members Settings" />
-          </Breadcrumbs>
-        }
-      >
-        <section className="space-y-8">
-          <div>
-            <h3 className="text-3xl font-bold leading-6 text-gray-900">Workspace Features</h3>
-          </div>
-          <div className="space-y-8 md:w-2/3">
-            <div className="flex items-center gap-x-10 gap-y-2">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  Modules are enabled for all the projects in this workspace. Access it from the
-                  navigation bar.
-                </p>
-              </div>
-              <div>
-                {/* Disabled- bg-gray-200, translate-x-0 */}
-                <button
-                  type="button"
-                  className="pointer-events-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-500 transition-colors duration-200 ease-in-out focus:outline-none"
-                  role="switch"
-                  aria-checked="false"
-                >
-                  <span className="sr-only">Use setting</span>
-                  <span
-                    aria-hidden="true"
-                    className="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                  />
-                </button>
-              </div>
-            </div>
-            <div className="flex items-center gap-x-10 gap-y-2">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Use cycles</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  Cycles are enabled for all the projects in this workspace. Access it from the
-                  navigation bar.
-                </p>
-              </div>
-              <div>
-                {/* Disabled- bg-gray-200, translate-x-0 */}
-                <button
-                  type="button"
-                  className="pointer-events-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-500 transition-colors duration-200 ease-in-out focus:outline-none"
-                  role="switch"
-                  aria-checked="false"
-                >
-                  <span className="sr-only">Use setting</span>
-                  <span
-                    aria-hidden="true"
-                    className="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                  />
-                </button>
-              </div>
-            </div>
-            <div className="flex items-center gap-x-10 gap-y-2">
-              <div>
-                <h4 className="text-md mb-1 leading-6 text-gray-900">Use backlogs</h4>
-                <p className="mb-3 text-sm text-gray-500">
-                  Backlog are enabled for all the projects in this workspace. Access it from the
-                  navigation bar.
-                </p>
-              </div>
-              <div>
-                {/* Disabled- bg-gray-200, translate-x-0 */}
-                <button
-                  type="button"
-                  className="pointer-events-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-500 transition-colors duration-200 ease-in-out focus:outline-none"
-                  role="switch"
-                  aria-checked="false"
-                >
-                  <span className="sr-only">Use setting</span>
-                  <span
-                    aria-hidden="true"
-                    className="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                  />
-                </button>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <a href="https://plane.so/" target="_blank" rel="noreferrer">
-                <Button theme="secondary" size="rg" className="text-xs">
-                  Plane is open-source, view Roadmap
-                </Button>
-              </a>
-              <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
-                <Button theme="secondary" size="rg" className="text-xs">
-                  Star us on GitHub
-                </Button>
-              </a>
-            </div>
-          </div>
-        </section>
-      </SettingsLayout>
-    </>
-  );
-};
-
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const workspaceSlug = ctx.params?.workspaceSlug as string;
-
-  const memberDetail = await requiredWorkspaceAdmin(workspaceSlug, ctx.req.headers.cookie);
-
-  if (memberDetail === null) {
-    return {
-      redirect: {
-        destination: "/",
-        permanent: false,
-      },
-    };
-  }
-
-  return {
-    props: {
-      isOwner: memberDetail?.role === 20,
-      isMember: memberDetail?.role === 15,
-      isViewer: memberDetail?.role === 10,
-      isGuest: memberDetail?.role === 5,
-    },
-  };
-};
-
-export default FeaturesSettings;
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index e44d8d0ba..5ee704bce 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -17,11 +17,11 @@ import { requiredWorkspaceAdmin } from "lib/auth";
 import workspaceService from "services/workspace.service";
 import fileServices from "services/file.service";
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { ImageUploadModal } from "components/common/image-upload-modal";
+import { ImageUploadModal } from "components/core";
 import ConfirmWorkspaceDeletion from "components/workspace/confirm-workspace-deletion";
 // ui
 import { Spinner, Button, Input, CustomSelect } from "components/ui";
@@ -35,7 +35,7 @@ import type { GetServerSideProps, NextPage } from "next";
 // fetch-keys
 import { WORKSPACE_DETAILS, USER_WORKSPACES } from "constants/fetch-keys";
 // constants
-import { companySize } from "constants/";
+import { COMPANY_SIZE } from "constants/workspace";
 
 const defaultValues: Partial<IWorkspace> = {
   name: "",
@@ -85,11 +85,13 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
 
   const onSubmit = async (formData: IWorkspace) => {
     if (!activeWorkspace) return;
+
     const payload: Partial<IWorkspace> = {
       logo: formData.logo,
       name: formData.name,
       company_size: formData.company_size,
     };
+
     await workspaceService
       .updateWorkspace(activeWorkspace.slug, payload)
       .then((res) => {
@@ -106,9 +108,9 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
   };
 
   return (
-    <SettingsLayout
-      memberType={{ ...props }}
-      type="workspace"
+    <AppLayout
+      settingsLayout="workspace"
+      memberType={props}
       meta={{
         title: "Plane - Workspace Settings",
       }}
@@ -278,7 +280,7 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
                     label={value ? value.toString() : "Select company size"}
                     input
                   >
-                    {companySize?.map((item) => (
+                    {COMPANY_SIZE?.map((item) => (
                       <CustomSelect.Option key={item.value} value={item.value}>
                         {item.label}
                       </CustomSelect.Option>
@@ -315,7 +317,7 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
           <Spinner />
         </div>
       )}
-    </SettingsLayout>
+    </AppLayout>
   );
 };
 
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index a4e8c9166..e3bbcd2fc 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -2,29 +2,31 @@ import { useState } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
-import { PlusIcon } from "@heroicons/react/24/outline";
 
 // lib
-import type { GetServerSideProps, NextPage } from "next";
 import { requiredWorkspaceAdmin } from "lib/auth";
 // hooks
 import useToast from "hooks/use-toast";
 // services
 import workspaceService from "services/workspace.service";
-// constants
 // layouts
-import SettingsLayout from "layouts/settings-layout";
+import AppLayout from "layouts/app-layout";
 // components
 import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 // ui
 import { Button, CustomListbox, CustomMenu, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { ROLE } from "constants/";
 // icons
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import type { GetServerSideProps, NextPage } from "next";
 // fetch-keys
 import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+// constants
+import { ROLE } from "constants/workspace";
 
 type TMembersSettingsProps = {
   isOwner: boolean;
@@ -135,11 +137,9 @@ const MembersSettings: NextPage<TMembersSettingsProps> = (props) => {
         workspace_slug={workspaceSlug as string}
         members={members}
       />
-      <SettingsLayout
-        memberType={{
-          ...props,
-        }}
-        type="workspace"
+      <AppLayout
+        settingsLayout="workspace"
+        memberType={props}
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
@@ -283,7 +283,7 @@ const MembersSettings: NextPage<TMembersSettingsProps> = (props) => {
             </div>
           )}
         </section>
-      </SettingsLayout>
+      </AppLayout>
     </>
   );
 };
diff --git a/apps/app/pages/_app.tsx b/apps/app/pages/_app.tsx
index d838868a6..f10a6f722 100644
--- a/apps/app/pages/_app.tsx
+++ b/apps/app/pages/_app.tsx
@@ -10,15 +10,13 @@ import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
-      <UserProvider>
-        <ToastContextProvider>
-          <ThemeContextProvider>
-            <Component {...pageProps} />
-          </ThemeContextProvider>
-        </ToastContextProvider>
-      </UserProvider>
-    </>
+    <UserProvider>
+      <ToastContextProvider>
+        <ThemeContextProvider>
+          <Component {...pageProps} />
+        </ThemeContextProvider>
+      </ToastContextProvider>
+    </UserProvider>
   );
 }
 
diff --git a/apps/app/pages/_error.js b/apps/app/pages/_error.js
new file mode 100644
index 000000000..f1ee86ca7
--- /dev/null
+++ b/apps/app/pages/_error.js
@@ -0,0 +1,33 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from "@sentry/nextjs";
+import NextErrorComponent from "next/error";
+
+const CustomErrorComponent = (props) => <NextErrorComponent statusCode={props.statusCode} />;
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;
diff --git a/apps/app/pages/create-workspace.tsx b/apps/app/pages/create-workspace.tsx
index fcacbcedf..2c4b1a6a4 100644
--- a/apps/app/pages/create-workspace.tsx
+++ b/apps/app/pages/create-workspace.tsx
@@ -25,7 +25,7 @@ import type { NextPage, NextPageContext } from "next";
 // fetch-keys
 import { USER_WORKSPACES } from "constants/fetch-keys";
 // constants
-import { companySize } from "constants/";
+import { COMPANY_SIZE } from "constants/workspace";
 
 const defaultValues = {
   name: "",
@@ -145,7 +145,7 @@ const CreateWorkspace: NextPage = () => {
                             label={value ? value.toString() : "Select company size"}
                             input
                           >
-                            {companySize?.map((item) => (
+                            {COMPANY_SIZE?.map((item) => (
                               <CustomSelect.Option key={item.value} value={item.value}>
                                 {item.label}
                               </CustomSelect.Option>
diff --git a/apps/app/pages/error.tsx b/apps/app/pages/error.tsx
index fd41671d9..3909a1268 100644
--- a/apps/app/pages/error.tsx
+++ b/apps/app/pages/error.tsx
@@ -1,21 +1,21 @@
 import React from "react";
 
-import type { NextPage } from "next";
-
 // layouts
 import DefaultLayout from "layouts/default-layout";
+// types
+import type { NextPage } from "next";
 
 const ErrorPage: NextPage = () => (
-    <DefaultLayout
-      meta={{
-        title: "Plane - An error occurred",
-        description: "We were unable to get this page for you.",
-      }}
-    >
-      <div className="h-full w-full">
-        <h2 className="text-3xl">Error!</h2>
-      </div>
-    </DefaultLayout>
-  );
+  <DefaultLayout
+    meta={{
+      title: "Plane - An error occurred",
+      description: "We were unable to get this page for you.",
+    }}
+  >
+    <div className="h-full w-full">
+      <h2 className="text-3xl">Error!</h2>
+    </div>
+  </DefaultLayout>
+);
 
 export default ErrorPage;
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index 20bbc6661..a795211ff 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -1,7 +1,7 @@
-import type { NextPage, NextPageContext } from "next";
-
 // lib
 import { homePageRedirect } from "lib/auth";
+// types
+import type { NextPage, NextPageContext } from "next";
 
 const Home: NextPage = () => null;
 
diff --git a/apps/app/pages/magic-sign-in/index.tsx b/apps/app/pages/magic-sign-in/index.tsx
index ccfc13268..521373685 100644
--- a/apps/app/pages/magic-sign-in/index.tsx
+++ b/apps/app/pages/magic-sign-in/index.tsx
@@ -4,15 +4,16 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
+// layouts
+import DefaultLayout from "layouts/default-layout";
 // services
-import type { NextPage } from "next";
 import authenticationService from "services/authentication.service";
-// constants
 // hooks
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
-// layouts
-import DefaultLayout from "layouts/default-layout";
+// types
+import type { NextPage } from "next";
+// constants
 import { USER_WORKSPACES } from "constants/fetch-keys";
 
 const MagicSignIn: NextPage = () => {
diff --git a/apps/app/pages/onboarding/index.tsx b/apps/app/pages/onboarding/index.tsx
index 68d8f70f9..48f01462b 100644
--- a/apps/app/pages/onboarding/index.tsx
+++ b/apps/app/pages/onboarding/index.tsx
@@ -2,11 +2,13 @@ import { useState } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/router";
-// hooks
-import type { NextPage, NextPageContext } from "next";
-import useUser from "hooks/use-user";
+
 // lib
 import { requiredAuth } from "lib/auth";
+// services
+import userService from "services/user.service";
+// hooks
+import useUser from "hooks/use-user";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
@@ -20,7 +22,8 @@ import InviteMembers from "components/onboarding/invite-members";
 import CommandMenu from "components/onboarding/command-menu";
 // images
 import Logo from "public/onboarding/logo.svg";
-import userService from "services/user.service";
+// types
+import type { NextPage, NextPageContext } from "next";
 
 const Onboarding: NextPage = () => {
   const [step, setStep] = useState(1);
diff --git a/apps/app/pages/workspace-member-invitation/[invitationId].tsx b/apps/app/pages/workspace-member-invitation/[invitationId].tsx
index 7afe4c7e7..cbbb2fd41 100644
--- a/apps/app/pages/workspace-member-invitation/[invitationId].tsx
+++ b/apps/app/pages/workspace-member-invitation/[invitationId].tsx
@@ -13,7 +13,6 @@ import {
 } from "@heroicons/react/24/outline";
 // swr
 // services
-import type { NextPage } from "next";
 import workspaceService from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
@@ -23,6 +22,8 @@ import DefaultLayout from "layouts/default-layout";
 import { Spinner } from "components/ui";
 // icons
 import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
+// types
+import type { NextPage } from "next";
 // constants
 import { WORKSPACE_INVITATION } from "constants/fetch-keys";
 
diff --git a/apps/app/sentry.client.config.js b/apps/app/sentry.client.config.js
new file mode 100644
index 000000000..8816c47b1
--- /dev/null
+++ b/apps/app/sentry.client.config.js
@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
diff --git a/apps/app/sentry.edge.config.js b/apps/app/sentry.edge.config.js
new file mode 100644
index 000000000..e6347794f
--- /dev/null
+++ b/apps/app/sentry.edge.config.js
@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever middleware or an Edge route handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
diff --git a/apps/app/sentry.properties b/apps/app/sentry.properties
new file mode 100644
index 000000000..6796827bd
--- /dev/null
+++ b/apps/app/sentry.properties
@@ -0,0 +1,3 @@
+defaults.url=https://sentry.io/
+defaults.org=plane
+defaults.project=plane-web
diff --git a/apps/app/sentry.server.config.js b/apps/app/sentry.server.config.js
new file mode 100644
index 000000000..db1fbc4b1
--- /dev/null
+++ b/apps/app/sentry.server.config.js
@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});
diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
index 07f39d3a5..109b62108 100644
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@@ -26,6 +26,18 @@ class ProjectCycleServices extends APIService {
       });
   }
 
+  async getCycleDetails(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
   async getCycleIssues(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 45deb0dc6..319f3207d 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -401,6 +401,19 @@ img.ProseMirror-separator {
 /* end table styling */
 
 /* link styling */
+.remirror-floating-popover {
+  z-index: 20 !important;
+}
+
+.remirror-floating-popover input {
+  font-size: 0.75rem;
+  border-radius: 5px;
+  padding: 5px;
+  border: 1px solid #a8a6a6;
+  box-shadow: 1px 1px 5px #c0bebe;
+  outline: none;
+}
+
 .remirror-editor-wrapper a {
   color: blue;
   text-decoration: underline;
diff --git a/apps/app/types/issues.d.ts b/apps/app/types/issues.d.ts
index 4ac7ef9c4..3dcb8c918 100644
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@@ -171,7 +171,7 @@ export interface IIssueLabels {
   updated_at: Date;
   name: string;
   description: string;
-  colour: string;
+  color: string;
   created_by: string;
   updated_by: string;
   project: string;
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index 4a83b90ba..603b8a527 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -1,20 +1,22 @@
 import type { IUserLite, IWorkspace } from "./";
 
 export interface IProject {
-  id: string;
-  workspace: IWorkspace | string;
-  default_assignee: IUser | string | null;
-  project_lead: IUser | string | null;
   created_at: Date;
-  updated_at: Date;
-  name: string;
-  description: string;
-  network: number;
-  identifier: string;
-  slug: string;
   created_by: string;
-  updated_by: string;
+  cycle_view: boolean;
+  default_assignee: IUser | string | null;
+  description: string;
   icon: string;
+  id: string;
+  identifier: string;
+  module_view: boolean;
+  name: string;
+  network: number;
+  project_lead: IUser | string | null;
+  slug: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: IWorkspace | string;
 }
 
 type ProjectViewTheme = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a0f52745..492366154 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       config: link:packages/config
       prettier: 2.8.3
-      turbo: 1.7.0
+      turbo: 1.7.2
 
   apps/app:
     specifiers:
@@ -20,6 +20,7 @@ importers:
       '@remirror/extension-react-tables': ^2.2.11
       '@remirror/pm': ^2.0.3
       '@remirror/react': ^2.0.24
+      '@sentry/nextjs': ^7.36.0
       '@types/js-cookie': ^3.0.2
       '@types/lodash.debounce': ^4.0.7
       '@types/node': 18.0.6
@@ -62,6 +63,7 @@ importers:
       '@remirror/extension-react-tables': 2.2.11_primzaudxtd4wvxl4iqmlhjvbm
       '@remirror/pm': 2.0.3
       '@remirror/react': 2.0.24_primzaudxtd4wvxl4iqmlhjvbm
+      '@sentry/nextjs': 7.36.0_next@12.3.2+react@18.2.0
       '@types/lodash.debounce': 4.0.7
       '@types/react-datepicker': 4.8.0_biqbaboplfbrettd7655fr4n2y
       axios: 1.2.0
@@ -3754,6 +3756,24 @@ packages:
       rollup: 2.79.1
     dev: false
 
+  /@rollup/plugin-commonjs/24.0.0_rollup@2.78.0:
+    resolution: {integrity: sha512-0w0wyykzdyRRPHOb0cQt14mIBLujfAv6GgP6g8nvg/iBxEm112t3YPPq+Buqe2+imvElTka+bjNlJ/gB56TD8g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.0.2_rollup@2.78.0
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 8.1.0
+      is-reference: 1.2.1
+      magic-string: 0.27.0
+      rollup: 2.78.0
+    dev: false
+
   /@rollup/plugin-node-resolve/11.2.1_rollup@2.79.1:
     resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
     engines: {node: '>= 10.0.0'}
@@ -3791,9 +3811,174 @@ packages:
       rollup: 2.79.1
     dev: false
 
+  /@rollup/pluginutils/5.0.2_rollup@2.78.0:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.78.0
+    dev: false
+
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
 
+  /@sentry/browser/7.36.0:
+    resolution: {integrity: sha512-Mu0OpisCZFICBGxVXdHWjUDgSvuQKjnO9acNcXR1+68IU08iX+cU6f2kq6VzI4mW/pNieI20FDFbx9KA0YZ4+A==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.36.0
+      '@sentry/replay': 7.36.0
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/cli/1.74.6:
+    resolution: {integrity: sha512-pJ7JJgozyjKZSTjOGi86chIngZMLUlYt2HOog+OJn+WGvqEkVymu8m462j1DiXAnex9NspB4zLLNuZ/R6rTQHg==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      https-proxy-agent: 5.0.1
+      mkdirp: 0.5.6
+      node-fetch: 2.6.9
+      npmlog: 4.1.2
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
+  /@sentry/core/7.36.0:
+    resolution: {integrity: sha512-lq1MlcMhvm7QIwUOknFeufkg4M6QREY3s61y6pm1o+o3vSqB7Hz0D19xlyEpP62qMn8OyuttVKOVK1UfGc2EyQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/integrations/7.36.0:
+    resolution: {integrity: sha512-wrRoUqdeGi64NNimGVk8U8DBiXamxTYPBux0/faFDyau8EJyQFcv8zOyB78Za4W2Ss3ZXNaE/WtFF8UxalHzBQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      localforage: 1.10.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/nextjs/7.36.0_next@12.3.2+react@18.2.0:
+    resolution: {integrity: sha512-7IUwBjCjo3rWuvEG16D1wKb0D+aMyCU920VGCAQVZaqTZAgrgAKfpTa1Sk0fmDxYglW1EBI9QM+WEnOa9RleLw==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      next: ^10.0.8 || ^11.0 || ^12.0 || ^13.0
+      react: 16.x || 17.x || 18.x
+      webpack: '>= 4.0.0'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      '@rollup/plugin-commonjs': 24.0.0_rollup@2.78.0
+      '@sentry/core': 7.36.0
+      '@sentry/integrations': 7.36.0
+      '@sentry/node': 7.36.0
+      '@sentry/react': 7.36.0_react@18.2.0
+      '@sentry/tracing': 7.36.0
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      '@sentry/webpack-plugin': 1.20.0
+      chalk: 3.0.0
+      next: 12.3.2_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      rollup: 2.78.0
+      tslib: 1.14.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
+  /@sentry/node/7.36.0:
+    resolution: {integrity: sha512-nAHAY+Rbn5OlTpNX/i6wYrmw3hT/BtwPZ/vNU52cKgw7CpeE1UrCeFjnPn18rQPB7lIh7x0vNvoaPrfemRzpSQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.36.0
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      cookie: 0.4.2
+      https-proxy-agent: 5.0.1
+      lru_map: 0.3.3
+      tslib: 1.14.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@sentry/react/7.36.0_react@18.2.0:
+    resolution: {integrity: sha512-ttrRqbgeqvkV3DwkDRZC/V8OEnBKGpQf4dKpG8oMlfdVbMTINzrxYUgkhi9xAkxkH9O+vj3Md8L3Rdqw/SDwKQ==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: 15.x || 16.x || 17.x || 18.x
+    dependencies:
+      '@sentry/browser': 7.36.0
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/replay/7.36.0:
+    resolution: {integrity: sha512-wNbME74/2GtkqdDXz7NaStyfPWVLjYmN9TFWvu6E9sNl9pkDDvii/Qc8F6ps1wa7bozkKcWRHgNvYiGCxUBHcg==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@sentry/core': 7.36.0
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+    dev: false
+
+  /@sentry/tracing/7.36.0:
+    resolution: {integrity: sha512-5R5mfWMDncOcTMmmyYMjgus1vZJzIFw4LHaSbrX7e1IRNT/6vFyNeVxATa2ePXb9mI3XHo5f2p7YrnreAtaSXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.36.0
+      '@sentry/types': 7.36.0
+      '@sentry/utils': 7.36.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/types/7.36.0:
+    resolution: {integrity: sha512-uvfwUn3okAWSZ948D/xqBrkc3Sn6TeHUgi3+p/dTTNGAXXskzavgfgQ4rSW7f3YD4LL+boZojpoIARVLodMGuA==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /@sentry/utils/7.36.0:
+    resolution: {integrity: sha512-mgDi5X5Bm0sydCzXpnyKD/sD98yc2qnKXyRdNX4HRRwruhC/P53LT0hGhZXsyqsB/l8OAMl0zWXJLg0xONQsEw==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.36.0
+      tslib: 1.14.1
+    dev: false
+
+  /@sentry/webpack-plugin/1.20.0:
+    resolution: {integrity: sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@sentry/cli': 1.74.6
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
   /@seznam/compose-react-refs/1.0.6:
     resolution: {integrity: sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==}
     dev: false
@@ -4402,6 +4587,15 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /agent-base/6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /ajv-keywords/3.5.2_ajv@6.12.6:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
@@ -4449,6 +4643,11 @@ packages:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
+  /ansi-regex/2.1.1:
+    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -4472,6 +4671,17 @@ packages:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  /aproba/1.2.0:
+    resolution: {integrity: sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==}
+    dev: false
+
+  /are-we-there-yet/1.1.7:
+    resolution: {integrity: sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==}
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 2.3.7
+    dev: false
+
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -4766,6 +4976,14 @@ packages:
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
 
+  /chalk/3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: false
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -4836,6 +5054,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /code-point-at/1.1.0:
+    resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /codemirror/5.65.11:
     resolution: {integrity: sha512-Gp62g2eKSCHYt10axmGhKq3WoJSvVpvhXmowNq7pZdRVowwtvBR/hi2LSP5srtctKkRT33T6/n8Kv1UGp7JW4A==}
     dev: false
@@ -4896,10 +5119,19 @@ packages:
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  /console-control-strings/1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+    dev: false
+
   /convert-source-map/1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
     dev: false
 
+  /cookie/0.4.2:
+    resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /copy-to-clipboard/3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
     dependencies:
@@ -4916,6 +5148,10 @@ packages:
     resolution: {integrity: sha512-VVXcDpp/xJ21KdULRq/lXdLzQAtX7+37LzpyfFM973il0tWSsDEoyzG38G14AjTpK9VTfiNM9jnFauq/CpaWGQ==}
     requiresBuild: true
 
+  /core-util-is/1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
   /cosmiconfig/7.1.0:
     resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
     engines: {node: '>=10'}
@@ -5067,6 +5303,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /delegates/1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+    dev: false
+
   /dequal/2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -6062,6 +6302,10 @@ packages:
     resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
     dev: false
 
+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: false
+
   /estree-walker/3.0.1:
     resolution: {integrity: sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==}
     dev: false
@@ -6257,6 +6501,19 @@ packages:
   /functions-have-names/1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  /gauge/2.7.4:
+    resolution: {integrity: sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==}
+    dependencies:
+      aproba: 1.2.0
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 1.0.2
+      strip-ansi: 3.0.1
+      wide-align: 1.1.5
+    dev: false
+
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -6321,6 +6578,17 @@ packages:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  /glob/8.1.0:
+    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 5.1.4
+      once: 1.4.0
+    dev: false
+
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -6394,6 +6662,10 @@ packages:
     dependencies:
       has-symbols: 1.0.3
 
+  /has-unicode/2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+    dev: false
+
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
@@ -6456,6 +6728,16 @@ packages:
       react-is: 16.13.1
     dev: false
 
+  /https-proxy-agent/5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /hyphenate-style-name/1.0.4:
     resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
     dev: false
@@ -6478,6 +6760,10 @@ packages:
     resolution: {integrity: sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==}
     engines: {node: '>= 4'}
 
+  /immediate/3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+    dev: false
+
   /import-fresh/3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -6607,6 +6893,13 @@ packages:
       number-is-nan: 1.0.1
     dev: false
 
+  /is-fullwidth-code-point/1.0.0:
+    resolution: {integrity: sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      number-is-nan: 1.0.1
+    dev: false
+
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -6690,6 +6983,12 @@ packages:
       isobject: 3.0.1
     dev: false
 
+  /is-reference/1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 1.0.0
+    dev: false
+
   /is-reference/3.0.0:
     resolution: {integrity: sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==}
     dependencies:
@@ -6735,6 +7034,10 @@ packages:
     dependencies:
       call-bind: 1.0.2
 
+  /isarray/1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: false
+
   /isexe/2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -6908,6 +7211,12 @@ packages:
       isomorphic.js: 0.2.5
     dev: false
 
+  /lie/3.1.1:
+    resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
+    dependencies:
+      immediate: 3.0.6
+    dev: false
+
   /lilconfig/2.0.6:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
@@ -6925,6 +7234,12 @@ packages:
       json5: 2.2.3
     dev: false
 
+  /localforage/1.10.0:
+    resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
+    dependencies:
+      lie: 3.1.1
+    dev: false
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -6991,12 +7306,23 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /lru_map/0.3.3:
+    resolution: {integrity: sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==}
+    dev: false
+
   /magic-string/0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
       sourcemap-codec: 1.4.8
     dev: false
 
+  /magic-string/0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: false
+
   /make-dir/3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -7467,6 +7793,13 @@ packages:
   /minimist/1.2.7:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
 
+  /mkdirp/0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.7
+    dev: false
+
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -7695,6 +8028,18 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /node-fetch/2.6.9:
+    resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-releases/2.0.6:
     resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
 
@@ -7706,6 +8051,15 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
+  /npmlog/4.1.2:
+    resolution: {integrity: sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==}
+    dependencies:
+      are-we-there-yet: 1.1.7
+      console-control-strings: 1.1.0
+      gauge: 2.7.4
+      set-blocking: 2.0.0
+    dev: false
+
   /number-is-nan/1.0.1:
     resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==}
     engines: {node: '>=0.10.0'}
@@ -8131,6 +8485,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /process-nextick-args/2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: false
+
   /progress/2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -8561,6 +8919,18 @@ packages:
     dependencies:
       pify: 2.3.0
 
+  /readable-stream/2.3.7:
+    resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: false
+
   /readdirp/3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -8834,6 +9204,14 @@ packages:
       terser: 5.16.1
     dev: false
 
+  /rollup/2.78.0:
+    resolution: {integrity: sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: false
+
   /rollup/2.79.1:
     resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
     engines: {node: '>=10.0.0'}
@@ -8883,6 +9261,10 @@ packages:
     resolution: {integrity: sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==}
     dev: false
 
+  /safe-buffer/5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: false
+
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: false
@@ -8946,6 +9328,10 @@ packages:
       randombytes: 2.1.0
     dev: false
 
+  /set-blocking/2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+    dev: false
+
   /set-harmonic-interval/1.0.1:
     resolution: {integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==}
     engines: {node: '>=6.9'}
@@ -8976,6 +9362,10 @@ packages:
       get-intrinsic: 1.1.3
       object-inspect: 1.12.2
 
+  /signal-exit/3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: false
+
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -9071,6 +9461,15 @@ packages:
       stacktrace-gps: 3.1.2
     dev: false
 
+  /string-width/1.0.2:
+    resolution: {integrity: sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      code-point-at: 1.1.0
+      is-fullwidth-code-point: 1.0.0
+      strip-ansi: 3.0.1
+    dev: false
+
   /string-width/4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -9105,6 +9504,12 @@ packages:
       define-properties: 1.1.4
       es-abstract: 1.20.4
 
+  /string_decoder/1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: false
+
   /stringify-entities/4.0.3:
     resolution: {integrity: sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==}
     dependencies:
@@ -9121,6 +9526,13 @@ packages:
       is-regexp: 1.0.0
     dev: false
 
+  /strip-ansi/3.0.1:
+    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: false
+
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -9386,6 +9798,10 @@ packages:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
     dev: false
 
+  /tr46/0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /tr46/1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
     dependencies:
@@ -9451,65 +9867,65 @@ packages:
       typescript: 4.9.4
     dev: false
 
-  /turbo-darwin-64/1.7.0:
-    resolution: {integrity: sha512-hSGAueSf5Ko8J67mpqjpt9FsP6ePn1nMcl7IVPoJq5dHsgX3anCP/BPlexJ502bNK+87DDyhQhJ/LPSJXKrSYQ==}
+  /turbo-darwin-64/1.7.2:
+    resolution: {integrity: sha512-Sml3WR8MSu80W+gS8SnoKNImcDOlIX7zlvezzds65mW11yGniIFfZ18aKWGOm92Nj2SvXCQ2+UmyGghbFaHNmQ==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-darwin-arm64/1.7.0:
-    resolution: {integrity: sha512-BLLOW5W6VZxk5+0ZOj5AO1qjM0P5isIgjbEuyAl8lHZ4s9antUbY4CtFrspT32XxPTYoDl4UjviPMcSsbcl3WQ==}
+  /turbo-darwin-arm64/1.7.2:
+    resolution: {integrity: sha512-JnlgGLScboUJGJxvmSsF+5xkImEDTMPg2FHzX4n8AMB9az9ZlPQAMtc+xu4p6Xp9eaykKiV2RG81YS3H0fxDLA==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-64/1.7.0:
-    resolution: {integrity: sha512-aw2qxmfZa+kT87SB3GNUoFimqEPzTlzlRqhPgHuAAT6Uf0JHnmebPt4K+ZPtDNl5yfVmtB05bhHPqw+5QV97Yg==}
+  /turbo-linux-64/1.7.2:
+    resolution: {integrity: sha512-vbLJw6ovG+lpiPqxniscBjljKJ2jbsHuKp8uK4j/wqgp68wAVKeAZW77GGDAUgDb88XH6Kvhh2hcizL+iWduww==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-arm64/1.7.0:
-    resolution: {integrity: sha512-AJEx2jX+zO5fQtJpO3r6uhTabj4oSA5ZhB7zTs/rwu/XqoydsvStA4X8NDW4poTbOjF7DcSHizqwi04tSMzpJw==}
+  /turbo-linux-arm64/1.7.2:
+    resolution: {integrity: sha512-zLnuS8WdHonKL74KqOopOH/leBOWumlVGF8/8hldbDPq0mwY+6myRR5/5LdveB51rkG4UJh/sQ94xV67tjBoyw==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-64/1.7.0:
-    resolution: {integrity: sha512-ewj7PPv2uxqv0r31hgnBa3E5qwUu7eyVRP5M1gB/TJXfSHduU79gbxpKCyxIZv2fL/N2/3U7EPOQPSZxBAoljA==}
+  /turbo-windows-64/1.7.2:
+    resolution: {integrity: sha512-oE5PMoXjmR09okvVzteFb6FjA6yo+nMsacsgKH2yLNq4sOrVo9tG98JkRurOv5+L6ZQ3yGXPxWHiqeH7hLkAVQ==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-arm64/1.7.0:
-    resolution: {integrity: sha512-LzjOUzveWkvTD0jP8DBMYiAnYemmydsvqxdSmsUapHHJkl6wKZIOQNSO7pxsy+9XM/1/+0f9Y9F9ZNl5lePTEA==}
+  /turbo-windows-arm64/1.7.2:
+    resolution: {integrity: sha512-mdTUJk23acRv5qxA/yEstYhM1VFenVE3FDrssxGRFq7S80smtCGK1xUd4BEDDzDlVXOqBohmM5jRh9516rcjPQ==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo/1.7.0:
-    resolution: {integrity: sha512-cwympNwQNnQZ/TffBd8yT0i0O10Cf/hlxccCYgUcwhcGEb9rDjE5thDbHoHw1hlJQUF/5ua7ERJe7Zr0lNE/ww==}
+  /turbo/1.7.2:
+    resolution: {integrity: sha512-YR/x3GZEx0C1RV6Yvuw/HB1Ixx3upM6ZTTa4WqKz9WtLWN8u2g+u2h5KpG5YtjCS3wl/8zVXgHf2WiMK6KIghg==}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      turbo-darwin-64: 1.7.0
-      turbo-darwin-arm64: 1.7.0
-      turbo-linux-64: 1.7.0
-      turbo-linux-arm64: 1.7.0
-      turbo-windows-64: 1.7.0
-      turbo-windows-arm64: 1.7.0
+      turbo-darwin-64: 1.7.2
+      turbo-darwin-arm64: 1.7.2
+      turbo-linux-64: 1.7.2
+      turbo-linux-arm64: 1.7.2
+      turbo-windows-64: 1.7.2
+      turbo-windows-arm64: 1.7.2
     dev: true
 
   /turndown-plugin-gfm/1.0.2:
@@ -9789,6 +10205,10 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
+  /webidl-conversions/3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: false
@@ -9800,6 +10220,18 @@ packages:
       source-map: 0.6.1
     dev: false
 
+  /webpack-sources/3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: false
+
+  /whatwg-url/5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /whatwg-url/7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
     dependencies:
@@ -9824,6 +10256,12 @@ packages:
     dependencies:
       isexe: 2.0.0
 
+  /wide-align/1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+    dependencies:
+      string-width: 4.2.3
+    dev: false
+
   /word-wrap/1.2.3:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
     engines: {node: '>=0.10.0'}
diff --git a/turbo.json b/turbo.json
index ddc3b9cc5..b4658a0df 100644
--- a/turbo.json
+++ b/turbo.json
@@ -6,7 +6,8 @@
     "NEXT_PUBLIC_API_BASE_URL",
     "NEXT_PUBLIC_DOCSEARCH_API_KEY",
     "NEXT_PUBLIC_DOCSEARCH_APP_ID",
-    "NEXT_PUBLIC_DOCSEARCH_INDEX_NAME"
+    "NEXT_PUBLIC_DOCSEARCH_INDEX_NAME",
+    "NEXT_PUBLIC_SENTRY_DSN"
   ],
   "pipeline": {
     "build": {