diff --git a/apiserver/plane/authentication/adapter/error.py b/apiserver/plane/authentication/adapter/error.py
index bf45f1d6a7..85fb69cfcf 100644
--- a/apiserver/plane/authentication/adapter/error.py
+++ b/apiserver/plane/authentication/adapter/error.py
@@ -61,6 +61,8 @@ AUTHENTICATION_ERROR_CODES = {
     "ADMIN_USER_ALREADY_EXIST": 5180,
     "ADMIN_USER_DOES_NOT_EXIST": 5185,
     "ADMIN_USER_DEACTIVATED": 5190,
+    # Rate limit
+    "RATE_LIMIT_EXCEEDED": 5900,
 }
 
 
diff --git a/apiserver/plane/authentication/adapter/exception.py b/apiserver/plane/authentication/adapter/exception.py
index 12845ea025..a6f7637a98 100644
--- a/apiserver/plane/authentication/adapter/exception.py
+++ b/apiserver/plane/authentication/adapter/exception.py
@@ -1,5 +1,10 @@
+# Third party imports
 from rest_framework.views import exception_handler
 from rest_framework.exceptions import NotAuthenticated
+from rest_framework.exceptions import Throttled
+
+# Module imports
+from plane.authentication.adapter.error import AuthenticationException, AUTHENTICATION_ERROR_CODES
 
 
 def auth_exception_handler(exc, context):
@@ -9,4 +14,14 @@ def auth_exception_handler(exc, context):
     if isinstance(exc, NotAuthenticated):
         response.status_code = 401
 
+    # Check if an Throttled exception is raised.
+    if isinstance(exc, Throttled):
+        exc = AuthenticationException(
+            error_code=AUTHENTICATION_ERROR_CODES["RATE_LIMIT_EXCEEDED"],
+            error_message="RATE_LIMIT_EXCEEDED",
+        )
+        response.data = exc.get_error_dict()
+        response.status_code = 429
+    
+    # Return the response that is generated by the default exception handler.
     return response
diff --git a/apiserver/plane/authentication/rate_limit.py b/apiserver/plane/authentication/rate_limit.py
new file mode 100644
index 0000000000..744bd38fec
--- /dev/null
+++ b/apiserver/plane/authentication/rate_limit.py
@@ -0,0 +1,26 @@
+# Third party imports
+from rest_framework.throttling import AnonRateThrottle
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.authentication.adapter.error import (
+    AuthenticationException,
+    AUTHENTICATION_ERROR_CODES,
+)
+
+
+class AuthenticationThrottle(AnonRateThrottle):
+    rate = "30/minute"
+    scope = "authentication"
+
+    def throttle_failure_view(self, request, *args, **kwargs):
+        try:
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES["RATE_LIMIT_EXCEEDED"],
+                error_message="RATE_LIMIT_EXCEEDED",
+            )
+        except AuthenticationException as e:
+            return Response(
+                e.get_error_dict(), status=status.HTTP_429_TOO_MANY_REQUESTS
+            )
diff --git a/apiserver/plane/authentication/views/app/check.py b/apiserver/plane/authentication/views/app/check.py
index 4f164e3088..2448aee559 100644
--- a/apiserver/plane/authentication/views/app/check.py
+++ b/apiserver/plane/authentication/views/app/check.py
@@ -15,7 +15,7 @@ from plane.authentication.adapter.error import (
     AuthenticationException,
     AUTHENTICATION_ERROR_CODES,
 )
-
+from plane.authentication.rate_limit import AuthenticationThrottle
 
 class EmailCheckSignUpEndpoint(APIView):
 
@@ -23,6 +23,10 @@ class EmailCheckSignUpEndpoint(APIView):
         AllowAny,
     ]
 
+    throttle_classes = [
+        AuthenticationThrottle,
+    ]
+
     def post(self, request):
         try:
             # Check instance configuration
@@ -86,6 +90,10 @@ class EmailCheckSignInEndpoint(APIView):
         AllowAny,
     ]
 
+    throttle_classes = [
+        AuthenticationThrottle,
+    ]
+
     def post(self, request):
         try:
             # Check instance configuration
diff --git a/apiserver/plane/authentication/views/app/password_management.py b/apiserver/plane/authentication/views/app/password_management.py
index dd14ceb914..43054867ef 100644
--- a/apiserver/plane/authentication/views/app/password_management.py
+++ b/apiserver/plane/authentication/views/app/password_management.py
@@ -32,7 +32,7 @@ from plane.authentication.adapter.error import (
     AuthenticationException,
     AUTHENTICATION_ERROR_CODES,
 )
-
+from plane.authentication.rate_limit import AuthenticationThrottle
 
 def generate_password_token(user):
     uidb64 = urlsafe_base64_encode(smart_bytes(user.id))
@@ -46,6 +46,10 @@ class ForgotPasswordEndpoint(APIView):
         AllowAny,
     ]
 
+    throttle_classes = [
+        AuthenticationThrottle,
+    ]
+
     def post(self, request):
         email = request.data.get("email")
 
diff --git a/apiserver/plane/authentication/views/common.py b/apiserver/plane/authentication/views/common.py
index 640f744ceb..3e95d6ed88 100644
--- a/apiserver/plane/authentication/views/common.py
+++ b/apiserver/plane/authentication/views/common.py
@@ -1,3 +1,6 @@
+# Django imports
+from django.shortcuts import render
+
 # Third party imports
 from rest_framework import status
 from rest_framework.permissions import AllowAny
@@ -17,7 +20,7 @@ from plane.authentication.adapter.error import (
 )
 from django.middleware.csrf import get_token
 from plane.utils.cache import invalidate_cache
-
+from plane.authentication.utils.host import base_host
 
 class CSRFTokenEndpoint(APIView):
 
@@ -34,6 +37,11 @@ class CSRFTokenEndpoint(APIView):
         )
 
 
+def csrf_failure(request, reason=""):
+    """Custom CSRF failure view"""
+    return render(request, "csrf_failure.html", {"reason": reason, "root_url": base_host(request=request)})
+
+
 class ChangePasswordEndpoint(APIView):
     def post(self, request):
         user = User.objects.get(pk=request.user.id)
diff --git a/apiserver/plane/authentication/views/space/check.py b/apiserver/plane/authentication/views/space/check.py
index 83f52e28f5..1b20d19a26 100644
--- a/apiserver/plane/authentication/views/space/check.py
+++ b/apiserver/plane/authentication/views/space/check.py
@@ -15,7 +15,7 @@ from plane.authentication.adapter.error import (
     AUTHENTICATION_ERROR_CODES,
     AuthenticationException,
 )
-
+from plane.authentication.rate_limit import AuthenticationThrottle
 
 class EmailCheckEndpoint(APIView):
 
@@ -23,6 +23,10 @@ class EmailCheckEndpoint(APIView):
         AllowAny,
     ]
 
+    throttle_classes = [
+        AuthenticationThrottle,
+    ]
+
     def post(self, request):
         # Check instance configuration
         instance = Instance.objects.first()
diff --git a/apiserver/plane/authentication/views/space/password_management.py b/apiserver/plane/authentication/views/space/password_management.py
index fa20fa618b..3e0379b964 100644
--- a/apiserver/plane/authentication/views/space/password_management.py
+++ b/apiserver/plane/authentication/views/space/password_management.py
@@ -32,6 +32,7 @@ from plane.authentication.adapter.error import (
     AuthenticationException,
     AUTHENTICATION_ERROR_CODES,
 )
+from plane.authentication.rate_limit import AuthenticationThrottle
 
 
 def generate_password_token(user):
@@ -46,6 +47,10 @@ class ForgotPasswordSpaceEndpoint(APIView):
         AllowAny,
     ]
 
+    throttle_classes = [
+        AuthenticationThrottle,
+    ]
+
     def post(self, request):
         email = request.data.get("email")
 
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index d2a6b023a4..be040830de 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -348,6 +348,7 @@ CSRF_COOKIE_SECURE = secure_origins
 CSRF_COOKIE_HTTPONLY = True
 CSRF_TRUSTED_ORIGINS = cors_allowed_origins
 CSRF_COOKIE_DOMAIN = os.environ.get("COOKIE_DOMAIN", None)
+CSRF_FAILURE_VIEW = "plane.authentication.views.common.csrf_failure"
 
 # Base URLs
 ADMIN_BASE_URL = os.environ.get("ADMIN_BASE_URL", None)
diff --git a/apiserver/templates/csrf_failure.html b/apiserver/templates/csrf_failure.html
new file mode 100644
index 0000000000..b5a58cb021
--- /dev/null
+++ b/apiserver/templates/csrf_failure.html
@@ -0,0 +1,66 @@
+<!-- templates/csrf_failure.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSRF Verification Failed</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        padding: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+      }
+      .card {
+        max-width: 400px;
+        padding: 30px;
+        background-color: #ffffff;
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+      .card-header {
+        text-align: center;
+        margin-bottom: 20px;
+      }
+      .btn-primary {
+        display: block;
+        width: 100%;
+        padding: 10px;
+        background-color: #007bff;
+        color: #fff;
+        text-align: center;
+        text-decoration: none;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .btn-primary:hover {
+        background-color: #0056b3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="card-header">
+        <h3>CSRF Verification Failed</h3>
+      </div>
+      <div class="card-body">
+        <p>
+          It looks like your form submission has expired or there was a problem
+          with your request.
+        </p>
+        <p>Please try the following:</p>
+        <ul>
+          <li>Refresh the page and try submitting the form again.</li>
+          <li>Ensure that cookies are enabled in your browser.</li>
+        </ul>
+        <a href="{{ root_url }}" class="btn-primary">Go to Home Page</a>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/web/components/labels/label-block/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
similarity index 57%
rename from web/components/labels/label-block/drag-handle.tsx
rename to packages/ui/src/drag-handle.tsx
index 64aaa075f6..d04f7929f2 100644
--- a/web/components/labels/label-block/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -1,19 +1,29 @@
+import React from "react";
 import { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
 
 interface IDragHandle {
   isDragging: boolean;
+  disabled?: boolean;
 }
 
 export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
-  const { isDragging } = props;
+  const { isDragging, disabled = false } = props;
+
+  if (disabled) {
+    return <div className="w-[14px] h-[18px]" />;
+  }
 
   return (
     <button
       type="button"
-      className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
+      className={`mr-1 p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
         isDragging ? "opacity-100" : "opacity-0"
       }`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
       ref={ref}
     >
       <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 78013962cc..dae0123816 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -12,4 +12,5 @@ export * from "./tooltip";
 export * from "./loader";
 export * from "./control-link";
 export * from "./toast";
+export * from "./drag-handle";
 export * from "./drop-indicator";
\ No newline at end of file
diff --git a/space/components/issues/filters/applied-filters/filters-list.tsx b/space/components/issues/filters/applied-filters/filters-list.tsx
index cec23d3017..83d651f5d2 100644
--- a/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -23,7 +23,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter, states } = props;
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof TFilters;
         const filterValue = value as TFilters[keyof TFilters];
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 3b8e2960fe..4200458a86 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -62,7 +62,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
         <div className="flex items-center gap-4">
           {peekMode === "side" && (
             <button type="button" onClick={handleClose}>
-              <MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
+              <MoveRight className="h-4 w-4" strokeWidth={2} />
             </button>
           )}
           <Listbox
@@ -72,7 +72,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
             className="relative flex-shrink-0 text-left"
           >
             <Listbox.Button className={`grid place-items-center ${peekMode === "full" ? "rotate-45" : ""}`}>
-              <Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} />
+              <Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} className="text-[1rem]" />
             </Listbox.Button>
 
             <Transition
@@ -120,7 +120,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
         {(peekMode === "side" || peekMode === "modal") && (
           <div className="flex flex-shrink-0 items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
-              <Icon iconName="link" />
+              <Icon iconName="link" className="text-[1rem]" />
             </button>
           </div>
         )}
diff --git a/space/components/issues/peek-overview/issue-reaction.tsx b/space/components/issues/peek-overview/issue-reaction.tsx
index 28090d36aa..9911253122 100644
--- a/space/components/issues/peek-overview/issue-reaction.tsx
+++ b/space/components/issues/peek-overview/issue-reaction.tsx
@@ -19,7 +19,6 @@ export const IssueReactions: React.FC = () => {
           <div className="flex items-center gap-2">
             <IssueVotes workspaceSlug={workspaceSlug} projectId={projectId} />
           </div>
-          <div className="h-8 w-0.5 bg-custom-background-200" />
         </>
       )}
       {canReact && (
diff --git a/space/components/issues/peek-overview/issue-vote-reactions.tsx b/space/components/issues/peek-overview/issue-vote-reactions.tsx
index 073938daad..388d590723 100644
--- a/space/components/issues/peek-overview/issue-vote-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -97,7 +97,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
             if (user) handleVote(e, 1);
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
-          className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
+          className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 h-7 focus:outline-none ${
             isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
           }`}
         >
@@ -131,7 +131,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
             if (user) handleVote(e, -1);
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
-          className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
+          className={`flex items-center justify-center gap-x-1 h-7 overflow-hidden rounded border px-2 focus:outline-none ${
             isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
           }`}
         >
diff --git a/web/components/account/oauth/github-button.tsx b/web/components/account/oauth/github-button.tsx
index be9b59f249..6d274c125f 100644
--- a/web/components/account/oauth/github-button.tsx
+++ b/web/components/account/oauth/github-button.tsx
@@ -25,8 +25,8 @@ export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
 
   return (
     <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
+      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
+        resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
       }`}
       onClick={handleSignIn}
     >
diff --git a/web/components/account/oauth/google-button.tsx b/web/components/account/oauth/google-button.tsx
index d196ff97a3..279c5ea427 100644
--- a/web/components/account/oauth/google-button.tsx
+++ b/web/components/account/oauth/google-button.tsx
@@ -24,8 +24,8 @@ export const GoogleOAuthButton: FC<GoogleOAuthButtonProps> = (props) => {
 
   return (
     <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
+      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
+        resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
       }`}
       onClick={handleSignIn}
     >
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 3b6d40534e..e0d7e3c509 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -70,6 +70,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
+    issues: { issuesCount },
   } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCycleIds, getCycleById } = useCycle();
   const { toggleCreateIssueModal } = useCommandPalette();
@@ -145,12 +146,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
-  const issueCount = cycleDetails
-    ? !issueFilters?.displayFilters?.sub_issue && cycleDetails?.sub_issues
-      ? cycleDetails.total_issues - cycleDetails?.sub_issues
-      : cycleDetails.total_issues
-    : undefined;
-
   const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
 
   return (
@@ -209,16 +204,16 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                         <ContrastIcon className="h-3 w-3" />
                         <div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
                           <p className="truncate">{cycleDetails?.name && cycleDetails.name}</p>
-                          {issueCount && issueCount > 0 ? (
+                          {issuesCount && issuesCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issueCount} ${
-                                issueCount > 1 ? "issues" : "issue"
+                              tooltipContent={`There are ${issuesCount} ${
+                                issuesCount > 1 ? "issues" : "issue"
                               } in this cycle`}
                               position="bottom"
                             >
                               <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
-                                {issueCount}
+                                {issuesCount}
                               </span>
                             </Tooltip>
                           ) : null}
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 9a911103d9..538eca2cde 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -71,6 +71,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   // store hooks
   const {
     issuesFilter: { issueFilters },
+    issues: { issuesCount },
   } = useIssues(EIssuesStoreType.MODULE);
   const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
   const { projectModuleIds, getModuleById } = useModule();
@@ -145,12 +146,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
-  const issueCount = moduleDetails
-    ? !issueFilters?.displayFilters?.sub_issue && moduleDetails.sub_issues
-      ? moduleDetails.total_issues - moduleDetails.sub_issues
-      : moduleDetails.total_issues
-    : undefined;
-
   const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
 
   return (
@@ -209,16 +204,16 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                         <DiceIcon className="h-3 w-3" />
                         <div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
                           <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
-                          {issueCount && issueCount > 0 ? (
+                          {issuesCount && issuesCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issueCount} ${
-                                issueCount > 1 ? "issues" : "issue"
+                              tooltipContent={`There are ${issuesCount} ${
+                                issuesCount > 1 ? "issues" : "issue"
                               } in this module`}
                               position="bottom"
                             >
                               <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
-                                {issueCount}
+                                {issuesCount}
                               </span>
                             </Tooltip>
                           ) : null}
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 95983d85a3..8ba44719e9 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -43,6 +43,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   } = useMember();
   const {
     issuesFilter: { issueFilters, updateFilters },
+    issues: { issuesCount },
   } = useIssues(EIssuesStoreType.PROJECT);
   const { toggleCreateIssueModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
@@ -105,12 +106,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
-  const issueCount = currentProjectDetails
-    ? !issueFilters?.displayFilters?.sub_issue && currentProjectDetails?.sub_issues
-      ? currentProjectDetails?.total_issues - currentProjectDetails?.sub_issues
-      : currentProjectDetails?.total_issues
-    : undefined;
-
   const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
 
   return (
@@ -153,14 +148,14 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
               />
             </Breadcrumbs>
-            {issueCount && issueCount > 0 ? (
+            {issuesCount && issuesCount > 0 ? (
               <Tooltip
                 isMobile={isMobile}
-                tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in this project`}
+                tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"} in this project`}
                 position="bottom"
               >
                 <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
-                  {issueCount}
+                  {issuesCount}
                 </span>
               </Tooltip>
             ) : null}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
index e20cdcb60c..f2a0fa3e5d 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -38,7 +38,7 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
       <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
-      <div className="w-full text-custom-text-200">
+      <div className="w-full truncate text-custom-text-200">
         <IssueUser activityId={activityId} customUserName={customUserName} />
         <span> {children} </span>
         <span>
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
index 4b0e2dc0e4..9b450e0610 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
@@ -48,8 +48,8 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
           <MessageCircle className="w-3 h-3" color="#6b7280" />
         </div>
       </div>
-      <div className="w-full relative flex ">
-        <div className="w-full space-y-1">
+      <div className="w-full truncate relative flex ">
+        <div className="w-full truncate space-y-1">
           <div>
             <div className="text-xs capitalize">
               {comment.actor_detail.is_bot
diff --git a/web/components/issues/issue-layouts/group-drag-overlay.tsx b/web/components/issues/issue-layouts/group-drag-overlay.tsx
new file mode 100644
index 0000000000..df4811efaa
--- /dev/null
+++ b/web/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -0,0 +1,61 @@
+import { AlertCircle } from "lucide-react";
+import { TIssueOrderByOptions } from "@plane/types";
+import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  dragColumnOrientation: "justify-start" | "justify-center" | "justify-end";
+  canDropOverIssue: boolean;
+  isDropDisabled: boolean;
+  dropErrorMessage?: string;
+  orderBy: TIssueOrderByOptions | undefined;
+  isDraggingOverColumn: boolean;
+};
+
+export const GroupDragOverlay = (props: Props) => {
+  const { dragColumnOrientation, canDropOverIssue, isDropDisabled, dropErrorMessage, orderBy, isDraggingOverColumn } =
+    props;
+
+  const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
+  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
+
+  return (
+    <div
+      className={cn(
+        `absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay ${dragColumnOrientation}`,
+        {
+          "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
+        },
+        { hidden: !shouldOverlay }
+      )}
+    >
+      <div
+        className={cn(
+          "p-3 mt-8 flex flex-col rounded items-center",
+          {
+            "text-custom-text-200": shouldOverlay,
+          },
+          {
+            "text-custom-text-error": isDropDisabled,
+          }
+        )}
+      >
+        {dropErrorMessage ? (
+          <div className="flex items-center">
+            <AlertCircle width={13} height={13} /> &nbsp;
+            <span>{dropErrorMessage}</span>
+          </div>
+        ) : (
+          <>
+            {readableOrderBy && (
+              <span>
+                The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
+              </span>
+            )}
+            <span>Drop here to move the issue.</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
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 1954f8a67e..b8060d7cf8 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -4,26 +4,24 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import { TIssue } from "@plane/types";
-import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { Spinner } from "@plane/ui";
 import { DeleteIssueModal } from "@/components/issues";
 import { ISSUE_DELETED } from "@/constants/event-tracker";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUser } from "@/hooks/store";
+import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 // store
-import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
 // ui
 // types
 import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
 //components
-import { GroupDropLocation, handleGroupDragDrop, getSourceFromDropPayload } from "../utils";
+import { getSourceFromDropPayload } from "../utils";
 import { KanBan } from "./default";
 import { KanBanSwimLanes } from "./swimlanes";
 
-
 export type KanbanStoreType =
   | EIssuesStoreType.PROJECT
   | EIssuesStoreType.MODULE
@@ -65,12 +63,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   } = useIssueDetail();
   const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue, updateFilters } =
     useIssuesActions(storeType);
-  const {
-    issues: { addCycleToIssue, removeCycleFromIssue },
-  } = useIssues(EIssuesStoreType.CYCLE);
-  const {
-    issues: { changeModulesInIssue },
-  } = useIssues(EIssuesStoreType.MODULE);
 
   const deleteAreaRef = useRef<HTMLDivElement | null>(null);
   const [isDragOverDelete, setIsDragOverDelete] = useState(false);
@@ -101,6 +93,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
+  const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by, sub_group_by);
+
   const canEditProperties = useCallback(
     (projectId: string | undefined) => {
       const isEditingAllowedBasedOnProject =
@@ -153,86 +147,6 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     );
   }, [deleteAreaRef?.current, setIsDragOverDelete, setDraggedIssueId, setDeleteIssueModal]);
 
-  /**
-   * update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
-   * @param projectId
-   * @param issueId
-   * @param data
-   * @param issueUpdates
-   */
-  const updateIssueOnDrop = async (
-    projectId: string,
-    issueId: string,
-    data: Partial<TIssue>,
-    issueUpdates: {
-      [groupKey: string]: {
-        ADD: string[];
-        REMOVE: string[];
-      };
-    }
-  ) => {
-
-    const errorToastProps = {
-      type: TOAST_TYPE.ERROR,
-      title: "Error!",
-      message: "Error while updating issue"
-    }
-    const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
-    const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
-
-    const isModuleChanged = Object.keys(data).includes(moduleKey);
-    const isCycleChanged = Object.keys(data).includes(cycleKey);
-
-    if (isCycleChanged && workspaceSlug) {
-      if(data[cycleKey]) {
-        addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() => setToast(errorToastProps));
-      } else {
-        removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps))
-      }
-      delete data[cycleKey];
-    }
-
-    if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
-      changeModulesInIssue(
-        workspaceSlug.toString(),
-        projectId,
-        issueId,
-        issueUpdates[moduleKey].ADD,
-        issueUpdates[moduleKey].REMOVE
-      ).catch(() => setToast(errorToastProps));
-      delete data[moduleKey];
-    }
-
-    updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
-  };
-
-  const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
-    if (
-      source.columnId &&
-      destination.columnId &&
-      destination.columnId === source.columnId &&
-      destination.id === source.id
-    )
-      return;
-
-    await handleGroupDragDrop(
-      source,
-      destination,
-      getIssueById,
-      issues.getIssueIds,
-      updateIssueOnDrop,
-      group_by,
-      sub_group_by,
-      orderBy !== "sort_order"
-    ).catch((err) => {
-      setToast({
-        title: "Error!",
-        type: TOAST_TYPE.ERROR,
-        message: err?.detail ?? "Failed to perform this action",
-      });
-    });
-  };
-
   const renderQuickActions: TRenderQuickActions = useCallback(
     ({ issue, parentRef, customActionButton }) => (
       <QuickActions
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 2f8d7465f7..d93440c456 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -169,7 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
       }),
       dropTargetForElements({
         element,
-        canDrop: () => canDropOverIssue,
+        canDrop: ({ source }) => source?.data?.id !== issue?.id && canDropOverIssue,
         getData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragEnter: () => {
           setIsDraggingOverBlock(true);
@@ -182,7 +182,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
         },
       })
     );
-  }, [cardRef?.current, issue?.id, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
+  }, [cardRef?.current, issue?.id, isDragAllowed, canDropOverIssue, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
 
   if (!issue) return null;
 
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index e1845060e4..1b3fb8238d 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -2,7 +2,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
-import { AlertCircle } from "lucide-react";
+import { observer } from "mobx-react";
 //types
 import {
   TGroupedIssues,
@@ -14,13 +14,14 @@ import {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
 } from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
-import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectState } from "@/hooks/store";
 //components
+import { GroupDragOverlay } from "../group-drag-overlay";
 import { TRenderQuickActions } from "../list/list-view-types";
 import { GroupDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload, getIssueBlockId } from "../utils";
 import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
@@ -54,7 +55,7 @@ interface IKanbanGroup {
   orderBy: TIssueOrderByOptions | undefined;
 }
 
-export const KanbanGroup = (props: IKanbanGroup) => {
+export const KanbanGroup = observer((props: IKanbanGroup) => {
   const {
     groupId,
     sub_group_id,
@@ -108,7 +109,17 @@ export const KanbanGroup = (props: IKanbanGroup) => {
           const source = getSourceFromDropPayload(payload);
           const destination = getDestinationFromDropPayload(payload);
 
-          if (!source || !destination || isDropDisabled) return;
+          if (!source || !destination) return;
+
+          if (isDropDisabled) {
+            dropErrorMessage &&
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: "Warning!",
+                message: dropErrorMessage,
+              });
+            return;
+          }
 
           handleOnDrop(source, destination);
 
@@ -122,7 +133,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         element,
       })
     );
-  }, [columnRef?.current, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, handleOnDrop]);
+  }, [columnRef, groupId, sub_group_id, setIsDraggingOverColumn, orderBy, isDropDisabled, dropErrorMessage, handleOnDrop]);
 
   const prePopulateQuickAddData = (
     groupByKey: string | undefined,
@@ -178,7 +189,6 @@ export const KanbanGroup = (props: IKanbanGroup) => {
 
   const canDropOverIssue = orderBy === "sort_order";
   const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
-  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
 
   return (
     <div
@@ -190,45 +200,14 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       )}
       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 bg-custom-background-overlay",
-          {
-            "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlay,
-          },
-          { hidden: !shouldOverlay },
-          { "justify-center": !sub_group_by }
-        )}
-      >
-        <div
-          className={cn(
-            "p-3 mt-8 flex flex-col rounded items-center",
-            {
-              "text-custom-text-200": shouldOverlay,
-            },
-            {
-              "text-custom-text-error": isDropDisabled,
-            }
-          )}
-        >
-          {dropErrorMessage ? (
-            <div className="flex items-center">
-              <AlertCircle width={13} height={13} /> &nbsp;
-              <span>{dropErrorMessage}</span>
-            </div>
-          ) : (
-            <>
-              {readableOrderBy && (
-                <span>
-                  The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
-                </span>
-              )}
-              <span>Drop here to move the issue.</span>
-            </>
-          )}
-        </div>
-      </div>
+      <GroupDragOverlay
+        dragColumnOrientation={sub_group_by ? "justify-start": "justify-center" }
+        canDropOverIssue={canDropOverIssue}
+        isDropDisabled={isDropDisabled}
+        dropErrorMessage={dropErrorMessage}
+        orderBy={orderBy}
+        isDraggingOverColumn={isDraggingOverColumn}
+      />
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
         groupId={groupId}
@@ -259,4 +238,4 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       )}
     </div>
   );
-};
+});
diff --git a/web/components/issues/issue-layouts/list/base-list-root.tsx b/web/components/issues/issue-layouts/list/base-list-root.tsx
index 8a5fcf8491..b58bdce2c3 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { EIssuesStoreType } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 import { useIssues, useUser } from "@/hooks/store";
-
+import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 // components
 import { List } from "./default";
@@ -17,9 +17,9 @@ type ListStoreType =
   | EIssuesStoreType.MODULE
   | EIssuesStoreType.CYCLE
   | EIssuesStoreType.PROJECT_VIEW
-  | EIssuesStoreType.ARCHIVED
   | EIssuesStoreType.DRAFT
-  | EIssuesStoreType.PROFILE;
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.ARCHIVED;
 interface IBaseListRoot {
   QuickActions: FC<IQuickActionProps>;
   viewId?: string;
@@ -37,7 +37,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
     canEditPropertiesBasedOnProject,
     isCompletedCycle = false,
   } = props;
-
+  // router
+  //stores
   const { issuesFilter, issues } = useIssues(storeType);
   const { updateIssue, removeIssue, removeIssueFromView, archiveIssue, restoreIssue } = useIssuesActions(storeType);
   // mobx store
@@ -66,8 +67,11 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
   const displayProperties = issuesFilter?.issueFilters?.displayProperties;
 
   const group_by = displayFilters?.group_by || null;
+  const orderBy = displayFilters?.order_by || undefined;
   const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
 
+  const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by);
+
   const renderQuickActions: TRenderQuickActions = useCallback(
     ({ issue, parentRef }) => (
       <QuickActions
@@ -91,6 +95,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         issuesMap={issueMap}
         displayProperties={displayProperties}
         group_by={group_by}
+        orderBy={orderBy}
         updateIssue={updateIssue}
         quickActions={renderQuickActions}
         issueIds={issueIds}
@@ -103,6 +108,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         storeType={storeType}
         addIssuesToView={addIssuesToView}
         isCompletedCycle={isCompletedCycle}
+        handleOnDrop={handleOnDrop}
       />
     </div>
   );
diff --git a/web/components/issues/issue-layouts/list/block-root.tsx b/web/components/issues/issue-layouts/list/block-root.tsx
index 42f1d58e3a..3832ab7a6d 100644
--- a/web/components/issues/issue-layouts/list/block-root.tsx
+++ b/web/components/issues/issue-layouts/list/block-root.tsx
@@ -1,12 +1,18 @@
-import React, { FC, MutableRefObject, useState } from "react";
+import React, { FC, MutableRefObject, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
 // components
+import { DropIndicator } from "@plane/ui";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { IssueBlock } from "@/components/issues/issue-layouts/list";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // types
+import { HIGHLIGHT_CLASS, getIssueBlockId } from "../utils";
 import { TRenderQuickActions } from "./list-view-types";
 
 type Props = {
@@ -20,6 +26,11 @@ type Props = {
   nestingLevel: number;
   spacingLeft?: number;
   containerRef: MutableRefObject<HTMLDivElement | null>;
+  groupId: string;
+  isDragAllowed: boolean;
+  canDropOverIssue: boolean;
+  isParentIssueBeingDragged?: boolean;
+  isLastChild?: boolean;
 };
 
 export const IssueBlockRoot: FC<Props> = observer((props) => {
@@ -27,6 +38,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     issueIds,
     issueId,
     issuesMap,
+    groupId,
     updateIssue,
     quickActions,
     canEditProperties,
@@ -34,26 +46,84 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     nestingLevel,
     spacingLeft = 14,
     containerRef,
+    isDragAllowed,
+    canDropOverIssue,
+    isParentIssueBeingDragged = false,
+    isLastChild = false,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
+  // ref
+  const issueBlockRef = useRef<HTMLDivElement | null>(null);
   // store hooks
   const { subIssues: subIssuesStore } = useIssueDetail();
 
+  const isSubIssue = nestingLevel !== 0;
+
+  useEffect(() => {
+    const blockElement = issueBlockRef.current;
+
+    if (!blockElement) return;
+
+    return combine(
+      dropTargetForElements({
+        element: blockElement,
+        canDrop: ({ source }) => source?.data?.id !== issueId && !isSubIssue && canDropOverIssue,
+        getData: ({ input, element }) => {
+          const data = { id: issueId, type: "ISSUE" };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: () => {
+          setInstruction(undefined);
+        },
+      })
+    );
+  }, [issueId, isLastChild, issueBlockRef, isSubIssue, canDropOverIssue, setInstruction]);
+
+  useOutsideClickDetector(issueBlockRef, () => {
+    issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
   if (!issueId) return null;
 
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   return (
-    <>
+    <div className="relative" ref={issueBlockRef} id={getIssueBlockId(issueId, groupId)}>
+      <DropIndicator classNames={"absolute top-0 z-[2]"} isVisible={instruction === "DRAG_OVER"} />
       <RenderIfVisible
         key={`${issueId}`}
         defaultHeight="3rem"
         root={containerRef}
-        classNames="relative border-b border-b-custom-border-200 last:border-b-transparent"
+        classNames={`relative ${isLastChild ? "" : "border-b border-b-custom-border-200"}`}
       >
         <IssueBlock
           issueId={issueId}
           issuesMap={issuesMap}
+          groupId={groupId}
           updateIssue={updateIssue}
           quickActions={quickActions}
           canEditProperties={canEditProperties}
@@ -62,6 +132,9 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
           setExpanded={setExpanded}
           nestingLevel={nestingLevel}
           spacingLeft={spacingLeft}
+          canDrag={!isSubIssue && isDragAllowed}
+          isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
+          setIsCurrentBlockDragging={setIsCurrentBlockDragging}
         />
       </RenderIfVisible>
 
@@ -81,8 +154,13 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
             nestingLevel={nestingLevel + 1}
             spacingLeft={spacingLeft + (displayProperties?.key ? 12 : 0)}
             containerRef={containerRef}
+            groupId={groupId}
+            isDragAllowed={isDragAllowed}
+            canDropOverIssue={canDropOverIssue}
+            isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
           />
         ))}
-    </>
+      {isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 0f2d02ff4a..d38eb11997 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -1,10 +1,12 @@
-import { Dispatch, MouseEvent, SetStateAction, useRef } from "react";
+import { Dispatch, MouseEvent, SetStateAction, useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react-lite";
 import { ChevronRight } from "lucide-react";
 // types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 // ui
-import { Spinner, Tooltip, ControlLink } from "@plane/ui";
+import { Spinner, Tooltip, ControlLink, DragHandle } from "@plane/ui";
 // components
 import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 // helpers
@@ -18,6 +20,7 @@ import { TRenderQuickActions } from "./list-view-types";
 interface IssueBlockProps {
   issueId: string;
   issuesMap: TIssueMap;
+  groupId: string;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
@@ -26,12 +29,16 @@ interface IssueBlockProps {
   spacingLeft?: number;
   isExpanded: boolean;
   setExpanded: Dispatch<SetStateAction<boolean>>;
+  isCurrentBlockDragging: boolean;
+  setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
+  canDrag: boolean;
 }
 
-export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlockProps) => {
+export const IssueBlock = observer((props: IssueBlockProps) => {
   const {
     issuesMap,
     issueId,
+    groupId,
     updateIssue,
     quickActions,
     displayProperties,
@@ -40,9 +47,13 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
     spacingLeft = 14,
     isExpanded,
     setExpanded,
+    isCurrentBlockDragging,
+    setIsCurrentBlockDragging,
+    canDrag,
   } = props;
-  // refs
-  const parentRef = useRef(null);
+  // ref
+  const issueRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef(null);
   // hooks
   const { workspaceSlug } = useAppRouter();
   const { getProjectIdentifierById } = useProject();
@@ -59,6 +70,29 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const issue = issuesMap[issueId];
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    const element = issueRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element || !dragHandleElement) return;
+
+    return combine(
+      draggable({
+        element,
+        dragHandle: dragHandleElement,
+        canDrag: () => canDrag,
+        getInitialData: () => ({ id: issueId, type: "ISSUE", groupId }),
+        onDragStart: () => {
+          setIsCurrentBlockDragging(true);
+        },
+        onDrop: () => {
+          setIsCurrentBlockDragging(false);
+        },
+      })
+    );
+  }, [issueRef?.current, canDrag, issueId, groupId, dragHandleRef?.current, setIsCurrentBlockDragging]);
+
   if (!issue) return null;
 
   const canEditIssueProperties = canEditProperties(issue.project_id);
@@ -84,13 +118,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
 
   return (
     <div
-      ref={parentRef}
+      ref={issueRef}
       className={cn(
-        "min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 pl-1.5 text-sm",
+        "group min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
         {
           "border border-custom-primary-70 hover:border-custom-primary-70":
             getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
+          "bg-custom-background-80": isCurrentBlockDragging,
         }
       )}
     >
@@ -98,11 +133,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
         <div className="flex flex-grow items-center gap-3 truncate">
           <div className="flex items-center gap-0.5">
             <div className="flex items-center group">
-              <span className="size-3.5" />
-              <div className="flex h-4 w-4 items-center justify-center">
+              <DragHandle isDragging={isCurrentBlockDragging} ref={dragHandleRef} disabled={!canDrag} />
+              <div className="flex h-5 w-5 items-center justify-center">
                 {subIssuesCount > 0 && (
                   <button
-                    className="flex items-center justify-center h-4 w-4 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
+                    className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400  hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
@@ -146,7 +181,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           <div className="block md:hidden border border-custom-border-300 rounded ">
             {quickActions({
               issue,
-              parentRef,
+              parentRef: issueRef,
             })}
           </div>
         )}
@@ -165,7 +200,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
             <div className="hidden md:block">
               {quickActions({
                 issue,
-                parentRef,
+                parentRef: issueRef,
               })}
             </div>
           </>
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx
index b8e5df1d85..1d773001eb 100644
--- a/web/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/list/blocks-list.tsx
@@ -1,27 +1,42 @@
 import { FC, MutableRefObject } from "react";
 // components
-import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
+import { TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
 import { IssueBlockRoot } from "@/components/issues/issue-layouts/list";
 // types
 import { TRenderQuickActions } from "./list-view-types";
 
 interface Props {
-  issueIds: TGroupedIssues | TUnGroupedIssues | any;
+  issueIds: TUnGroupedIssues;
   issuesMap: TIssueMap;
+  groupId: string;
   canEditProperties: (projectId: string | undefined) => boolean;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
   containerRef: MutableRefObject<HTMLDivElement | null>;
+  isDragAllowed: boolean;
+  canDropOverIssue: boolean;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
-  const { issueIds, issuesMap, updateIssue, quickActions, displayProperties, canEditProperties, containerRef } = props;
+  const {
+    issueIds,
+    issuesMap,
+    groupId,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    containerRef,
+    isDragAllowed,
+    canDropOverIssue,
+  } = props;
 
   return (
     <div className="relative h-full w-full">
-      {issueIds && issueIds.length > 0 ? (
-        issueIds.map((issueId: string) => (
+      {issueIds &&
+        issueIds.length > 0 &&
+        issueIds.map((issueId: string, index) => (
           <IssueBlockRoot
             key={`${issueId}`}
             issueIds={issueIds}
@@ -34,11 +49,12 @@ export const IssueBlocksList: FC<Props> = (props) => {
             nestingLevel={0}
             spacingLeft={0}
             containerRef={containerRef}
+            groupId={groupId}
+            isLastChild={index === issueIds.length - 1}
+            isDragAllowed={isDragAllowed}
+            canDropOverIssue={canDropOverIssue}
           />
-        ))
-      ) : (
-        <div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
-      )}
+        ))}
     </div>
   );
 };
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 80d4a9a3f4..66bc47c289 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -1,4 +1,6 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 // components
 import {
   GroupByColumnTypes,
@@ -8,20 +10,22 @@ import {
   TIssueMap,
   TUnGroupedIssues,
   IGroupByColumn,
+  TIssueOrderByOptions,
+  TIssueGroupByOptions,
 } from "@plane/types";
-import { IssueBlocksList, ListQuickAddIssueForm } from "@/components/issues";
 // hooks
 import { EIssuesStoreType } from "@/constants/issue";
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 // utils
-import { getGroupByColumns, isWorkspaceLevel } from "../utils";
-import { HeaderGroupByCard } from "./headers/group-by-card";
+import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
+import { ListGroup } from "./list-group";
 import { TRenderQuickActions } from "./list-view-types";
 
 export interface IGroupByList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
-  group_by: string | null;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
@@ -36,6 +40,7 @@ export interface IGroupByList {
   ) => Promise<TIssue | undefined>;
   disableIssueCreation?: boolean;
   storeType: EIssuesStoreType;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   viewId?: string;
   isCompletedCycle?: boolean;
@@ -46,6 +51,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     issueIds,
     issuesMap,
     group_by,
+    orderBy,
     updateIssue,
     quickActions,
     displayProperties,
@@ -56,6 +62,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     viewId,
     disableIssueCreation,
     storeType,
+    handleOnDrop,
     addIssuesToView,
     isCompletedCycle = false,
   } = props;
@@ -81,46 +88,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     isWorkspaceLevel(storeType)
   );
 
+  // Enable Auto Scroll for Main Kanban
+  useEffect(() => {
+    const element = containerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [containerRef]);
+
   if (!groups) return null;
 
-  const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
-    const defaultState = projectState.projectStates?.find((state) => state.default);
-    let preloadedData: object = { state_id: defaultState?.id };
-
-    if (groupByKey === null) {
-      preloadedData = { ...preloadedData };
-    } else {
-      if (groupByKey === "state") {
-        preloadedData = { ...preloadedData, state_id: value };
-      } else if (groupByKey === "priority") {
-        preloadedData = { ...preloadedData, priority: value };
-      } else if (groupByKey === "labels" && value != "None") {
-        preloadedData = { ...preloadedData, label_ids: [value] };
-      } else if (groupByKey === "assignees" && value != "None") {
-        preloadedData = { ...preloadedData, assignee_ids: [value] };
-      } else if (groupByKey === "cycle" && value != "None") {
-        preloadedData = { ...preloadedData, cycle_id: value };
-      } else if (groupByKey === "module" && value != "None") {
-        preloadedData = { ...preloadedData, module_ids: [value] };
-      } else if (groupByKey === "created_by") {
-        preloadedData = { ...preloadedData };
-      } else {
-        preloadedData = { ...preloadedData, [groupByKey]: value };
-      }
-    }
-
-    return preloadedData;
-  };
-
   const validateEmptyIssueGroups = (issues: TIssue[]) => {
     const issuesCount = issues?.length || 0;
     if (!showEmptyGroup && issuesCount <= 0) return false;
     return true;
   };
 
-  const is_list = group_by === null ? true : false;
+  const getGroupIndex = (groupId: string | undefined) => groups.findIndex(({ id }) => id === groupId);
 
-  const isGroupByCreatedBy = group_by === "created_by";
+  const is_list = group_by === null ? true : false;
 
   return (
     <div
@@ -130,43 +121,30 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
       {groups &&
         groups.length > 0 &&
         groups.map(
-          (_list: IGroupByColumn) =>
-            validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[_list.id]) && (
-              <div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
-                  <HeaderGroupByCard
-                    icon={_list.icon}
-                    title={_list.name || ""}
-                    count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
-                    issuePayload={_list.payload}
-                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
-                    storeType={storeType}
-                    addIssuesToView={addIssuesToView}
-                  />
-                </div>
-
-                {issueIds && (
-                  <IssueBlocksList
-                    issueIds={is_list ? issueIds || 0 : issueIds?.[_list.id] || 0}
-                    issuesMap={issuesMap}
-                    updateIssue={updateIssue}
-                    quickActions={quickActions}
-                    displayProperties={displayProperties}
-                    canEditProperties={canEditProperties}
-                    containerRef={containerRef}
-                  />
-                )}
-
-                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
-                  <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
-                    <ListQuickAddIssueForm
-                      prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
-                      quickAddCallback={quickAddCallback}
-                      viewId={viewId}
-                    />
-                  </div>
-                )}
-              </div>
+          (group: IGroupByColumn) =>
+            validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[group.id]) && (
+              <ListGroup
+                key={group.id}
+                group={group}
+                getGroupIndex={getGroupIndex}
+                issueIds={issueIds}
+                issuesMap={issuesMap}
+                group_by={group_by}
+                orderBy={orderBy}
+                updateIssue={updateIssue}
+                quickActions={quickActions}
+                displayProperties={displayProperties}
+                enableIssueQuickAdd={enableIssueQuickAdd}
+                canEditProperties={canEditProperties}
+                storeType={storeType}
+                containerRef={containerRef}
+                quickAddCallback={quickAddCallback}
+                disableIssueCreation={disableIssueCreation}
+                addIssuesToView={addIssuesToView}
+                handleOnDrop={handleOnDrop}
+                viewId={viewId}
+                isCompletedCycle={isCompletedCycle}
+              />
             )
         )}
     </div>
@@ -176,7 +154,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
 export interface IList {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
-  group_by: string | null;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   displayProperties: IIssueDisplayProperties | undefined;
@@ -192,6 +171,7 @@ export interface IList {
   viewId?: string;
   disableIssueCreation?: boolean;
   storeType: EIssuesStoreType;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   isCompletedCycle?: boolean;
 }
@@ -201,6 +181,7 @@ export const List: React.FC<IList> = (props) => {
     issueIds,
     issuesMap,
     group_by,
+    orderBy,
     updateIssue,
     quickActions,
     quickAddCallback,
@@ -211,6 +192,7 @@ export const List: React.FC<IList> = (props) => {
     canEditProperties,
     disableIssueCreation,
     storeType,
+    handleOnDrop,
     addIssuesToView,
     isCompletedCycle = false,
   } = props;
@@ -221,6 +203,7 @@ export const List: React.FC<IList> = (props) => {
         issueIds={issueIds as TUnGroupedIssues}
         issuesMap={issuesMap}
         group_by={group_by}
+        orderBy={orderBy}
         updateIssue={updateIssue}
         quickActions={quickActions}
         displayProperties={displayProperties}
@@ -231,6 +214,7 @@ export const List: React.FC<IList> = (props) => {
         viewId={viewId}
         disableIssueCreation={disableIssueCreation}
         storeType={storeType}
+        handleOnDrop={handleOnDrop}
         addIssuesToView={addIssuesToView}
         isCompletedCycle={isCompletedCycle}
       />
diff --git a/web/components/issues/issue-layouts/list/list-group.tsx b/web/components/issues/issue-layouts/list/list-group.tsx
new file mode 100644
index 0000000000..e4cfa8b3ab
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/list-group.tsx
@@ -0,0 +1,242 @@
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import { cn } from "@plane/editor-core";
+// plane
+import {
+  IGroupByColumn,
+  IIssueDisplayProperties,
+  TGroupedIssues,
+  TIssue,
+  TIssueGroupByOptions,
+  TIssueMap,
+  TIssueOrderByOptions,
+  TUnGroupedIssues,
+} from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+import { DRAG_ALLOWED_GROUPS, EIssuesStoreType } from "@/constants/issue";
+// hooks
+import { useProjectState } from "@/hooks/store";
+// components
+import { GroupDragOverlay } from "../group-drag-overlay";
+import {
+  GroupDropLocation,
+  getDestinationFromDropPayload,
+  getIssueBlockId,
+  getSourceFromDropPayload,
+  highlightIssueOnDrop,
+} from "../utils";
+import { IssueBlocksList } from "./blocks-list";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { TRenderQuickActions } from "./list-view-types";
+import { ListQuickAddIssueForm } from "./quick-add-issue-form";
+
+type Props = {
+  issueIds: TGroupedIssues | TUnGroupedIssues | any;
+  group: IGroupByColumn;
+  issuesMap: TIssueMap;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
+  getGroupIndex: (groupId: string | undefined) => number;
+  updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableIssueQuickAdd: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  storeType: EIssuesStoreType;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    viewId?: string
+  ) => Promise<TIssue | undefined>;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  disableIssueCreation?: boolean;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  viewId?: string;
+  isCompletedCycle?: boolean;
+};
+
+export const ListGroup = observer((props: Props) => {
+  const {
+    group,
+    issueIds,
+    group_by,
+    orderBy,
+    issuesMap,
+    getGroupIndex,
+    disableIssueCreation,
+    addIssuesToView,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    quickAddCallback,
+    containerRef,
+    viewId,
+    handleOnDrop,
+    enableIssueQuickAdd,
+    isCompletedCycle,
+    storeType,
+  } = props;
+
+  const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
+  const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start");
+  const groupRef = useRef<HTMLDivElement | null>(null);
+
+  const projectState = useProjectState();
+
+  const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
+    const defaultState = projectState.projectStates?.find((state) => state.default);
+    let preloadedData: object = { state_id: defaultState?.id };
+
+    if (groupByKey === null) {
+      preloadedData = { ...preloadedData };
+    } else {
+      if (groupByKey === "state") {
+        preloadedData = { ...preloadedData, state_id: value };
+      } else if (groupByKey === "priority") {
+        preloadedData = { ...preloadedData, priority: value };
+      } else if (groupByKey === "labels" && value != "None") {
+        preloadedData = { ...preloadedData, label_ids: [value] };
+      } else if (groupByKey === "assignees" && value != "None") {
+        preloadedData = { ...preloadedData, assignee_ids: [value] };
+      } else if (groupByKey === "cycle" && value != "None") {
+        preloadedData = { ...preloadedData, cycle_id: value };
+      } else if (groupByKey === "module" && value != "None") {
+        preloadedData = { ...preloadedData, module_ids: [value] };
+      } else if (groupByKey === "created_by") {
+        preloadedData = { ...preloadedData };
+      } else {
+        preloadedData = { ...preloadedData, [groupByKey]: value };
+      }
+    }
+
+    return preloadedData;
+  };
+
+  useEffect(() => {
+    const element = groupRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ groupId: group.id, type: "COLUMN" }),
+        onDragEnter: () => {
+          setIsDraggingOverColumn(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOverColumn(false);
+        },
+        onDragStart: () => {
+          setIsDraggingOverColumn(true);
+        },
+        onDrag: ({ source }) => {
+          const sourceGroupId = source?.data?.groupId as string | undefined;
+          const currentGroupId = group.id;
+
+          const sourceIndex = getGroupIndex(sourceGroupId);
+          const currentIndex = getGroupIndex(currentGroupId);
+
+          if (sourceIndex > currentIndex) {
+            setDragColumnOrientation("justify-end");
+          } else {
+            setDragColumnOrientation("justify-start");
+          }
+        },
+        onDrop: (payload) => {
+          setIsDraggingOverColumn(false);
+          const source = getSourceFromDropPayload(payload);
+          const destination = getDestinationFromDropPayload(payload);
+
+          if (!source || !destination) return;
+
+          if (group.isDropDisabled) {
+            group.dropErrorMessage &&
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: "Warning!",
+                message: group.dropErrorMessage,
+              });
+            return;
+          }
+
+          handleOnDrop(source, destination);
+
+          highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order");
+        },
+      })
+    );
+  }, [groupRef?.current, group, orderBy, getGroupIndex, setDragColumnOrientation, setIsDraggingOverColumn]);
+
+  const is_list = group_by === null ? true : false;
+  const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
+  const canDropOverIssue = orderBy === "sort_order";
+
+  const issueCount: number = is_list ? issueIds?.length ?? 0 : issueIds?.[group.id]?.length ?? 0;
+
+  const isGroupByCreatedBy = group_by === "created_by";
+
+  return (
+    <div
+      ref={groupRef}
+      className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {
+        "border-custom-primary-100 ": isDraggingOverColumn,
+      })}
+    >
+      <div className="sticky top-0 z-[3] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 pl-5 py-1">
+        <HeaderGroupByCard
+          icon={group.icon}
+          title={group.name || ""}
+          count={issueCount}
+          issuePayload={group.payload}
+          disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
+          storeType={storeType}
+          addIssuesToView={addIssuesToView}
+        />
+      </div>
+
+      {!!issueCount && (
+        <div className="relative">
+          <GroupDragOverlay
+            dragColumnOrientation={dragColumnOrientation}
+            canDropOverIssue={canDropOverIssue}
+            isDropDisabled={!!group.isDropDisabled}
+            dropErrorMessage={group.dropErrorMessage}
+            orderBy={orderBy}
+            isDraggingOverColumn={isDraggingOverColumn}
+          />
+          {issueIds && (
+            <IssueBlocksList
+              issueIds={is_list ? issueIds : issueIds?.[group.id]}
+              groupId={group.id}
+              issuesMap={issuesMap}
+              updateIssue={updateIssue}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              canEditProperties={canEditProperties}
+              containerRef={containerRef}
+              isDragAllowed={isDragAllowed}
+              canDropOverIssue={canDropOverIssue}
+            />
+          )}
+
+          {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
+            <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
+              <ListQuickAddIssueForm
+                prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
+                quickAddCallback={quickAddCallback}
+                viewId={viewId}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index 3dd4aaf7f1..2b12244a46 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -1,3 +1,4 @@
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import clone from "lodash/clone";
 import concat from "lodash/concat";
 import pull from "lodash/pull";
@@ -37,6 +38,7 @@ export type GroupDropLocation = {
   groupId: string;
   subGroupId?: string;
   id: string | undefined;
+  canAddIssueBelow?: boolean;
 };
 
 export type IssueUpdates = {
@@ -353,11 +355,15 @@ export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): G
 
   if (!destinationColumnData?.groupId) return;
 
+  // extract instruction from destination issue
+  const extractedInstruction = destinationIssueData ? extractInstruction(destinationIssueData)?.type : "";
+
   return {
     groupId: destinationColumnData.groupId as string,
     subGroupId: destinationColumnData.subGroupId as string,
     columnId: destinationColumnData.columnId as string,
     id: destinationIssueData?.id as string | undefined,
+    canAddIssueBelow: extractedInstruction === "reorder-below",
   };
 };
 
@@ -372,17 +378,25 @@ const handleSortOrder = (
   destinationIssues: string[],
   destinationIssueId: string | undefined,
   getIssueById: (issueId: string) => TIssue | undefined,
-  shouldAddIssueAtTop = false
+  shouldAddIssueAtTop = false,
+  canAddIssueBelow = false
 ) => {
   const sortOrderDefaultValue = 65535;
   let currentIssueState = {};
 
-  const destinationIndex = destinationIssueId
+  let destinationIndex = destinationIssueId
     ? destinationIssues.indexOf(destinationIssueId)
     : shouldAddIssueAtTop
       ? 0
       : destinationIssues.length;
 
+  const isDestinationLastChild = destinationIndex === destinationIssues.length - 1;
+
+  // if issue can be added below and if the destination issue is the last child, then add to the end of the list
+  if (canAddIssueBelow && isDestinationLastChild) {
+    destinationIndex = destinationIssues.length;
+  }
+
   if (destinationIssues && destinationIssues.length > 0) {
     if (destinationIndex === 0) {
       const destinationIssueId = destinationIssues[0];
@@ -428,7 +442,7 @@ const handleSortOrder = (
 export const getIssueBlockId = (
   issueId: string | undefined,
   groupId: string | undefined,
-  subGroupId: string | undefined
+  subGroupId?: string | undefined
 ) => `issue_${issueId}_${groupId}_${subGroupId}`;
 
 /**
@@ -469,7 +483,13 @@ export const handleGroupDragDrop = async (
   // for both horizontal and vertical dnd
   updatedIssue = {
     ...updatedIssue,
-    ...handleSortOrder(destinationIssues, destination.id, getIssueById, shouldAddIssueAtTop),
+    ...handleSortOrder(
+      destinationIssues,
+      destination.id,
+      getIssueById,
+      shouldAddIssueAtTop,
+      !!destination.canAddIssueBelow
+    ),
   };
 
   // update updatedIssue values based on the source and destination groupIds
diff --git a/web/components/issues/title-input.tsx b/web/components/issues/title-input.tsx
index db9a4199a5..6499f53308 100644
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@@ -47,13 +47,18 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   useEffect(() => {
     const textarea = document.querySelector("#title-input");
     if (debouncedValue && debouncedValue !== value) {
-      issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
+      if (debouncedValue.trim().length > 0) {
+        issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
+          setIsSubmitting("saved");
+          if (textarea && !textarea.matches(":focus")) {
+            const trimmedTitle = debouncedValue.trim();
+            if (trimmedTitle !== title) setTitle(trimmedTitle);
+          }
+        });
+      } else {
+        setTitle(value || "");
         setIsSubmitting("saved");
-        if (textarea && !textarea.matches(":focus")) {
-          const trimmedTitle = debouncedValue.trim();
-          if (trimmedTitle !== title) setTitle(trimmedTitle);
-        }
-      });
+      }
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,8 +68,13 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
     const handleBlur = () => {
       const trimmedTitle = title.trim();
       if (trimmedTitle !== title && isSubmitting !== "submitting") {
-        setTitle(trimmedTitle);
-        setIsSubmitting("submitting");
+        if (trimmedTitle.length > 0) {
+          setTitle(trimmedTitle);
+          setIsSubmitting("submitting");
+        } else {
+          setTitle(value || "");
+          setIsSubmitting("saved");
+        }
       }
     };
 
@@ -91,35 +101,38 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   if (disabled) return <div className="text-2xl font-medium">{title}</div>;
 
   return (
-    <div className={cn("relative", containerClassName)}>
-      <TextArea
-        id="title-input"
-        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={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 className="flex flex-col gap-1.5">
+      <div className={cn("relative", containerClassName)}>
+        <TextArea
+          id="title-input"
+          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-1 ring-red-400 mx-3": title.length === 0,
+            },
+            className
+          )}
+          disabled={disabled}
+          value={title}
+          onChange={handleTitleChange}
+          maxLength={255}
+          placeholder="Issue title"
+          onFocus={() => setIsLengthVisible(true)}
+          onBlur={() => setIsLengthVisible(false)}
+        />
+        <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>
       </div>
+      {title.length === 0 && <span className="text-sm text-red-500">Title is required</span>}
     </div>
   );
 });
diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx
index b3d41abccd..5aae66e565 100644
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@@ -2,12 +2,11 @@ import { MutableRefObject, useRef, useState } from "react";
 import { LucideIcon, X } from "lucide-react";
 import { IIssueLabel } from "@plane/types";
 //ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, DragHandle } from "@plane/ui";
 //types
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 //hooks
 //components
-import { DragHandle } from "./drag-handle";
 import { LabelName } from "./label-name";
 
 //types
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index bfeba2b0cc..9faa526caf 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -206,9 +206,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                       {fields.map((field, index) => (
                         <div
                           key={field.id}
-                          className="group mb-1 grid grid-cols-6  sm:grid-cols-12 items-start gap-x-4 text-sm"
+                          className="group mb-1 flex items-center justify-between gap-x-4 text-sm w-full"
                         >
-                          <div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
+                          <div className="flex flex-col gap-1 flex-grow w-full">
                             <Controller
                               control={control}
                               name={`members.${index}.member_id`}
@@ -250,8 +250,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                             )}
                           </div>
 
-                          <div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
-                            <div className="flex w-full flex-col gap-1">
+                          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+                            <div className="flex flex-col gap-1">
                               <Controller
                                 name={`members.${index}.role`}
                                 control={control}
@@ -260,7 +260,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   <CustomSelect
                                     {...field}
                                     customButton={
-                                      <div className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
+                                      <div className="flex w-24 items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 8d8ceada9b..9518452e13 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -121,7 +121,10 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group relative flex items-start gap-4">
+                        <div
+                          key={field.id}
+                          className="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full"
+                        >
                           <div className="w-full">
                             <Controller
                               control={control}
@@ -155,39 +158,43 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                               )}
                             />
                           </div>
-                          <div className="flex items-center gap-2">
-                            <Controller
-                              control={control}
-                              name={`emails.${index}.role`}
-                              rules={{ required: true }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomSelect
-                                  value={value}
-                                  label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
-                                  onChange={onChange}
-                                  optionsClassName="w-full"
-                                  className="flex-grow"
-                                  input
-                                >
-                                  {Object.entries(ROLE).map(([key, value]) => {
-                                    if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
-                                      return (
-                                        <CustomSelect.Option key={key} value={parseInt(key)}>
-                                          {value}
-                                        </CustomSelect.Option>
-                                      );
-                                  })}
-                                </CustomSelect>
-                              )}
-                            />
+                          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+                            <div className="flex flex-col gap-1">
+                              <Controller
+                                control={control}
+                                name={`emails.${index}.role`}
+                                rules={{ required: true }}
+                                render={({ field: { value, onChange } }) => (
+                                  <CustomSelect
+                                    value={value}
+                                    label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
+                                    onChange={onChange}
+                                    optionsClassName="w-full"
+                                    className="flex-grow w-24"
+                                    input
+                                  >
+                                    {Object.entries(ROLE).map(([key, value]) => {
+                                      if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
+                                        return (
+                                          <CustomSelect.Option key={key} value={parseInt(key)}>
+                                            {value}
+                                          </CustomSelect.Option>
+                                        );
+                                    })}
+                                  </CustomSelect>
+                                )}
+                              />
+                            </div>
                             {fields.length > 1 && (
-                              <button
-                                type="button"
-                                className="grid place-items-center self-center rounded flex-shrink-0"
-                                onClick={() => remove(index)}
-                              >
-                                <X className="h-3.5 w-3.5 text-custom-text-200" />
-                              </button>
+                              <div className="flex-item flex w-6">
+                                <button
+                                  type="button"
+                                  className="place-items-center self-center rounded"
+                                  onClick={() => remove(index)}
+                                >
+                                  <X className="h-4 w-4 text-custom-text-200" />
+                                </button>
+                              </div>
                             )}
                           </div>
                         </div>
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index 173e263262..78b027cf61 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -12,6 +12,15 @@ import {
   TIssueTypeFilters,
 } from "@plane/types";
 
+export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
+  "state",
+  "priority",
+  "assignees",
+  "labels",
+  "module",
+  "cycle",
+];
+
 export enum EIssuesStoreType {
   GLOBAL = "GLOBAL",
   PROFILE = "PROFILE",
@@ -422,3 +431,4 @@ export const groupReactionEmojis = (reactions: any) => {
 
   return groupedEmojis;
 };
+
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
index 614994767e..d01f996c76 100644
--- a/web/helpers/issue.helper.ts
+++ b/web/helpers/issue.helper.ts
@@ -2,12 +2,15 @@ import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import { v4 as uuidv4 } from "uuid";
 // types
 import {
+  TGroupedIssues,
   TIssue,
   TIssueGroupByOptions,
   TIssueLayouts,
   TIssueOrderByOptions,
   TIssueParams,
   TStateGroups,
+  TSubGroupedIssues,
+  TUnGroupedIssues,
 } from "@plane/types";
 import { IGanttBlock } from "@/components/gantt-chart";
 // constants
@@ -211,3 +214,43 @@ export const getDescriptionPlaceholder = (isFocused: boolean, description: strin
   if (!isDescriptionEmpty || isFocused) return "Press '/' for commands...";
   else return "Click to add description";
 };
+
+export const issueCountBasedOnFilters = (
+  issueIds: TUnGroupedIssues | TGroupedIssues | TSubGroupedIssues,
+  layout: TIssueLayouts,
+  groupBy: string | undefined,
+  subGroupBy: string | undefined
+): number => {
+  let issuesCount = 0;
+  if (!layout) return issuesCount;
+
+  if (["spreadsheet", "gantt_chart"].includes(layout)) {
+    issuesCount = (issueIds as TUnGroupedIssues)?.length;
+  } else if (layout === "calendar") {
+    Object.keys(issueIds || {}).map((groupId) => {
+      issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
+    });
+  } else if (layout === "list") {
+    if (groupBy) {
+      Object.keys(issueIds || {}).map((groupId) => {
+        issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
+      });
+    } else {
+      issuesCount = (issueIds as TUnGroupedIssues)?.length;
+    }
+  } else if (layout === "kanban") {
+    if (groupBy && subGroupBy) {
+      Object.keys(issueIds || {}).map((groupId) => {
+        Object.keys((issueIds as TSubGroupedIssues)?.[groupId] || {}).map((subGroupId) => {
+          issuesCount += (issueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId]?.length || 0;
+        });
+      });
+    } else if (groupBy) {
+      Object.keys(issueIds || {}).map((groupId) => {
+        issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
+      });
+    }
+  }
+
+  return issuesCount;
+};
diff --git a/web/hooks/use-group-dragndrop.ts b/web/hooks/use-group-dragndrop.ts
new file mode 100644
index 0000000000..f33129baef
--- /dev/null
+++ b/web/hooks/use-group-dragndrop.ts
@@ -0,0 +1,124 @@
+import { useRouter } from "next/router";
+import { TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { GroupDropLocation, handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
+import { EIssuesStoreType } from "@/constants/issue";
+import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/issue-helper.store";
+import { useIssueDetail, useIssues } from "./store";
+import { useIssuesActions } from "./use-issues-actions";
+
+type DNDStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.DRAFT
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.ARCHIVED;
+
+export const useGroupIssuesDragNDrop = (
+  storeType: DNDStoreType,
+  orderBy: TIssueOrderByOptions | undefined,
+  groupBy: TIssueGroupByOptions | undefined,
+  subGroupBy?: TIssueGroupByOptions
+) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { updateIssue } = useIssuesActions(storeType);
+  const {
+    issues: { getIssueIds },
+  } = useIssues(storeType);
+  const {
+    issues: { addCycleToIssue, removeCycleFromIssue },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const {
+    issues: { changeModulesInIssue },
+  } = useIssues(EIssuesStoreType.MODULE);
+
+  /**
+   * update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
+   * @param projectId
+   * @param issueId
+   * @param data
+   * @param issueUpdates
+   */
+  const updateIssueOnDrop = async (
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssue>,
+    issueUpdates: {
+      [groupKey: string]: {
+        ADD: string[];
+        REMOVE: string[];
+      };
+    }
+  ) => {
+    const errorToastProps = {
+      type: TOAST_TYPE.ERROR,
+      title: "Error!",
+      message: "Error while updating issue",
+    };
+    const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
+    const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
+
+    const isModuleChanged = Object.keys(data).includes(moduleKey);
+    const isCycleChanged = Object.keys(data).includes(cycleKey);
+
+    if (isCycleChanged && workspaceSlug) {
+      if (data[cycleKey]) {
+        addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey], issueId).catch(() =>
+          setToast(errorToastProps)
+        );
+      } else {
+        removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps));
+      }
+      delete data[cycleKey];
+    }
+
+    if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
+      changeModulesInIssue(
+        workspaceSlug.toString(),
+        projectId,
+        issueId,
+        issueUpdates[moduleKey].ADD,
+        issueUpdates[moduleKey].REMOVE
+      ).catch(() => setToast(errorToastProps));
+      delete data[moduleKey];
+    }
+
+    updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
+  };
+
+  const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
+    if (
+      source.columnId &&
+      destination.columnId &&
+      destination.columnId === source.columnId &&
+      destination.id === source.id
+    )
+      return;
+
+    await handleGroupDragDrop(
+      source,
+      destination,
+      getIssueById,
+      getIssueIds,
+      updateIssueOnDrop,
+      groupBy,
+      subGroupBy,
+      orderBy !== "sort_order"
+    ).catch((err) => {
+      setToast({
+        title: "Error!",
+        type: TOAST_TYPE.ERROR,
+        message: err?.detail ?? "Failed to perform this action",
+      });
+    });
+  };
+
+  return handleOnDrop;
+};
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
index 9365716baf..08fcea9582 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace.tsx
@@ -33,7 +33,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
     organization_size: "",
   });
   // hooks
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const onSubmit = async (workspace: IWorkspace) => {
     await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
@@ -50,7 +50,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
             href="/"
           >
             <div className="h-[30px] w-[133px]">
-              {theme === "light" ? (
+              {resolvedTheme === "light" ? (
                 <Image src={BlackHorizontalLogo} alt="Plane black logo" />
               ) : (
                 <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 7e14d2d741..0fe64519dc 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -49,7 +49,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
 
   const { fetchWorkspaces } = useWorkspace();
   // next-themes
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
 
@@ -135,7 +135,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
           <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <div className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3">
             <div className="h-[30px] w-[133px]">
-              {theme === "light" ? (
+              {resolvedTheme === "light" ? (
                 <Image src={BlackHorizontalLogo} alt="Plane black logo" />
               ) : (
                 <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
diff --git a/web/store/issue/archived/issue.store.ts b/web/store/issue/archived/issue.store.ts
index 7cb1b1b546..e17c3d001a 100644
--- a/web/store/issue/archived/issue.store.ts
+++ b/web/store/issue/archived/issue.store.ts
@@ -17,6 +17,7 @@ export interface IArchivedIssues {
   // computed
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
   // actions
+  getIssueIds: (groupId?: string) => string[] | undefined;
   fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<TIssue[]>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -84,6 +85,26 @@ export class ArchivedIssues extends IssueHelperStore implements IArchivedIssues
     return issues;
   }
 
+  getIssueIds = (groupId?: string) => {
+    const groupedIssueIds = this.groupedIssueIds;
+
+    const displayFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.displayFilters;
+    if (!displayFilters || !groupedIssueIds) return undefined;
+
+    const subGroupBy = displayFilters?.sub_group_by;
+    const groupBy = displayFilters?.group_by;
+
+    if (!groupBy && !subGroupBy) {
+      return groupedIssueIds as string[];
+    }
+
+    if (groupBy && groupId) {
+      return (groupedIssueIds as TGroupedIssues)?.[groupId] as string[];
+    }
+
+    return undefined;
+  };
+
   fetchIssues = async (workspaceSlug: string, projectId: string, loadType: TLoader = "init-loader") => {
     try {
       this.loader = loadType;
diff --git a/web/store/issue/cycle/issue.store.ts b/web/store/issue/cycle/issue.store.ts
index 7a264dad0d..3632d03f71 100644
--- a/web/store/issue/cycle/issue.store.ts
+++ b/web/store/issue/cycle/issue.store.ts
@@ -6,6 +6,8 @@ import update from "lodash/update";
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // types
 import { TIssue, TSubGroupedIssues, TGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
+// helpers
+import { issueCountBasedOnFilters } from "@/helpers/issue.helper";
 // services
 import { CycleService } from "@/services/cycle.service";
 import { IssueService } from "@/services/issue";
@@ -21,6 +23,7 @@ export interface ICycleIssues {
   issues: { [cycle_id: string]: string[] };
   viewFlags: ViewFlags;
   // computed
+  issuesCount: number;
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
   // actions
   getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
@@ -60,7 +63,7 @@ export interface ICycleIssues {
   ) => Promise<void>;
   removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
   addCycleToIssue: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
-  removeCycleFromIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>
+  removeCycleFromIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   transferIssuesFromCycle: (
     workspaceSlug: string,
     projectId: string,
@@ -93,6 +96,7 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
       loader: observable.ref,
       issues: observable,
       // computed
+      issuesCount: computed,
       groupedIssueIds: computed,
       // action
       fetchIssues: action,
@@ -113,6 +117,22 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
     this.cycleService = new CycleService();
   }
 
+  get issuesCount() {
+    let issuesCount = 0;
+
+    const displayFilters = this.rootStore?.cycleIssuesFilter?.issueFilters?.displayFilters;
+    const groupedIssueIds = this.groupedIssueIds;
+    if (!displayFilters || !groupedIssueIds) return issuesCount;
+
+    const layout = displayFilters?.layout || undefined;
+    const groupBy = displayFilters?.group_by || undefined;
+    const subGroupBy = displayFilters?.sub_group_by || undefined;
+
+    if (!layout) return issuesCount;
+    issuesCount = issueCountBasedOnFilters(groupedIssueIds, layout, groupBy, subGroupBy);
+    return issuesCount;
+  }
+
   get groupedIssueIds() {
     const cycleId = this.rootIssueStore?.cycleId;
     if (!cycleId) return undefined;
@@ -336,14 +356,14 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
   /**
    * Remove a cycle from issue
-   * @param workspaceSlug 
-   * @param projectId 
-   * @param issueId 
-   * @returns 
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @returns
    */
   removeCycleFromIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
     const issueCycleId = this.rootIssueStore.issues.getIssueById(issueId)?.cycle_id;
-    if(!issueCycleId) return;
+    if (!issueCycleId) return;
     try {
       // perform optimistic update, update store
       runInAction(() => {
diff --git a/web/store/issue/issue_kanban_view.store.ts b/web/store/issue/issue_kanban_view.store.ts
index aa4c2b4a3b..5331f911ba 100644
--- a/web/store/issue/issue_kanban_view.store.ts
+++ b/web/store/issue/issue_kanban_view.store.ts
@@ -2,6 +2,7 @@ import { action, computed, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
 import { IssueRootStore } from "./root.store";
 import { TIssueGroupByOptions } from "@plane/types";
+import { DRAG_ALLOWED_GROUPS } from "@/constants/issue";
 // types
 
 export interface IIssueKanBanViewStore {
@@ -22,8 +23,6 @@ export interface IIssueKanBanViewStore {
   setIsDragging: (isDragging: boolean) => void;
 }
 
-const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = ["state", "priority", "assignees", "labels", "module", "cycle"];
-
 export class IssueKanBanViewStore implements IIssueKanBanViewStore {
   kanBanToggle: {
     groupByHeaderMinMax: string[];
diff --git a/web/store/issue/module/issue.store.ts b/web/store/issue/module/issue.store.ts
index e5c7b1cc1b..35066a052f 100644
--- a/web/store/issue/module/issue.store.ts
+++ b/web/store/issue/module/issue.store.ts
@@ -7,6 +7,8 @@ import update from "lodash/update";
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
 // types
 import { TIssue, TLoader, TGroupedIssues, TSubGroupedIssues, TUnGroupedIssues, ViewFlags } from "@plane/types";
+// helpers
+import { issueCountBasedOnFilters } from "@/helpers/issue.helper";
 // services
 import { IssueService } from "@/services/issue";
 import { ModuleService } from "@/services/module.service";
@@ -21,6 +23,7 @@ export interface IModuleIssues {
   issues: { [module_id: string]: string[] };
   viewFlags: ViewFlags;
   // computed
+  issuesCount: number;
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
   // actions
   getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
@@ -95,6 +98,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       loader: observable.ref,
       issues: observable,
       // computed
+      issuesCount: computed,
       groupedIssueIds: computed,
       // action
       fetchIssues: action,
@@ -113,6 +117,22 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
     this.moduleService = new ModuleService();
   }
 
+  get issuesCount() {
+    let issuesCount = 0;
+
+    const displayFilters = this.rootIssueStore?.moduleIssuesFilter?.issueFilters?.displayFilters;
+    const groupedIssueIds = this.groupedIssueIds;
+    if (!displayFilters || !groupedIssueIds) return issuesCount;
+
+    const layout = displayFilters?.layout || undefined;
+    const groupBy = displayFilters?.group_by || undefined;
+    const subGroupBy = displayFilters?.sub_group_by || undefined;
+
+    if (!layout) return issuesCount;
+    issuesCount = issueCountBasedOnFilters(groupedIssueIds, layout, groupBy, subGroupBy);
+    return issuesCount;
+  }
+
   get groupedIssueIds() {
     const moduleId = this.rootIssueStore?.moduleId;
     if (!moduleId) return undefined;
@@ -370,9 +390,9 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
 
   /**
    * change modules array in issue
-   * @param workspaceSlug 
-   * @param projectId 
-   * @param issueId 
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
    * @param addModuleIds array of modules to be added
    * @param removeModuleIds array of modules to be removed
    */
@@ -404,7 +424,7 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
           });
         });
       });
-      if(originalModuleIds){
+      if (originalModuleIds) {
         // update the root issue map with the new module ids
         let currentModuleIds = concat([...originalModuleIds], addModuleIds);
         currentModuleIds = pull(currentModuleIds, ...removeModuleIds);
@@ -420,7 +440,6 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
       if (!isEmpty(removeModuleIds)) {
         await this.moduleService.removeModulesFromIssueBulk(workspaceSlug, projectId, issueId, removeModuleIds);
       }
-
     } catch (error) {
       // revert the issue back to its original module ids
       set(this.rootStore.issues.issuesMap, [issueId, "module_ids"], originalModuleIds);
diff --git a/web/store/issue/project/issue.store.ts b/web/store/issue/project/issue.store.ts
index 6e137b9d86..8591f494c9 100644
--- a/web/store/issue/project/issue.store.ts
+++ b/web/store/issue/project/issue.store.ts
@@ -5,6 +5,8 @@ import update from "lodash/update";
 import { action, makeObservable, observable, runInAction, computed } from "mobx";
 // types
 import { TIssue, TGroupedIssues, TSubGroupedIssues, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
+// helpers
+import { issueCountBasedOnFilters } from "@/helpers/issue.helper";
 // base class
 import { IssueService, IssueArchiveService } from "@/services/issue";
 import { IssueHelperStore } from "../helpers/issue-helper.store";
@@ -17,6 +19,7 @@ export interface IProjectIssues {
   issues: Record<string, string[]>; // Record of project_id as key and issue_ids as value
   viewFlags: ViewFlags;
   // computed
+  issuesCount: number;
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined;
   getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
   // action
@@ -51,6 +54,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       loader: observable.ref,
       issues: observable,
       // computed
+      issuesCount: computed,
       groupedIssueIds: computed,
       // action
       fetchIssues: action,
@@ -68,6 +72,22 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
     this.issueArchiveService = new IssueArchiveService();
   }
 
+  get issuesCount() {
+    let issuesCount = 0;
+
+    const displayFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.displayFilters;
+    const groupedIssueIds = this.groupedIssueIds;
+    if (!displayFilters || !groupedIssueIds) return issuesCount;
+
+    const layout = displayFilters?.layout || undefined;
+    const groupBy = displayFilters?.group_by || undefined;
+    const subGroupBy = displayFilters?.sub_group_by || undefined;
+
+    if (!layout) return issuesCount;
+    issuesCount = issueCountBasedOnFilters(groupedIssueIds, layout, groupBy, subGroupBy);
+    return issuesCount;
+  }
+
   get groupedIssueIds() {
     const projectId = this.rootStore?.projectId;
     if (!projectId) return undefined;