diff --git a/apiserver/plane/api/views/inbox.py b/apiserver/plane/api/views/inbox.py
index 209b7b6581..5e6e4a2158 100644
--- a/apiserver/plane/api/views/inbox.py
+++ b/apiserver/plane/api/views/inbox.py
@@ -272,6 +272,9 @@ class InboxIssueAPIEndpoint(BaseAPIView):
             serializer = InboxIssueSerializer(
                 inbox_issue, data=request.data, partial=True
             )
+            current_instance = json.dumps(
+                InboxIssueSerializer(inbox_issue).data, cls=DjangoJSONEncoder
+            )
 
             if serializer.is_valid():
                 serializer.save()
@@ -311,6 +314,21 @@ class InboxIssueAPIEndpoint(BaseAPIView):
                             issue.state = state
                             issue.save()
 
+                # create a activity for status change
+                issue_activity.delay(
+                    type="inbox.activity.created",
+                    requested_data=json.dumps(
+                        request.data, cls=DjangoJSONEncoder
+                    ),
+                    actor_id=str(request.user.id),
+                    issue_id=str(issue_id),
+                    project_id=str(project_id),
+                    current_instance=current_instance,
+                    epoch=int(timezone.now().timestamp()),
+                    notification=False,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
diff --git a/apiserver/plane/app/views/inbox/base.py b/apiserver/plane/app/views/inbox/base.py
index e08434a6de..8e433a127c 100644
--- a/apiserver/plane/app/views/inbox/base.py
+++ b/apiserver/plane/app/views/inbox/base.py
@@ -391,7 +391,9 @@ class InboxIssueViewSet(BaseViewSet):
             serializer = InboxIssueSerializer(
                 inbox_issue, data=request.data, partial=True
             )
-
+            current_instance = json.dumps(
+                InboxIssueSerializer(inbox_issue).data, cls=DjangoJSONEncoder
+            )
             if serializer.is_valid():
                 serializer.save()
                 # Update the issue state if the issue is rejected or marked as duplicate
@@ -429,6 +431,21 @@ class InboxIssueViewSet(BaseViewSet):
                         if state is not None:
                             issue.state = state
                             issue.save()
+                # create a activity for status change
+                issue_activity.delay(
+                    type="inbox.activity.created",
+                    requested_data=json.dumps(
+                        request.data, cls=DjangoJSONEncoder
+                    ),
+                    actor_id=str(request.user.id),
+                    issue_id=str(issue_id),
+                    project_id=str(project_id),
+                    current_instance=current_instance,
+                    epoch=int(timezone.now().timestamp()),
+                    notification=False,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+
                 inbox_issue = (
                     InboxIssue.objects.filter(
                         inbox_id=inbox_id.id,
diff --git a/apiserver/plane/app/views/page/base.py b/apiserver/plane/app/views/page/base.py
index 4076a53b19..29dc2dbf5c 100644
--- a/apiserver/plane/app/views/page/base.py
+++ b/apiserver/plane/app/views/page/base.py
@@ -1,6 +1,7 @@
 # Python imports
 import json
 from datetime import datetime
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Django imports
 from django.db import connection
@@ -142,6 +143,7 @@ class PageViewSet(BaseViewSet):
             serializer = PageDetailSerializer(
                 page, data=request.data, partial=True
             )
+            page_description = page.description_html
             if serializer.is_valid():
                 serializer.save()
                 # capture the page transaction
@@ -150,11 +152,13 @@ class PageViewSet(BaseViewSet):
                         new_value=request.data,
                         old_value=json.dumps(
                             {
-                                "description_html": page.description_html,
-                            }
+                                "description_html": page_description,
+                            },
+                            cls=DjangoJSONEncoder,
                         ),
                         page_id=pk,
                     )
+
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
diff --git a/apiserver/plane/bgtasks/dummy_data_task.py b/apiserver/plane/bgtasks/dummy_data_task.py
index 7ff110e6f5..e76cdac224 100644
--- a/apiserver/plane/bgtasks/dummy_data_task.py
+++ b/apiserver/plane/bgtasks/dummy_data_task.py
@@ -1,4 +1,5 @@
 # Python imports
+import uuid
 import random
 from datetime import datetime, timedelta
 
@@ -36,9 +37,11 @@ from plane.db.models import (
 def create_project(workspace, user_id):
     fake = Faker()
     name = fake.name()
+    unique_id = str(uuid.uuid4())[:5] 
+
     project = Project.objects.create(
         workspace=workspace,
-        name=name,
+        name=f"{name}_{unique_id}",
         identifier=name[
             : random.randint(2, 12 if len(name) - 1 >= 12 else len(name) - 1)
         ].upper(),
diff --git a/apiserver/plane/bgtasks/issue_activites_task.py b/apiserver/plane/bgtasks/issue_activites_task.py
index 9a4e57a49f..2d55d55796 100644
--- a/apiserver/plane/bgtasks/issue_activites_task.py
+++ b/apiserver/plane/bgtasks/issue_activites_task.py
@@ -1553,6 +1553,46 @@ def delete_draft_issue_activity(
     )
 
 
+def create_inbox_activity(
+    requested_data,
+    current_instance,
+    issue_id,
+    project_id,
+    workspace_id,
+    actor_id,
+    issue_activities,
+    epoch,
+):
+    requested_data = (
+        json.loads(requested_data) if requested_data is not None else None
+    )
+    current_instance = (
+        json.loads(current_instance) if current_instance is not None else None
+    )
+    status_dict = {
+        -2: "Pending",
+        -1: "Rejected",
+        0: "Snoozed",
+        1: "Accepted",
+        2: "Duplicate",
+    }
+    if requested_data.get("status") is not None:
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment="updated the inbox status",
+                field="inbox",
+                verb=requested_data.get("status"),
+                actor_id=actor_id,
+                epoch=epoch,
+                old_value=status_dict.get(current_instance.get("status")),
+                new_value=status_dict.get(requested_data.get("status")),
+            )
+        )
+
+
 # Receive message from room group
 @shared_task
 def issue_activity(
@@ -1613,6 +1653,7 @@ def issue_activity(
             "issue_draft.activity.created": create_draft_issue_activity,
             "issue_draft.activity.updated": update_draft_issue_activity,
             "issue_draft.activity.deleted": delete_draft_issue_activity,
+            "inbox.activity.created": create_inbox_activity,
         }
 
         func = ACTIVITY_MAPPER.get(type)
diff --git a/apiserver/plane/bgtasks/page_transaction_task.py b/apiserver/plane/bgtasks/page_transaction_task.py
index 57f4f644e4..eceb3693e7 100644
--- a/apiserver/plane/bgtasks/page_transaction_task.py
+++ b/apiserver/plane/bgtasks/page_transaction_task.py
@@ -37,10 +37,10 @@ def page_transaction(new_value, old_value, page_id):
     page = Page.objects.get(pk=page_id)
     new_page_mention = PageLog.objects.filter(page_id=page_id).exists()
 
-    old_value = json.loads(old_value)
+    old_value = json.loads(old_value) if old_value else {}
 
     new_transactions = []
-    deleted_transaction_ids = set() 
+    deleted_transaction_ids = set()
 
     # TODO - Add "issue-embed-component", "img", "todo" components
     components = ["mention-component"]
@@ -49,8 +49,8 @@ def page_transaction(new_value, old_value, page_id):
         new_mentions = extract_components(new_value, component)
 
         new_mentions_ids = {mention["id"] for mention in new_mentions}
-        old_mention_ids = {mention["id"] for mention in old_mentions} 
-        deleted_transaction_ids.update(old_mention_ids - new_mentions_ids)  
+        old_mention_ids = {mention["id"] for mention in old_mentions}
+        deleted_transaction_ids.update(old_mention_ids - new_mentions_ids)
 
         new_transactions.extend(
             PageLog(
@@ -68,9 +68,9 @@ def page_transaction(new_value, old_value, page_id):
         )
 
     # Create new PageLog objects for new transactions
-    PageLog.objects.bulk_create(new_transactions, batch_size=10, ignore_conflicts=True)
+    PageLog.objects.bulk_create(
+        new_transactions, batch_size=10, ignore_conflicts=True
+    )
 
     # Delete the removed transactions
-    PageLog.objects.filter(
-        transaction__in=deleted_transaction_ids
-    ).delete()
+    PageLog.objects.filter(transaction__in=deleted_transaction_ids).delete()
diff --git a/packages/types/src/pragmatic.d.ts b/packages/types/src/pragmatic.d.ts
index ca47e2d37a..439e2b54fb 100644
--- a/packages/types/src/pragmatic.d.ts
+++ b/packages/types/src/pragmatic.d.ts
@@ -8,18 +8,27 @@ export type TDropTargetMiscellaneousData = {
   isActiveDueToStickiness: boolean;
 };
 
-export interface IPragmaticDropPayload {
-  location: {
-    initial: {
-      dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
-    };
-    current: {
-      dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
-    };
-    previous: {
-      dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
-    };
+export interface IPragmaticPayloadLocation {
+  initial: {
+    dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
   };
+  current: {
+    dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
+  };
+  previous: {
+    dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
+  };
+}
+
+export interface IPragmaticDropPayload {
+  location: IPragmaticPayloadLocation;
   source: TDropTarget;
   self: TDropTarget & TDropTargetMiscellaneousData;
 }
+
+export type InstructionType =
+  | "reparent"
+  | "reorder-above"
+  | "reorder-below"
+  | "make-child"
+  | "instruction-blocked";
\ No newline at end of file
diff --git a/packages/ui/src/drop-indicator.tsx b/packages/ui/src/drop-indicator.tsx
index 228c1a3301..7ffc83a4ba 100644
--- a/packages/ui/src/drop-indicator.tsx
+++ b/packages/ui/src/drop-indicator.tsx
@@ -3,9 +3,12 @@ import { cn } from "../helpers";
 
 type Props = {
   isVisible: boolean;
+  classNames?: string;
 };
 
 export const DropIndicator = (props: Props) => {
+  const { isVisible, classNames = "" } = props;
+
   return (
     <div
       className={cn(
@@ -13,8 +16,9 @@ export const DropIndicator = (props: Props) => {
     before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded
     after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded`,
         {
-          "bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": props.isVisible,
-        }
+          "bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": isVisible,
+        },
+        classNames
       )}
     />
   );
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index 271b76d83a..de225d68f3 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -1,6 +1,8 @@
-import * as React from "react";
+import React, { useRef } from "react";
 // helpers
 import { cn } from "../../helpers";
+// hooks
+import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea";
 
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   mode?: "primary" | "transparent";
@@ -8,21 +10,6 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   className?: string;
 }
 
-// Updates the height of a <textarea> when the value changes.
-const useAutoSizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
-  React.useEffect(() => {
-    if (textAreaRef) {
-      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
-      textAreaRef.style.height = "0px";
-      const scrollHeight = textAreaRef.scrollHeight;
-
-      // We then set the height directly, outside of the render loop
-      // Trying to set this with state or a ref will product an incorrect value.
-      textAreaRef.style.height = scrollHeight + "px";
-    }
-  }, [textAreaRef, value]);
-};
-
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
   const {
     id,
@@ -35,10 +22,10 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
     className = "",
     ...rest
   } = props;
-
-  const textAreaRef = React.useRef<any>(ref);
-
-  useAutoSizeTextArea(textAreaRef?.current, value);
+  // refs
+  const textAreaRef = useRef<any>(ref);
+  // auto re-size
+  useAutoResizeTextArea(textAreaRef);
 
   return (
     <textarea
diff --git a/packages/ui/src/hooks/use-auto-resize-textarea.ts b/packages/ui/src/hooks/use-auto-resize-textarea.ts
new file mode 100644
index 0000000000..a1b907a608
--- /dev/null
+++ b/packages/ui/src/hooks/use-auto-resize-textarea.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+export const useAutoResizeTextArea = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
+  useEffect(() => {
+    const textArea = textAreaRef.current;
+    if (!textArea) return;
+
+    const resizeTextArea = () => {
+      textArea.style.height = "auto";
+      const computedHeight = textArea.scrollHeight + "px";
+      textArea.style.height = computedHeight;
+    };
+
+    const handleInput = () => resizeTextArea();
+
+    // resize on mount
+    resizeTextArea();
+
+    textArea.addEventListener("input", handleInput);
+    return () => {
+      textArea.removeEventListener("input", handleInput);
+    };
+  }, [textAreaRef]);
+};
diff --git a/web/components/cycles/quick-actions.tsx b/web/components/cycles/quick-actions.tsx
index 33a7df8360..9ba012cc42 100644
--- a/web/components/cycles/quick-actions.tsx
+++ b/web/components/cycles/quick-actions.tsx
@@ -168,15 +168,14 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
             </span>
           </CustomMenu.MenuItem>
         )}
+        <hr className="my-2 border-custom-border-200" />
         {!isCompleted && isEditingAllowed && (
-          <div className="border-t pt-1 mt-1">
-            <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-              <span className="flex items-center justify-start gap-2">
-                <Trash2 className="h-3 w-3" />
-                <span>Delete cycle</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </div>
+          <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+            <span className="flex items-center justify-start gap-2">
+              <Trash2 className="h-3 w-3" />
+              <span>Delete cycle</span>
+            </span>
+          </CustomMenu.MenuItem>
         )}
       </CustomMenu>
     </>
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index 64c370d17f..267dad5810 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -13,7 +13,7 @@ import { FiltersDropdown } from "@/components/issues";
 import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 import { cn } from "@/helpers/common.helper";
-import { useApplication, useEventTracker, useMember, useProject, useProjectFilter, useUser } from "@/hooks/store";
+import { useApplication, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 export const ProjectsHeader = observer(() => {
@@ -30,7 +30,6 @@ export const ProjectsHeader = observer(() => {
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const { workspaceProjectIds } = useProject();
   const {
     currentWorkspaceDisplayFilters: displayFilters,
     currentWorkspaceFilters: filters,
@@ -89,52 +88,50 @@ export const ProjectsHeader = observer(() => {
         </div>
       </div>
       <div className="w-full flex items-center justify-end gap-3">
-        {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className="flex items-center">
-            {!isSearchOpen && (
-              <button
-                type="button"
-                className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
-                onClick={() => {
-                  setIsSearchOpen(true);
-                  inputRef.current?.focus();
-                }}
-              >
-                <Search className="h-3.5 w-3.5" />
-              </button>
-            )}
-            <div
-              className={cn(
-                "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
-                {
-                  "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
-                }
-              )}
+        <div className="flex items-center">
+          {!isSearchOpen && (
+            <button
+              type="button"
+              className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+              onClick={() => {
+                setIsSearchOpen(true);
+                inputRef.current?.focus();
+              }}
             >
               <Search className="h-3.5 w-3.5" />
-              <input
-                ref={inputRef}
-                className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 focus:outline-none"
-                placeholder="Search"
-                value={searchQuery}
-                onChange={(e) => updateSearchQuery(e.target.value)}
-                onKeyDown={handleInputKeyDown}
-              />
-              {isSearchOpen && (
-                <button
-                  type="button"
-                  className="grid place-items-center"
-                  onClick={() => {
-                    updateSearchQuery("");
-                    setIsSearchOpen(false);
-                  }}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              )}
-            </div>
+            </button>
+          )}
+          <div
+            className={cn(
+              "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+              {
+                "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+              }
+            )}
+          >
+            <Search className="h-3.5 w-3.5" />
+            <input
+              ref={inputRef}
+              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              onChange={(e) => updateSearchQuery(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+            />
+            {isSearchOpen && (
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  updateSearchQuery("");
+                  setIsSearchOpen(false);
+                }}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
           </div>
-        )}
+        </div>
         <ProjectOrderByDropdown
           value={displayFilters?.order_by}
           onChange={(val) => {
diff --git a/web/components/inbox/inbox-filter/sorting/order-by.tsx b/web/components/inbox/inbox-filter/sorting/order-by.tsx
index c01c9977ea..4eb9dde225 100644
--- a/web/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/web/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -42,7 +42,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
           {inboxSorting?.order_by?.includes(option.key) && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2" />
+      <hr className="my-2 border-custom-border-200" />
       {INBOX_ISSUE_SORT_BY_OPTIONS.map((option) => (
         <CustomMenu.MenuItem
           key={option.key}
diff --git a/web/components/inbox/modals/create-edit-modal/edit-root.tsx b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
index f0e66c5035..7747245060 100644
--- a/web/components/inbox/modals/create-edit-modal/edit-root.tsx
+++ b/web/components/inbox/modals/create-edit-modal/edit-root.tsx
@@ -77,7 +77,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
       cycle_id: formData?.cycle_id || "",
       module_ids: formData?.module_ids || [],
       estimate_point: formData?.estimate_point || undefined,
-      parent_id: formData?.parent_id || "",
+      parent_id: formData?.parent_id || null,
     };
     setFormSubmitting(true);
 
diff --git a/web/components/inbox/modals/create-edit-modal/issue-properties.tsx b/web/components/inbox/modals/create-edit-modal/issue-properties.tsx
index 8e2eda1cc2..e55834f6e0 100644
--- a/web/components/inbox/modals/create-edit-modal/issue-properties.tsx
+++ b/web/components/inbox/modals/create-edit-modal/issue-properties.tsx
@@ -177,7 +177,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
               setSelectedParentIssue(issue);
             }}
             projectId={projectId}
-            issueId={data?.id}
+            issueId={undefined}
           />
         </>
       )}
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
new file mode 100644
index 0000000000..c51c647a9c
--- /dev/null
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
@@ -0,0 +1,42 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Inbox } from "lucide-react";
+import { useIssueDetail } from "@/hooks/store";
+// components
+import { IssueActivityBlockComponent } from "./";
+// icons
+
+type TIssueInboxActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  const getInboxActivityMessage = () => {
+    switch (activity?.verb) {
+      case "-1":
+        return "declined this issue from inbox.";
+      case "0":
+        return "snoozed this issue.";
+      case "1":
+        return "accepted this issue from inbox.";
+      case "2":
+        return "declined this issue from inbox by marking a duplicate issue.";
+      default:
+        return "updated inbox issue status.";
+    }
+  };
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent icon={<Inbox className="h-4 w-4 flex-shrink-0" />} activityId={activityId} ends={ends}>
+      <>{getInboxActivityMessage()}</>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/index.ts b/web/components/issues/issue-detail/issue-activity/activity/actions/index.ts
index 02108d70b1..7b326aaf9a 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/actions/index.ts
+++ b/web/components/issues/issue-detail/issue-activity/activity/actions/index.ts
@@ -15,6 +15,7 @@ export * from "./label";
 export * from "./link";
 export * from "./attachment";
 export * from "./archived-at";
+export * from "./inbox";
 
 // helpers
 export * from "./helpers/activity-block";
diff --git a/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx b/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
index 42d23eba58..9cdf7999b4 100644
--- a/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
+++ b/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
@@ -21,6 +21,7 @@ import {
   IssueLinkActivity,
   IssueAttachmentActivity,
   IssueArchivedAtActivity,
+  IssueInboxActivity,
 } from "./actions";
 
 type TIssueActivityList = {
@@ -74,6 +75,8 @@ export const IssueActivityList: FC<TIssueActivityList> = observer((props) => {
       return <IssueAttachmentActivity {...componentDefaultProps} showIssue={false} />;
     case "archived_at":
       return <IssueArchivedAtActivity {...componentDefaultProps} />;
+    case "inbox":
+      return <IssueInboxActivity {...componentDefaultProps} />;
     default:
       return <></>;
   }
diff --git a/web/components/labels/label-block/drag-handle.tsx b/web/components/labels/label-block/drag-handle.tsx
index a71637bb94..64aaa075f6 100644
--- a/web/components/labels/label-block/drag-handle.tsx
+++ b/web/components/labels/label-block/drag-handle.tsx
@@ -1,24 +1,25 @@
-import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
+import { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
 
 interface IDragHandle {
   isDragging: boolean;
-  dragHandleProps: DraggableProvidedDragHandleProps;
 }
 
-export const DragHandle = (props: IDragHandle) => {
-  const { isDragging, dragHandleProps } = props;
+export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
+  const { isDragging } = props;
 
   return (
     <button
       type="button"
-      className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 ${
+      className={`mr-1 flex flex-shrink-0 rounded text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
         isDragging ? "opacity-100" : "opacity-0"
       }`}
-      {...dragHandleProps}
+      ref={ref}
     >
       <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
       <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
     </button>
   );
-};
+});
+
+DragHandle.displayName = "DragHandle";
diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx
index d154060593..e3236c91d2 100644
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@@ -1,5 +1,4 @@
-import { useRef, useState } from "react";
-import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
+import { MutableRefObject, useRef, useState } from "react";
 import { LucideIcon, X } from "lucide-react";
 import { IIssueLabel } from "@plane/types";
 //ui
@@ -24,13 +23,13 @@ interface ILabelItemBlock {
   label: IIssueLabel;
   isDragging: boolean;
   customMenuItems: ICustomMenuItem[];
-  dragHandleProps: DraggableProvidedDragHandleProps;
   handleLabelDelete: (label: IIssueLabel) => void;
   isLabelGroup?: boolean;
+  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
 }
 
 export const LabelItemBlock = (props: ILabelItemBlock) => {
-  const { label, isDragging, customMenuItems, dragHandleProps, handleLabelDelete, isLabelGroup } = props;
+  const { label, isDragging, customMenuItems, handleLabelDelete, isLabelGroup, dragHandleRef } = props;
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   // refs
@@ -41,7 +40,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
   return (
     <div className="group flex items-center">
       <div className="flex items-center">
-        <DragHandle isDragging={isDragging} dragHandleProps={dragHandleProps} />
+        <DragHandle isDragging={isDragging} ref={dragHandleRef} />
         <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
       </div>
 
diff --git a/web/components/labels/label-drag-n-drop-HOC.tsx b/web/components/labels/label-drag-n-drop-HOC.tsx
new file mode 100644
index 0000000000..3898d6b7a3
--- /dev/null
+++ b/web/components/labels/label-drag-n-drop-HOC.tsx
@@ -0,0 +1,161 @@
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { createRoot } from "react-dom/client";
+// types
+import { IIssueLabel, InstructionType } from "@plane/types";
+// ui
+import { DropIndicator } from "@plane/ui";
+// components
+import { LabelName } from "./label-block/label-name";
+import { TargetData, getCanDrop, getInstructionFromPayload } from "./label-utils";
+
+type LabelDragPreviewProps = {
+  label: IIssueLabel;
+  isGroup: boolean;
+};
+
+export const LabelDragPreview = (props: LabelDragPreviewProps) => {
+  const { label, isGroup } = props;
+
+  return (
+    <div className="py-3 pl-2 pr-4 border-[1px] border-custom-border-200 bg-custom-background-100">
+      <LabelName name={label.name} color={label.color} isGroup={isGroup} />
+    </div>
+  );
+};
+
+type Props = {
+  label: IIssueLabel;
+  isGroup: boolean;
+  isChild: boolean;
+  isLastChild: boolean;
+  children: (
+    isDragging: boolean,
+    isDroppingInLabel: boolean,
+    dragHandleRef: MutableRefObject<HTMLButtonElement | null>
+  ) => JSX.Element;
+  onDrop: (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => void;
+};
+
+export const LabelDndHOC = observer((props: Props) => {
+  const { label, isGroup, isChild, isLastChild, children, onDrop } = props;
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  // refs
+  const labelRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    const element = labelRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        dragHandle: dragHandleElement ?? undefined,
+        getInitialData: () => ({ id: label?.id, parentId: label?.parent, isGroup, isChild }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(<LabelDragPreview label={label} isGroup={isGroup} />);
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => getCanDrop(source, label, isChild),
+        getData: ({ input, element }) => {
+          const data = { id: label?.id, parentId: label?.parent, isGroup, isChild };
+
+          const blockedStates: InstructionType[] = [];
+
+          // if is currently a child then block make-child instruction
+          if (isChild) blockedStates.push("make-child");
+          // if is currently is not a last child then block reorder-below instruction
+          if (!isLastChild) blockedStates.push("reorder-below");
+
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: isChild ? 1 : 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
+        },
+        onDrag: ({ self, source, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
+          setInstruction(instruction);
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ source, location }) => {
+          setInstruction(undefined);
+
+          const dropTargets = location?.current?.dropTargets ?? [];
+
+          if (isChild || !dropTargets || dropTargets.length <= 0) return;
+
+          // if the label is dropped on both a child and it's parent at the same time then get only the child's drop target
+          const dropTarget =
+            dropTargets.length > 1 ? dropTargets.find((target) => target?.data?.isChild) : dropTargets[0];
+
+          let parentId: string | null = null,
+            dropAtEndOfList = false;
+
+          const dropTargetData = dropTarget?.data as TargetData;
+
+          if (!dropTarget || !dropTargetData) return;
+
+          // get possible instructions for the dropTarget
+          const instruction = getInstructionFromPayload(dropTarget, source, location);
+
+          // if instruction is make child the set parentId as current dropTarget Id or else set it as dropTarget's parentId
+          parentId = instruction === "make-child" ? dropTargetData.id : dropTargetData.parentId;
+          // if instruction is any other than make-child, i.e., reorder-above and reorder-below then set the droppedId as dropTarget's id
+          const droppedLabelId = instruction !== "make-child" ? dropTargetData.id : undefined;
+          // if instruction is to reorder-below that is enabled only for end of the last items in the list then dropAtEndOfList as true
+          if (instruction === "reorder-below") dropAtEndOfList = true;
+
+          const sourceData = source.data as TargetData;
+          if (sourceData.id) onDrop(sourceData.id as string, parentId, droppedLabelId, dropAtEndOfList);
+        },
+      })
+    );
+  }, [labelRef?.current, dragHandleRef?.current, label, isChild, isGroup, isLastChild, onDrop]);
+
+  const isMakeChild = instruction == "make-child";
+
+  return (
+    <div ref={labelRef}>
+      <DropIndicator classNames="my-1" isVisible={instruction === "reorder-above"} />
+      {children(isDragging, isMakeChild, dragHandleRef)}
+      {isLastChild && <DropIndicator classNames="my-1" isVisible={instruction === "reorder-below"} />}
+    </div>
+  );
+});
diff --git a/web/components/labels/label-utils.ts b/web/components/labels/label-utils.ts
new file mode 100644
index 0000000000..1919e53f3d
--- /dev/null
+++ b/web/components/labels/label-utils.ts
@@ -0,0 +1,67 @@
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { IIssueLabel, IPragmaticPayloadLocation, InstructionType, TDropTarget } from "@plane/types";
+
+export type TargetData = {
+  id: string;
+  parentId: string | null;
+  isGroup: boolean;
+  isChild: boolean;
+};
+
+/**
+ * extracts the Payload and translates the instruction for the current dropTarget based on drag and drop payload
+ * @param dropTarget dropTarget for which the instruction is required
+ * @param source the dragging label data that is being dragged on the dropTarget
+ * @param location location includes the data of all the dropTargets the source is being dragged on
+ * @returns Instruction for dropTarget
+ */
+export const getInstructionFromPayload = (
+  dropTarget: TDropTarget,
+  source: TDropTarget,
+  location: IPragmaticPayloadLocation
+): InstructionType | undefined => {
+  const dropTargetData = dropTarget?.data as TargetData;
+  const sourceData = source?.data as TargetData;
+
+  const allDropTargets = location?.current?.dropTargets;
+
+  // if all the dropTargets are greater than 1 meaning the source is being dragged on a group and its child at the same time
+  // and also if the dropTarget in question is also a group then, it should be a child of the current Droptarget
+  if (allDropTargets?.length > 1 && dropTargetData?.isGroup) return "make-child";
+
+  if (!dropTargetData || !sourceData) return undefined;
+
+  let instruction = extractInstruction(dropTargetData)?.type;
+
+  // If the instruction is blocked then set an instruction based on if dropTarget it is a child or not
+  if (instruction === "instruction-blocked") {
+    instruction = dropTargetData.isChild ? "reorder-above" : "make-child";
+  }
+
+  // if source that is being dragged is a group. A group cannon be a child of any other label,
+  // hence if current instruction is to be a child of dropTarget then reorder-above instead
+  if (instruction === "make-child" && sourceData.isGroup) instruction = "reorder-above";
+
+  return instruction;
+};
+
+/**
+ * This provides a boolean to indicate if the label can be dropped onto the droptarget
+ * @param source
+ * @param label
+ * @param isCurrentChild if the dropTarget is a child
+ * @returns
+ */
+export const getCanDrop = (source: TDropTarget, label: IIssueLabel | undefined, isCurrentChild: boolean) => {
+  const sourceData = source?.data;
+
+  if (!sourceData) return false;
+
+  // a label cannot be dropped on to itself and it's parent cannon be dropped on the child
+  if (sourceData.id === label?.id || sourceData.id === label?.parent) return false;
+
+  // if current dropTarget is a child and the label being dropped is a group then don't enable drop
+  if (isCurrentChild && sourceData.isGroup) return false;
+
+  return true;
+};
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
index 0a3efc9df6..3302cb6bf1 100644
--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -1,51 +1,38 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
-import {
-  Draggable,
-  DraggableProvided,
-  DraggableProvidedDragHandleProps,
-  DraggableStateSnapshot,
-  Droppable,
-} from "@hello-pangea/dnd";
 import { observer } from "mobx-react-lite";
 import { ChevronDown, Pencil, Trash2 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-
 // store
 // icons
-import { IIssueLabel } from "@plane/types";
 // types
-import useDraggableInPortal from "@/hooks/use-draggable-portal";
+import { IIssueLabel } from "@plane/types";
+// components
 import { CreateUpdateLabelInline } from "./create-update-label-inline";
 import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
+import { LabelDndHOC } from "./label-drag-n-drop-HOC";
 import { ProjectSettingLabelItem } from "./project-setting-label-item";
 
 type Props = {
   label: IIssueLabel;
   labelChildren: IIssueLabel[];
   handleLabelDelete: (label: IIssueLabel) => void;
-  dragHandleProps: DraggableProvidedDragHandleProps;
-  draggableSnapshot: DraggableStateSnapshot;
   isUpdating: boolean;
   setIsUpdating: Dispatch<SetStateAction<boolean>>;
-  isDropDisabled: boolean;
+  isLastChild: boolean;
+  onDrop: (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => void;
 };
 
 export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
-  const {
-    label,
-    labelChildren,
-    handleLabelDelete,
-    draggableSnapshot: groupDragSnapshot,
-    dragHandleProps,
-    isUpdating,
-    setIsUpdating,
-    isDropDisabled,
-  } = props;
+  const { label, labelChildren, handleLabelDelete, isUpdating, setIsUpdating, isLastChild, onDrop } = props;
 
+  // states
   const [isEditLabelForm, setEditLabelForm] = useState(false);
 
-  const renderDraggable = useDraggableInPortal();
-
   const customMenuItems: ICustomMenuItem[] = [
     {
       CustomIcon: Pencil,
@@ -67,101 +54,89 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
   ];
 
   return (
-    <Disclosure
-      as="div"
-      className={`rounded border-[0.5px] border-custom-border-200 text-custom-text-100 ${
-        groupDragSnapshot.combineTargetFor ? "bg-custom-background-80" : "bg-custom-background-100"
-      }`}
-      defaultOpen
-    >
-      {({ open }) => (
-        <>
-          <Droppable
-            key={`label.group.droppable.${label.id}`}
-            droppableId={`label.group.droppable.${label.id}`}
-            isDropDisabled={groupDragSnapshot.isDragging || isUpdating || isDropDisabled}
+    <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
+      {(isDragging, isDroppingInLabel, dragHandleRef) => (
+        <div
+          className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+        >
+          <Disclosure
+            as="div"
+            className={`rounded  text-custom-text-100 ${
+              !isDroppingInLabel ? "border-[0.5px] border-custom-border-200" : ""
+            } ${isDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
+            defaultOpen
           >
-            {(droppableProvided) => (
-              <div
-                className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}
-                ref={droppableProvided.innerRef}
-                {...droppableProvided.droppableProps}
-              >
-                <>
-                  <div className="relative flex cursor-pointer items-center justify-between gap-2">
-                    {isEditLabelForm ? (
-                      <CreateUpdateLabelInline
-                        labelForm={isEditLabelForm}
-                        setLabelForm={setEditLabelForm}
-                        isUpdating
-                        labelToUpdate={label}
-                        onClose={() => {
-                          setEditLabelForm(false);
-                          setIsUpdating(false);
-                        }}
-                      />
-                    ) : (
-                      <LabelItemBlock
-                        label={label}
-                        isDragging={groupDragSnapshot.isDragging}
-                        customMenuItems={customMenuItems}
-                        dragHandleProps={dragHandleProps}
-                        handleLabelDelete={handleLabelDelete}
-                        isLabelGroup
-                      />
-                    )}
-
-                    <Disclosure.Button>
-                      <span>
-                        <ChevronDown
-                          className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
+            {({ open }) => (
+              <>
+                <div className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
+                  <>
+                    <div className="relative flex cursor-pointer items-center justify-between gap-2">
+                      {isEditLabelForm ? (
+                        <CreateUpdateLabelInline
+                          labelForm={isEditLabelForm}
+                          setLabelForm={setEditLabelForm}
+                          isUpdating
+                          labelToUpdate={label}
+                          onClose={() => {
+                            setEditLabelForm(false);
+                            setIsUpdating(false);
+                          }}
                         />
-                      </span>
-                    </Disclosure.Button>
-                  </div>
-                  <Transition
-                    show={open}
-                    enter="transition duration-100 ease-out"
-                    enterFrom="transform opacity-0"
-                    enterTo="transform opacity-100"
-                    leave="transition duration-75 ease-out"
-                    leaveFrom="transform opacity-100"
-                    leaveTo="transform opacity-0"
-                  >
-                    <Disclosure.Panel>
-                      <div className="ml-6 mt-2.5">
-                        {labelChildren.map((child, index) => (
-                          <div key={child.id} className={`group flex w-full items-center text-sm`}>
-                            <Draggable
-                              draggableId={`label.draggable.${child.id}`}
-                              index={index}
-                              isDragDisabled={groupDragSnapshot.isDragging || isUpdating}
-                            >
-                              {renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
-                                <div className="w-full py-1" ref={provided.innerRef} {...provided.draggableProps}>
-                                  <ProjectSettingLabelItem
-                                    label={child}
-                                    handleLabelDelete={() => handleLabelDelete(child)}
-                                    draggableSnapshot={snapshot}
-                                    dragHandleProps={provided.dragHandleProps!}
-                                    setIsUpdating={setIsUpdating}
-                                    isChild
-                                  />
-                                </div>
-                              ))}
-                            </Draggable>
-                          </div>
-                        ))}
-                      </div>
-                    </Disclosure.Panel>
-                  </Transition>
-                  {droppableProvided.placeholder}
-                </>
-              </div>
+                      ) : (
+                        <LabelItemBlock
+                          label={label}
+                          isDragging={isDragging}
+                          customMenuItems={customMenuItems}
+                          handleLabelDelete={handleLabelDelete}
+                          isLabelGroup
+                          dragHandleRef={dragHandleRef}
+                        />
+                      )}
+
+                      <Disclosure.Button>
+                        <span>
+                          <ChevronDown
+                            className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
+                          />
+                        </span>
+                      </Disclosure.Button>
+                    </div>
+                    <Transition
+                      show={open}
+                      enter="transition duration-100 ease-out"
+                      enterFrom="transform opacity-0"
+                      enterTo="transform opacity-100"
+                      leave="transition duration-75 ease-out"
+                      leaveFrom="transform opacity-100"
+                      leaveTo="transform opacity-0"
+                    >
+                      <Disclosure.Panel>
+                        <div className="ml-6">
+                          {labelChildren.map((child, index) => (
+                            <div key={child.id} className={`group flex w-full items-center text-sm`}>
+                              <div className="w-full">
+                                <ProjectSettingLabelItem
+                                  label={child}
+                                  handleLabelDelete={() => handleLabelDelete(child)}
+                                  setIsUpdating={setIsUpdating}
+                                  isParentDragging={isDragging}
+                                  isChild
+                                  isLastChild={index === labelChildren.length - 1}
+                                  onDrop={onDrop}
+                                />
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </>
+                </div>
+              </>
             )}
-          </Droppable>
-        </>
+          </Disclosure>
+        </div>
       )}
-    </Disclosure>
+    </LabelDndHOC>
   );
 });
diff --git a/web/components/labels/project-setting-label-item.tsx b/web/components/labels/project-setting-label-item.tsx
index d8bbee7191..0a596fe413 100644
--- a/web/components/labels/project-setting-label-item.tsx
+++ b/web/components/labels/project-setting-label-item.tsx
@@ -1,27 +1,32 @@
 import React, { Dispatch, SetStateAction, useState } from "react";
-import { DraggableProvidedDragHandleProps, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { useRouter } from "next/router";
 import { X, Pencil } from "lucide-react";
+// types
 import { IIssueLabel } from "@plane/types";
 // hooks
 import { useLabel } from "@/hooks/store";
-// types
 // components
 import { CreateUpdateLabelInline } from "./create-update-label-inline";
 import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
+import { LabelDndHOC } from "./label-drag-n-drop-HOC";
 
 type Props = {
   label: IIssueLabel;
   handleLabelDelete: (label: IIssueLabel) => void;
-  draggableSnapshot: DraggableStateSnapshot;
-  dragHandleProps: DraggableProvidedDragHandleProps;
   setIsUpdating: Dispatch<SetStateAction<boolean>>;
+  isParentDragging?: boolean;
   isChild: boolean;
+  isLastChild: boolean;
+  onDrop: (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => void;
 };
 
 export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
-  const { label, setIsUpdating, handleLabelDelete, draggableSnapshot, dragHandleProps, isChild } = props;
-  const { combineTargetFor, isDragging } = draggableSnapshot;
+  const { label, setIsUpdating, handleLabelDelete, isChild, isLastChild, isParentDragging = false, onDrop } = props;
   // states
   const [isEditLabelForm, setEditLabelForm] = useState(false);
   // router
@@ -59,31 +64,39 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
   ];
 
   return (
-    <div
-      className={`group relative flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 ${
-        !isChild && combineTargetFor ? "bg-custom-background-80" : ""
-      } ${isDragging ? "bg-custom-background-80 shadow-custom-shadow-xs" : ""} bg-custom-background-100 px-1 py-2.5`}
-    >
-      {isEditLabelForm ? (
-        <CreateUpdateLabelInline
-          labelForm={isEditLabelForm}
-          setLabelForm={setEditLabelForm}
-          isUpdating
-          labelToUpdate={label}
-          onClose={() => {
-            setEditLabelForm(false);
-            setIsUpdating(false);
-          }}
-        />
-      ) : (
-        <LabelItemBlock
-          label={label}
-          isDragging={isDragging}
-          customMenuItems={customMenuItems}
-          dragHandleProps={dragHandleProps}
-          handleLabelDelete={handleLabelDelete}
-        />
+    <LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
+      {(isDragging, isDroppingInLabel, dragHandleRef) => (
+        <div
+          className={`rounded ${isDroppingInLabel ? "border-[2px] border-custom-primary-100" : "border-[1.5px] border-transparent"}`}
+        >
+          <div
+            className={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded  ${
+              isDroppingInLabel ? "" : "border-[0.5px] border-custom-border-200"
+            } ${isDragging || isParentDragging ? "bg-custom-background-80" : "bg-custom-background-100"}`}
+          >
+            {isEditLabelForm ? (
+              <CreateUpdateLabelInline
+                labelForm={isEditLabelForm}
+                setLabelForm={setEditLabelForm}
+                isUpdating
+                labelToUpdate={label}
+                onClose={() => {
+                  setEditLabelForm(false);
+                  setIsUpdating(false);
+                }}
+              />
+            ) : (
+              <LabelItemBlock
+                label={label}
+                isDragging={isDragging}
+                customMenuItems={customMenuItems}
+                handleLabelDelete={handleLabelDelete}
+                dragHandleRef={dragHandleRef}
+              />
+            )}
+          </div>
+        </div>
       )}
-    </div>
+    </LabelDndHOC>
   );
 };
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
index bbc4023d10..8de57e8b20 100644
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -1,12 +1,4 @@
 import React, { useState, useRef } from "react";
-import {
-  DragDropContext,
-  Draggable,
-  DraggableProvided,
-  DraggableStateSnapshot,
-  DropResult,
-  Droppable,
-} from "@hello-pangea/dnd";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IIssueLabel } from "@plane/types";
@@ -21,20 +13,16 @@ import {
 } from "@/components/labels";
 import { EmptyStateType } from "@/constants/empty-state";
 import { useLabel } from "@/hooks/store";
-import useDraggableInPortal from "@/hooks/use-draggable-portal";
 // components
 // ui
 // types
 // constants
 
-const LABELS_ROOT = "labels.root";
-
 export const ProjectSettingsLabelList: React.FC = observer(() => {
   // states
   const [showLabelForm, setLabelForm] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabel | null>(null);
-  const [isDraggingGroup, setIsDraggingGroup] = useState(false);
   // refs
   const scrollToRef = useRef<HTMLFormElement>(null);
   // router
@@ -42,44 +30,28 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
-  // portal
-  const renderDraggable = useDraggableInPortal();
 
   const newLabel = () => {
     setIsUpdating(false);
     setLabelForm(true);
   };
 
-  const onDragEnd = (result: DropResult) => {
-    const { combine, draggableId, destination, source } = result;
-
-    // return if dropped outside the DragDropContext
-    if (!combine && !destination) return;
-
-    const childLabel = draggableId.split(".")[2];
-    let parentLabel: string | undefined | null = destination?.droppableId?.split(".")[3];
-    const index = destination?.index || 0;
-
-    const prevParentLabel: string | undefined | null = source?.droppableId?.split(".")[3];
-    const prevIndex = source?.index;
-
-    if (combine && combine.draggableId) parentLabel = combine?.draggableId?.split(".")[2];
-
-    if (destination?.droppableId === LABELS_ROOT) parentLabel = null;
-
-    if (result.reason == "DROP" && childLabel != parentLabel) {
-      if (workspaceSlug && projectId) {
-        updateLabelPosition(
-          workspaceSlug?.toString(),
-          projectId?.toString(),
-          childLabel,
-          parentLabel,
-          index,
-          prevParentLabel == parentLabel,
-          prevIndex
-        );
-        return;
-      }
+  const onDrop = (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => {
+    if (workspaceSlug && projectId) {
+      updateLabelPosition(
+        workspaceSlug?.toString(),
+        projectId?.toString(),
+        draggingLabelId,
+        droppedParentId,
+        droppedLabelId,
+        dropAtEndOfList
+      );
+      return;
     }
   };
 
@@ -118,82 +90,35 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
             </div>
           ) : (
             projectLabelsTree && (
-              <DragDropContext
-                onDragEnd={onDragEnd}
-                autoScrollerOptions={{
-                  startFromPercentage: 1,
-                  disabled: false,
-                  maxScrollAtPercentage: 0,
-                  maxPixelScroll: 2,
-                }}
-              >
-                <Droppable
-                  droppableId={LABELS_ROOT}
-                  isCombineEnabled={!isDraggingGroup}
-                  ignoreContainerClipping
-                  isDropDisabled={isUpdating}
-                >
-                  {(droppableProvided, droppableSnapshot) => (
-                    <div className="mt-3" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-                      {projectLabelsTree.map((label, index) => {
-                        if (label.children && label.children.length) {
-                          return (
-                            <Draggable
-                              key={`label.draggable.${label.id}`}
-                              draggableId={`label.draggable.${label.id}.group`}
-                              index={index}
-                              isDragDisabled={isUpdating}
-                            >
-                              {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
-                                const isGroup = droppableSnapshot.draggingFromThisWith?.split(".")[3] === "group";
-                                setIsDraggingGroup(isGroup);
-
-                                return (
-                                  <div ref={provided.innerRef} {...provided.draggableProps} className="mt-3">
-                                    <ProjectSettingLabelGroup
-                                      key={label.id}
-                                      label={label}
-                                      labelChildren={label.children || []}
-                                      isDropDisabled={isGroup}
-                                      dragHandleProps={provided.dragHandleProps!}
-                                      handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
-                                      draggableSnapshot={snapshot}
-                                      isUpdating={isUpdating}
-                                      setIsUpdating={setIsUpdating}
-                                    />
-                                  </div>
-                                );
-                              }}
-                            </Draggable>
-                          );
-                        }
-                        return (
-                          <Draggable
-                            key={`label.draggable.${label.id}`}
-                            draggableId={`label.draggable.${label.id}`}
-                            index={index}
-                            isDragDisabled={isUpdating}
-                          >
-                            {renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
-                              <div ref={provided.innerRef} {...provided.draggableProps} className="mt-3">
-                                <ProjectSettingLabelItem
-                                  dragHandleProps={provided.dragHandleProps!}
-                                  draggableSnapshot={snapshot}
-                                  label={label}
-                                  setIsUpdating={setIsUpdating}
-                                  handleLabelDelete={(label) => setSelectDeleteLabel(label)}
-                                  isChild={false}
-                                />
-                              </div>
-                            ))}
-                          </Draggable>
-                        );
-                      })}
-                      {droppableProvided.placeholder}
-                    </div>
-                  )}
-                </Droppable>
-              </DragDropContext>
+              <div className="mt-3">
+                {projectLabelsTree.map((label, index) => {
+                  if (label.children && label.children.length) {
+                    return (
+                      <ProjectSettingLabelGroup
+                        key={label.id}
+                        label={label}
+                        labelChildren={label.children || []}
+                        handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
+                        isUpdating={isUpdating}
+                        setIsUpdating={setIsUpdating}
+                        isLastChild={index === projectLabelsTree.length - 1}
+                        onDrop={onDrop}
+                      />
+                    );
+                  }
+                  return (
+                    <ProjectSettingLabelItem
+                      label={label}
+                      key={label.id}
+                      setIsUpdating={setIsUpdating}
+                      handleLabelDelete={(label) => setSelectDeleteLabel(label)}
+                      isChild={false}
+                      isLastChild={index === projectLabelsTree.length - 1}
+                      onDrop={onDrop}
+                    />
+                  );
+                })}
+              </div>
             )
           )
         ) : (
diff --git a/web/components/modules/dropdowns/order-by.tsx b/web/components/modules/dropdowns/order-by.tsx
index dc309a97ac..d6fd3548b2 100644
--- a/web/components/modules/dropdowns/order-by.tsx
+++ b/web/components/modules/dropdowns/order-by.tsx
@@ -46,7 +46,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
           {value?.includes(option.key) && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2" />
+      <hr className="my-2 border-custom-border-200" />
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
index b0ff676092..82d63fdcc3 100644
--- a/web/components/modules/modules-list-view.tsx
+++ b/web/components/modules/modules-list-view.tsx
@@ -1,16 +1,13 @@
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useRouter } from "next/router";
-// hooks
 // components
 import { EmptyState } from "@/components/empty-state";
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
-// ui
 import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
-// assets
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-import { calculateTotalFilters } from "@/helpers/filter.helper";
+// hooks
 import { useApplication, useEventTracker, useModule, useModuleFilter } from "@/hooks/store";
 import AllFiltersImage from "public/empty-state/module/all-filters.svg";
 import NameFilterImage from "public/empty-state/module/name-filter.svg";
@@ -22,14 +19,13 @@ export const ModulesListView: React.FC = observer(() => {
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
   const { setTrackElement } = useEventTracker();
-  const { getFilteredModuleIds, loader } = useModule();
-  const { currentProjectDisplayFilters: displayFilters, searchQuery, currentProjectFilters } = useModuleFilter();
+  const { getProjectModuleIds, getFilteredModuleIds, loader } = useModule();
+  const { currentProjectDisplayFilters: displayFilters, searchQuery } = useModuleFilter();
   // derived values
+  const projectModuleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined;
   const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
 
-  const totalFilters = calculateTotalFilters(currentProjectFilters ?? {});
-
-  if (loader || !filteredModuleIds)
+  if (loader || !projectModuleIds || !filteredModuleIds)
     return (
       <>
         {displayFilters?.layout === "list" && <CycleModuleListLayout />}
@@ -38,7 +34,18 @@ export const ModulesListView: React.FC = observer(() => {
       </>
     );
 
-  if (totalFilters > 0 && filteredModuleIds.length === 0)
+  if (projectModuleIds.length === 0)
+    return (
+      <EmptyState
+        type={EmptyStateType.PROJECT_MODULE}
+        primaryButtonOnClick={() => {
+          setTrackElement("Module empty state");
+          commandPaletteStore.toggleCreateModuleModal(true);
+        }}
+      />
+    );
+
+  if (filteredModuleIds.length === 0)
     return (
       <div className="h-full w-full grid place-items-center">
         <div className="text-center">
@@ -59,55 +66,43 @@ export const ModulesListView: React.FC = observer(() => {
 
   return (
     <>
-      {filteredModuleIds.length > 0 ? (
-        <>
-          {displayFilters?.layout === "list" && (
-            <div className="h-full overflow-y-auto">
-              <div className="flex h-full w-full justify-between">
-                <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
-                  {filteredModuleIds.map((moduleId) => (
-                    <ModuleListItem key={moduleId} moduleId={moduleId} />
-                  ))}
-                </div>
-                <ModulePeekOverview
-                  projectId={projectId?.toString() ?? ""}
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                />
-              </div>
+      {displayFilters?.layout === "list" && (
+        <div className="h-full overflow-y-auto">
+          <div className="flex h-full w-full justify-between">
+            <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
+              {filteredModuleIds.map((moduleId) => (
+                <ModuleListItem key={moduleId} moduleId={moduleId} />
+              ))}
             </div>
-          )}
-          {displayFilters?.layout === "board" && (
-            <div className="h-full w-full">
-              <div className="flex h-full w-full justify-between">
-                <div
-                  className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
-                    peekModule
-                      ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
-                      : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-                  } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
-                >
-                  {filteredModuleIds.map((moduleId) => (
-                    <ModuleCardItem key={moduleId} moduleId={moduleId} />
-                  ))}
-                </div>
-                <ModulePeekOverview
-                  projectId={projectId?.toString() ?? ""}
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                />
-              </div>
-            </div>
-          )}
-          {displayFilters?.layout === "gantt" && <ModulesListGanttChartView />}
-        </>
-      ) : (
-        <EmptyState
-          type={EmptyStateType.PROJECT_MODULE}
-          primaryButtonOnClick={() => {
-            setTrackElement("Module empty state");
-            commandPaletteStore.toggleCreateModuleModal(true);
-          }}
-        />
+            <ModulePeekOverview
+              projectId={projectId?.toString() ?? ""}
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+            />
+          </div>
+        </div>
       )}
+      {displayFilters?.layout === "board" && (
+        <div className="h-full w-full">
+          <div className="flex h-full w-full justify-between">
+            <div
+              className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
+                peekModule
+                  ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                  : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+              } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
+            >
+              {filteredModuleIds.map((moduleId) => (
+                <ModuleCardItem key={moduleId} moduleId={moduleId} />
+              ))}
+            </div>
+            <ModulePeekOverview
+              projectId={projectId?.toString() ?? ""}
+              workspaceSlug={workspaceSlug?.toString() ?? ""}
+            />
+          </div>
+        </div>
+      )}
+      {displayFilters?.layout === "gantt" && <ModulesListGanttChartView />}
     </>
   );
 });
diff --git a/web/components/modules/quick-actions.tsx b/web/components/modules/quick-actions.tsx
index a6938c10a9..a1805937e8 100644
--- a/web/components/modules/quick-actions.tsx
+++ b/web/components/modules/quick-actions.tsx
@@ -163,15 +163,14 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
             </span>
           </CustomMenu.MenuItem>
         )}
+        <hr className="my-2 border-custom-border-200" />
         {isEditingAllowed && (
-          <div className="border-t pt-1 mt-1">
-            <CustomMenu.MenuItem onClick={handleDeleteModule}>
-              <span className="flex items-center justify-start gap-2">
-                <Trash2 className="h-3 w-3" />
-                <span>Delete module</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </div>
+          <CustomMenu.MenuItem onClick={handleDeleteModule}>
+            <span className="flex items-center justify-start gap-2">
+              <Trash2 className="h-3 w-3" />
+              <span>Delete module</span>
+            </span>
+          </CustomMenu.MenuItem>
         )}
       </CustomMenu>
     </>
diff --git a/web/components/pages/editor/editor-body.tsx b/web/components/pages/editor/editor-body.tsx
index 4c1f68cc6f..701c7c3491 100644
--- a/web/components/pages/editor/editor-body.tsx
+++ b/web/components/pages/editor/editor-body.tsx
@@ -121,7 +121,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
         })}
       >
         <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
-          <div className="w-full flex-shrink-0 ml-5">
+          <div className="relative w-full flex-shrink-0 pl-5">
             <PageEditorTitle
               editorRef={editorRef}
               title={pageTitle}
diff --git a/web/components/pages/editor/title.tsx b/web/components/pages/editor/title.tsx
index 8b329e53a4..b5b06069fa 100644
--- a/web/components/pages/editor/title.tsx
+++ b/web/components/pages/editor/title.tsx
@@ -1,8 +1,11 @@
+import { useState } from "react";
 import { observer } from "mobx-react";
 // editor
 import { EditorRefApi } from "@plane/document-editor";
 // ui
 import { TextArea } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 type Props = {
   editorRef: React.RefObject<EditorRefApi>;
@@ -13,27 +16,51 @@ type Props = {
 
 export const PageEditorTitle: React.FC<Props> = observer((props) => {
   const { editorRef, readOnly, title, updateTitle } = props;
+  // states
+  const [isLengthVisible, setIsLengthVisible] = useState(false);
 
   return (
     <>
       {readOnly ? (
         <h6 className="-mt-2 break-words bg-transparent text-4xl font-bold">{title}</h6>
       ) : (
-        <TextArea
-          onChange={(e) => updateTitle(e.target.value)}
-          className="-mt-2 w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
-          style={{
-            lineHeight: "1.2",
-          }}
-          placeholder="Untitled Page"
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              editorRef.current?.setFocusAtPosition(0);
-            }
-          }}
-          value={title}
-        />
+        <>
+          <TextArea
+            onChange={(e) => updateTitle(e.target.value)}
+            className="-mt-2 w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
+            style={{
+              lineHeight: "1.2",
+            }}
+            placeholder="Untitled Page"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                editorRef.current?.setFocusAtPosition(0);
+              }
+            }}
+            value={title}
+            maxLength={255}
+            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={cn({
+                "text-red-500": title.length === 0 || title.length > 255,
+              })}
+            >
+              {title.length}
+            </span>
+            /255
+          </div>
+        </>
       )}
     </>
   );
diff --git a/web/components/pages/list/order-by.tsx b/web/components/pages/list/order-by.tsx
index 5055b68e89..493e5c06ee 100644
--- a/web/components/pages/list/order-by.tsx
+++ b/web/components/pages/list/order-by.tsx
@@ -47,7 +47,7 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
           {sortKey === option.key && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2" />
+      <hr className="my-2 border-custom-border-200" />
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
diff --git a/web/components/project/dropdowns/order-by.tsx b/web/components/project/dropdowns/order-by.tsx
index 048513d08a..c2bf1a87ba 100644
--- a/web/components/project/dropdowns/order-by.tsx
+++ b/web/components/project/dropdowns/order-by.tsx
@@ -49,7 +49,7 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
           {value?.includes(option.key) && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
-      <hr className="my-2" />
+      <hr className="my-2 border-custom-border-200" />
       <CustomMenu.MenuItem
         className="flex items-center justify-between gap-2"
         onClick={() => {
diff --git a/web/helpers/array.helper.ts b/web/helpers/array.helper.ts
index 45b0b5739f..c2799bfa20 100644
--- a/web/helpers/array.helper.ts
+++ b/web/helpers/array.helper.ts
@@ -1,4 +1,4 @@
-import { IIssueLabelTree } from "@plane/types";
+import { IIssueLabel, IIssueLabelTree } from "@plane/types";
 
 export const groupBy = (array: any[], key: string) => {
   const innerKey = key.split("."); // split the key by dot
@@ -77,7 +77,7 @@ export const orderGroupedDataByField = <T>(groupedData: GroupedItems<T>, orderBy
   return groupedData;
 };
 
-export const buildTree = (array: any[], parent = null) => {
+export const buildTree = (array: IIssueLabel[], parent = null) => {
   const tree: IIssueLabelTree[] = [];
 
   array.forEach((item: any) => {
diff --git a/web/package.json b/web/package.json
index fbdb9b07ae..468664f454 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.3",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.3",
     "@hello-pangea/dnd": "^16.3.0",
@@ -63,7 +64,6 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "prettier": "^3.2.5",
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.202",
@@ -74,6 +74,7 @@
     "@types/react-dom": "^18.2.17",
     "@types/uuid": "^8.3.4",
     "eslint-config-custom": "*",
+    "prettier": "^3.2.5",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
     "typescript": "4.7.4"
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 9f4361c96b..cf13b6d257 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -1,4 +1,6 @@
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 // layouts
 import { PageHead } from "@/components/core";
@@ -16,10 +18,25 @@ const LabelsSettingsPage: NextPageWithLayout = observer(() => {
   const { currentProjectDetails } = useProject();
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Labels` : undefined;
 
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // Enable Auto Scroll for Labels list
+  useEffect(() => {
+    const element = scrollableContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [scrollableContainerRef?.current]);
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="h-full w-full gap-10 overflow-y-auto py-8 pr-9">
+      <div ref={scrollableContainerRef} className="h-full w-full gap-10 overflow-y-auto py-8 pr-9">
         <ProjectSettingsLabelList />
       </div>
     </>
diff --git a/web/store/cycle_filter.store.ts b/web/store/cycle_filter.store.ts
index 182ab0251d..ce899cbf30 100644
--- a/web/store/cycle_filter.store.ts
+++ b/web/store/cycle_filter.store.ts
@@ -63,6 +63,7 @@ export class CycleFilterStore implements ICycleFilterStore {
       (projectId) => {
         if (!projectId) return;
         this.initProjectCycleFilters(projectId);
+        this.searchQuery = "";
       }
     );
   }
diff --git a/web/store/label.store.ts b/web/store/label.store.ts
index b91b9db150..3f343f9a4d 100644
--- a/web/store/label.store.ts
+++ b/web/store/label.store.ts
@@ -36,12 +36,11 @@ export interface ILabelStore {
   updateLabelPosition: (
     workspaceSlug: string,
     projectId: string,
-    labelId: string,
-    parentId: string | null | undefined,
-    index: number,
-    isSameParent: boolean,
-    prevIndex: number | undefined
-  ) => Promise<IIssueLabel | undefined>;
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => Promise<void>;
   deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
 }
 
@@ -81,8 +80,8 @@ export class LabelStore implements ILabelStore {
    */
   get workspaceLabels() {
     const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
-    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
-    if (!currentWorkspaceDetails || !this.fetchedMap[worksapceSlug]) return;
+    const workspaceSlug = this.rootStore.app.router.workspaceSlug || "";
+    if (!currentWorkspaceDetails || !this.fetchedMap[workspaceSlug]) return;
     return sortBy(
       Object.values(this.labelMap).filter((label) => label.workspace_id === currentWorkspaceDetails.id),
       "sort_order"
@@ -94,8 +93,8 @@ export class LabelStore implements ILabelStore {
    */
   get projectLabels() {
     const projectId = this.rootStore.app.router.projectId;
-    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
-    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
+    const workspaceSlug = this.rootStore.app.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
     return sortBy(
       Object.values(this.labelMap).filter((label) => label.project_id === projectId),
       "sort_order"
@@ -111,8 +110,8 @@ export class LabelStore implements ILabelStore {
   }
 
   getProjectLabels = computedFn((projectId: string | null) => {
-    const worksapceSlug = this.rootStore.app.router.workspaceSlug || "";
-    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[worksapceSlug])) return;
+    const workspaceSlug = this.rootStore.app.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
     return sortBy(
       Object.values(this.labelMap).filter((label) => label.project_id === projectId),
       "sort_order"
@@ -186,7 +185,7 @@ export class LabelStore implements ILabelStore {
     const originalLabel = this.labelMap[labelId];
     try {
       runInAction(() => {
-        set(this.labelMap, [labelId], { ...this.labelMap[labelId], ...data });
+        set(this.labelMap, [labelId], { ...originalLabel, ...data });
       });
       const response = await this.issueLabelService.patchIssueLabel(workspaceSlug, projectId, labelId, data);
       return response;
@@ -213,50 +212,54 @@ export class LabelStore implements ILabelStore {
   updateLabelPosition = async (
     workspaceSlug: string,
     projectId: string,
-    labelId: string,
-    parentId: string | null | undefined,
-    index: number,
-    isSameParent: boolean,
-    prevIndex: number | undefined
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
   ) => {
-    const currLabel = this.labelMap?.[labelId];
+    const currLabel = this.labelMap?.[draggingLabelId];
     const labelTree = this.projectLabelsTree;
     let currentArray: IIssueLabel[];
 
     if (!currLabel || !labelTree) return;
 
-    const data: Partial<IIssueLabel> = { parent: parentId };
-    //find array in which the label is to be added
-    if (!parentId) currentArray = labelTree;
-    else currentArray = labelTree?.find((label) => label.id === parentId)?.children || [];
+    //If its is dropped in the same parent then, there is not specific label on which it is mentioned then keep it's original position
+    if (currLabel.parent === droppedParentId && !droppedLabelId) return;
 
-    //Add the array at the destination
-    if (isSameParent && prevIndex !== undefined) currentArray.splice(prevIndex, 1);
-    currentArray.splice(index, 0, currLabel);
+    const data: Partial<IIssueLabel> = { parent: droppedParentId };
+
+    // find array in which the label is to be added
+    if (!droppedParentId) currentArray = labelTree;
+    else currentArray = labelTree?.find((label) => label.id === droppedParentId)?.children || [];
+
+    let droppedLabelIndex = currentArray.findIndex((label) => label.id === droppedLabelId);
+    //if the position of droppedLabelId cannot be determined then drop it at the end of the list
+    if (dropAtEndOfList || droppedLabelIndex === -1) droppedLabelIndex = currentArray.length;
 
     //if currently adding to a new array, then let backend assign a sort order
-    if (currentArray.length > 1) {
+    if (currentArray.length > 0) {
       let prevSortOrder: number | undefined, nextSortOrder: number | undefined;
 
-      if (typeof currentArray[index - 1] !== "undefined") {
-        prevSortOrder = currentArray[index - 1].sort_order;
+      if (typeof currentArray[droppedLabelIndex - 1] !== "undefined") {
+        prevSortOrder = currentArray[droppedLabelIndex - 1].sort_order;
       }
-      if (typeof currentArray[index + 1] !== "undefined") {
-        nextSortOrder = currentArray[index + 1].sort_order;
+      if (typeof currentArray[droppedLabelIndex] !== "undefined") {
+        nextSortOrder = currentArray[droppedLabelIndex].sort_order;
       }
 
-      let sortOrder: number;
+      let sortOrder: number = 65535;
       //based on the next and previous labelMap calculate current sort order
       if (prevSortOrder && nextSortOrder) {
         sortOrder = (prevSortOrder + nextSortOrder) / 2;
       } else if (nextSortOrder) {
-        sortOrder = nextSortOrder + 10000;
-      } else {
-        sortOrder = prevSortOrder! / 2;
+        sortOrder = nextSortOrder / 2;
+      } else if (prevSortOrder) {
+        sortOrder = prevSortOrder + 10000;
       }
       data.sort_order = sortOrder;
     }
-    return this.updateLabel(workspaceSlug, projectId, labelId, data);
+
+    return this.updateLabel(workspaceSlug, projectId, draggingLabelId, data);
   };
 
   /**
diff --git a/web/store/module_filter.store.ts b/web/store/module_filter.store.ts
index 5b46e17321..8d9315671f 100644
--- a/web/store/module_filter.store.ts
+++ b/web/store/module_filter.store.ts
@@ -63,6 +63,7 @@ export class ModuleFilterStore implements IModuleFilterStore {
       (projectId) => {
         if (!projectId) return;
         this.initProjectModuleFilters(projectId);
+        this.searchQuery = "";
       }
     );
   }
diff --git a/web/store/pages/project-page.store.ts b/web/store/pages/project-page.store.ts
index a9572e7d84..628b931c41 100644
--- a/web/store/pages/project-page.store.ts
+++ b/web/store/pages/project-page.store.ts
@@ -1,6 +1,6 @@
 import set from "lodash/set";
 import unset from "lodash/unset";
-import { makeObservable, observable, runInAction, action } from "mobx";
+import { makeObservable, observable, runInAction, action, reaction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
 import { TPage, TPageFilters, TPageNavigationTabs } from "@plane/types";
@@ -64,8 +64,16 @@ export class ProjectPageStore implements IProjectPageStore {
       createPage: action,
       removePage: action,
     });
-
+    // service
     this.service = new PageService();
+    // initialize display filters of the current project
+    reaction(
+      () => this.store.app.router.projectId,
+      (projectId) => {
+        if (!projectId) return;
+        this.filters.searchQuery = "";
+      }
+    );
   }
 
   /**
diff --git a/web/store/project/project_filter.store.ts b/web/store/project/project_filter.store.ts
index 94d5f70736..297c31cad8 100644
--- a/web/store/project/project_filter.store.ts
+++ b/web/store/project/project_filter.store.ts
@@ -59,6 +59,7 @@ export class ProjectFilterStore implements IProjectFilterStore {
       (workspaceSlug) => {
         if (!workspaceSlug) return;
         this.initWorkspaceFilters(workspaceSlug);
+        this.searchQuery = "";
       }
     );
   }
diff --git a/yarn.lock b/yarn.lock
index 9a3d22cf3d..a33c24f885 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -37,6 +37,14 @@
     "@atlaskit/pragmatic-drag-and-drop" "^1.1.0"
     "@babel/runtime" "^7.0.0"
 
+"@atlaskit/pragmatic-drag-and-drop-hitbox@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@atlaskit/pragmatic-drag-and-drop-hitbox/-/pragmatic-drag-and-drop-hitbox-1.0.3.tgz#fcce42f5e2c5a26007f4422397acad29608d3784"
+  integrity sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==
+  dependencies:
+    "@atlaskit/pragmatic-drag-and-drop" "^1.1.0"
+    "@babel/runtime" "^7.0.0"
+
 "@atlaskit/pragmatic-drag-and-drop@^1.1.0", "@atlaskit/pragmatic-drag-and-drop@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.1.3.tgz#ecbfa4dcd2f9bf9b87f3d1565cedb2661d1fae0a"