diff --git a/apiserver/package.json b/apiserver/package.json
index 2840f6bef..d357d5cb4 100644
--- a/apiserver/package.json
+++ b/apiserver/package.json
@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.18.0"
+  "version": "0.19.0"
 }
diff --git a/apiserver/plane/api/serializers/inbox.py b/apiserver/plane/api/serializers/inbox.py
index 78bb74d13..a0c79235d 100644
--- a/apiserver/plane/api/serializers/inbox.py
+++ b/apiserver/plane/api/serializers/inbox.py
@@ -1,9 +1,13 @@
 # Module improts
 from .base import BaseSerializer
+from .issue import IssueExpandSerializer
 from plane.db.models import InboxIssue
 
 
 class InboxIssueSerializer(BaseSerializer):
+
+    issue_detail = IssueExpandSerializer(read_only=True, source="issue")
+
     class Meta:
         model = InboxIssue
         fields = "__all__"
diff --git a/apiserver/plane/api/views/base.py b/apiserver/plane/api/views/base.py
index 13047eb78..1f6bd70af 100644
--- a/apiserver/plane/api/views/base.py
+++ b/apiserver/plane/api/views/base.py
@@ -19,7 +19,6 @@ from rest_framework.views import APIView
 # Module imports
 from plane.api.middleware.api_authentication import APIKeyAuthentication
 from plane.api.rate_limit import ApiKeyRateThrottle
-from plane.bgtasks.webhook_task import send_webhook
 from plane.utils.exception_logger import log_exception
 from plane.utils.paginator import BasePaginator
 
@@ -38,40 +37,6 @@ class TimezoneMixin:
             timezone.deactivate()
 
 
-class WebhookMixin:
-    webhook_event = None
-    bulk = False
-
-    def finalize_response(self, request, response, *args, **kwargs):
-        response = super().finalize_response(
-            request, response, *args, **kwargs
-        )
-
-        # Check for the case should webhook be sent
-        if (
-            self.webhook_event
-            and self.request.method in ["POST", "PATCH", "DELETE"]
-            and response.status_code in [200, 201, 204]
-        ):
-            url = request.build_absolute_uri()
-            parsed_url = urlparse(url)
-            # Extract the scheme and netloc
-            scheme = parsed_url.scheme
-            netloc = parsed_url.netloc
-            # Push the object to delay
-            send_webhook.delay(
-                event=self.webhook_event,
-                payload=response.data,
-                kw=self.kwargs,
-                action=self.request.method,
-                slug=self.workspace_slug,
-                bulk=self.bulk,
-                current_site=f"{scheme}://{netloc}",
-            )
-
-        return response
-
-
 class BaseAPIView(TimezoneMixin, APIView, BasePaginator):
     authentication_classes = [
         APIKeyAuthentication,
diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py
index d9c75ff41..6e1e5e057 100644
--- a/apiserver/plane/api/views/cycle.py
+++ b/apiserver/plane/api/views/cycle.py
@@ -5,6 +5,7 @@ import json
 from django.core import serializers
 from django.db.models import Count, F, Func, OuterRef, Q, Sum
 from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third party imports
 from rest_framework import status
@@ -26,10 +27,11 @@ from plane.db.models import (
 )
 from plane.utils.analytics_plot import burndown_plot
 
-from .base import BaseAPIView, WebhookMixin
+from .base import BaseAPIView
+from plane.bgtasks.webhook_task import model_activity
 
 
-class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
+class CycleAPIEndpoint(BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
     `update` and `destroy` actions related to cycle.
@@ -277,6 +279,16 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
                     project_id=project_id,
                     owned_by=request.user,
                 )
+                # Send the model activity
+                model_activity.delay(
+                    model_name="cycle",
+                    model_id=str(serializer.data["id"]),
+                    requested_data=request.data,
+                    current_instance=None,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
                 return Response(
                     serializer.data, status=status.HTTP_201_CREATED
                 )
@@ -295,6 +307,11 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
         cycle = Cycle.objects.get(
             workspace__slug=slug, project_id=project_id, pk=pk
         )
+
+        current_instance = json.dumps(
+            CycleSerializer(cycle).data, cls=DjangoJSONEncoder
+        )
+
         if cycle.archived_at:
             return Response(
                 {"error": "Archived cycle cannot be edited"},
@@ -344,6 +361,17 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
                     status=status.HTTP_409_CONFLICT,
                 )
             serializer.save()
+
+            # Send the model activity
+            model_activity.delay(
+                model_name="cycle",
+                model_id=str(serializer.data["id"]),
+                requested_data=request.data,
+                current_instance=current_instance,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -515,7 +543,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class CycleIssueAPIEndpoint(WebhookMixin, BaseAPIView):
+class CycleIssueAPIEndpoint(BaseAPIView):
     """
     This viewset automatically provides `list`, `create`,
     and `destroy` actions related to cycle issues.
diff --git a/apiserver/plane/api/views/inbox.py b/apiserver/plane/api/views/inbox.py
index 5e6e4a215..8987e4f63 100644
--- a/apiserver/plane/api/views/inbox.py
+++ b/apiserver/plane/api/views/inbox.py
@@ -154,6 +154,13 @@ class InboxIssueAPIEndpoint(BaseAPIView):
             state=state,
         )
 
+        # create an inbox issue
+        inbox_issue = InboxIssue.objects.create(
+            inbox_id=inbox.id,
+            project_id=project_id,
+            issue=issue,
+            source=request.data.get("source", "in-app"),
+        )
         # Create an Issue Activity
         issue_activity.delay(
             type="issue.activity.created",
@@ -163,14 +170,7 @@ class InboxIssueAPIEndpoint(BaseAPIView):
             project_id=str(project_id),
             current_instance=None,
             epoch=int(timezone.now().timestamp()),
-        )
-
-        # create an inbox issue
-        inbox_issue = InboxIssue.objects.create(
-            inbox_id=inbox.id,
-            project_id=project_id,
-            issue=issue,
-            source=request.data.get("source", "in-app"),
+            inbox=str(inbox_issue.id),
         )
 
         serializer = InboxIssueSerializer(inbox_issue)
@@ -260,6 +260,7 @@ class InboxIssueAPIEndpoint(BaseAPIView):
                             cls=DjangoJSONEncoder,
                         ),
                         epoch=int(timezone.now().timestamp()),
+                        inbox=(inbox_issue.id),
                     )
                 issue_serializer.save()
             else:
@@ -327,6 +328,7 @@ class InboxIssueAPIEndpoint(BaseAPIView):
                     epoch=int(timezone.now().timestamp()),
                     notification=False,
                     origin=request.META.get("HTTP_ORIGIN"),
+                    inbox=str(inbox_issue.id),
                 )
 
                 return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index 8d72ac5db..a62278b19 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -48,11 +48,10 @@ from plane.db.models import (
     ProjectMember,
 )
 
-from .base import BaseAPIView, WebhookMixin
+from .base import BaseAPIView
 
 
-
-class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
+class WorkspaceIssueAPIEndpoint(BaseAPIView):
     """
     This viewset provides `retrieveByIssueId` on workspace level
 
@@ -60,12 +59,9 @@ class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
 
     model = Issue
     webhook_event = "issue"
-    permission_classes = [
-        ProjectEntityPermission
-    ]
+    permission_classes = [ProjectEntityPermission]
     serializer_class = IssueSerializer
 
-
     @property
     def project__identifier(self):
         return self.kwargs.get("project__identifier", None)
@@ -91,7 +87,9 @@ class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
             .order_by(self.kwargs.get("order_by", "-created_at"))
         ).distinct()
 
-    def get(self, request, slug, project__identifier=None, issue__identifier=None):
+    def get(
+        self, request, slug, project__identifier=None, issue__identifier=None
+    ):
         if issue__identifier and project__identifier:
             issue = Issue.issue_objects.annotate(
                 sub_issues_count=Issue.issue_objects.filter(
@@ -100,7 +98,11 @@ class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
                 .values("count")
-            ).get(workspace__slug=slug, project__identifier=project__identifier, sequence_id=issue__identifier)
+            ).get(
+                workspace__slug=slug,
+                project__identifier=project__identifier,
+                sequence_id=issue__identifier,
+            )
             return Response(
                 IssueSerializer(
                     issue,
@@ -110,7 +112,8 @@ class WorkspaceIssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 status=status.HTTP_200_OK,
             )
 
-class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
+
+class IssueAPIEndpoint(BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
     `update` and `destroy` actions related to issue.
@@ -652,7 +655,7 @@ class IssueLinkAPIEndpoint(BaseAPIView):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class IssueCommentAPIEndpoint(WebhookMixin, BaseAPIView):
+class IssueCommentAPIEndpoint(BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
     `update` and `destroy` actions related to comments of the particular issue.
diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py
index 38744eaa5..eeb29dad2 100644
--- a/apiserver/plane/api/views/module.py
+++ b/apiserver/plane/api/views/module.py
@@ -5,6 +5,7 @@ import json
 from django.core import serializers
 from django.db.models import Count, F, Func, OuterRef, Prefetch, Q
 from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third party imports
 from rest_framework import status
@@ -28,10 +29,11 @@ from plane.db.models import (
     Project,
 )
 
-from .base import BaseAPIView, WebhookMixin
+from .base import BaseAPIView
+from plane.bgtasks.webhook_task import model_activity
 
 
-class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
+class ModuleAPIEndpoint(BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
     `update` and `destroy` actions related to module.
@@ -163,6 +165,16 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
                     status=status.HTTP_409_CONFLICT,
                 )
             serializer.save()
+            # Send the model activity
+            model_activity.delay(
+                model_name="module",
+                model_id=str(serializer.data["id"]),
+                requested_data=request.data,
+                current_instance=None,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
             module = Module.objects.get(pk=serializer.data["id"])
             serializer = ModuleSerializer(module)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
@@ -172,6 +184,11 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
         module = Module.objects.get(
             pk=pk, project_id=project_id, workspace__slug=slug
         )
+
+        current_instance = json.dumps(
+            ModuleSerializer(module).data, cls=DjangoJSONEncoder
+        )
+
         if module.archived_at:
             return Response(
                 {"error": "Archived module cannot be edited"},
@@ -204,6 +221,18 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
                     status=status.HTTP_409_CONFLICT,
                 )
             serializer.save()
+
+            # Send the model activity
+            model_activity.delay(
+                model_name="module",
+                model_id=str(serializer.data["id"]),
+                requested_data=request.data,
+                current_instance=current_instance,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -260,7 +289,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class ModuleIssueAPIEndpoint(WebhookMixin, BaseAPIView):
+class ModuleIssueAPIEndpoint(BaseAPIView):
     """
     This viewset automatically provides `list`, `create`, `retrieve`,
     `update` and `destroy` actions related to module issues.
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index fcb0cc4fb..019ab704e 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -1,7 +1,11 @@
+# Python imports
+import json
+
 # Django imports
 from django.db import IntegrityError
 from django.db.models import Exists, F, Func, OuterRef, Prefetch, Q, Subquery
 from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third party imports
 from rest_framework import status
@@ -23,11 +27,11 @@ from plane.db.models import (
     State,
     Workspace,
 )
-
-from .base import BaseAPIView, WebhookMixin
+from plane.bgtasks.webhook_task import model_activity
+from .base import BaseAPIView
 
 
-class ProjectAPIEndpoint(WebhookMixin, BaseAPIView):
+class ProjectAPIEndpoint(BaseAPIView):
     """Project Endpoints to create, update, list, retrieve and delete endpoint"""
 
     serializer_class = ProjectSerializer
@@ -236,6 +240,17 @@ class ProjectAPIEndpoint(WebhookMixin, BaseAPIView):
                     .filter(pk=serializer.data["id"])
                     .first()
                 )
+                # Model activity
+                model_activity.delay(
+                    model_name="project",
+                    model_id=str(project.id),
+                    requested_data=request.data,
+                    current_instance=None,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+
                 serializer = ProjectSerializer(project)
                 return Response(
                     serializer.data, status=status.HTTP_201_CREATED
@@ -265,7 +280,9 @@ class ProjectAPIEndpoint(WebhookMixin, BaseAPIView):
         try:
             workspace = Workspace.objects.get(slug=slug)
             project = Project.objects.get(pk=pk)
-
+            current_instance = json.dumps(
+                ProjectSerializer(project).data, cls=DjangoJSONEncoder
+            )
             if project.archived_at:
                 return Response(
                     {"error": "Archived project cannot be updated"},
@@ -303,6 +320,17 @@ class ProjectAPIEndpoint(WebhookMixin, BaseAPIView):
                     .filter(pk=serializer.data["id"])
                     .first()
                 )
+
+                model_activity.delay(
+                    model_name="project",
+                    model_id=str(project.id),
+                    requested_data=request.data,
+                    current_instance=current_instance,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+
                 serializer = ProjectSerializer(project)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(
diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index 8c641b720..b884d60a3 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -442,7 +442,7 @@ class IssueLinkSerializer(BaseSerializer):
             raise serializers.ValidationError("Invalid URL format.")
 
         # Check URL scheme
-        if not value.startswith(('http://', 'https://')):
+        if not value.startswith(("http://", "https://")):
             raise serializers.ValidationError("Invalid URL scheme.")
 
         return value
diff --git a/apiserver/plane/app/views/__init__.py b/apiserver/plane/app/views/__init__.py
index e24ef9a67..c38ce64a7 100644
--- a/apiserver/plane/app/views/__init__.py
+++ b/apiserver/plane/app/views/__init__.py
@@ -29,7 +29,7 @@ from .user.base import (
 )
 
 
-from .base import BaseAPIView, BaseViewSet, WebhookMixin
+from .base import BaseAPIView, BaseViewSet
 
 from .workspace.base import (
     WorkSpaceViewSet,
diff --git a/apiserver/plane/app/views/base.py b/apiserver/plane/app/views/base.py
index 42cac04fb..da42763d7 100644
--- a/apiserver/plane/app/views/base.py
+++ b/apiserver/plane/app/views/base.py
@@ -19,8 +19,6 @@ from rest_framework.views import APIView
 from rest_framework.viewsets import ModelViewSet
 
 # Module imports
-from plane.authentication.session import BaseSessionAuthentication
-from plane.bgtasks.webhook_task import send_webhook
 from plane.utils.exception_logger import log_exception
 from plane.utils.paginator import BasePaginator
 
@@ -39,35 +37,6 @@ class TimezoneMixin:
             timezone.deactivate()
 
 
-class WebhookMixin:
-    webhook_event = None
-    bulk = False
-
-    def finalize_response(self, request, response, *args, **kwargs):
-        response = super().finalize_response(
-            request, response, *args, **kwargs
-        )
-
-        # Check for the case should webhook be sent
-        if (
-            self.webhook_event
-            and self.request.method in ["POST", "PATCH", "DELETE"]
-            and response.status_code in [200, 201, 204]
-        ):
-            # Push the object to delay
-            send_webhook.delay(
-                event=self.webhook_event,
-                payload=response.data,
-                kw=self.kwargs,
-                action=self.request.method,
-                slug=self.workspace_slug,
-                bulk=self.bulk,
-                current_site=request.META.get("HTTP_ORIGIN"),
-            )
-
-        return response
-
-
 class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
     model = None
 
diff --git a/apiserver/plane/app/views/cycle/base.py b/apiserver/plane/app/views/cycle/base.py
index dd9826c56..621c1dcb7 100644
--- a/apiserver/plane/app/views/cycle/base.py
+++ b/apiserver/plane/app/views/cycle/base.py
@@ -20,6 +20,7 @@ from django.db.models import (
 )
 from django.db.models.functions import Coalesce
 from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third party imports
 from rest_framework import status
@@ -47,10 +48,11 @@ from plane.db.models import (
 from plane.utils.analytics_plot import burndown_plot
 
 # Module imports
-from .. import BaseAPIView, BaseViewSet, WebhookMixin
+from .. import BaseAPIView, BaseViewSet
+from plane.bgtasks.webhook_task import model_activity
 
 
-class CycleViewSet(WebhookMixin, BaseViewSet):
+class CycleViewSet(BaseViewSet):
     serializer_class = CycleSerializer
     model = Cycle
     webhook_event = "cycle"
@@ -412,6 +414,17 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .first()
                 )
+
+                # Send the model activity
+                model_activity.delay(
+                    model_name="cycle",
+                    model_id=str(cycle["id"]),
+                    requested_data=request.data,
+                    current_instance=None,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
                 return Response(cycle, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
@@ -434,6 +447,11 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                 {"error": "Archived cycle cannot be updated"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
+
+        current_instance = json.dumps(
+            CycleSerializer(cycle).data, cls=DjangoJSONEncoder
+        )
+
         request_data = request.data
 
         if (
@@ -487,6 +505,18 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                 "assignee_ids",
                 "status",
             ).first()
+
+            # Send the model activity
+            model_activity.delay(
+                model_name="cycle",
+                model_id=str(cycle["id"]),
+                requested_data=request.data,
+                current_instance=current_instance,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+
             return Response(cycle, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
diff --git a/apiserver/plane/app/views/cycle/issue.py b/apiserver/plane/app/views/cycle/issue.py
index 2a5505dd0..fdc998f6d 100644
--- a/apiserver/plane/app/views/cycle/issue.py
+++ b/apiserver/plane/app/views/cycle/issue.py
@@ -23,7 +23,7 @@ from rest_framework.response import Response
 from rest_framework import status
 
 # Module imports
-from .. import BaseViewSet, WebhookMixin
+from .. import BaseViewSet
 from plane.app.serializers import (
     IssueSerializer,
     CycleIssueSerializer,
@@ -38,9 +38,9 @@ from plane.db.models import (
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.issue_filters import issue_filters
+from plane.utils.user_timezone_converter import user_timezone_converter
 
-
-class CycleIssueViewSet(WebhookMixin, BaseViewSet):
+class CycleIssueViewSet(BaseViewSet):
     serializer_class = CycleIssueSerializer
     model = CycleIssue
 
@@ -191,6 +191,11 @@ class CycleIssueViewSet(WebhookMixin, BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
+
         return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id, cycle_id):
@@ -249,6 +254,7 @@ class CycleIssueViewSet(WebhookMixin, BaseViewSet):
         update_cycle_issue_activity = []
         # Iterate over each cycle_issue in cycle_issues
         for cycle_issue in cycle_issues:
+            old_cycle_id = cycle_issue.cycle_id
             # Update the cycle_issue's cycle_id
             cycle_issue.cycle_id = cycle_id
             # Add the modified cycle_issue to the records_to_update list
@@ -256,7 +262,7 @@ class CycleIssueViewSet(WebhookMixin, BaseViewSet):
             # Record the update activity
             update_cycle_issue_activity.append(
                 {
-                    "old_cycle_id": str(cycle_issue.cycle_id),
+                    "old_cycle_id": str(old_cycle_id),
                     "new_cycle_id": str(cycle_id),
                     "issue_id": str(cycle_issue.issue_id),
                 }
diff --git a/apiserver/plane/app/views/inbox/base.py b/apiserver/plane/app/views/inbox/base.py
index 8e433a127..d688a8853 100644
--- a/apiserver/plane/app/views/inbox/base.py
+++ b/apiserver/plane/app/views/inbox/base.py
@@ -251,6 +251,16 @@ class InboxIssueViewSet(BaseViewSet):
         )
         if serializer.is_valid():
             serializer.save()
+            inbox_id = Inbox.objects.filter(
+                workspace__slug=slug, project_id=project_id
+            ).first()
+            # create an inbox issue
+            inbox_issue = InboxIssue.objects.create(
+                inbox_id=inbox_id.id,
+                project_id=project_id,
+                issue_id=serializer.data["id"],
+                source=request.data.get("source", "in-app"),
+            )
             # Create an Issue Activity
             issue_activity.delay(
                 type="issue.activity.created",
@@ -262,16 +272,7 @@ class InboxIssueViewSet(BaseViewSet):
                 epoch=int(timezone.now().timestamp()),
                 notification=True,
                 origin=request.META.get("HTTP_ORIGIN"),
-            )
-            inbox_id = Inbox.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).first()
-            # create an inbox issue
-            inbox_issue = InboxIssue.objects.create(
-                inbox_id=inbox_id.id,
-                project_id=project_id,
-                issue_id=serializer.data["id"],
-                source=request.data.get("source", "in-app"),
+                inbox=str(inbox_issue.id),
             )
             inbox_issue = (
                 InboxIssue.objects.select_related("issue")
@@ -339,7 +340,24 @@ class InboxIssueViewSet(BaseViewSet):
         # Get issue data
         issue_data = request.data.pop("issue", False)
         if bool(issue_data):
-            issue = Issue.objects.get(
+            issue = Issue.objects.annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            ).get(
                 pk=inbox_issue.issue_id,
                 workspace__slug=slug,
                 project_id=project_id,
@@ -379,6 +397,7 @@ class InboxIssueViewSet(BaseViewSet):
                         epoch=int(timezone.now().timestamp()),
                         notification=True,
                         origin=request.META.get("HTTP_ORIGIN"),
+                        inbox=str(inbox_issue.id),
                     )
                 issue_serializer.save()
             else:
@@ -444,6 +463,7 @@ class InboxIssueViewSet(BaseViewSet):
                     epoch=int(timezone.now().timestamp()),
                     notification=False,
                     origin=request.META.get("HTTP_ORIGIN"),
+                    inbox=(inbox_issue.id),
                 )
 
                 inbox_issue = (
@@ -480,7 +500,8 @@ class InboxIssueViewSet(BaseViewSet):
                                 output_field=ArrayField(UUIDField()),
                             ),
                         ),
-                    ).first()
+                    )
+                    .first()
                 )
                 serializer = InboxIssueDetailSerializer(inbox_issue).data
                 return Response(serializer, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/issue/archive.py b/apiserver/plane/app/views/issue/archive.py
index d9274ae4f..af019a7ec 100644
--- a/apiserver/plane/app/views/issue/archive.py
+++ b/apiserver/plane/app/views/issue/archive.py
@@ -47,7 +47,7 @@ from plane.db.models import (
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.issue_filters import issue_filters
-
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 class IssueArchiveViewSet(BaseViewSet):
     permission_classes = [
@@ -239,6 +239,11 @@ class IssueArchiveViewSet(BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issue_queryset, datetime_fields, request.user.user_timezone
+            )
+            
         return Response(issues, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk=None):
diff --git a/apiserver/plane/app/views/issue/base.py b/apiserver/plane/app/views/issue/base.py
index 23df58540..b1fd1a9bc 100644
--- a/apiserver/plane/app/views/issue/base.py
+++ b/apiserver/plane/app/views/issue/base.py
@@ -50,9 +50,10 @@ from plane.db.models import (
     Project,
 )
 from plane.utils.issue_filters import issue_filters
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 # Module imports
-from .. import BaseAPIView, BaseViewSet, WebhookMixin
+from .. import BaseAPIView, BaseViewSet
 
 
 class IssueListEndpoint(BaseAPIView):
@@ -241,10 +242,14 @@ class IssueListEndpoint(BaseAPIView):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
 
-class IssueViewSet(WebhookMixin, BaseViewSet):
+class IssueViewSet(BaseViewSet):
     def get_serializer_class(self):
         return (
             IssueCreateSerializer
@@ -440,6 +445,10 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issue_queryset, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):
@@ -503,6 +512,10 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
                 )
                 .first()
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issue = user_timezone_converter(
+                issue, datetime_fields, request.user.user_timezone
+            )
             return Response(issue, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
diff --git a/apiserver/plane/app/views/issue/comment.py b/apiserver/plane/app/views/issue/comment.py
index 0d61f1325..1698efef8 100644
--- a/apiserver/plane/app/views/issue/comment.py
+++ b/apiserver/plane/app/views/issue/comment.py
@@ -11,7 +11,7 @@ from rest_framework.response import Response
 from rest_framework import status
 
 # Module imports
-from .. import BaseViewSet, WebhookMixin
+from .. import BaseViewSet
 from plane.app.serializers import (
     IssueCommentSerializer,
     CommentReactionSerializer,
@@ -25,7 +25,7 @@ from plane.db.models import (
 from plane.bgtasks.issue_activites_task import issue_activity
 
 
-class IssueCommentViewSet(WebhookMixin, BaseViewSet):
+class IssueCommentViewSet(BaseViewSet):
     serializer_class = IssueCommentSerializer
     model = IssueComment
     webhook_event = "issue_comment"
diff --git a/apiserver/plane/app/views/issue/draft.py b/apiserver/plane/app/views/issue/draft.py
index 077d7dcaf..fe75c61f1 100644
--- a/apiserver/plane/app/views/issue/draft.py
+++ b/apiserver/plane/app/views/issue/draft.py
@@ -45,6 +45,7 @@ from plane.db.models import (
     Project,
 )
 from plane.utils.issue_filters import issue_filters
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 # Module imports
 from .. import BaseViewSet
@@ -229,6 +230,10 @@ class IssueDraftViewSet(BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issue_queryset, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
     def create(self, request, slug, project_id):
diff --git a/apiserver/plane/app/views/issue/sub_issue.py b/apiserver/plane/app/views/issue/sub_issue.py
index da479e0e9..2ee4574eb 100644
--- a/apiserver/plane/app/views/issue/sub_issue.py
+++ b/apiserver/plane/app/views/issue/sub_issue.py
@@ -31,6 +31,7 @@ from plane.db.models import (
     IssueAttachment,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
+from plane.utils.user_timezone_converter import user_timezone_converter
 from collections import defaultdict
 
 
@@ -132,6 +133,10 @@ class SubIssuesEndpoint(BaseAPIView):
             "is_draft",
             "archived_at",
         )
+        datetime_fields = ["created_at", "updated_at"]
+        sub_issues = user_timezone_converter(
+            sub_issues, datetime_fields, request.user.user_timezone
+        )
         return Response(
             {
                 "sub_issues": sub_issues,
diff --git a/apiserver/plane/app/views/module/archive.py b/apiserver/plane/app/views/module/archive.py
index 9c0b6cca3..8a5345ff4 100644
--- a/apiserver/plane/app/views/module/archive.py
+++ b/apiserver/plane/app/views/module/archive.py
@@ -32,6 +32,8 @@ from plane.db.models import (
     ModuleLink,
 )
 from plane.utils.analytics_plot import burndown_plot
+from plane.utils.user_timezone_converter import user_timezone_converter
+
 
 # Module imports
 from .. import BaseAPIView
@@ -199,6 +201,10 @@ class ModuleArchiveUnarchiveEndpoint(BaseAPIView):
                 "updated_at",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            modules = user_timezone_converter(
+                modules, datetime_fields, request.user.user_timezone
+            )
             return Response(modules, status=status.HTTP_200_OK)
         else:
             queryset = (
diff --git a/apiserver/plane/app/views/module/base.py b/apiserver/plane/app/views/module/base.py
index 4cd52b3b1..5a987dad8 100644
--- a/apiserver/plane/app/views/module/base.py
+++ b/apiserver/plane/app/views/module/base.py
@@ -1,6 +1,7 @@
 # Python imports
 import json
 
+# Django Imports
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
 from django.db.models import (
@@ -17,14 +18,14 @@ from django.db.models import (
     Value,
 )
 from django.db.models.functions import Coalesce
-
-# Django Imports
+from django.core.serializers.json import DjangoJSONEncoder
 from django.utils import timezone
-from rest_framework import status
 
 # Third party imports
+from rest_framework import status
 from rest_framework.response import Response
 
+# Module imports
 from plane.app.permissions import (
     ProjectEntityPermission,
     ProjectLitePermission,
@@ -48,12 +49,12 @@ from plane.db.models import (
     Project,
 )
 from plane.utils.analytics_plot import burndown_plot
-
-# Module imports
-from .. import BaseAPIView, BaseViewSet, WebhookMixin
+from plane.utils.user_timezone_converter import user_timezone_converter
+from plane.bgtasks.webhook_task import model_activity
+from .. import BaseAPIView, BaseViewSet
 
 
-class ModuleViewSet(WebhookMixin, BaseViewSet):
+class ModuleViewSet(BaseViewSet):
     model = Module
     permission_classes = [
         ProjectEntityPermission,
@@ -236,6 +237,20 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                     "updated_at",
                 )
             ).first()
+            # Send the model activity
+            model_activity.delay(
+                model_name="module",
+                model_id=str(module["id"]),
+                requested_data=request.data,
+                current_instance=None,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+            datetime_fields = ["created_at", "updated_at"]
+            module = user_timezone_converter(
+                module, datetime_fields, request.user.user_timezone
+            )
             return Response(module, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -277,6 +292,10 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                 "created_at",
                 "updated_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            modules = user_timezone_converter(
+                modules, datetime_fields, request.user.user_timezone
+            )
         return Response(modules, status=status.HTTP_200_OK)
 
     def retrieve(self, request, slug, project_id, pk):
@@ -412,6 +431,9 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
 
     def partial_update(self, request, slug, project_id, pk):
         module = self.get_queryset().filter(pk=pk)
+        current_instance = json.dumps(
+            ModuleSerializer(module).data, cls=DjangoJSONEncoder
+        )
 
         if module.first().archived_at:
             return Response(
@@ -454,6 +476,22 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                 "created_at",
                 "updated_at",
             ).first()
+
+            # Send the model activity
+            model_activity.delay(
+                model_name="module",
+                model_id=str(module["id"]),
+                requested_data=request.data,
+                current_instance=current_instance,
+                actor_id=request.user.id,
+                slug=slug,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+
+            datetime_fields = ["created_at", "updated_at"]
+            module = user_timezone_converter(
+                module, datetime_fields, request.user.user_timezone
+            )
             return Response(module, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
diff --git a/apiserver/plane/app/views/module/issue.py b/apiserver/plane/app/views/module/issue.py
index d26433340..3e79e7ec7 100644
--- a/apiserver/plane/app/views/module/issue.py
+++ b/apiserver/plane/app/views/module/issue.py
@@ -16,7 +16,7 @@ from rest_framework.response import Response
 from rest_framework import status
 
 # Module imports
-from .. import BaseViewSet, WebhookMixin
+from .. import BaseViewSet
 from plane.app.serializers import (
     ModuleIssueSerializer,
     IssueSerializer,
@@ -31,9 +31,9 @@ from plane.db.models import (
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 from plane.utils.issue_filters import issue_filters
+from plane.utils.user_timezone_converter import user_timezone_converter
 
-
-class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
+class ModuleIssueViewSet(BaseViewSet):
     serializer_class = ModuleIssueSerializer
     model = ModuleIssue
     webhook_event = "module_issue"
@@ -150,6 +150,11 @@ class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
+
         return Response(issues, status=status.HTTP_200_OK)
 
     # create multiple issues inside a module
diff --git a/apiserver/plane/app/views/project/base.py b/apiserver/plane/app/views/project/base.py
index 50435e3a8..6017a420f 100644
--- a/apiserver/plane/app/views/project/base.py
+++ b/apiserver/plane/app/views/project/base.py
@@ -1,5 +1,6 @@
 # Python imports
 import boto3
+import json
 
 # Django imports
 from django.db import IntegrityError
@@ -14,6 +15,7 @@ from django.db.models import (
 )
 from django.conf import settings
 from django.utils import timezone
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third Party imports
 from rest_framework.response import Response
@@ -22,7 +24,7 @@ from rest_framework import serializers
 from rest_framework.permissions import AllowAny
 
 # Module imports
-from plane.app.views.base import BaseViewSet, BaseAPIView, WebhookMixin
+from plane.app.views.base import BaseViewSet, BaseAPIView
 from plane.app.serializers import (
     ProjectSerializer,
     ProjectListSerializer,
@@ -50,9 +52,10 @@ from plane.db.models import (
     Issue,
 )
 from plane.utils.cache import cache_response
+from plane.bgtasks.webhook_task import model_activity
 
 
-class ProjectViewSet(WebhookMixin, BaseViewSet):
+class ProjectViewSet(BaseViewSet):
     serializer_class = ProjectListSerializer
     model = Project
     webhook_event = "project"
@@ -185,7 +188,6 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
             .annotate(
                 total_issues=Issue.issue_objects.filter(
                     project_id=self.kwargs.get("pk"),
-                    parent__isnull=True,
                 )
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
@@ -204,7 +206,6 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                 archived_issues=Issue.objects.filter(
                     project_id=self.kwargs.get("pk"),
                     archived_at__isnull=False,
-                    parent__isnull=True,
                 )
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
@@ -224,7 +225,6 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                 draft_issues=Issue.objects.filter(
                     project_id=self.kwargs.get("pk"),
                     is_draft=True,
-                    parent__isnull=True,
                 )
                 .order_by()
                 .annotate(count=Func(F("id"), function="Count"))
@@ -337,6 +337,17 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                     .filter(pk=serializer.data["id"])
                     .first()
                 )
+
+                model_activity.delay(
+                    model_name="project",
+                    model_id=str(project.id),
+                    requested_data=request.data,
+                    current_instance=None,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+
                 serializer = ProjectListSerializer(project)
                 return Response(
                     serializer.data, status=status.HTTP_201_CREATED
@@ -367,7 +378,9 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
             workspace = Workspace.objects.get(slug=slug)
 
             project = Project.objects.get(pk=pk)
-
+            current_instance = json.dumps(
+                ProjectSerializer(project).data, cls=DjangoJSONEncoder
+            )
             if project.archived_at:
                 return Response(
                     {"error": "Archived projects cannot be updated"},
@@ -405,6 +418,16 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                     .filter(pk=serializer.data["id"])
                     .first()
                 )
+
+                model_activity.delay(
+                    model_name="project",
+                    model_id=str(project.id),
+                    requested_data=request.data,
+                    current_instance=current_instance,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
                 serializer = ProjectListSerializer(project)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(
diff --git a/apiserver/plane/app/views/view/base.py b/apiserver/plane/app/views/view/base.py
index 35772ccf3..7736e465c 100644
--- a/apiserver/plane/app/views/view/base.py
+++ b/apiserver/plane/app/views/view/base.py
@@ -42,7 +42,7 @@ from plane.db.models import (
     IssueAttachment,
 )
 from plane.utils.issue_filters import issue_filters
-
+from plane.utils.user_timezone_converter import user_timezone_converter
 
 class GlobalViewViewSet(BaseViewSet):
     serializer_class = IssueViewSerializer
@@ -255,6 +255,10 @@ class GlobalViewIssuesViewSet(BaseViewSet):
                 "is_draft",
                 "archived_at",
             )
+            datetime_fields = ["created_at", "updated_at"]
+            issues = user_timezone_converter(
+                issues, datetime_fields, request.user.user_timezone
+            )
         return Response(issues, status=status.HTTP_200_OK)
 
 
diff --git a/apiserver/plane/app/views/workspace/cycle.py b/apiserver/plane/app/views/workspace/cycle.py
index e85fa1cef..fa2954d67 100644
--- a/apiserver/plane/app/views/workspace/cycle.py
+++ b/apiserver/plane/app/views/workspace/cycle.py
@@ -27,7 +27,7 @@ class WorkspaceCyclesEndpoint(BaseAPIView):
             .select_related("project")
             .select_related("workspace")
             .select_related("owned_by")
-            .filter(archived_at__isnull=False)
+            .filter(archived_at__isnull=True)
             .annotate(
                 total_issues=Count(
                     "issue_cycle",
diff --git a/apiserver/plane/app/views/workspace/module.py b/apiserver/plane/app/views/workspace/module.py
index 085787694..7671692ec 100644
--- a/apiserver/plane/app/views/workspace/module.py
+++ b/apiserver/plane/app/views/workspace/module.py
@@ -30,7 +30,7 @@ class WorkspaceModulesEndpoint(BaseAPIView):
             .select_related("workspace")
             .select_related("lead")
             .prefetch_related("members")
-            .filter(archived_at__isnull=False)
+            .filter(archived_at__isnull=True)
             .prefetch_related(
                 Prefetch(
                     "link_module",
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 2d55d5579..007b3e48c 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -31,6 +31,7 @@ from plane.db.models import (
 )
 from plane.settings.redis import redis_instance
 from plane.utils.exception_logger import log_exception
+from plane.bgtasks.webhook_task import webhook_activity
 
 
 # Track Changes in name
@@ -1296,7 +1297,7 @@ def create_issue_vote_activity(
             IssueActivity(
                 issue_id=issue_id,
                 actor_id=actor_id,
-                verb="created",
+                verb="updated",
                 old_value=None,
                 new_value=requested_data.get("vote"),
                 field="vote",
@@ -1365,7 +1366,7 @@ def create_issue_relation_activity(
                 IssueActivity(
                     issue_id=issue_id,
                     actor_id=actor_id,
-                    verb="created",
+                    verb="updated",
                     old_value="",
                     new_value=f"{issue.project.identifier}-{issue.sequence_id}",
                     field=requested_data.get("relation_type"),
@@ -1380,7 +1381,7 @@ def create_issue_relation_activity(
                 IssueActivity(
                     issue_id=related_issue,
                     actor_id=actor_id,
-                    verb="created",
+                    verb="updated",
                     old_value="",
                     new_value=f"{issue.project.identifier}-{issue.sequence_id}",
                     field=(
@@ -1606,6 +1607,7 @@ def issue_activity(
     subscriber=True,
     notification=False,
     origin=None,
+    inbox=None,
 ):
     try:
         issue_activities = []
@@ -1692,6 +1694,41 @@ def issue_activity(
             except Exception as e:
                 log_exception(e)
 
+            for activity in issue_activities_created:
+                webhook_activity.delay(
+                    event=(
+                        "issue_comment"
+                        if activity.field == "comment"
+                        else "inbox_issue" if inbox else "issue"
+                    ),
+                    event_id=(
+                        activity.issue_comment_id
+                        if activity.field == "comment"
+                        else inbox if inbox else activity.issue_id
+                    ),
+                    verb=activity.verb,
+                    field=(
+                        "description"
+                        if activity.field == "comment"
+                        else activity.field
+                    ),
+                    old_value=(
+                        activity.old_value
+                        if activity.old_value != ""
+                        else None
+                    ),
+                    new_value=(
+                        activity.new_value
+                        if activity.new_value != ""
+                        else None
+                    ),
+                    actor_id=activity.actor_id,
+                    current_site=origin,
+                    slug=activity.workspace.slug,
+                    old_identifier=activity.old_identifier,
+                    new_identifier=activity.new_identifier,
+                )
+
         if notification:
             notifications.delay(
                 type=type,
diff --git a/apiserver/plane/bgtasks/webhook_task.py b/apiserver/plane/bgtasks/webhook_task.py
index 5ee0244c7..d1e1cb34c 100644
--- a/apiserver/plane/bgtasks/webhook_task.py
+++ b/apiserver/plane/bgtasks/webhook_task.py
@@ -25,6 +25,8 @@ from plane.api.serializers import (
     ModuleIssueSerializer,
     ModuleSerializer,
     ProjectSerializer,
+    UserLiteSerializer,
+    InboxIssueSerializer,
 )
 from plane.db.models import (
     Cycle,
@@ -37,6 +39,7 @@ from plane.db.models import (
     User,
     Webhook,
     WebhookLog,
+    InboxIssue,
 )
 from plane.license.utils.instance_value import get_email_configuration
 from plane.utils.exception_logger import log_exception
@@ -49,6 +52,8 @@ SERIALIZER_MAPPER = {
     "cycle_issue": CycleIssueSerializer,
     "module_issue": ModuleIssueSerializer,
     "issue_comment": IssueCommentSerializer,
+    "user": UserLiteSerializer,
+    "inbox_issue": InboxIssueSerializer,
 }
 
 MODEL_MAPPER = {
@@ -59,6 +64,8 @@ MODEL_MAPPER = {
     "cycle_issue": CycleIssue,
     "module_issue": ModuleIssue,
     "issue_comment": IssueComment,
+    "user": User,
+    "inbox_issue": InboxIssue,
 }
 
 
@@ -179,64 +186,6 @@ def webhook_task(self, webhook, slug, event, event_data, action, current_site):
         return
 
 
-@shared_task()
-def send_webhook(event, payload, kw, action, slug, bulk, current_site):
-    try:
-        webhooks = Webhook.objects.filter(workspace__slug=slug, is_active=True)
-
-        if event == "project":
-            webhooks = webhooks.filter(project=True)
-
-        if event == "issue":
-            webhooks = webhooks.filter(issue=True)
-
-        if event == "module" or event == "module_issue":
-            webhooks = webhooks.filter(module=True)
-
-        if event == "cycle" or event == "cycle_issue":
-            webhooks = webhooks.filter(cycle=True)
-
-        if event == "issue_comment":
-            webhooks = webhooks.filter(issue_comment=True)
-
-        if webhooks:
-            if action in ["POST", "PATCH"]:
-                if bulk and event in ["cycle_issue", "module_issue"]:
-                    return
-                else:
-                    event_data = [
-                        get_model_data(
-                            event=event,
-                            event_id=(
-                                payload.get("id")
-                                if isinstance(payload, dict)
-                                else kw.get("pk")
-                            ),
-                            many=False,
-                        )
-                    ]
-
-            if action == "DELETE":
-                event_data = [{"id": kw.get("pk")}]
-
-            for webhook in webhooks:
-                for data in event_data:
-                    webhook_task.delay(
-                        webhook=webhook.id,
-                        slug=slug,
-                        event=event,
-                        event_data=data,
-                        action=action,
-                        current_site=current_site,
-                    )
-
-    except Exception as e:
-        if settings.DEBUG:
-            print(e)
-        log_exception(e)
-        return
-
-
 @shared_task
 def send_webhook_deactivation_email(
     webhook_id, receiver_id, current_site, reason
@@ -294,3 +243,240 @@ def send_webhook_deactivation_email(
     except Exception as e:
         log_exception(e)
         return
+
+
+@shared_task(
+    bind=True,
+    autoretry_for=(requests.RequestException,),
+    retry_backoff=600,
+    max_retries=5,
+    retry_jitter=True,
+)
+def webhook_send_task(
+    self,
+    webhook,
+    slug,
+    event,
+    event_data,
+    action,
+    current_site,
+    activity,
+):
+    try:
+        webhook = Webhook.objects.get(id=webhook, workspace__slug=slug)
+
+        headers = {
+            "Content-Type": "application/json",
+            "User-Agent": "Autopilot",
+            "X-Plane-Delivery": str(uuid.uuid4()),
+            "X-Plane-Event": event,
+        }
+
+        # # Your secret key
+        event_data = (
+            json.loads(json.dumps(event_data, cls=DjangoJSONEncoder))
+            if event_data is not None
+            else None
+        )
+
+        activity = (
+            json.loads(json.dumps(activity, cls=DjangoJSONEncoder))
+            if activity is not None
+            else None
+        )
+
+        action = {
+            "POST": "create",
+            "PATCH": "update",
+            "PUT": "update",
+            "DELETE": "delete",
+        }.get(action, action)
+
+        payload = {
+            "event": event,
+            "action": action,
+            "webhook_id": str(webhook.id),
+            "workspace_id": str(webhook.workspace_id),
+            "data": event_data,
+            "activity": activity,
+        }
+
+        # Use HMAC for generating signature
+        if webhook.secret_key:
+            hmac_signature = hmac.new(
+                webhook.secret_key.encode("utf-8"),
+                json.dumps(payload).encode("utf-8"),
+                hashlib.sha256,
+            )
+            signature = hmac_signature.hexdigest()
+            headers["X-Plane-Signature"] = signature
+
+        # Send the webhook event
+        response = requests.post(
+            webhook.url,
+            headers=headers,
+            json=payload,
+            timeout=30,
+        )
+
+        # Log the webhook request
+        WebhookLog.objects.create(
+            workspace_id=str(webhook.workspace_id),
+            webhook_id=str(webhook.id),
+            event_type=str(event),
+            request_method=str(action),
+            request_headers=str(headers),
+            request_body=str(payload),
+            response_status=str(response.status_code),
+            response_headers=str(response.headers),
+            response_body=str(response.text),
+            retry_count=str(self.request.retries),
+        )
+
+    except requests.RequestException as e:
+        # Log the failed webhook request
+        WebhookLog.objects.create(
+            workspace_id=str(webhook.workspace_id),
+            webhook_id=str(webhook.id),
+            event_type=str(event),
+            request_method=str(action),
+            request_headers=str(headers),
+            request_body=str(payload),
+            response_status=500,
+            response_headers="",
+            response_body=str(e),
+            retry_count=str(self.request.retries),
+        )
+        # Retry logic
+        if self.request.retries >= self.max_retries:
+            Webhook.objects.filter(pk=webhook.id).update(is_active=False)
+            if webhook:
+                # send email for the deactivation of the webhook
+                send_webhook_deactivation_email(
+                    webhook_id=webhook.id,
+                    receiver_id=webhook.created_by_id,
+                    reason=str(e),
+                    current_site=current_site,
+                )
+            return
+        raise requests.RequestException()
+
+    except Exception as e:
+        if settings.DEBUG:
+            print(e)
+        log_exception(e)
+        return
+
+
+@shared_task
+def webhook_activity(
+    event,
+    verb,
+    field,
+    old_value,
+    new_value,
+    actor_id,
+    slug,
+    current_site,
+    event_id,
+    old_identifier,
+    new_identifier,
+):
+    try:
+        webhooks = Webhook.objects.filter(workspace__slug=slug, is_active=True)
+
+        if event == "project":
+            webhooks = webhooks.filter(project=True)
+
+        if event == "issue":
+            webhooks = webhooks.filter(issue=True)
+
+        if event == "module" or event == "module_issue":
+            webhooks = webhooks.filter(module=True)
+
+        if event == "cycle" or event == "cycle_issue":
+            webhooks = webhooks.filter(cycle=True)
+
+        if event == "issue_comment":
+            webhooks = webhooks.filter(issue_comment=True)
+
+        for webhook in webhooks:
+            webhook_send_task.delay(
+                webhook=webhook.id,
+                slug=slug,
+                event=event,
+                event_data=get_model_data(
+                    event=event,
+                    event_id=event_id,
+                ),
+                action=verb,
+                current_site=current_site,
+                activity={
+                    "field": field,
+                    "new_value": new_value,
+                    "old_value": old_value,
+                    "actor": get_model_data(event="user", event_id=actor_id),
+                    "old_identifier": old_identifier,
+                    "new_identifier": new_identifier,
+                },
+            )
+        return
+    except Exception as e:
+        if settings.DEBUG:
+            print(e)
+        log_exception(e)
+        return
+
+
+@shared_task
+def model_activity(
+    model_name,
+    model_id,
+    requested_data,
+    current_instance,
+    actor_id,
+    slug,
+    origin=None,
+):
+    """Function takes in two json and computes differences between keys of both the json"""
+    if current_instance is None:
+        webhook_activity.delay(
+            event=model_name,
+            verb="created",
+            field=None,
+            old_value=None,
+            new_value=None,
+            actor_id=actor_id,
+            slug=slug,
+            current_site=origin,
+            event_id=model_id,
+            old_identifier=None,
+            new_identifier=None,
+        )
+        return
+
+    # Load the current instance
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+
+    # Loop through all keys in requested data and check the current value and requested value
+    for key in requested_data:
+        current_value = current_instance.get(key, None)
+        requested_value = requested_data.get(key, None)
+        if current_value != requested_value:
+            webhook_activity.delay(
+                event=model_name,
+                verb="updated",
+                field=key,
+                old_value=current_value,
+                new_value=requested_value,
+                actor_id=actor_id,
+                slug=slug,
+                current_site=origin,
+                event_id=model_id,
+                old_identifier=None,
+                new_identifier=None,
+            )
+
+    return
diff --git a/apiserver/plane/license/management/commands/register_instance.py b/apiserver/plane/license/management/commands/register_instance.py
index 32a37879f..b5cc8a60d 100644
--- a/apiserver/plane/license/management/commands/register_instance.py
+++ b/apiserver/plane/license/management/commands/register_instance.py
@@ -46,7 +46,7 @@ class Command(BaseCommand):
             }
 
             instance = Instance.objects.create(
-                instance_name="Plane Free",
+                instance_name="Plane Community Edition",
                 instance_id=secrets.token_hex(12),
                 license_key=None,
                 api_key=secrets.token_hex(8),
diff --git a/apiserver/plane/utils/user_timezone_converter.py b/apiserver/plane/utils/user_timezone_converter.py
new file mode 100644
index 000000000..579b96c26
--- /dev/null
+++ b/apiserver/plane/utils/user_timezone_converter.py
@@ -0,0 +1,25 @@
+import pytz
+
+def user_timezone_converter(queryset, datetime_fields, user_timezone):
+    # Create a timezone object for the user's timezone
+    user_tz = pytz.timezone(user_timezone)
+
+    # Check if queryset is a dictionary (single item) or a list of dictionaries
+    if isinstance(queryset, dict):
+        queryset_values = [queryset]
+    else:
+        queryset_values = list(queryset.values())
+
+    # Iterate over the dictionaries in the list
+    for item in queryset_values:
+        # Iterate over the datetime fields
+        for field in datetime_fields:
+            # Convert the datetime field to the user's timezone
+            if item[field]:
+                item[field] = item[field].astimezone(user_tz)
+
+    # If queryset was a single item, return a single item
+    if isinstance(queryset, dict):
+        return queryset_values[0]
+    else:
+        return queryset_values
diff --git a/package.json b/package.json
index af08af608..0c846ea0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
index 760f1d372..6f2744dca 100644
--- a/packages/editor/core/package.json
+++ b/packages/editor/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-core",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
index d602a1ddf..ae0155eec 100644
--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@@ -1,3 +1,14 @@
+.ProseMirror {
+  --font-size-h1: 1.5rem;
+  --font-size-h2: 1.3125rem;
+  --font-size-h3: 1.125rem;
+  --font-size-h4: 0.9375rem;
+  --font-size-h5: 0.8125rem;
+  --font-size-h6: 0.75rem;
+  --font-size-regular: 0.9375rem;
+  --font-size-list: var(--font-size-regular);
+}
+
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -56,7 +67,7 @@
 
 /* to-do list */
 ul[data-type="taskList"] li {
-  font-size: 1rem;
+  font-size: var(--font-size-list);
   line-height: 1.5;
 }
 
@@ -162,7 +173,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   cursor: text;
   line-height: 1.2;
   font-family: inherit;
-  font-size: 14px;
+  font-size: var(--font-size-regular);
   color: inherit;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -310,15 +321,15 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 2rem;
   margin-bottom: 4px;
-  font-size: 1.875rem;
-  font-weight: 700;
+  font-size: var(--font-size-h1);
+  font-weight: 600;
   line-height: 1.3;
 }
 
 .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1.4rem;
   margin-bottom: 1px;
-  font-size: 1.5rem;
+  font-size: var(--font-size-h2);
   font-weight: 600;
   line-height: 1.3;
 }
@@ -326,21 +337,23 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1rem;
   margin-bottom: 1px;
-  font-size: 1.25rem;
+  font-size: var(--font-size-h3);
+  font-weight: 600;
   line-height: 1.3;
 }
 
 .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1rem;
   margin-bottom: 1px;
-  font-size: 1rem;
+  font-size: var(--font-size-h4);
+  font-weight: 600;
   line-height: 1.5;
 }
 
 .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1rem;
   margin-bottom: 1px;
-  font-size: 0.9rem;
+  font-size: var(--font-size-h5);
   font-weight: 600;
   line-height: 1.5;
 }
@@ -348,7 +361,7 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 1rem;
   margin-bottom: 1px;
-  font-size: 0.83rem;
+  font-size: var(--font-size-h6);
   font-weight: 600;
   line-height: 1.5;
 }
@@ -356,14 +369,14 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
 .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   margin-top: 0.25rem;
   margin-bottom: 1px;
-  padding: 3px 2px;
-  font-size: 1rem;
+  padding: 3px 0;
+  font-size: var(--font-size-regular);
   line-height: 1.5;
 }
 
 .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
 .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
-  font-size: 1rem;
+  font-size: var(--font-size-list);
   line-height: 1.5;
 }
 
diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json
index 3cde34825..c69d0c2c8 100644
--- a/packages/editor/document-editor/package.json
+++ b/packages/editor/document-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/document-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json
index 7dee7fb14..dfab06cde 100644
--- a/packages/editor/extensions/package.json
+++ b/packages/editor/extensions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-extensions",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Package that powers Plane's Editor with extensions",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
index e7a500eb3..d0868e239 100644
--- a/packages/editor/lite-text-editor/package.json
+++ b/packages/editor/lite-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/lite-text-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index fe9453110..6b22809d6 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -33,6 +33,7 @@ export interface ILiteTextEditor {
   };
   tabIndex?: number;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  id?: string;
 }
 
 const LiteTextEditor = (props: ILiteTextEditor) => {
@@ -48,12 +49,14 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     tabIndex,
     mentionHandler,
     placeholder = "Add comment...",
+    id = "",
   } = props;
 
   const editor = useEditor({
     onChange,
     initialValue,
     value,
+    id,
     editorClassName,
     restoreFile: fileHandler.restore,
     uploadFile: fileHandler.upload,
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
index 0561dfb7a..fe1f29e1d 100644
--- a/packages/editor/rich-text-editor/package.json
+++ b/packages/editor/rich-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/rich-text-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
index b45b82e7e..4eae64880 100644
--- a/packages/eslint-config-custom/package.json
+++ b/packages/eslint-config-custom/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-custom",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.19.0",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {},
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config-custom/package.json
index afc6db09f..076a9d352 100644
--- a/packages/tailwind-config-custom/package.json
+++ b/packages/tailwind-config-custom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,
diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json
index 0aadcc6d0..ef5580bff 100644
--- a/packages/tsconfig/package.json
+++ b/packages/tsconfig/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "files": [
     "base.json",
diff --git a/packages/types/package.json b/packages/types/package.json
index 48f356f42..68c0b86d9 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "main": "./src/index.d.ts"
 }
diff --git a/packages/types/src/inbox.d.ts b/packages/types/src/inbox.d.ts
index 01a1dfce3..0f0b93e4f 100644
--- a/packages/types/src/inbox.d.ts
+++ b/packages/types/src/inbox.d.ts
@@ -20,7 +20,7 @@ export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
 export type TInboxIssueStatus = EInboxIssueStatus;
 
 // filters
-export type TInboxIssueFilterMemberKeys = "assignee" | "created_by";
+export type TInboxIssueFilterMemberKeys = "assignees" | "created_by";
 
 export type TInboxIssueFilterDateKeys = "created_at" | "updated_at";
 
diff --git a/packages/types/src/pages.d.ts b/packages/types/src/pages.d.ts
index a1df4527e..4871ddc06 100644
--- a/packages/types/src/pages.d.ts
+++ b/packages/types/src/pages.d.ts
@@ -16,14 +16,9 @@ export type TPage = {
   project: string | undefined;
   updated_at: Date | undefined;
   updated_by: string | undefined;
-  view_props: TPageViewProps | undefined;
   workspace: string | undefined;
 };
 
-export type TPageViewProps = {
-  full_width?: boolean;
-};
-
 // page filters
 export type TPageNavigationTabs = "public" | "private" | "archived";
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d627c94ba..1ffa822e2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.18.0",
+  "version": "0.19.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
diff --git a/space/components/editor/rich-text-read-only-editor.tsx b/space/components/editor/rich-text-read-only-editor.tsx
index 562e63581..56694e91f 100644
--- a/space/components/editor/rich-text-read-only-editor.tsx
+++ b/space/components/editor/rich-text-read-only-editor.tsx
@@ -18,7 +18,7 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
         mentionHandler={{ highlights: mentionHighlights }}
         {...props}
         // overriding the customClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative border border-custom-border-200 p-3")}
+        containerClassName={cn("relative p-0 border-none", props.containerClassName)}
       />
     );
   }
diff --git a/space/package.json b/space/package.json
index 7dabf45c9..cb7e3f23e 100644
--- a/space/package.json
+++ b/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 757888554..93e2c2ea7 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -85,7 +85,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
         setIsSearching(false);
         setIsLoading(false);
       });
-  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, searchParams, workspaceSlug]);
+  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, workspaceSlug]);
 
   return (
     <>
diff --git a/web/components/cycles/quick-actions.tsx b/web/components/cycles/quick-actions.tsx
index 194bdd068..9c130ef7a 100644
--- a/web/components/cycles/quick-actions.tsx
+++ b/web/components/cycles/quick-actions.tsx
@@ -180,6 +180,7 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx b/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
index af9b795af..270cd8b77 100644
--- a/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
+++ b/web/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
@@ -33,7 +33,7 @@ const CollaboratorListItem: React.FC<CollaboratorListItemProps> = observer((prop
       <div className="flex justify-center">
         <Avatar
           src={userDetails.avatar}
-          name={isCurrentUser ? "You" : userDetails.display_name}
+          name={userDetails.display_name}
           size={69}
           className="!text-3xl !font-medium"
           showTooltip={false}
diff --git a/web/components/editor/rich-text-editor/rich-text-editor.tsx b/web/components/editor/rich-text-editor/rich-text-editor.tsx
index b8eddb643..0324d1f17 100644
--- a/web/components/editor/rich-text-editor/rich-text-editor.tsx
+++ b/web/components/editor/rich-text-editor/rich-text-editor.tsx
@@ -51,7 +51,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
         suggestions: mentionSuggestions,
       }}
       {...rest}
-      containerClassName={cn(containerClassName, "relative min-h-[150px] border border-custom-border-200 p-3")}
+      containerClassName={cn("relative pl-3", containerClassName)}
     />
   );
 });
diff --git a/web/components/editor/rich-text-editor/rich-text-read-only-editor.tsx b/web/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
index 1415bc098..4aead5469 100644
--- a/web/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
+++ b/web/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
@@ -20,7 +20,7 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
         }}
         {...props}
         // overriding the containerClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative border border-custom-border-200 p-3")}
+        containerClassName={cn(props.containerClassName, "relative pl-3")}
       />
     );
   }
diff --git a/web/components/gantt-chart/chart/root.tsx b/web/components/gantt-chart/chart/root.tsx
index 098ee76ed..a4ea8cbf2 100644
--- a/web/components/gantt-chart/chart/root.tsx
+++ b/web/components/gantt-chart/chart/root.tsx
@@ -161,7 +161,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
   return (
     <div
       className={cn("relative flex flex-col h-full select-none rounded-sm bg-custom-background-100 shadow", {
-        "fixed inset-0 z-[999999] bg-custom-background-100": fullScreenMode,
+        "fixed inset-0 z-20 bg-custom-background-100": fullScreenMode,
         "border-[0.5px] border-custom-border-200": border,
       })}
     >
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 2f0e0f766..5263f12cb 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -145,8 +145,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   const issueCount = cycleDetails
-    ? issueFilters?.displayFilters?.sub_issue && cycleDetails?.sub_issues
-      ? cycleDetails.total_issues + cycleDetails?.sub_issues
+    ? !issueFilters?.displayFilters?.sub_issue && cycleDetails?.sub_issues
+      ? cycleDetails.total_issues - cycleDetails?.sub_issues
       : cycleDetails.total_issues
     : undefined;
 
@@ -225,9 +225,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     className="ml-1.5 flex-shrink-0 truncate"
                     placement="bottom-start"
                   >
-                    {currentProjectCycleIds?.map((cycleId) => (
-                      <CycleDropdownOption key={cycleId} cycleId={cycleId} />
-                    ))}
+                    {currentProjectCycleIds?.map((cycleId) => <CycleDropdownOption key={cycleId} cycleId={cycleId} />)}
                   </CustomMenu>
                 }
               />
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index d55657fdd..6f1478ca1 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -144,8 +144,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   const issueCount = moduleDetails
-    ? issueFilters?.displayFilters?.sub_issue && moduleDetails.sub_issues
-      ? moduleDetails.total_issues + moduleDetails.sub_issues
+    ? !issueFilters?.displayFilters?.sub_issue && moduleDetails.sub_issues
+      ? moduleDetails.total_issues - moduleDetails.sub_issues
       : moduleDetails.total_issues
     : undefined;
 
@@ -224,9 +224,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     className="ml-1.5 flex-shrink-0"
                     placement="bottom-start"
                   >
-                    {projectModuleIds?.map((moduleId) => (
-                      <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
-                    ))}
+                    {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
                   </CustomMenu>
                 }
               />
diff --git a/web/components/headers/project-archives.tsx b/web/components/headers/project-archives.tsx
index 5cee12bdf..6e5638c71 100644
--- a/web/components/headers/project-archives.tsx
+++ b/web/components/headers/project-archives.tsx
@@ -27,8 +27,8 @@ export const ProjectArchivesHeader: FC = observer(() => {
   const { isMobile } = usePlatformOS();
 
   const issueCount = currentProjectDetails
-    ? issueFilters?.displayFilters?.sub_issue
-      ? currentProjectDetails.archived_issues + currentProjectDetails.archived_sub_issues
+    ? !issueFilters?.displayFilters?.sub_issue && currentProjectDetails.archived_sub_issues
+      ? currentProjectDetails.archived_issues - currentProjectDetails.archived_sub_issues
       : currentProjectDetails.archived_issues
     : undefined;
 
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 2f80c2182..fdad067a3 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -78,8 +78,8 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   );
 
   const issueCount = currentProjectDetails
-    ? issueFilters?.displayFilters?.sub_issue
-      ? currentProjectDetails.draft_issues + currentProjectDetails.draft_sub_issues
+    ? !issueFilters?.displayFilters?.sub_issue && currentProjectDetails.draft_sub_issues
+      ? currentProjectDetails.draft_issues - currentProjectDetails.draft_sub_issues
       : currentProjectDetails.draft_issues
     : undefined;
 
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 9363448b3..7466f2ba1 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -102,8 +102,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   const issueCount = currentProjectDetails
-    ? issueFilters?.displayFilters?.sub_issue
-      ? currentProjectDetails?.total_issues + currentProjectDetails?.sub_issues
+    ? !issueFilters?.displayFilters?.sub_issue && currentProjectDetails?.sub_issues
+      ? currentProjectDetails?.total_issues - currentProjectDetails?.sub_issues
       : currentProjectDetails?.total_issues
     : undefined;
 
diff --git a/web/components/inbox/content/inbox-issue-header.tsx b/web/components/inbox/content/inbox-issue-header.tsx
index ebe9898c0..7fd038faa 100644
--- a/web/components/inbox/content/inbox-issue-header.tsx
+++ b/web/components/inbox/content/inbox-issue-header.tsx
@@ -293,32 +293,36 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                 </ControlLink>
               </div>
             ) : (
-              <CustomMenu verticalEllipsis placement="bottom-start">
-                {canMarkAsAccepted && (
-                  <CustomMenu.MenuItem onClick={() => setIsSnoozeDateModalOpen(true)}>
-                    <div className="flex items-center gap-2">
-                      <Clock size={14} strokeWidth={2} />
-                      Snooze
-                    </div>
-                  </CustomMenu.MenuItem>
+              <>
+                {isAllowed && (
+                  <CustomMenu verticalEllipsis placement="bottom-start">
+                    {canMarkAsAccepted && (
+                      <CustomMenu.MenuItem onClick={() => setIsSnoozeDateModalOpen(true)}>
+                        <div className="flex items-center gap-2">
+                          <Clock size={14} strokeWidth={2} />
+                          Snooze
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                    {canMarkAsDuplicate && (
+                      <CustomMenu.MenuItem onClick={() => setSelectDuplicateIssue(true)}>
+                        <div className="flex items-center gap-2">
+                          <FileStack size={14} strokeWidth={2} />
+                          Mark as duplicate
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                    {canDelete && (
+                      <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
+                        <div className="flex items-center gap-2">
+                          <Trash2 size={14} strokeWidth={2} />
+                          Delete
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
                 )}
-                {canMarkAsDuplicate && (
-                  <CustomMenu.MenuItem onClick={() => setSelectDuplicateIssue(true)}>
-                    <div className="flex items-center gap-2">
-                      <FileStack size={14} strokeWidth={2} />
-                      Mark as duplicate
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-                {canDelete && (
-                  <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
-                    <div className="flex items-center gap-2">
-                      <Trash2 size={14} strokeWidth={2} />
-                      Delete
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
+              </>
             )}
           </div>
         </div>
diff --git a/web/components/inbox/content/issue-properties.tsx b/web/components/inbox/content/issue-properties.tsx
index ae1fab3ed..9074f67ca 100644
--- a/web/components/inbox/content/issue-properties.tsx
+++ b/web/components/inbox/content/issue-properties.tsx
@@ -31,9 +31,10 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
   const minDate = issue.start_date ? getDate(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
   if (!issue || !issue?.id) return <></>;
+
   return (
     <div className="flex h-min w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-      <div className="h-min w-full overflow-y-auto px-5">
+      <div className="h-min w-full overflow-y-auto px-3">
         <h5 className="text-sm font-medium my-4">Properties</h5>
         <div className={`divide-y-2 divide-custom-border-200 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
diff --git a/web/components/inbox/content/issue-root.tsx b/web/components/inbox/content/issue-root.tsx
index ce1625141..3d078bb2f 100644
--- a/web/components/inbox/content/issue-root.tsx
+++ b/web/components/inbox/content/issue-root.tsx
@@ -114,7 +114,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="rounded-lg space-y-4">
+      <div className="rounded-lg space-y-4 pl-3">
         <IssueTitleInput
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
@@ -124,6 +124,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           issueOperations={issueOperations}
           disabled={!isEditable}
           value={issue.name}
+          containerClassName="-ml-3"
         />
 
         {loader === "issue-loading" ? (
@@ -135,11 +136,12 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             workspaceSlug={workspaceSlug}
             projectId={issue.project_id}
             issueId={issue.id}
-            swrIssueDescription={null}
+            swrIssueDescription={issue.description_html ?? "<p></p>"}
             initialValue={issue.description_html ?? "<p></p>"}
             disabled={!isEditable}
             issueOperations={issueOperations}
             setIsSubmitting={(value) => setIsSubmitting(value)}
+            containerClassName="-ml-3 !mb-6 border-none"
           />
         )}
 
@@ -152,12 +154,15 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           />
         )}
       </div>
-      <IssueAttachmentRoot
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issue.id}
-        disabled={!isEditable}
-      />
+
+      <div className="pl-3">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issue.id}
+          disabled={!isEditable}
+        />
+      </div>
 
       <InboxIssueContentProperties
         workspaceSlug={workspaceSlug}
@@ -168,7 +173,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
       />
 
-      <div className="pb-12">
+      <div className="pb-12 pl-3">
         <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} />
       </div>
     </>
diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx
index 719b1c19f..7874b74a5 100644
--- a/web/components/inbox/content/root.tsx
+++ b/web/components/inbox/content/root.tsx
@@ -52,7 +52,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             isSubmitting={isSubmitting}
           />
         </div>
-        <div className="h-full w-full space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5 vertical-scrollbar scrollbar-md">
+        <div className="h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto px-6 py-5 vertical-scrollbar scrollbar-md">
           <InboxIssueMainContent
             workspaceSlug={workspaceSlug}
             projectId={projectId}
diff --git a/web/components/inbox/inbox-filter/applied-filters/member.tsx b/web/components/inbox/inbox-filter/applied-filters/member.tsx
index 5d488a23c..b234d3c57 100644
--- a/web/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -34,8 +34,8 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
         if (!optionDetail) return <></>;
         return (
           <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
-              <Avatar name={optionDetail.display_name} src={optionDetail.avatar} showTooltip={false} size="md" />
+            <div className="flex-shrink-0 relative flex justify-center items-center overflow-hidden">
+              <Avatar name={optionDetail.display_name} src={optionDetail.avatar} showTooltip={false} size="sm" />
             </div>
             <div className="text-xs truncate">{optionDetail?.display_name}</div>
             <div
diff --git a/web/components/inbox/inbox-filter/applied-filters/root.tsx b/web/components/inbox/inbox-filter/applied-filters/root.tsx
index 77b29deca..834d6a22c 100644
--- a/web/components/inbox/inbox-filter/applied-filters/root.tsx
+++ b/web/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -25,7 +25,7 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
       {/* priority */}
       <InboxIssueAppliedFiltersPriority />
       {/* assignees */}
-      <InboxIssueAppliedFiltersMember filterKey="assignee" label="Assignee" />
+      <InboxIssueAppliedFiltersMember filterKey="assignees" label="Assignees" />
       {/* created_by */}
       <InboxIssueAppliedFiltersMember filterKey="created_by" label="Created By" />
       {/* label */}
diff --git a/web/components/inbox/inbox-filter/filters/filter-selection.tsx b/web/components/inbox/inbox-filter/filters/filter-selection.tsx
index fd1dc951c..1d7ddd0ed 100644
--- a/web/components/inbox/inbox-filter/filters/filter-selection.tsx
+++ b/web/components/inbox/inbox-filter/filters/filter-selection.tsx
@@ -60,8 +60,8 @@ export const InboxIssueFilterSelection: FC = observer(() => {
         {/* assignees */}
         <div className="py-2">
           <FilterMember
-            filterKey="assignee"
-            label="Assignee"
+            filterKey="assignees"
+            label="Assignees"
             searchQuery={filtersSearchQuery}
             memberIds={projectMemberIds ?? []}
           />
diff --git a/web/components/inbox/modals/create-edit-modal/create-root.tsx b/web/components/inbox/modals/create-edit-modal/create-root.tsx
index 6c5ee3ce2..010884451 100644
--- a/web/components/inbox/modals/create-edit-modal/create-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/create-root.tsx
@@ -133,6 +133,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
         data={formData}
         handleData={handleFormData}
         editorRef={descriptionEditorRef}
+        containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
       />
       <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
       <div className="relative flex justify-between items-center gap-3">
diff --git a/web/components/inbox/modals/create-edit-modal/edit-root.tsx b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
index 6ffb6efee..90bb0e258 100644
--- a/web/components/inbox/modals/create-edit-modal/edit-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
@@ -138,6 +138,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
         data={formData}
         handleData={handleFormData}
         editorRef={descriptionEditorRef}
+        containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
       />
       <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
       <div className="relative flex justify-end items-center gap-3">
diff --git a/web/components/inbox/modals/create-edit-modal/issue-description.tsx b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
index 74c62f97c..2c9a9cfd2 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-description.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-description.tsx
@@ -11,6 +11,7 @@ import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 import { useProjectInbox } from "@/hooks/store";
 
 type TInboxIssueDescription = {
+  containerClassName?: string;
   workspaceSlug: string;
   projectId: string;
   workspaceId: string;
@@ -21,7 +22,7 @@ type TInboxIssueDescription = {
 
 // TODO: have to implement GPT Assistance
 export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props) => {
-  const { workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
+  const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
   // hooks
   const { loader } = useProjectInbox();
 
@@ -42,6 +43,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
         dragDropEnabled={false}
         onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
         placeholder={getDescriptionPlaceholder}
+        containerClassName={containerClassName}
       />
     </div>
   );
diff --git a/web/components/inbox/modals/create-issue-modal.tsx b/web/components/inbox/modals/create-issue-modal.tsx
deleted file mode 100644
index c2c162c88..000000000
--- a/web/components/inbox/modals/create-issue-modal.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-import { Fragment, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import { useRouter } from "next/router";
-import { Controller, useForm } from "react-hook-form";
-// icons
-import { Sparkle } from "lucide-react";
-import { Transition, Dialog } from "@headlessui/react";
-import { EditorRefApi } from "@plane/rich-text-editor";
-// types
-import { TIssue } from "@plane/types";
-// ui
-import { Button, Input, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { GptAssistantPopover } from "@/components/core";
-import { PriorityDropdown } from "@/components/dropdowns";
-import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
-import { ISSUE_CREATED } from "@/constants/event-tracker";
-// hooks
-import { useEventTracker, useWorkspace, useInstance, useProjectInbox } from "@/hooks/store";
-// services
-import { AIService } from "@/services/ai.service";
-// components
-// ui
-// types
-// constants
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const defaultValues: Partial<TIssue> = {
-  name: "",
-  description_html: "<p></p>",
-  priority: "none",
-};
-
-// services
-const aiService = new AIService();
-
-export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
-  const { isOpen, onClose } = props;
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-  if (!workspaceSlug || !projectId) return null;
-  // states
-  const [createMore, setCreateMore] = useState(false);
-  const [gptAssistantModal, setGptAssistantModal] = useState(false);
-  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
-  // refs
-  const editorRef = useRef<EditorRefApi>(null);
-  // hooks
-  const workspaceStore = useWorkspace();
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug.toString() as string)?.id.toString() as string;
-
-  // store hooks
-  const { createInboxIssue } = useProjectInbox();
-  const { instance } = useInstance();
-  const { captureIssueEvent } = useEventTracker();
-  // form info
-  const {
-    control,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    watch,
-    getValues,
-  } = useForm<Partial<TIssue>>({ defaultValues });
-  const issueName = watch("name");
-
-  const handleClose = () => {
-    onClose();
-    reset(defaultValues);
-    editorRef?.current?.clearEditor();
-  };
-
-  const handleFormSubmit = async (formData: Partial<TIssue>) => {
-    if (!workspaceSlug || !projectId) return;
-    await createInboxIssue(workspaceSlug.toString(), projectId.toString(), formData)
-      .then((res) => {
-        if (!createMore) {
-          router.push(`/${workspaceSlug}/projects/${projectId}/inbox/?currentTab=open&inboxIssueId=${res?.issue?.id}`);
-          handleClose();
-        } else {
-          reset(defaultValues);
-          editorRef?.current?.clearEditor();
-        }
-        captureIssueEvent({
-          eventName: ISSUE_CREATED,
-          payload: {
-            ...formData,
-            state: "SUCCESS",
-            element: "Inbox page",
-          },
-          path: router.pathname,
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-        captureIssueEvent({
-          eventName: ISSUE_CREATED,
-          payload: {
-            ...formData,
-            state: "FAILED",
-            element: "Inbox page",
-          },
-          path: router.pathname,
-        });
-      });
-  };
-
-  const handleAiAssistance = async (response: string) => {
-    if (!workspaceSlug || !projectId) return;
-    editorRef.current?.setEditorValueAtCursorPosition(response);
-  };
-
-  const handleAutoGenerateDescription = async () => {
-    const issueName = getValues("name");
-    if (!workspaceSlug || !projectId || !issueName) return;
-
-    setIAmFeelingLucky(true);
-
-    aiService
-      .createGptTask(workspaceSlug as string, projectId as string, {
-        prompt: issueName,
-        task: "Generate a proper description for this issue.",
-      })
-      .then((res) => {
-        if (res.response === "")
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message:
-              "Issue title isn't informative enough to generate the description. Please try with a different title.",
-          });
-        else handleAiAssistance(res.response_html);
-      })
-      .catch((err) => {
-        const error = err?.data?.error;
-
-        if (err.status === 429)
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
-          });
-        else
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: error || "Some error occurred. Please try again.",
-          });
-      })
-      .finally(() => setIAmFeelingLucky(false));
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
-                <form onSubmit={handleSubmit(handleFormSubmit)}>
-                  <div className="space-y-5">
-                    <h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
-                    <div className="space-y-3">
-                      <div className="mt-2 space-y-3">
-                        <div>
-                          <Controller
-                            control={control}
-                            name="name"
-                            rules={{
-                              required: "Title is required",
-                              maxLength: {
-                                value: 255,
-                                message: "Title should be less than 255 characters",
-                              },
-                            }}
-                            render={({ field: { value, onChange, ref } }) => (
-                              <Input
-                                id="name"
-                                name="name"
-                                type="text"
-                                value={value}
-                                onChange={onChange}
-                                ref={ref}
-                                hasError={Boolean(errors.name)}
-                                placeholder="Title"
-                                className="w-full resize-none text-xl"
-                              />
-                            )}
-                          />
-                        </div>
-                        <div className="relative">
-                          <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
-                            {watch("name") && issueName !== "" && (
-                              <button
-                                type="button"
-                                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
-                                  iAmFeelingLucky ? "cursor-wait" : ""
-                                }`}
-                                onClick={handleAutoGenerateDescription}
-                                disabled={iAmFeelingLucky}
-                              >
-                                {iAmFeelingLucky ? (
-                                  "Generating response..."
-                                ) : (
-                                  <>
-                                    <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
-                                  </>
-                                )}
-                              </button>
-                            )}
-
-                            {instance?.config?.has_openai_configured && (
-                              <GptAssistantPopover
-                                isOpen={gptAssistantModal}
-                                projectId={projectId.toString()}
-                                handleClose={() => {
-                                  setGptAssistantModal((prevData) => !prevData);
-                                  // this is done so that the title do not reset after gpt popover closed
-                                  reset(getValues());
-                                }}
-                                onResponse={(response) => {
-                                  handleAiAssistance(response);
-                                }}
-                                button={
-                                  <button
-                                    type="button"
-                                    className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
-                                    onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                                  >
-                                    <Sparkle className="h-4 w-4" />
-                                    AI
-                                  </button>
-                                }
-                                className="!min-w-[38rem]"
-                                placement="top-end"
-                              />
-                            )}
-                          </div>
-                          <Controller
-                            name="description_html"
-                            control={control}
-                            render={({ field: { value, onChange } }) => (
-                              <RichTextEditor
-                                initialValue={!value || value === "" ? "<p></p>" : value}
-                                ref={editorRef}
-                                workspaceSlug={workspaceSlug.toString()}
-                                workspaceId={workspaceId}
-                                projectId={projectId.toString()}
-                                dragDropEnabled={false}
-                                onChange={(_description: object, description_html: string) => {
-                                  onChange(description_html);
-                                }}
-                              />
-                            )}
-                          />
-                        </div>
-
-                        <div className="flex flex-wrap items-center gap-2">
-                          <Controller
-                            control={control}
-                            name="priority"
-                            render={({ field: { value, onChange } }) => (
-                              <div className="h-5">
-                                <PriorityDropdown
-                                  value={value ?? "none"}
-                                  onChange={onChange}
-                                  buttonVariant="background-with-text"
-                                />
-                              </div>
-                            )}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
-                    <div
-                      className="flex cursor-pointer items-center gap-1"
-                      onClick={() => setCreateMore((prevData) => !prevData)}
-                    >
-                      <span className="text-xs">Create more</span>
-                      <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={() => handleClose()}>
-                        Discard
-                      </Button>
-                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                        {isSubmitting ? "Adding Issue..." : "Add Issue"}
-                      </Button>
-                    </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx
index 617bc7e07..9e6a35f5f 100644
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/web/components/issues/attachment/attachment-detail.tsx
@@ -2,19 +2,19 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { AlertCircle, X } from "lucide-react";
+// ui
 import { Tooltip } from "@plane/ui";
-import { getFileIcon } from "@/components/icons/attachment";
+// icons
+import { getFileIcon } from "@/components/icons";
+// components
+import { IssueAttachmentDeleteModal } from "@/components/issues";
+// helpers
 import { convertBytesToSize, getFileExtension, getFileName } from "@/helpers/attachment.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { truncateText } from "@/helpers/string.helper";
+// hooks
 import { useIssueDetail, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// hooks
-// ui
-// components
-// icons
-// helper
-import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal";
 // types
 import { TAttachmentOperations } from "./root";
 
@@ -36,24 +36,24 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
     isDeleteAttachmentModalOpen,
     toggleDeleteAttachmentModal,
   } = useIssueDetail();
-  // states
+  // derived values
+  const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
+  // hooks
   const { isMobile } = usePlatformOS();
-  const attachment = attachmentId && getAttachmentById(attachmentId);
 
   if (!attachment) return <></>;
+
   return (
     <>
-      <IssueAttachmentDeleteModal
-        isOpen={isDeleteAttachmentModalOpen}
-        setIsOpen={() => toggleDeleteAttachmentModal(false)}
-        handleAttachmentOperations={handleAttachmentOperations}
-        data={attachment}
-      />
-
-      <div
-        key={attachmentId}
-        className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
-      >
+      {isDeleteAttachmentModalOpen === attachment.id && (
+        <IssueAttachmentDeleteModal
+          isOpen={!!isDeleteAttachmentModalOpen}
+          onClose={() => toggleDeleteAttachmentModal(null)}
+          handleAttachmentOperations={handleAttachmentOperations}
+          data={attachment}
+        />
+      )}
+      <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm">
         <Link href={attachment.asset} target="_blank" rel="noopener noreferrer">
           <div className="flex items-center gap-3">
             <div className="h-7 w-7">{getFileIcon(getFileExtension(attachment.asset))}</div>
@@ -83,7 +83,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
         </Link>
 
         {!disabled && (
-          <button onClick={() => toggleDeleteAttachmentModal(true)}>
+          <button type="button" onClick={() => toggleDeleteAttachmentModal(attachment.id)}>
             <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
           </button>
         )}
diff --git a/web/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
index 44c64dd01..cc77f9244 100644
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -25,24 +25,28 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
   // states
   const [isLoading, setIsLoading] = useState(false);
 
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    const currentFile: File = acceptedFiles[0];
-    if (!currentFile || !workspaceSlug) return;
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const currentFile: File = acceptedFiles[0];
+      if (!currentFile || !workspaceSlug) return;
 
-    const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), { type: currentFile.type });
-    const formData = new FormData();
-    formData.append("asset", uploadedFile);
-    formData.append(
-      "attributes",
-      JSON.stringify({
-        name: uploadedFile.name,
-        size: uploadedFile.size,
-      })
-    );
-    setIsLoading(true);
-    handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      const uploadedFile: File = new File([currentFile], generateFileName(currentFile.name), {
+        type: currentFile.type,
+      });
+      const formData = new FormData();
+      formData.append("asset", uploadedFile);
+      formData.append(
+        "attributes",
+        JSON.stringify({
+          name: uploadedFile.name,
+          size: uploadedFile.size,
+        })
+      );
+      setIsLoading(true);
+      handleAttachmentOperations.create(formData).finally(() => setIsLoading(false));
+    },
+    [handleAttachmentOperations, workspaceSlug]
+  );
 
   const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
     onDrop,
diff --git a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
similarity index 94%
rename from web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
rename to web/components/issues/attachment/delete-attachment-modal.tsx
index bd69c3cac..4f58674f1 100644
--- a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, Dispatch, SetStateAction, useState } from "react";
+import { FC, Fragment, useState } from "react";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 import type { TIssueAttachment } from "@plane/types";
@@ -14,18 +14,18 @@ export type TAttachmentOperationsRemoveModal = Exclude<TAttachmentOperations, "c
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  onClose: () => void;
   data: TIssueAttachment;
   handleAttachmentOperations: TAttachmentOperationsRemoveModal;
 };
 
 export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
-  const { isOpen, setIsOpen, data, handleAttachmentOperations } = props;
-  // state
+  const { isOpen, onClose, data, handleAttachmentOperations } = props;
+  // states
   const [loader, setLoader] = useState(false);
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setLoader(false);
   };
 
diff --git a/web/components/issues/attachment/index.ts b/web/components/issues/attachment/index.ts
index d4385e7da..928cd4613 100644
--- a/web/components/issues/attachment/index.ts
+++ b/web/components/issues/attachment/index.ts
@@ -1,7 +1,5 @@
-export * from "./root";
-
-export * from "./attachment-upload";
-export * from "./delete-attachment-confirmation-modal";
-
-export * from "./attachments-list";
 export * from "./attachment-detail";
+export * from "./attachment-upload";
+export * from "./attachments-list";
+export * from "./delete-attachment-modal";
+export * from "./root";
diff --git a/web/components/issues/attachment/root.tsx b/web/components/issues/attachment/root.tsx
index c915ebce9..b9dd5e290 100644
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -95,7 +95,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
         }
       },
     }),
-    [workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
+    [captureIssueEvent, workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
   );
 
   return (
diff --git a/web/components/issues/description-input.tsx b/web/components/issues/description-input.tsx
index b8cfbd582..538f5444e 100644
--- a/web/components/issues/description-input.tsx
+++ b/web/components/issues/description-input.tsx
@@ -15,6 +15,7 @@ import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 import { useWorkspace } from "@/hooks/store";
 
 export type IssueDescriptionInputProps = {
+  containerClassName?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -28,6 +29,7 @@ export type IssueDescriptionInputProps = {
 
 export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
   const {
+    containerClassName,
     workspaceSlug,
     projectId,
     issueId,
@@ -110,11 +112,12 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
                 placeholder={
                   placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
                 }
+                containerClassName={containerClassName}
               />
             ) : (
               <RichTextReadOnlyEditor
                 initialValue={localIssueDescription.description_html ?? ""}
-                containerClassName="!p-0 !pt-2 text-custom-text-200 min-h-[150px]"
+                containerClassName={containerClassName}
               />
             )
           }
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
index 0263a37e1..ae6e75c79 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
@@ -18,10 +18,11 @@ type TIssueCommentCreate = {
   workspaceSlug: string;
   activityOperations: TActivityOperations;
   showAccessSpecifier?: boolean;
+  issueId: string;
 };
 
 export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
-  const { workspaceSlug, projectId, activityOperations, showAccessSpecifier = false } = props;
+  const { workspaceSlug, projectId, issueId, activityOperations, showAccessSpecifier = false } = props;
   // refs
   const editorRef = useRef<any>(null);
   // store hooks
@@ -72,6 +73,8 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
             render={({ field: { value, onChange } }) => (
               <LiteTextEditor
                 workspaceId={workspaceId}
+                id={"add_comment_" + issueId}
+                value={"<p></p>"}
                 projectId={projectId}
                 workspaceSlug={workspaceSlug}
                 onEnterKeyPress={(e) => {
diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx
index 982fe0952..d8de769c1 100644
--- a/web/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/components/issues/issue-detail/issue-activity/root.tsx
@@ -146,6 +146,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               />
               {!disabled && (
                 <IssueCommentCreate
+                  issueId={issueId}
                   projectId={projectId}
                   workspaceSlug={workspaceSlug}
                   activityOperations={activityOperations}
@@ -165,6 +166,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               />
               {!disabled && (
                 <IssueCommentCreate
+                  issueId={issueId}
                   projectId={projectId}
                   workspaceSlug={workspaceSlug}
                   activityOperations={activityOperations}
diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
index 9f967f49e..8fad6f6c3 100644
--- a/web/components/issues/issue-detail/main-content.tsx
+++ b/web/components/issues/issue-detail/main-content.tsx
@@ -54,7 +54,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="space-y-4 rounded-lg">
+      <div className="rounded-lg space-y-4 pl-3">
         {issue.parent_id && (
           <IssueParentDetail
             workspaceSlug={workspaceSlug}
@@ -85,6 +85,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           issueOperations={issueOperations}
           disabled={!isEditable}
           value={issue.name}
+          containerClassName="-ml-3"
         />
 
         {/* {issue?.description_html === issueDescription && ( */}
@@ -97,6 +98,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           disabled={!isEditable}
           issueOperations={issueOperations}
           setIsSubmitting={(value) => setIsSubmitting(value)}
+          containerClassName="-ml-3 !mb-6 border-none"
         />
         {/* )} */}
 
@@ -121,14 +123,18 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         )}
       </div>
 
-      <IssueAttachmentRoot
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        issueId={issueId}
-        disabled={!isEditable}
-      />
+      <div className="pl-3">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={!isEditable}
+        />
+      </div>
 
-      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={isArchived} />
+      <div className="pl-3">
+        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={isArchived} />
+      </div>
     </>
   );
 });
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
index 1b4724a16..6c28bb879 100644
--- a/web/components/issues/issue-detail/parent-select.tsx
+++ b/web/components/issues/issue-detail/parent-select.tsx
@@ -47,7 +47,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
     try {
       await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
       await issueOperations.fetch(workspaceSlug, projectId, issueId);
-      toggleParentIssueModal(false);
+      toggleParentIssueModal(issueId);
     } catch (error) {
       console.error("something went wrong while fetching the issue");
     }
@@ -79,8 +79,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
       <ParentIssuesListModal
         projectId={projectId}
         issueId={issueId}
-        isOpen={isParentIssueModalOpen}
-        handleClose={() => toggleParentIssueModal(false)}
+        isOpen={isParentIssueModalOpen === issueId}
+        handleClose={() => toggleParentIssueModal(null)}
         onChange={(issue: any) => handleParentIssue(issue?.id)}
       />
       <button
@@ -94,7 +94,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
           },
           className
         )}
-        onClick={() => toggleParentIssueModal(true)}
+        onClick={() => toggleParentIssueModal(issue.id)}
         disabled={disabled}
       >
         {issue.parent_id && parentIssue ? (
diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx
index 3f52fef78..a8307d8eb 100644
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -81,22 +81,26 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
       data.map((i) => i.id)
     );
 
-    toggleRelationModal(null);
+    toggleRelationModal(null, null);
   };
 
   if (!relationIssueIds) return null;
 
+  const isRelationKeyModalActive =
+    isRelationModalOpen?.relationType === relationKey && isRelationModalOpen?.issueId === issueId;
+
   return (
     <>
       <ExistingIssuesListModal
         workspaceSlug={workspaceSlug}
         projectId={projectId}
-        isOpen={isRelationModalOpen === relationKey}
-        handleClose={() => toggleRelationModal(null)}
+        isOpen={isRelationKeyModalActive}
+        handleClose={() => toggleRelationModal(null, null)}
         searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
+
       <button
         type="button"
         className={cn(
@@ -104,11 +108,11 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
           {
             "cursor-not-allowed": disabled,
             "hover:bg-custom-background-80": !disabled,
-            "bg-custom-background-80": isRelationModalOpen === relationKey,
+            "bg-custom-background-80": isRelationKeyModalActive,
           },
           className
         )}
-        onClick={() => toggleRelationModal(relationKey)}
+        onClick={() => toggleRelationModal(issueId, relationKey)}
         disabled={disabled}
       >
         <div className="flex w-full items-start justify-between">
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
index 80ef2f0cb..d64e5a434 100644
--- a/web/components/issues/issue-detail/root.tsx
+++ b/web/components/issues/issue-detail/root.tsx
@@ -357,7 +357,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         />
       ) : (
         <div className="flex h-full w-full overflow-hidden">
-          <div className="max-w-2/3 h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
+          <div className="max-w-2/3 h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto px-6 py-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               swrIssueDetails={swrIssueDetails}
diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx
index 8cbc3ce20..a9a23ebdc 100644
--- a/web/components/issues/issue-detail/sidebar.tsx
+++ b/web/components/issues/issue-detail/sidebar.tsx
@@ -13,7 +13,6 @@ import {
   Trash2,
   Triangle,
   XCircle,
-  UserCircle2
 } from "lucide-react";
 // hooks
 // components
@@ -37,7 +36,6 @@ import {
 } from "@/components/dropdowns";
 // ui
 // helpers
-import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
   ArchiveIssueModal,
   DeleteIssueModal,
@@ -56,7 +54,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import { useEstimate, useIssueDetail, useMember, useProject, useProjectState, useUser } from "@/hooks/store";
+import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import type { TIssueOperations } from "./root";
@@ -90,12 +88,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   } = useIssueDetail();
   const { getStateById } = useProjectState();
   const { isMobile } = usePlatformOS();
-  const { getUserDetails } = useMember();
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
 
-  const createdByDetails = getUserDetails(issue.created_by);
-
   const handleCopyText = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
@@ -262,21 +257,6 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            {createdByDetails && (
-              <div className="flex h-8 items-center gap-2">
-                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <UserCircle2 className="h-4 w-4 flex-shrink-0" />
-                  <span>Created by</span>
-                </div>
-                <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
-                  <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
-                    <ButtonAvatars showTooltip={false} userIds={createdByDetails.id} />
-                    <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarClock className="h-4 w-4 flex-shrink-0" />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index d494ed2ee..fffeecd8d 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -96,12 +96,13 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
         ...(appliedFilters ?? {}),
       },
     }).then((res) => {
-      captureEvent(GLOBAL_VIEW_UPDATED, {
-        view_id: res.id,
-        applied_filters: res.filters,
-        state: "SUCCESS",
-        element: "Spreadsheet view",
-      });
+      if (res)
+        captureEvent(GLOBAL_VIEW_UPDATED, {
+          view_id: res.id,
+          applied_filters: res.filters,
+          state: "SUCCESS",
+          element: "Spreadsheet view",
+        });
     });
   };
 
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 0d394cbaa..b33a74660 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -75,6 +75,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const sub_group_by = displayFilters?.sub_group_by;
   const group_by = displayFilters?.group_by;
 
+  const orderBy = displayFilters?.order_by;
+
   const userDisplayFilters = displayFilters || null;
 
   const KanBanView = sub_group_by ? KanBanSwimLanes : KanBan;
@@ -157,7 +159,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       issues.getIssueIds,
       updateIssue,
       group_by,
-      sub_group_by
+      sub_group_by,
+      orderBy !== "sort_order"
     ).catch((err) => {
       setToast({
         title: "Error",
@@ -259,6 +262,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               displayProperties={displayProperties}
               sub_group_by={sub_group_by}
               group_by={group_by}
+              orderBy={orderBy}
               updateIssue={updateIssue}
               quickActions={renderQuickActions}
               handleKanbanFilters={handleKanbanFilters}
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 5c1e12378..37cff624f 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -4,11 +4,12 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { observer } from "mobx-react-lite";
 import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 // hooks
-import { ControlLink, DropIndicator, Tooltip } from "@plane/ui";
+import { ControlLink, DropIndicator, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { cn } from "@/helpers/common.helper";
 import { useAppRouter, useIssueDetail, useProject, useKanbanView } from "@/hooks/store";
 
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import { TRenderQuickActions } from "../list/list-view-types";
@@ -131,6 +132,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
 
   const isDragAllowed = !isDragDisabled && !issue?.tempId && canEditIssueProperties;
 
+  useOutsideClickDetector(cardRef, () => {
+    cardRef?.current?.classList?.remove("highlight");
+  });
+
   // Make Issue block both as as Draggable and,
   // as a DropTarget for other issues being dragged to get the location of drop
   useEffect(() => {
@@ -177,7 +182,15 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
       <div
         // make Z-index higher at the beginning of drag, to have a issue drag image of issue block without any overlaps
         className={cn("group/kanban-block relative p-1.5", { "z-[1]": isCurrentBlockDragging })}
-        onDragStart={() => isDragAllowed && setIsCurrentBlockDragging(true)}
+        onDragStart={() => {
+          if (isDragAllowed) setIsCurrentBlockDragging(true);
+          else
+            setToast({
+              type: TOAST_TYPE.WARNING,
+              title: "Cannot move issue",
+              message: "Drag and drop is disabled for the current grouping",
+            });
+        }}
       >
         <ControlLink
           id={`issue-${issue.id}`}
@@ -186,12 +199,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
           }`}
           ref={cardRef}
           className={cn(
-            "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
-            {
-              "hover:cursor-pointer": isDragAllowed,
-              "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
-              "bg-custom-background-80 z-[100]": isCurrentBlockDragging,
-            }
+            "block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+            { "hover:cursor-pointer": isDragAllowed },
+            { "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id) },
+            { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
           )}
           target="_blank"
           onClick={() => handleIssuePeekOverview(issue)}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index e3750ce34..b32f6bddba 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -11,6 +11,7 @@ import {
   TUnGroupedIssues,
   TIssueKanbanFilters,
   TIssueGroupByOptions,
+  TIssueOrderByOptions,
 } from "@plane/types";
 // constants
 // hooks
@@ -31,6 +32,7 @@ export interface IGroupByKanBan {
   displayProperties: IIssueDisplayProperties | undefined;
   sub_group_by: TIssueGroupByOptions | undefined;
   group_by: TIssueGroupByOptions | undefined;
+  orderBy: TIssueOrderByOptions | undefined;
   sub_group_id: string;
   isDragDisabled: boolean;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
@@ -79,6 +81,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     handleOnDrop,
     showEmptyGroup = true,
     subGroupIssueHeaderCount,
+    orderBy,
   } = props;
 
   const member = useMember();
@@ -170,6 +173,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   displayProperties={displayProperties}
                   sub_group_by={sub_group_by}
                   group_by={group_by}
+                  orderBy={orderBy}
                   sub_group_id={sub_group_id}
                   isDragDisabled={isDragDisabled}
                   updateIssue={updateIssue}
@@ -196,6 +200,7 @@ export interface IKanBan {
   displayProperties: IIssueDisplayProperties | undefined;
   sub_group_by: TIssueGroupByOptions | undefined;
   group_by: TIssueGroupByOptions | undefined;
+  orderBy: TIssueOrderByOptions | undefined;
   sub_group_id?: string;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
@@ -242,6 +247,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     handleOnDrop,
     showEmptyGroup,
     subGroupIssueHeaderCount,
+    orderBy,
   } = props;
 
   const issueKanBanView = useKanbanView();
@@ -253,6 +259,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       displayProperties={displayProperties}
       group_by={group_by}
       sub_group_by={sub_group_by}
+      orderBy={orderBy}
       sub_group_id={sub_group_id}
       isDragDisabled={!issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by)}
       updateIssue={updateIssue}
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index 85f24d90b..c9e04c819 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -11,14 +11,21 @@ import {
   TSubGroupedIssues,
   TUnGroupedIssues,
   TIssueGroupByOptions,
+  TIssueOrderByOptions,
 } from "@plane/types";
+import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectState } from "@/hooks/store";
 //components
 import { TRenderQuickActions } from "../list/list-view-types";
-import { KanbanDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload } from "./utils";
+import {
+  KanbanDropLocation,
+  getSourceFromDropPayload,
+  getDestinationFromDropPayload,
+  highlightIssueOnDrop,
+} from "./utils";
 import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
 
 interface IKanbanGroup {
@@ -45,6 +52,7 @@ interface IKanbanGroup {
   groupByVisibilityToggle?: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   handleOnDrop: (source: KanbanDropLocation, destination: KanbanDropLocation) => Promise<void>;
+  orderBy: TIssueOrderByOptions | undefined;
 }
 
 export const KanbanGroup = (props: IKanbanGroup) => {
@@ -52,6 +60,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     groupId,
     sub_group_id,
     group_by,
+    orderBy,
     sub_group_by,
     issuesMap,
     displayProperties,
@@ -101,13 +110,15 @@ export const KanbanGroup = (props: IKanbanGroup) => {
           if (!source || !destination) return;
 
           handleOnDrop(source, destination);
+
+          highlightIssueOnDrop(payload.source.element.id, orderBy !== "sort_order");
         },
       }),
       autoScrollForElements({
         element,
       })
     );
-  }, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn]);
+  }, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn, orderBy]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -161,16 +172,33 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     return preloadedData;
   };
 
+  const shouldOverlay = isDraggingOverColumn && orderBy !== "sort_order";
+  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
+
   return (
     <div
       id={`${groupId}__${sub_group_id}`}
       className={cn(
         "relative h-full transition-all min-h-[50px]",
-        { "bg-custom-background-80": isDraggingOverColumn },
-        { "vertical-scrollbar scrollbar-md": !sub_group_by }
+        { "bg-custom-background-80 rounded": isDraggingOverColumn },
+        { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlay }
       )}
       ref={columnRef}
     >
+      <div
+        //column overlay when issues are not sorted by manual
+        className={cn(
+          "absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded",
+          {
+            "flex flex-col bg-custom-background-80 border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
+          },
+          { hidden: !shouldOverlay },
+          { "justify-center": !sub_group_by }
+        )}
+      >
+        {readableOrderBy && <span className="pt-6">The layout is ordered by {readableOrderBy}.</span>}
+        <span>Drop here to move the issue.</span>
+      </div>
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
         columnId={groupId}
@@ -181,7 +209,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         updateIssue={updateIssue}
         quickActions={quickActions}
         canEditProperties={canEditProperties}
-        scrollableContainerRef={scrollableContainerRef}
+        scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
       />
 
       {enableQuickIssueCreate && !disableIssueCreation && (
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index ae881b9ed..5669ac3fb 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -11,6 +11,7 @@ import {
   TUnGroupedIssues,
   TIssueKanbanFilters,
   TIssueGroupByOptions,
+  TIssueOrderByOptions,
 } from "@plane/types";
 // components
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
@@ -114,6 +115,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   disableIssueCreation?: boolean;
   storeType: KanbanStoreType;
   enableQuickIssueCreate: boolean;
+  orderBy: TIssueOrderByOptions | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   quickAddCallback?: (
@@ -146,6 +148,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     viewId,
     scrollableContainerRef,
     handleOnDrop,
+    orderBy,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -181,7 +184,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
           if (subGroupByVisibilityToggle.showGroup === false) return <></>;
           return (
             <div key={_list.id} className="flex flex-shrink-0 flex-col">
-              <div className="sticky top-[50px] z-[1] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
+              <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
                 <div className="sticky left-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
@@ -216,6 +219,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                     viewId={viewId}
                     scrollableContainerRef={scrollableContainerRef}
                     handleOnDrop={handleOnDrop}
+                    orderBy={orderBy}
                     subGroupIssueHeaderCount={(groupByListId: string) =>
                       getSubGroupHeaderIssuesCount(issueIds as TSubGroupedIssues, groupByListId)
                     }
@@ -254,6 +258,7 @@ export interface IKanBanSwimLanes {
   viewId?: string;
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  orderBy: TIssueOrderByOptions | undefined;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@@ -263,6 +268,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     displayProperties,
     sub_group_by,
     group_by,
+    orderBy,
     updateIssue,
     storeType,
     quickActions,
@@ -313,7 +319,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
 
   return (
     <div className="relative">
-      <div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90 px-2">
+      <div className="sticky top-0 z-[4] h-[50px] bg-custom-background-90 px-2">
         <SubGroupSwimlaneHeader
           issueIds={issueIds}
           group_by={group_by}
@@ -334,6 +340,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           displayProperties={displayProperties}
           group_by={group_by}
           sub_group_by={sub_group_by}
+          orderBy={orderBy}
           updateIssue={updateIssue}
           quickActions={quickActions}
           kanbanFilters={kanbanFilters}
diff --git a/web/components/issues/issue-layouts/kanban/utils.ts b/web/components/issues/issue-layouts/kanban/utils.ts
index 3981455db..cf4745f63 100644
--- a/web/components/issues/issue-layouts/kanban/utils.ts
+++ b/web/components/issues/issue-layouts/kanban/utils.ts
@@ -1,4 +1,5 @@
 import pull from "lodash/pull";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import { IPragmaticDropPayload, TIssue, TIssueGroupByOptions } from "@plane/types";
 import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
 
@@ -87,14 +88,17 @@ export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): K
 const handleSortOrder = (
   destinationIssues: string[],
   destinationIssueId: string | undefined,
-  getIssueById: (issueId: string) => TIssue | undefined
+  getIssueById: (issueId: string) => TIssue | undefined,
+  shouldAddIssueAtTop = false
 ) => {
   const sortOrderDefaultValue = 65535;
   let currentIssueState = {};
 
   const destinationIndex = destinationIssueId
     ? destinationIssues.indexOf(destinationIssueId)
-    : destinationIssues.length;
+    : shouldAddIssueAtTop
+      ? 0
+      : destinationIssues.length;
 
   if (destinationIssues && destinationIssues.length > 0) {
     if (destinationIndex === 0) {
@@ -145,7 +149,8 @@ export const handleDragDrop = async (
   getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined,
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined,
   groupBy: TIssueGroupByOptions | undefined,
-  subGroupBy: TIssueGroupByOptions | undefined
+  subGroupBy: TIssueGroupByOptions | undefined,
+  shouldAddIssueAtTop = false
 ) => {
   if (!source.id || !groupBy || (subGroupBy && (!source.subGroupId || !destination.subGroupId))) return;
 
@@ -165,7 +170,7 @@ export const handleDragDrop = async (
   // for both horizontal and vertical dnd
   updatedIssue = {
     ...updatedIssue,
-    ...handleSortOrder(destinationIssues, destination.id, getIssueById),
+    ...handleSortOrder(destinationIssues, destination.id, getIssueById, shouldAddIssueAtTop),
   };
 
   if (source.groupId && destination.groupId && source.groupId !== destination.groupId) {
@@ -207,3 +212,18 @@ export const handleDragDrop = async (
     );
   }
 };
+
+/**
+ * This Method finds the DOM element with elementId, scrolls to it and highlights the issue block
+ * @param elementId
+ * @param shouldScrollIntoView
+ */
+export const highlightIssueOnDrop = (elementId: string | undefined, shouldScrollIntoView = true) => {
+  setTimeout(async () => {
+    const sourceElementId = elementId ?? "";
+    const sourceElement = document.getElementById(sourceElementId);
+    sourceElement?.classList?.add("highlight");
+    if (shouldScrollIntoView && sourceElement)
+      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
+  }, 200);
+};
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 7a73a25f9..a61688749 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -161,6 +161,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         portalElement={portalElement}
         placement={placements}
         menuItemsClassName="z-[14]"
+        maxHeight="lg"
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {
@@ -180,6 +181,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index 0327755a9..e6b3887c3 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -123,6 +123,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
         portalElement={portalElement}
         placement={placements}
         menuItemsClassName="z-[14]"
+        maxHeight="lg"
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {
@@ -142,6 +143,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 503d8258e..026d050ac 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -181,6 +181,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         customButton={customActionButton}
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
+        maxHeight="lg"
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {
@@ -200,6 +201,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
index 18c259107..539b45cbd 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
@@ -107,6 +107,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         portalElement={portalElement}
         placement={placements}
         menuItemsClassName="z-[14]"
+        maxHeight="lg"
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {
@@ -126,6 +127,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 3cc3343b6..7f8622626 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -178,6 +178,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
         customButton={customActionButton}
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
+        maxHeight="lg"
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {
@@ -197,6 +198,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 0fbe10da9..ac84af556 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -171,6 +171,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
         customButton={customActionButton}
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
+        maxHeight="lg"
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {
@@ -190,6 +191,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 5e36f6ed5..710b9bca1 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -475,6 +475,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           ref={editorRef}
                           tabIndex={getTabIndex("description_html")}
                           placeholder={getDescriptionPlaceholder}
+                          containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
                         />
                       )}
                     />
diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
index 813f49010..9f146cdc0 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -53,7 +53,7 @@ export type PeekOverviewHeaderProps = {
   isArchived: boolean;
   disabled: boolean;
   toggleDeleteIssueModal: (issueId: string | null) => void;
-  toggleArchiveIssueModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (issueId: string | null) => void;
   handleRestoreIssue: () => void;
   isSubmitting: "submitting" | "submitted" | "saved";
 };
@@ -177,7 +177,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
                 })}
                 onClick={() => {
                   if (!isInArchivableGroup) return;
-                  toggleArchiveIssueModal(true);
+                  toggleArchiveIssueModal(issueId);
                 }}
               >
                 <ArchiveIcon className="h-4 w-4" />
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index c8f13d92f..3fc3d7c2e 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -69,6 +69,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
         issueOperations={issueOperations}
         disabled={disabled}
         value={issue.name}
+        containerClassName="-ml-3"
       />
 
       <IssueDescriptionInput
@@ -77,10 +78,11 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
         issueId={issue.id}
         initialValue={issueDescription}
         // for now peek overview doesn't have live syncing while tab changes
-        swrIssueDescription={null}
+        swrIssueDescription={issueDescription}
         disabled={disabled}
         issueOperations={issueOperations}
         setIsSubmitting={(value) => setIsSubmitting(value)}
+        containerClassName="-ml-3 !mb-6 border-none"
       />
 
       {currentUser && (
diff --git a/web/components/issues/peek-overview/properties.tsx b/web/components/issues/peek-overview/properties.tsx
index beed7b114..cbc35b5e2 100644
--- a/web/components/issues/peek-overview/properties.tsx
+++ b/web/components/issues/peek-overview/properties.tsx
@@ -10,11 +10,10 @@ import {
   XCircle,
   CalendarClock,
   CalendarCheck2,
-  UserCircle2,
 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
 // components
 import {
   DateDropdown,
@@ -23,7 +22,6 @@ import {
   MemberDropdown,
   StateDropdown,
 } from "@/components/dropdowns";
-import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
   IssueLinkRoot,
   IssueCycleSelect,
@@ -37,8 +35,7 @@ import {
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
-import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -56,12 +53,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
     issue: { getIssueById },
   } = useIssueDetail();
   const { getStateById } = useProjectState();
-  const { getUserDetails } = useMember();
-  const { isMobile } = usePlatformOS();
   // derived values
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
-  const createdByDetails = getUserDetails(issue?.created_by);
   const projectDetails = getProjectById(issue.project_id);
   const isEstimateEnabled = projectDetails?.estimate;
   const stateDetails = getStateById(issue.state_id);
@@ -137,22 +131,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           />
         </div>
 
-        {/* created by */}
-        {createdByDetails && (
-          <div className="flex w-full items-center gap-3 h-8">
-            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <UserCircle2 className="h-4 w-4 flex-shrink-0" />
-              <span>Created by</span>
-            </div>
-            <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
-              <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
-                <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
-                <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
-              </div>
-            </Tooltip>
-          </div>
-        )}
-
         {/* start date */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index de659bb37..17f093b29 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -87,8 +87,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
     <>
       {issue && !is_archived && (
         <ArchiveIssueModal
-          isOpen={isArchiveIssueModalOpen}
-          handleClose={() => toggleArchiveIssueModal(false)}
+          isOpen={isArchiveIssueModalOpen === issueId}
+          handleClose={() => toggleArchiveIssueModal(null)}
           data={issue}
           onSubmit={async () => {
             if (issueOperations.archive) await issueOperations.archive(workspaceSlug, projectId, issueId);
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index a8c7f3083..606d9099f 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -381,7 +381,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                       onClick={() => {
                         setTrackElement("Issue detail nested sub-issue");
                         handleIssueCrudState("existing", parentIssueId, null);
-                        toggleSubIssuesModal(true);
+                        toggleSubIssuesModal(issue.id);
                       }}
                     >
                       <div className="flex items-center gap-2">
@@ -439,7 +439,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                     onClick={() => {
                       setTrackElement("Issue detail nested sub-issue");
                       handleIssueCrudState("existing", parentIssueId, null);
-                      toggleSubIssuesModal(true);
+                      toggleSubIssuesModal(issue.id);
                     }}
                   >
                     <div className="flex items-center gap-2">
@@ -476,7 +476,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
               isOpen={issueCrudState?.existing?.toggle}
               handleClose={() => {
                 handleIssueCrudState("existing", null, null);
-                toggleSubIssuesModal(false);
+                toggleSubIssuesModal(null);
               }}
               searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
               handleOnSubmit={(_issue) =>
diff --git a/web/components/issues/title-input.tsx b/web/components/issues/title-input.tsx
index 11a82e623..db9a4199a 100644
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 // components
 import { TextArea } from "@plane/ui";
 // types
+import { cn } from "@/helpers/common.helper";
 import useDebounce from "@/hooks/use-debounce";
 import { TIssueOperations } from "./issue-detail";
 // hooks
@@ -16,12 +17,26 @@ export type IssueTitleInputProps = {
   issueOperations: TIssueOperations;
   projectId: string;
   issueId: string;
+  className?: string;
+  containerClassName?: string;
 };
 
 export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, isSubmitting, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  const {
+    disabled,
+    value,
+    workspaceSlug,
+    isSubmitting,
+    setIsSubmitting,
+    issueId,
+    issueOperations,
+    projectId,
+    className,
+    containerClassName,
+  } = props;
   // states
   const [title, setTitle] = useState("");
+  const [isLengthVisible, setIsLengthVisible] = useState(false);
   // hooks
   const debouncedValue = useDebounce(title, 1500);
 
@@ -76,19 +91,32 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   if (disabled) return <div className="text-2xl font-medium">{title}</div>;
 
   return (
-    <div className="relative">
+    <div className={cn("relative", containerClassName)}>
       <TextArea
         id="title-input"
-        className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
-          title?.length === 0 ? "!ring-red-400" : ""
-        }`}
+        className={cn(
+          "block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
+          {
+            "ring-red-400": title.length === 0,
+          },
+          className
+        )}
         disabled={disabled}
         value={title}
         onChange={handleTitleChange}
         maxLength={255}
         placeholder="Issue title"
+        onFocus={() => setIsLengthVisible(true)}
+        onBlur={() => setIsLengthVisible(false)}
       />
-      <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
+      <div
+        className={cn(
+          "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+          {
+            "opacity-100": isLengthVisible,
+          }
+        )}
+      >
         <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
         /255
       </div>
diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
index d211c6021..41ed792c7 100644
--- a/web/components/modules/modules-list-view.tsx
+++ b/web/components/modules/modules-list-view.tsx
@@ -4,7 +4,13 @@ import { useRouter } from "next/router";
 // components
 import { ListLayout } from "@/components/core/list";
 import { EmptyState } from "@/components/empty-state";
-import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
+import {
+  ModuleCardItem,
+  ModuleListItem,
+  ModulePeekOverview,
+  ModuleViewHeader,
+  ModulesListGanttChartView,
+} from "@/components/modules";
 import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
@@ -67,6 +73,12 @@ export const ModulesListView: React.FC = observer(() => {
 
   return (
     <>
+      <div className="h-[50px] flex-shrink-0 w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
+        <div className="flex items-center">
+          <span className="block text-sm font-medium">Module name</span>
+        </div>
+        <ModuleViewHeader />
+      </div>
       {displayFilters?.layout === "list" && (
         <div className="h-full overflow-y-auto">
           <div className="flex h-full w-full justify-between">
diff --git a/web/components/modules/quick-actions.tsx b/web/components/modules/quick-actions.tsx
index 4cefa825f..d7b7a23ef 100644
--- a/web/components/modules/quick-actions.tsx
+++ b/web/components/modules/quick-actions.tsx
@@ -176,6 +176,7 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/pages/dropdowns/quick-actions.tsx b/web/components/pages/dropdowns/quick-actions.tsx
index 9c311797a..e218c1389 100644
--- a/web/components/pages/dropdowns/quick-actions.tsx
+++ b/web/components/pages/dropdowns/quick-actions.tsx
@@ -104,6 +104,7 @@ export const PageQuickActions: React.FC<Props> = observer((props) => {
                 item.action();
               }}
               className="flex items-center gap-2"
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className="h-3 w-3" />}
               {item.title}
diff --git a/web/components/pages/editor/editor-body.tsx b/web/components/pages/editor/editor-body.tsx
index 4b42456fe..a896bcc58 100644
--- a/web/components/pages/editor/editor-body.tsx
+++ b/web/components/pages/editor/editor-body.tsx
@@ -13,11 +13,12 @@ import {
 // types
 import { IUserLite, TPage } from "@plane/types";
 // components
-import { PageContentBrowser, PageEditorTitle } from "@/components/pages";
+import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
+import { usePageFilters } from "@/hooks/use-page-filters";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // services
 import { FileService } from "@/services/file.service";
@@ -67,8 +68,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   // derived values
   const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
   const pageTitle = pageStore?.name ?? "";
-  const pageDescription = pageStore?.description_html ?? "<p></p>";
-  const isFullWidth = !!pageStore?.view_props?.full_width;
+  const pageDescription = pageStore?.description_html;
   const { description_html, isContentEditable, updateTitle, isSubmitting, setIsSubmitting } = pageStore;
   const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@@ -79,6 +79,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     members: projectMemberDetails,
     user: currentUser ?? undefined,
   });
+  // page filters
+  const { isFullWidth } = usePageFilters();
 
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
@@ -86,13 +88,15 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     updateMarkings(description_html ?? "<p></p>");
   }, [description_html, updateMarkings]);
 
+  if (pageDescription === undefined) return <PageContentLoader />;
+
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
       <div
         className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full p-5 duration-200 md:block", {
           "translate-x-0": sidePeekVisible,
-          "w-56 lg:w-72": !isFullWidth,
-          "w-[10%]": isFullWidth,
+          "w-40 lg:w-56": !isFullWidth,
+          "w-[5%]": isFullWidth,
         })}
       >
         {!isFullWidth && (
@@ -104,8 +108,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
       </div>
       <div
         className={cn("h-full w-full pt-5", {
-          "md:w-[calc(100%-14rem)] xl:w-[calc(100%-18rem-18rem)]": !isFullWidth,
-          "md:w-[80%]": isFullWidth,
+          "md:w-[calc(100%-10rem)] xl:w-[calc(100%-14rem-14rem)]": !isFullWidth,
+          "md:w-[90%]": isFullWidth,
         })}
       >
         <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
@@ -130,7 +134,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                     upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
                   }}
                   handleEditorReady={handleEditorReady}
-                  initialValue={pageDescription}
+                  initialValue={pageDescription ?? "<p></p>"}
                   value={swrPageDetails?.description_html ?? "<p></p>"}
                   ref={editorRef}
                   containerClassName="p-0 pb-64"
@@ -151,7 +155,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
           ) : (
             <DocumentReadOnlyEditorWithRef
               ref={readOnlyEditorRef}
-              initialValue={pageDescription}
+              initialValue={pageDescription ?? "<p></p>"}
               handleEditorReady={handleReadOnlyEditorReady}
               containerClassName="p-0 pb-64 border-none"
               editorClassName="lg:px-10 pl-8"
@@ -164,8 +168,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
       </div>
       <div
         className={cn("hidden xl:block flex-shrink-0", {
-          "w-56 lg:w-72": !isFullWidth,
-          "w-[10%]": isFullWidth,
+          "w-40 lg:w-56": !isFullWidth,
+          "w-[5%]": isFullWidth,
         })}
       />
     </div>
diff --git a/web/components/pages/editor/header/mobile-root.tsx b/web/components/pages/editor/header/mobile-root.tsx
index 59b33c335..de0425879 100644
--- a/web/components/pages/editor/header/mobile-root.tsx
+++ b/web/components/pages/editor/header/mobile-root.tsx
@@ -2,6 +2,8 @@ import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
 // components
 import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
+// hooks
+import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPageStore } from "@/store/pages/page.store";
 
@@ -34,8 +36,9 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable, view_props } = pageStore;
-  const isFullWidth = !!view_props?.full_width;
+  const { isContentEditable } = pageStore;
+  // page filters
+  const { isFullWidth } = usePageFilters();
 
   if (!editorRef.current && !readOnlyEditorRef.current) return null;
 
diff --git a/web/components/pages/editor/header/options-dropdown.tsx b/web/components/pages/editor/header/options-dropdown.tsx
index 402d6fe96..970357043 100644
--- a/web/components/pages/editor/header/options-dropdown.tsx
+++ b/web/components/pages/editor/header/options-dropdown.tsx
@@ -4,13 +4,11 @@ import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucid
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
 // ui
 import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useAppRouter , useUser} from "@/hooks/store";
+import { useAppRouter } from "@/hooks/store";
+import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPageStore } from "@/store/pages/page.store";
 
@@ -34,16 +32,11 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     canCurrentUserDuplicatePage,
     canCurrentUserLockPage,
     restore,
-    view_props,
-    updateViewProps,
   } = pageStore;
   // store hooks
   const { workspaceSlug, projectId } = useAppRouter();
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-  // auth
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  // page filters
+  const { isFullWidth, handleFullWidth } = usePageFilters();
 
   const handleArchivePage = async () =>
     await archive().catch(() =>
@@ -147,22 +140,10 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     <CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
       <CustomMenu.MenuItem
         className="hidden md:flex w-full items-center justify-between gap-2"
-        onClick={() =>
-          updateViewProps({
-            full_width: !view_props?.full_width,
-          })
-        }
-        disabled={!isEditingAllowed}
+        onClick={() => handleFullWidth(!isFullWidth)}
       >
         Full width
-        <ToggleSwitch
-          value={!!view_props?.full_width}
-          onChange={() => {}}
-          className={cn({
-            "opacity-40": !isEditingAllowed,
-          })}
-          disabled={!isEditingAllowed}
-        />
+        <ToggleSwitch value={isFullWidth} onChange={() => {}} />
       </CustomMenu.MenuItem>
       {MENU_ITEMS.map((item) => {
         if (!item.shouldRender) return null;
diff --git a/web/components/pages/editor/header/root.tsx b/web/components/pages/editor/header/root.tsx
index 83f973f55..7234f3ad4 100644
--- a/web/components/pages/editor/header/root.tsx
+++ b/web/components/pages/editor/header/root.tsx
@@ -4,6 +4,8 @@ import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-ed
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
+import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPageStore } from "@/store/pages/page.store";
 
@@ -36,8 +38,9 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable, view_props } = pageStore;
-  const isFullWidth = !!view_props?.full_width;
+  const { isContentEditable } = pageStore;
+  // page filters
+  const { isFullWidth } = usePageFilters();
 
   if (!editorRef.current && !readOnlyEditorRef.current) return null;
 
@@ -46,8 +49,8 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
       <div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
         <div
           className={cn("flex-shrink-0", {
-            "w-56 lg:w-72": !isFullWidth,
-            "w-[10%]": isFullWidth,
+            "w-40 lg:w-56": !isFullWidth,
+            "w-[5%]": isFullWidth,
           })}
         >
           <PageSummaryPopover
diff --git a/web/components/pages/editor/title.tsx b/web/components/pages/editor/title.tsx
index cb7d432e0..aecce77a9 100644
--- a/web/components/pages/editor/title.tsx
+++ b/web/components/pages/editor/title.tsx
@@ -23,7 +23,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
     <>
       {readOnly ? (
         <h6
-          className="break-words bg-transparent text-4xl font-bold"
+          className="break-words bg-transparent text-[1.75rem] font-semibold"
           style={{
             lineHeight: "1.2",
           }}
@@ -34,7 +34,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
         <>
           <TextArea
             onChange={(e) => updateTitle(e.target.value)}
-            className="w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
+            className="w-full bg-custom-background text-[1.75rem] font-semibold outline-none p-0 border-none resize-none rounded-none"
             style={{
               lineHeight: "1.2",
             }}
diff --git a/web/components/pages/loaders/index.ts b/web/components/pages/loaders/index.ts
index f278fa382..8760eede6 100644
--- a/web/components/pages/loaders/index.ts
+++ b/web/components/pages/loaders/index.ts
@@ -1 +1,2 @@
+export * from "./page-content-loader";
 export * from "./page-loader";
diff --git a/web/components/pages/loaders/page-content-loader.tsx b/web/components/pages/loaders/page-content-loader.tsx
new file mode 100644
index 000000000..ec38c1bbe
--- /dev/null
+++ b/web/components/pages/loaders/page-content-loader.tsx
@@ -0,0 +1,28 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const PageContentLoader = () => (
+  <div className="flex">
+    <div className="w-[5%]" />
+    <Loader className="flex-shrink-0 flex-grow">
+      <div className="mt-10 space-y-2">
+        <Loader.Item height="20px" />
+        <Loader.Item height="20px" width="80%" />
+        <Loader.Item height="20px" width="80%" />
+      </div>
+      <div className="mt-12 space-y-10">
+        {Array.from(Array(4)).map((i) => (
+          <div key={i}>
+            <Loader.Item height="25px" width="20%" />
+            <div className="mt-5 space-y-3">
+              <Loader.Item height="15px" width="40%" />
+              <Loader.Item height="15px" width="30%" />
+              <Loader.Item height="15px" width="35%" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </Loader>
+    <div className="w-[5%]" />
+  </div>
+);
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 3d536a7c0..5e94b1fb5 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -123,14 +123,14 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
       action: handleOpenInNewTab,
       title: "Open in new tab",
       icon: ExternalLink,
-      shouldRender: project.is_member,
+      shouldRender: project.is_member && !isArchived,
     },
     {
       key: "copy-link",
       action: handleCopyText,
       title: "Copy link",
       icon: LinkIcon,
-      shouldRender: true,
+      shouldRender: !isArchived,
     },
     {
       key: "restore",
diff --git a/web/components/views/quick-actions.tsx b/web/components/views/quick-actions.tsx
index c9993169b..f3f9353e5 100644
--- a/web/components/views/quick-actions.tsx
+++ b/web/components/views/quick-actions.tsx
@@ -103,6 +103,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
                 },
                 item.className
               )}
+              disabled={item.disabled}
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
diff --git a/web/components/workspace/views/default-view-quick-action.tsx b/web/components/workspace/views/default-view-quick-action.tsx
new file mode 100644
index 000000000..669e03a71
--- /dev/null
+++ b/web/components/workspace/views/default-view-quick-action.tsx
@@ -0,0 +1,128 @@
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { ExternalLink, LinkIcon } from "lucide-react";
+// ui
+import { TStaticViewTypes } from "@plane/types";
+import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+
+type Props = {
+  parentRef: React.RefObject<HTMLElement>;
+  workspaceSlug: string;
+  globalViewId: string | undefined;
+  view: {
+    key: TStaticViewTypes;
+    label: string;
+  };
+};
+
+export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
+  const { parentRef, globalViewId, view, workspaceSlug } = props;
+
+  const viewLink = `${workspaceSlug}/workspace-views/${view.key}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(viewLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "View link copied to clipboard.",
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: "Open in new tab",
+      icon: ExternalLink,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: "Copy link",
+      icon: LinkIcon,
+    },
+  ];
+
+  return (
+    <>
+      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+
+      <CustomMenu
+        customButton={
+          <>
+            {view.key === globalViewId ? (
+              <span
+                className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
+                  view.key === globalViewId
+                    ? "border-custom-primary-100 text-custom-primary-100"
+                    : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+                }`}
+              >
+                {view.label}
+              </span>
+            ) : (
+              <Link
+                key={view.key}
+                id={`global-view-${view.key}`}
+                href={`/${workspaceSlug}/workspace-views/${view.key}`}
+              >
+                <span
+                  className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
+                    view.key === globalViewId
+                      ? "border-custom-primary-100 text-custom-primary-100"
+                      : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+                  }`}
+                >
+                  {view.label}
+                </span>
+              </Link>
+            )}
+          </>
+        }
+        placement="bottom-end"
+        menuItemsClassName="z-20"
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-custom-text-400": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("text-custom-text-300 whitespace-pre-line", {
+                      "text-custom-text-400": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index fea846db8..1e44e62a1 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -1,11 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
 import { useRouter } from "next/router";
 // icons
 import { Plus } from "lucide-react";
+// types
+import { TStaticViewTypes } from "@plane/types";
 // components
-import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
+import {
+  CreateUpdateWorkspaceViewModal,
+  DefaultWorkspaceViewQuickActions,
+  WorkspaceViewQuickActions,
+} from "@/components/workspace";
 // constants
 import { GLOBAL_VIEW_OPENED } from "@/constants/event-tracker";
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "@/constants/workspace";
@@ -14,6 +19,8 @@ import { useEventTracker, useGlobalView, useUser } from "@/hooks/store";
 
 const ViewTab = observer((props: { viewId: string }) => {
   const { viewId } = props;
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
@@ -22,30 +29,54 @@ const ViewTab = observer((props: { viewId: string }) => {
 
   const view = getViewDetailsById(viewId);
 
-  if (!view) return null;
+  if (!view || !workspaceSlug || !globalViewId) return null;
 
   return (
-    <Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
-      <span
-        className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
-          viewId === globalViewId
-            ? "border-custom-primary-100 text-custom-primary-100"
-            : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
-        }`}
-      >
-        {view.name}
-      </span>
-    </Link>
+    <div ref={parentRef} className="relative">
+      <WorkspaceViewQuickActions
+        parentRef={parentRef}
+        view={view}
+        viewId={viewId}
+        globalViewId={globalViewId?.toString()}
+        workspaceSlug={workspaceSlug?.toString()}
+      />
+    </div>
   );
 });
 
+const DefaultViewTab = (props: {
+  tab: {
+    key: TStaticViewTypes;
+    label: string;
+  };
+}) => {
+  const { tab } = props;
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
+  // router
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  if (!workspaceSlug || !globalViewId) return null;
+  return (
+    <div key={tab.key} ref={parentRef} className="relative">
+      <DefaultWorkspaceViewQuickActions
+        parentRef={parentRef}
+        globalViewId={globalViewId?.toString()}
+        workspaceSlug={workspaceSlug?.toString()}
+        view={tab}
+      />
+    </div>
+  );
+};
+
 export const GlobalViewsHeader: React.FC = observer(() => {
   // states
   const [createViewModal, setCreateViewModal] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   // router
   const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
+  const { globalViewId } = router.query;
   // store hooks
   const { currentWorkspaceViews } = useGlobalView();
   const {
@@ -82,23 +113,11 @@ export const GlobalViewsHeader: React.FC = observer(() => {
           ref={containerRef}
           className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
         >
-          {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
-            <Link key={tab.key} id={`global-view-${tab.key}`} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
-              <span
-                className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
-                  tab.key === globalViewId
-                    ? "border-custom-primary-100 text-custom-primary-100"
-                    : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
-                }`}
-              >
-                {tab.label}
-              </span>
-            </Link>
+          {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
+            <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
           ))}
 
-          {currentWorkspaceViews?.map((viewId) => (
-            <ViewTab key={viewId} viewId={viewId} />
-          ))}
+          {currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
         </div>
 
         {isAuthorizedUser && (
diff --git a/web/components/workspace/views/index.ts b/web/components/workspace/views/index.ts
index 7d0547f64..c41d75238 100644
--- a/web/components/workspace/views/index.ts
+++ b/web/components/workspace/views/index.ts
@@ -5,3 +5,5 @@ export * from "./header";
 export * from "./modal";
 export * from "./view-list-item";
 export * from "./views-list";
+export * from "./quick-action";
+export * from "./default-view-quick-action";
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index 9e2e7dd9a..4288e7269 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -84,17 +84,19 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props)
 
     await updateGlobalView(workspaceSlug.toString(), data.id, payloadData)
       .then((res) => {
-        captureEvent(GLOBAL_VIEW_UPDATED, {
-          view_id: res.id,
-          applied_filters: res.filters,
-          state: "SUCCESS",
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "View updated successfully.",
-        });
-        handleClose();
+        if (res) {
+          captureEvent(GLOBAL_VIEW_UPDATED, {
+            view_id: res.id,
+            applied_filters: res.filters,
+            state: "SUCCESS",
+          });
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "View updated successfully.",
+          });
+          handleClose();
+        }
       })
       .catch(() => {
         captureEvent(GLOBAL_VIEW_UPDATED, {
diff --git a/web/components/workspace/views/quick-action.tsx b/web/components/workspace/views/quick-action.tsx
new file mode 100644
index 000000000..97373b30f
--- /dev/null
+++ b/web/components/workspace/views/quick-action.tsx
@@ -0,0 +1,156 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+// types
+import { IWorkspaceView } from "@plane/types";
+// ui
+import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "@/components/workspace";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useUser } from "@/hooks/store";
+
+type Props = {
+  parentRef: React.RefObject<HTMLElement>;
+  workspaceSlug: string;
+  globalViewId: string;
+  viewId: string;
+  view: IWorkspaceView;
+};
+
+export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
+  const { parentRef, view, globalViewId, viewId, workspaceSlug } = props;
+  // states
+  const [updateViewModal, setUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+  // store hooks
+  const {
+    membership: { currentWorkspaceRole },
+  } = useUser();
+  // auth
+  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserProjectRoles.MEMBER;
+
+  const viewLink = `${workspaceSlug}/workspace-views/${view.id}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(viewLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "View link copied to clipboard.",
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "edit",
+      action: () => setUpdateViewModal(true),
+      title: "Edit",
+      icon: Pencil,
+      shouldRender: isEditingAllowed,
+    },
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: "Open in new tab",
+      icon: ExternalLink,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: "Copy link",
+      icon: LinkIcon,
+    },
+    {
+      key: "delete",
+      action: () => setDeleteViewModal(true),
+      title: "Delete",
+      icon: Trash2,
+      shouldRender: isEditingAllowed,
+    },
+  ];
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
+      <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+
+      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+
+      <CustomMenu
+        customButton={
+          <>
+            {viewId === globalViewId ? (
+              <span
+                className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
+                  viewId === globalViewId
+                    ? "border-custom-primary-100 text-custom-primary-100"
+                    : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+                }`}
+              >
+                {view.name}
+              </span>
+            ) : (
+              <Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
+                <span
+                  className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
+                    viewId === globalViewId
+                      ? "border-custom-primary-100 text-custom-primary-100"
+                      : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+                  }`}
+                >
+                  {view.name}
+                </span>
+              </Link>
+            )}
+          </>
+        }
+        placement="bottom-end"
+        menuItemsClassName="z-20"
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-custom-text-400": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("text-custom-text-300 whitespace-pre-line", {
+                      "text-custom-text-400": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 8e233ff83..173e26326 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -336,7 +336,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
     },
     calendar: {
       filters: ["priority", "state", "cycle", "module", "assignees", "mentions", "created_by", "labels", "start_date"],
-      display_properties: true,
+      display_properties: false,
       display_filters: {
         type: [null, "active", "backlog"],
       },
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index 5d5acd07e..a6719ec1e 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -224,7 +224,29 @@ export const getDate = (date: string | Date | undefined | null): Date | undefine
     return undefined;
   }
 };
+
 export const isInDateFormat = (date: string) => {
   const datePattern = /^\d{4}-\d{2}-\d{2}$/;
   return datePattern.test(date);
 };
+
+/**
+ * returns the date string in ISO format regardless of the timezone in input date string
+ * @param dateString
+ * @returns
+ */
+export const convertToISODateString = (dateString: string | undefined) => {
+  if (!dateString) return dateString;
+
+  const date = new Date(dateString);
+  return date.toISOString();
+};
+
+/**
+ * get current Date time in UTC ISO format
+ * @returns
+ */
+export const getCurrentDateTimeInISO = () => {
+  const date = new Date();
+  return date.toISOString();
+};
\ No newline at end of file
diff --git a/web/hooks/use-dropdown-key-down.tsx b/web/hooks/use-dropdown-key-down.tsx
index 174cfdd8a..cc69906ce 100644
--- a/web/hooks/use-dropdown-key-down.tsx
+++ b/web/hooks/use-dropdown-key-down.tsx
@@ -9,23 +9,25 @@ type TUseDropdownKeyDown = {
 };
 
 export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
-  const stopEventPropagation = (event: React.KeyboardEvent<HTMLElement>) => {
-    if (stopPropagation) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
+  const stopEventPropagation = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [stopPropagation]
+  );
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === "Enter") {
         stopEventPropagation(event);
-
         onEnterKeyDown();
       } else if (event.key === "Escape") {
         stopEventPropagation(event);
         onEscKeyDown();
-      }
+      } else if (event.key === "Tab") onEscKeyDown();
     },
     [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
   );
diff --git a/web/hooks/use-page-filters.ts b/web/hooks/use-page-filters.ts
new file mode 100644
index 000000000..4c8e5128c
--- /dev/null
+++ b/web/hooks/use-page-filters.ts
@@ -0,0 +1,12 @@
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+
+export const usePageFilters = () => {
+  const { storedValue: isFullWidth, setValue: setFullWidth } = useLocalStorage<boolean>("page_full_width", true);
+  const handleFullWidth = (value: boolean) => setFullWidth(value);
+
+  return {
+    isFullWidth: !!isFullWidth,
+    handleFullWidth,
+  };
+};
diff --git a/web/package.json b/web/package.json
index ef89ef6d8..c427a62c2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",
@@ -58,6 +58,7 @@
     "react-markdown": "^8.0.7",
     "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
+    "smooth-scroll-into-view-if-needed": "^2.0.2",
     "swr": "^2.1.3",
     "tailwind-merge": "^2.0.0",
     "use-debounce": "^9.0.4",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
index d10838d96..8abb90e28 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId].tsx
@@ -103,9 +103,9 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
         </Loader>
       ) : (
         <div className="flex h-full overflow-hidden">
-          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto p-5">
+          <div className="h-full w-full space-y-3 divide-y-2 divide-custom-border-200 overflow-y-auto">
             {issue?.archived_at && canRestoreIssue && (
-              <div className="flex items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200">
+              <div className="flex items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-2.5 py-2 text-sm text-custom-text-200 my-5 mx-3">
                 <div className="flex items-center gap-2">
                   <ArchiveIcon className="h-4 w-4" />
                   <p>This issue has been archived.</p>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index cecaf01f1..22973347f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -7,7 +7,7 @@ import { TModuleFilters } from "@plane/types";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
 import { ModulesListHeader } from "@/components/headers";
-import { ModuleAppliedFiltersList, ModuleViewHeader, ModulesListView } from "@/components/modules";
+import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
 // types
 // hooks
 import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header";
@@ -57,12 +57,6 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <div className="h-full w-full flex flex-col">
-        <div className="h-[50px] flex-shrink-0 w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
-          <div className="flex items-center">
-            <span className="block text-sm font-medium">Module name</span>
-          </div>
-          <ModuleViewHeader />
-        </div>
         {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
           <div className="border-b border-custom-border-200 px-5 py-3">
             <ModuleAppliedFiltersList
diff --git a/web/store/global-view.store.ts b/web/store/global-view.store.ts
index c6d326784..742d7af32 100644
--- a/web/store/global-view.store.ts
+++ b/web/store/global-view.store.ts
@@ -1,11 +1,16 @@
-import { set } from "lodash";
+import cloneDeep from "lodash/cloneDeep";
+import isEmpty from "lodash/isEmpty";
+import isEqual from "lodash/isEqual";
+import set from "lodash/set";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
+import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
+// constants
+import { EIssueFilterType } from "@/constants/issue";
 // services
 import { WorkspaceService } from "@/services/workspace.service";
 // types
 import { RootStore } from "@/store/root.store";
-import { IWorkspaceView } from "@plane/types";
 
 export interface IGlobalViewStore {
   // observables
@@ -20,7 +25,11 @@ export interface IGlobalViewStore {
   fetchGlobalViewDetails: (workspaceSlug: string, viewId: string) => Promise<IWorkspaceView>;
   // crud actions
   createGlobalView: (workspaceSlug: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
-  updateGlobalView: (workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  updateGlobalView: (
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>
+  ) => Promise<IWorkspaceView | undefined>;
   deleteGlobalView: (workspaceSlug: string, viewId: string) => Promise<any>;
 }
 
@@ -139,14 +148,50 @@ export class GlobalViewStore implements IGlobalViewStore {
     workspaceSlug: string,
     viewId: string,
     data: Partial<IWorkspaceView>
-  ): Promise<IWorkspaceView> =>
-    await this.workspaceService.updateView(workspaceSlug, viewId, data).then((response) => {
-      const viewToUpdate = { ...this.getViewDetailsById(viewId), ...data };
-      runInAction(() => {
-        set(this.globalViewMap, viewId, viewToUpdate);
+  ): Promise<IWorkspaceView | undefined> => {
+    const currentViewData = this.getViewDetailsById(viewId) ? cloneDeep(this.getViewDetailsById(viewId)) : undefined;
+    try {
+      Object.keys(data).forEach((key) => {
+        const currentKey = key as keyof IWorkspaceView;
+        set(this.globalViewMap, [viewId, currentKey], data[currentKey]);
       });
-      return response;
-    });
+      const currentView = await this.workspaceService.updateView(workspaceSlug, viewId, data);
+      // applying the filters in the global view
+      if (!isEqual(currentViewData?.filters || {}, currentView?.filters || {})) {
+        if (isEmpty(currentView?.filters)) {
+          const currentGlobalViewFilters: IIssueFilterOptions = this.rootStore.issue.workspaceIssuesFilter.filters[
+            viewId
+          ].filters as IIssueFilterOptions;
+          const newFilters: IIssueFilterOptions = {};
+          Object.keys(currentGlobalViewFilters ?? {}).forEach((key) => {
+            newFilters[key as keyof IIssueFilterOptions] = [];
+          });
+          await this.rootStore.issue.workspaceIssuesFilter.updateFilters(
+            workspaceSlug,
+            undefined,
+            EIssueFilterType.FILTERS,
+            newFilters,
+            viewId
+          );
+        } else {
+          await this.rootStore.issue.workspaceIssuesFilter.updateFilters(
+            workspaceSlug,
+            undefined,
+            EIssueFilterType.FILTERS,
+            currentView.filters,
+            viewId
+          );
+        }
+        this.rootStore.issue.workspaceIssues.fetchIssues(workspaceSlug, viewId, "mutation");
+      }
+      return currentView;
+    } catch {
+      Object.keys(data).forEach((key) => {
+        const currentKey = key as keyof IWorkspaceView;
+        if (currentViewData) set(this.globalViewMap, [viewId, currentKey], currentViewData[currentKey]);
+      });
+    }
+  };
 
   /**
    * @description delete global view
diff --git a/web/store/issue/helpers/issue-helper.store.ts b/web/store/issue/helpers/issue-helper.store.ts
index 3876d675c..e308679ca 100644
--- a/web/store/issue/helpers/issue-helper.store.ts
+++ b/web/store/issue/helpers/issue-helper.store.ts
@@ -7,7 +7,7 @@ import values from "lodash/values";
 import { ISSUE_PRIORITIES } from "@/constants/issue";
 import { STATE_GROUPS } from "@/constants/state";
 // helpers
-import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { convertToISODateString, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
 import { TIssue, TIssueMap, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
 // store
@@ -262,13 +262,13 @@ export class IssueHelperStore implements TIssueHelperStore {
         return orderBy(array, (issue) => this.populateIssueDataForSorting("state_id", issue["state_id"]), ["desc"]);
       // dates
       case "created_at":
-        return orderBy(array, "created_at");
+        return orderBy(array, (issue) => convertToISODateString(issue["created_at"]));
       case "-created_at":
-        return orderBy(array, "created_at", ["desc"]);
+        return orderBy(array, (issue) => convertToISODateString(issue["created_at"]), ["desc"]);
       case "updated_at":
-        return orderBy(array, "updated_at");
+        return orderBy(array, (issue) => convertToISODateString(issue["updated_at"]));
       case "-updated_at":
-        return orderBy(array, "updated_at", ["desc"]);
+        return orderBy(array, (issue) => convertToISODateString(issue["updated_at"]), ["desc"]);
       case "start_date":
         return orderBy(array, [this.getSortOrderToFilterEmptyValues.bind(null, "start_date"), "start_date"]); //preferring sorting based on empty values to always keep the empty values below
       case "-start_date":
diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts
index f6ad0a307..c2d890806 100644
--- a/web/store/issue/issue-details/root.store.ts
+++ b/web/store/issue/issue-details/root.store.ts
@@ -31,6 +31,11 @@ export type TPeekIssue = {
   issueId: string;
 };
 
+export type TIssueRelationModal = {
+  issueId: string | null;
+  relationType: TIssueRelationTypes | null;
+};
+
 export interface IIssueDetail
   extends IIssueStoreActions,
     IIssueReactionStoreActions,
@@ -46,12 +51,12 @@ export interface IIssueDetail
   peekIssue: TPeekIssue | undefined;
   isCreateIssueModalOpen: boolean;
   isIssueLinkModalOpen: boolean;
-  isParentIssueModalOpen: boolean;
+  isParentIssueModalOpen: string | null;
   isDeleteIssueModalOpen: string | null;
-  isArchiveIssueModalOpen: boolean;
-  isRelationModalOpen: TIssueRelationTypes | null;
-  isSubIssuesModalOpen: boolean;
-  isDeleteAttachmentModalOpen: boolean;
+  isArchiveIssueModalOpen: string | null;
+  isRelationModalOpen: TIssueRelationModal | null;
+  isSubIssuesModalOpen: string | null;
+  isDeleteAttachmentModalOpen: string | null;
   // computed
   isAnyModalOpen: boolean;
   // helper actions
@@ -60,12 +65,12 @@ export interface IIssueDetail
   setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
   toggleCreateIssueModal: (value: boolean) => void;
   toggleIssueLinkModal: (value: boolean) => void;
-  toggleParentIssueModal: (value: boolean) => void;
+  toggleParentIssueModal: (issueId: string | null) => void;
   toggleDeleteIssueModal: (issueId: string | null) => void;
-  toggleArchiveIssueModal: (value: boolean) => void;
-  toggleRelationModal: (relationType: TIssueRelationTypes | null) => void;
-  toggleSubIssuesModal: (value: boolean) => void;
-  toggleDeleteAttachmentModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (value: string | null) => void;
+  toggleRelationModal: (issueId: string | null, relationType: TIssueRelationTypes | null) => void;
+  toggleSubIssuesModal: (value: string | null) => void;
+  toggleDeleteAttachmentModal: (attachmentId: string | null) => void;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -85,12 +90,12 @@ export class IssueDetail implements IIssueDetail {
   peekIssue: TPeekIssue | undefined = undefined;
   isCreateIssueModalOpen: boolean = false;
   isIssueLinkModalOpen: boolean = false;
-  isParentIssueModalOpen: boolean = false;
+  isParentIssueModalOpen: string | null = null;
   isDeleteIssueModalOpen: string | null = null;
-  isArchiveIssueModalOpen: boolean = false;
-  isRelationModalOpen: TIssueRelationTypes | null = null;
-  isSubIssuesModalOpen: boolean = false;
-  isDeleteAttachmentModalOpen: boolean = false;
+  isArchiveIssueModalOpen: string | null = null;
+  isRelationModalOpen: TIssueRelationModal | null = null;
+  isSubIssuesModalOpen: string | null = null;
+  isDeleteAttachmentModalOpen: string | null = null;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -149,12 +154,12 @@ export class IssueDetail implements IIssueDetail {
     return (
       this.isCreateIssueModalOpen ||
       this.isIssueLinkModalOpen ||
-      this.isParentIssueModalOpen ||
+      !!this.isParentIssueModalOpen ||
       !!this.isDeleteIssueModalOpen ||
-      this.isArchiveIssueModalOpen ||
-      !!this.isRelationModalOpen ||
-      this.isSubIssuesModalOpen ||
-      this.isDeleteAttachmentModalOpen
+      !!this.isArchiveIssueModalOpen ||
+      !!this.isRelationModalOpen?.issueId ||
+      !!this.isSubIssuesModalOpen ||
+      !!this.isDeleteAttachmentModalOpen
     );
   }
 
@@ -165,12 +170,13 @@ export class IssueDetail implements IIssueDetail {
   setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue);
   toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);
   toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
-  toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
+  toggleParentIssueModal = (issueId: string | null) => (this.isParentIssueModalOpen = issueId);
   toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId);
-  toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
-  toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType);
-  toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value);
-  toggleDeleteAttachmentModal = (value: boolean) => (this.isDeleteAttachmentModalOpen = value);
+  toggleArchiveIssueModal = (issueId: string | null) => (this.isArchiveIssueModalOpen = issueId);
+  toggleRelationModal = (issueId: string | null, relationType: TIssueRelationTypes | null) =>
+    (this.isRelationModalOpen = { issueId, relationType });
+  toggleSubIssuesModal = (issueId: string | null) => (this.isSubIssuesModalOpen = issueId);
+  toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId);
 
   // issue
   fetchIssue = async (
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
index b6611ef49..b2b33464c 100644
--- a/web/store/issue/issue.store.ts
+++ b/web/store/issue/issue.store.ts
@@ -6,6 +6,7 @@ import { computedFn } from "mobx-utils";
 // types
 import { IssueService } from "@/services/issue";
 import { TIssue } from "@plane/types";
+import { getCurrentDateTimeInISO } from "@/helpers/date-time.helper";
 //services
 
 export type IIssueStore = {
@@ -76,6 +77,7 @@ export class IssueStore implements IIssueStore {
   updateIssue = (issueId: string, issue: Partial<TIssue>) => {
     if (!issue || !issueId || isEmpty(this.issuesMap) || !this.issuesMap[issueId]) return;
     runInAction(() => {
+      set(this.issuesMap, [issueId, "updated_at"], getCurrentDateTimeInISO());
       Object.keys(issue).forEach((key) => {
         set(this.issuesMap, [issueId, key], issue[key as keyof TIssue]);
       });
diff --git a/web/store/pages/page.store.ts b/web/store/pages/page.store.ts
index 24c0a0a39..f6cdfe28b 100644
--- a/web/store/pages/page.store.ts
+++ b/web/store/pages/page.store.ts
@@ -1,7 +1,7 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 // types
-import { TPage, TPageViewProps } from "@plane/types";
+import { TPage } from "@plane/types";
 // constants
 import { EPageAccess } from "@/constants/page";
 import { EUserProjectRoles } from "@/constants/project";
@@ -33,7 +33,6 @@ export interface IPageStore extends TPage {
   cleanup: () => void;
   // actions
   update: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
-  updateViewProps: (viewProps: Partial<TPageViewProps>) => void;
   makePublic: () => Promise<void>;
   makePrivate: () => Promise<void>;
   lock: () => Promise<void>;
@@ -65,7 +64,6 @@ export class PageStore implements IPageStore {
   updated_by: string | undefined;
   created_at: Date | undefined;
   updated_at: Date | undefined;
-  view_props: TPageViewProps | undefined;
   // helpers
   oldName: string = "";
   // reactions
@@ -93,7 +91,6 @@ export class PageStore implements IPageStore {
     this.updated_by = page?.updated_by || undefined;
     this.created_at = page?.created_at || undefined;
     this.updated_at = page?.updated_at || undefined;
-    this.view_props = page?.view_props || undefined;
     this.oldName = page?.name || "";
 
     makeObservable(this, {
@@ -117,7 +114,6 @@ export class PageStore implements IPageStore {
       updated_by: observable.ref,
       created_at: observable.ref,
       updated_at: observable.ref,
-      view_props: observable,
       // helpers
       oldName: observable,
       // computed
@@ -137,7 +133,6 @@ export class PageStore implements IPageStore {
       cleanup: action,
       // actions
       update: action,
-      updateViewProps: action,
       makePublic: action,
       makePrivate: action,
       lock: action,
@@ -216,7 +211,6 @@ export class PageStore implements IPageStore {
       updated_by: this.updated_by,
       created_at: this.created_at,
       updated_at: this.updated_at,
-      view_props: this.view_props,
     };
   }
 
@@ -338,38 +332,6 @@ export class PageStore implements IPageStore {
     }
   };
 
-  /**
-   * @description update the page view props
-   * @param {Partial<TPageViewProps>} updatedProps
-   */
-  updateViewProps = async (updatedProps: Partial<TPageViewProps>) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
-    const currentViewProps = { ...this.view_props };
-
-    runInAction(() => {
-      Object.keys(updatedProps).forEach((key) => {
-        const currentPageKey = key as keyof TPageViewProps;
-        if (this.view_props) set(this.view_props, key, updatedProps[currentPageKey]);
-      });
-    });
-
-    try {
-      await this.pageService.update(workspaceSlug, projectId, this.id, {
-        view_props: {
-          ...this.view_props,
-          ...updatedProps,
-        },
-      });
-    } catch (error) {
-      runInAction(() => {
-        this.view_props = currentViewProps;
-      });
-      throw error;
-    }
-  };
-
   /**
    * @description make the page public
    */
diff --git a/web/store/pages/project-page.store.ts b/web/store/pages/project-page.store.ts
index 8c01316f2..33acde27c 100644
--- a/web/store/pages/project-page.store.ts
+++ b/web/store/pages/project-page.store.ts
@@ -42,8 +42,8 @@ export class ProjectPageStore implements IProjectPageStore {
   error: TError | undefined = undefined;
   filters: TPageFilters = {
     searchQuery: "",
-    sortKey: "name",
-    sortBy: "asc",
+    sortKey: "updated_at",
+    sortBy: "desc",
   };
   // service
   service: PageService;
diff --git a/web/styles/globals.css b/web/styles/globals.css
index cc9c0b273..c3f7a0baf 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -422,8 +422,10 @@ body {
 }
 
 .vertical-lr {
+  writing-mode: vertical-lr;
   -webkit-writing-mode: vertical-lr;
   -ms-writing-mode: vertical-lr;
+  width: fit-content;
 }
 
 div.web-view-spinner {
@@ -630,3 +632,8 @@ div.web-view-spinner div.bar12 {
 .scrollbar-lg::-webkit-scrollbar-thumb {
   border: 4px solid rgba(0, 0, 0, 0);
 }
+
+/* highlight class */
+.highlight {
+  border: 1px solid rgb(var(--color-primary-100)) !important;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 32f8dfae0..422f5fc92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3757,6 +3757,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+compute-scroll-into-view@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz#753f11d972596558d8fe7c6bcbc8497690ab4c87"
+  integrity sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -7723,6 +7728,13 @@ schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scroll-into-view-if-needed@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz#fa9524518c799b45a2ef6bbffb92bcad0296d01f"
+  integrity sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==
+  dependencies:
+    compute-scroll-into-view "^3.0.2"
+
 selecto@~1.26.3:
   version "1.26.3"
   resolved "https://registry.yarnpkg.com/selecto/-/selecto-1.26.3.tgz#12f259112b943d395731524e3bb0115da7372212"
@@ -7868,6 +7880,13 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+smooth-scroll-into-view-if-needed@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-2.0.2.tgz#5bd4ebef668474d6618ce8704650082e93068371"
+  integrity sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==
+  dependencies:
+    scroll-into-view-if-needed "^3.1.0"
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"