diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 70dd006cb76..c5a3bc310f0 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -3,16 +3,20 @@
 import { 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 { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import uniqBy from "lodash/uniqBy";
+import orderBy from "lodash/orderBy";
 import { useParams } from "next/navigation";
+import { createRoot } from "react-dom/client";
 import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+
 // plane helpers
 import { useOutsideClickDetector } from "@plane/helpers";
 // ui
-import { IFavorite } from "@plane/types";
+import { IFavorite, InstructionType } from "@plane/types";
 import { CustomMenu, Tooltip, DropIndicator, setToast, TOAST_TYPE, FavoriteFolderIcon, DragHandle } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -22,7 +26,7 @@ import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // constants
 import { FavoriteRoot } from "./favorite-items";
-import { getDestinationStateSequence } from "./favorites.helpers";
+import { getCanDrop, TargetData, getInstructionFromPayload, getDestinationStateSequence } from "./favorites.helpers";
 import { NewFavoriteFolder } from "./new-fav-folder";
 
 type Props = {
@@ -30,40 +34,33 @@ type Props = {
   favorite: IFavorite;
   handleRemoveFromFavorites: (favorite: IFavorite) => void;
   handleRemoveFromFavoritesFolder: (favoriteId: string) => void;
+  handleReorder: (favoriteId: string, sequence: number) => void;
 };
 
 export const FavoriteFolder: React.FC<Props> = (props) => {
-  const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder } = props;
+  const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder, handleReorder, isLastChild} = props;
   // store hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
 
   const { isMobile } = usePlatformOS();
-  const { moveFavorite, getGroupedFavorites, groupedFavorites, moveFavoriteFolder } = useFavorite();
+  const { getGroupedFavorites, groupedFavorites, moveFavoriteToFolder } = useFavorite();
   const { workspaceSlug } = useParams();
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [folderToRename, setFolderToRename] = useState<string | boolean | null>(null);
-  const [isDraggedOver, setIsDraggedOver] = useState(false);
-  const [closestEdge, setClosestEdge] = useState<string | null>(null);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
 
   // refs
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   const elementRef = useRef<HTMLDivElement | null>(null);
 
-  !favorite.children && getGroupedFavorites(workspaceSlug.toString(), favorite.id);
+  if(!favorite.children) getGroupedFavorites(workspaceSlug.toString(), favorite.id);
 
-  const handleOnDrop = (source: string, destination: string) => {
-    moveFavorite(workspaceSlug.toString(), source, {
+  const handleMoveToFolder = (source: string, destination: string) => {
+    moveFavoriteToFolder(workspaceSlug.toString(), source, {
       parent: destination,
     })
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Favorite moved successfully.",
-        });
-      })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
@@ -73,89 +70,102 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
       });
   };
 
-  const handleOnDropFolder = (payload: Partial<IFavorite>) => {
-    moveFavoriteFolder(workspaceSlug.toString(), favorite.id, payload)
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Folder moved successfully.",
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Failed to move folder.",
-        });
-      });
-  };
 
   useEffect(() => {
     const element = elementRef.current;
 
     if (!element) return;
-    const initialData = { type: "PARENT", id: favorite.id, is_folder: favorite.is_folder };
+    const initialData = { id: favorite.id, isGroup: true, isChild: false };
 
     return combine(
       draggable({
         element,
         getInitialData: () => initialData,
         onDragStart: () => setIsDragging(true),
-        onDrop: (data) => {
-          setIsDraggedOver(false);
-          if (!data.location.current.dropTargets[0]) return;
-          const destinationData = data.location.current.dropTargets[0].data;
-
-          if (favorite.id && destinationData) {
-            const edge = extractClosestEdge(destinationData) || undefined;
-            const payload = {
-              id: favorite.id,
-              sequence: Math.round(
-                getDestinationStateSequence(groupedFavorites, destinationData.id as string, edge) || 0
-              ),
-            };
-
-            handleOnDropFolder(payload);
-          }
+        onGenerateDragPreview: ({ nativeSetDragImage }) =>{
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(
+                <div className="rounded flex gap-1 bg-custom-background-100 text-sm p-1 pr-2">
+                  <div className="size-5 grid place-items-center flex-shrink-0">
+                    <FavoriteFolderIcon />
+                  </div>
+                  <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{favorite.name}</p>
+                </div>
+              );
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+        onDrop: () => {
+          setIsDragging(false)
         }, // canDrag: () => isDraggable,
       }),
       dropTargetForElements({
         element,
-        getData: ({ input, element }) =>
-          attachClosestEdge(initialData, {
+        canDrop: ({ source }) => getCanDrop(source, favorite, false),
+        getData: ({ input, element }) =>{
+
+          const blockedStates: InstructionType[] = [];
+          if(!isLastChild){
+            blockedStates.push('reorder-below');
+          }
+
+          return attachInstruction(initialData,{
             input,
             element,
-            allowedEdges: ["top", "bottom"],
-          }),
-        onDragEnter: (args) => {
-          setIsDragging(true);
-          setIsDraggedOver(true);
-          args.source.data.is_folder && setClosestEdge(extractClosestEdge(args.self.data));
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? 'last-in-group' : 'standard',
+            block: blockedStates
+          })
         },
-        onDragLeave: () => {
-          setIsDragging(false);
-          setIsDraggedOver(false);
-          setClosestEdge(null);
+        onDrag: ({source, self, location}) => {
+          const instruction = getInstructionFromPayload(self,source, location);
+          setInstruction(instruction);
         },
-        onDragStart: () => {
-          setIsDragging(true);
+        onDragLeave: () => {
+          setInstruction(undefined);
         },
-        onDrop: ({ self, source }) => {
-          setIsDragging(false);
-          setIsDraggedOver(false);
-          const sourceId = source?.data?.id as string | undefined;
-          const destinationId = self?.data?.id as string | undefined;
-          if (source.data.is_folder) return;
-          if (sourceId === destinationId) return;
-          if (!sourceId || !destinationId) return;
-          if (groupedFavorites[sourceId].parent === destinationId) return;
-          handleOnDrop(sourceId, destinationId);
+        onDrop: ({ source, location }) => {
+          setInstruction(undefined);
+
+          const dropTargets = location?.current?.dropTargets ?? []
+          if(!dropTargets || dropTargets.length <= 0) return;
+          const dropTarget = dropTargets.length > 1 ? dropTargets.find(target=>target?.data?.isChild) : dropTargets[0];
+
+          const dropTargetData = dropTarget?.data as TargetData;
+
+          if(!dropTarget || !dropTargetData) return;
+          const instruction = getInstructionFromPayload(dropTarget, source, location);
+          const parentId = instruction === 'make-child' ? dropTargetData.id : dropTargetData.parentId;
+          const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined;
+          const sourceData = source.data as TargetData;
+
+          if(!sourceData.id) return
+          if(parentId){
+            if(parentId !== sourceData.parentId){
+              handleMoveToFolder(sourceData.id,parentId)
+            }
+          } else {
+            if(sourceData.isChild){
+              handleRemoveFromFavoritesFolder(sourceData.id)
+            }
+          }
+          if(droppedFavId){
+            if(instruction === 'make-child') return; /** Reorder iniside the folder skipped here. It is handled in root element */
+            const destinationSequence = getDestinationStateSequence(groupedFavorites,droppedFavId,instruction)
+            handleReorder(sourceData.id,destinationSequence || 0)
+          }
         },
       })
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef.current, isDragging, favorite.id, handleOnDrop]);
+  }, [isDragging, favorite.id, handleMoveToFolder]);
+
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
@@ -174,10 +184,11 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
             // id={`sidebar-${projectId}-${projectListType}`}
             className={cn("relative", {
               "bg-custom-sidebar-background-80 opacity-60": isDragging,
+              "border-[2px] border-custom-primary-100" : instruction === 'make-child'
             })}
           >
             {/* draggable drop top indicator */}
-            <DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />
+            <DropIndicator isVisible={instruction === "reorder-above"}/>
             <div
               className={cn(
                 "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
@@ -316,21 +327,24 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                     "px-2": !isSidebarCollapsed,
                   })}
                 >
-                  {uniqBy(favorite.children, "id").map((child) => (
+                  {orderBy(favorite.children,'sequence','desc').map((child,index) => (
                     <FavoriteRoot
                       key={child.id}
                       workspaceSlug={workspaceSlug.toString()}
                       favorite={child}
+                      isLastChild={index === favorite.children.length - 1}
+                      parentId={favorite.id}
                       handleRemoveFromFavorites={handleRemoveFromFavorites}
                       handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
                       favoriteMap={groupedFavorites}
+                      handleReorder={handleReorder}
                     />
                   ))}
                 </Disclosure.Panel>
               </Transition>
             )}
             {/* draggable drop bottom indicator */}
-            <DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />{" "}
+            { isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
           </div>
         )}
       </Disclosure>
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 5d880e3a6ce..07083cde52c 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -3,12 +3,18 @@
 import React, { FC, 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";
 // plane helpers
+import { createRoot } from "react-dom/client";
 import { useOutsideClickDetector } from "@plane/helpers";
 // ui
-import { IFavorite } from "@plane/types";
+import { IFavorite, InstructionType } from "@plane/types";
 // components
+import { DropIndicator } from "@plane/ui";
 import {
   FavoriteItemDragHandle,
   FavoriteItemQuickAction,
@@ -18,67 +24,139 @@ import {
 // hooks
 import { useAppTheme } from "@/hooks/store";
 import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details";
+//helpers
+import { getCanDrop, TargetData , getInstructionFromPayload, getDestinationStateSequence} from "../favorites.helpers";
+
 
 type Props = {
+  isLastChild: boolean;
+  parentId: string | undefined;
   workspaceSlug: string;
   favorite: IFavorite;
   favoriteMap: Record<string, IFavorite>;
   handleRemoveFromFavorites: (favorite: IFavorite) => void;
   handleRemoveFromFavoritesFolder: (favoriteId: string) => void;
+  handleReorder: (favoriteId: string, sequence: number) => void;
 };
 
 export const FavoriteRoot: FC<Props> = observer((props) => {
   // props
-  const { workspaceSlug, favorite, favoriteMap, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder } = props;
+  const {
+    isLastChild,
+    parentId,
+    workspaceSlug,
+    favorite,
+    favoriteMap,
+    handleRemoveFromFavorites,
+    handleRemoveFromFavoritesFolder,
+    handleReorder,
+  } = props;
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
-
+  const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite);
   //state
   const [isDragging, setIsDragging] = useState(false);
   const [isMenuActive, setIsMenuActive] = useState(false);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+
   //ref
   const elementRef = useRef<HTMLDivElement>(null);
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
   const handleQuickAction = (value: boolean) => setIsMenuActive(value);
 
-  const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite);
 
   // drag and drop
   useEffect(() => {
     const element = elementRef.current;
 
     if (!element) return;
-
+    const initialData = { id: favorite.id, isGroup: false, isChild: !!parentId, parentId };
     return combine(
       draggable({
         element,
         dragHandle: elementRef.current,
-        canDrag: () => true,
-        getInitialData: () => ({ id: favorite.id, type: "CHILD" }),
+        getInitialData: () => initialData,
         onDragStart: () => {
           setIsDragging(true);
         },
         onDrop: () => {
           setIsDragging(false);
         },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(
+                <div className="rounded bg-custom-background-100 text-sm p-1 pr-2">
+                  <FavoriteItemTitle
+                    href={itemLink}
+                    icon={itemIcon}
+                    title={itemTitle}
+                    isSidebarCollapsed={!!sidebarCollapsed}
+                  />
+                </div>
+              );
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
       }),
       dropTargetForElements({
         element,
+        canDrop: ({ source }) => getCanDrop(source, favorite, !!parentId),
         onDragStart: () => {
           setIsDragging(true);
         },
-        onDragEnter: () => {
-          setIsDragging(true);
+        getData: ({ input, element }) =>{
+
+          const blockedStates: InstructionType[] = ['make-child'];
+          if(!isLastChild){
+            blockedStates.push('reorder-below');
+          }
+
+          return attachInstruction(initialData,{
+            input,
+            element,
+            currentLevel: 1,
+            indentPerLevel: 0,
+            mode: isLastChild ? 'last-in-group' : 'standard',
+            block: blockedStates
+          })
+        },
+        onDrag: ({ self, source, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
+          setInstruction(instruction);
         },
         onDragLeave: () => {
-          setIsDragging(false);
+          setInstruction(undefined);
         },
-        onDrop: ({ source }) => {
-          setIsDragging(false);
-          const sourceId = source?.data?.id as string | undefined;
-          if (!sourceId || !favoriteMap[sourceId].parent) return;
-          handleRemoveFromFavoritesFolder(sourceId);
+        onDrop: ({  source, location }) => {
+          setInstruction(undefined);
+          const dropTargets = location?.current?.dropTargets ?? []
+          if(!dropTargets || dropTargets.length <= 0) return;
+
+          const dropTarget = dropTargets.length > 1 ? dropTargets.find(target=>target?.data?.isChild) : dropTargets[0];
+
+          const dropTargetData = dropTarget?.data as TargetData;
+
+          if(!dropTarget || !dropTargetData) return;
+
+          const instruction = getInstructionFromPayload(dropTarget, source, location);
+          const parentId = instruction === 'make-child' ? dropTargetData.id : dropTargetData.parentId;
+          const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined;
+          const sourceData = source.data as TargetData;
+
+          if(droppedFavId && sourceData.id){
+            const destinationSequence = getDestinationStateSequence(favoriteMap,droppedFavId,instruction)
+            handleReorder(sourceData.id,destinationSequence || 0)
+          }
+
+          if(!parentId && sourceData.isChild){
+            handleRemoveFromFavoritesFolder(sourceData.id)
+          }
         },
       })
     );
@@ -89,6 +167,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
 
   return (
     <>
+      <DropIndicator isVisible={instruction === "reorder-above"}/>
       <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive} sidebarCollapsed={sidebarCollapsed}>
         {!sidebarCollapsed && <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />}
         <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} isSidebarCollapsed={!!sidebarCollapsed} />
@@ -102,6 +181,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
           />
         )}
       </FavoriteItemWrapper>
+      { isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
     </>
   );
 });
diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 89cd6f36f3a..5a813693b33 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, 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 orderBy from "lodash/orderBy";
@@ -33,7 +33,7 @@ export const SidebarFavoritesMenu = observer(() => {
 
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
-  const { favoriteIds, groupedFavorites, deleteFavorite, removeFromFavoriteFolder } = useFavorite();
+  const { favoriteIds, groupedFavorites, deleteFavorite, removeFromFavoriteFolder, reOrderFavorite } = useFavorite();
   const { workspaceSlug } = useParams();
 
   const { isMobile } = usePlatformOS();
@@ -68,13 +68,6 @@ export const SidebarFavoritesMenu = observer(() => {
       id: favoriteId,
       parent: null,
     })
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Favorite moved successfully.",
-        });
-      })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
@@ -83,6 +76,24 @@ export const SidebarFavoritesMenu = observer(() => {
         });
       });
   };
+
+  const handleReorder = useCallback(
+    (favoriteId: string, sequence: number) => {
+      reOrderFavorite(workspaceSlug.toString(), favoriteId, {
+        sequence: sequence,
+      })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Failed reorder favorite",
+          });
+        });
+    },
+    [workspaceSlug,reOrderFavorite]
+  );
+
+
   useEffect(() => {
     if (sidebarCollapsed) toggleFavoriteMenu(true);
   }, [sidebarCollapsed, toggleFavoriteMenu]);
@@ -109,7 +120,6 @@ export const SidebarFavoritesMenu = observer(() => {
           const sourceId = source?.data?.id as string | undefined;
           console.log({ sourceId });
           if (!sourceId || !groupedFavorites[sourceId].parent) return;
-          handleRemoveFromFavoritesFolder(sourceId);
         },
       })
     );
@@ -138,7 +148,7 @@ export const SidebarFavoritesMenu = observer(() => {
                 <FolderPlus
                   onClick={() => {
                     setCreateNewFolder(true);
-                    !isFavoriteMenuOpen && toggleFavoriteMenu(!isFavoriteMenuOpen);
+                    if(!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
                   }}
                   className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform")}
                 />
@@ -179,7 +189,7 @@ export const SidebarFavoritesMenu = observer(() => {
               ) : (
                 orderBy(Object.values(groupedFavorites), "sequence", "desc")
                   .filter((fav) => !fav.parent)
-                  .map((fav, index) => (
+                  .map((fav, index, {length}) => (
                     <Tooltip
                       key={fav.id}
                       tooltipContent={fav?.entity_data ? fav.entity_data?.name : fav?.name}
@@ -191,17 +201,21 @@ export const SidebarFavoritesMenu = observer(() => {
                       {fav.is_folder ? (
                         <FavoriteFolder
                           favorite={fav}
-                          isLastChild={index === favoriteIds.length - 1}
+                          isLastChild={index === length - 1}
                           handleRemoveFromFavorites={handleRemoveFromFavorites}
                           handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
+                          handleReorder={handleReorder}
                         />
                       ) : (
                         <FavoriteRoot
                           workspaceSlug={workspaceSlug.toString()}
                           favorite={fav}
+                          isLastChild={index === length - 1}
+                          parentId={undefined}
                           handleRemoveFromFavorites={handleRemoveFromFavorites}
                           handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
                           favoriteMap={groupedFavorites}
+                          handleReorder={handleReorder}
                         />
                       )}
                     </Tooltip>
diff --git a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
index 3551cd10515..06729f29872 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
+++ b/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
@@ -1,5 +1,13 @@
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import orderBy from "lodash/orderBy";
-import { IFavorite } from "@plane/types";
+import { IFavorite, InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types";
+
+export type TargetData = {
+  id: string;
+  parentId: string | null;
+  isGroup: boolean;
+  isChild: boolean;
+}
 
 export const getDestinationStateSequence = (
   favoriteMap: Record<string, IFavorite>,
@@ -9,6 +17,7 @@ export const getDestinationStateSequence = (
   const defaultSequence = 65535;
   if (!edge) return defaultSequence;
 
+
   const favoriteIds = orderBy(Object.values(favoriteMap), "sequence", "desc")
     .filter((fav: IFavorite) => !fav.parent)
     .map((fav: IFavorite) => fav.id);
@@ -17,19 +26,87 @@ export const getDestinationStateSequence = (
 
   if (!destinationStateSequence) return defaultSequence;
 
-  if (edge === "top") {
+
+  let resultSequence = defaultSequence;
+  if (edge === "reorder-above") {
     const prevStateSequence = favoriteMap[favoriteIds[destinationStateIndex - 1]]?.sequence || undefined;
 
     if (prevStateSequence === undefined) {
-      return destinationStateSequence + defaultSequence;
+      resultSequence =  destinationStateSequence + defaultSequence;
+    }else {
+      resultSequence = (destinationStateSequence + prevStateSequence) / 2
     }
-    return (destinationStateSequence + prevStateSequence) / 2;
-  } else if (edge === "bottom") {
+  } else if (edge === "reorder-below") {
     const nextStateSequence = favoriteMap[favoriteIds[destinationStateIndex + 1]]?.sequence || undefined;
 
     if (nextStateSequence === undefined) {
-      return destinationStateSequence - defaultSequence;
+      resultSequence = destinationStateSequence - defaultSequence;
+    } else {
+      resultSequence = (destinationStateSequence + nextStateSequence) / 2;
     }
-    return (destinationStateSequence + nextStateSequence) / 2;
   }
+
+  console.log({resultSequence});
+
+  resultSequence = Math.round(resultSequence)
+
+  return resultSequence;
 };
+
+/**
+ * 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 favorite 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 favorite,
+  // 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 favorite can be dropped onto the droptarget
+ * @param source
+ * @param favorite
+ * @param isCurrentChild if the dropTarget is a child
+ * @returns
+ */
+export const getCanDrop = (source: TDropTarget, favorite: IFavorite | undefined, isCurrentChild: boolean) => {
+  const sourceData = source?.data;
+
+  if (!sourceData) return false;
+
+  // a favorite cannot be dropped on to itself
+  if (sourceData.id === favorite?.id ) return false;
+
+
+  // if current dropTarget is a child and the favorite being dropped is a group then don't enable drop
+  if (isCurrentChild && sourceData.isGroup) return false;
+
+  return true;
+};
\ No newline at end of file
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index faa85a82607..644994080f1 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -298,12 +298,13 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={() => setLeaveProjectModal(false)} />
-      <Disclosure key={`${project.id}_${URLProjectId}`} ref={projectRef} defaultOpen={isProjectListOpen} as="div">
+      <Disclosure key={`${project.id}_${URLProjectId}`}  defaultOpen={isProjectListOpen} as="div">
         <div
           id={`sidebar-${projectId}-${projectListType}`}
           className={cn("relative", {
             "bg-custom-sidebar-background-80 opacity-60": isDragging,
           })}
+          ref={projectRef}
         >
           <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
           <div
diff --git a/web/core/store/favorite.store.ts b/web/core/store/favorite.store.ts
index 9d04ed1303e..da2a5b4c92f 100644
--- a/web/core/store/favorite.store.ts
+++ b/web/core/store/favorite.store.ts
@@ -26,9 +26,9 @@ export interface IFavoriteStore {
   updateFavorite: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<IFavorite>;
   deleteFavorite: (workspaceSlug: string, favoriteId: string) => Promise<void>;
   getGroupedFavorites: (workspaceSlug: string, favoriteId: string) => Promise<IFavorite[]>;
-  moveFavorite: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<void>;
+  moveFavoriteToFolder: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<void>;
   removeFavoriteEntity: (workspaceSlug: string, entityId: string) => Promise<void>;
-  moveFavoriteFolder: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<void>;
+  reOrderFavorite: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<void>;
   removeFromFavoriteFolder: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<void>;
   removeFavoriteFromStore: (entity_identifier: string) => void;
 }
@@ -64,9 +64,9 @@ export class FavoriteStore implements IFavoriteStore {
       // CRUD actions
       addFavorite: action,
       getGroupedFavorites: action,
-      moveFavorite: action,
+      moveFavoriteToFolder: action,
       removeFavoriteEntity: action,
-      moveFavoriteFolder: action,
+      reOrderFavorite: action,
       removeFavoriteEntityFromStore: action,
       removeFromFavoriteFolder: action,
     });
@@ -168,7 +168,7 @@ export class FavoriteStore implements IFavoriteStore {
    * @param data
    * @returns Promise<void>
    */
-  moveFavorite = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
+  moveFavoriteToFolder = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
     const oldParent = this.favoriteMap[favoriteId].parent;
     try {
       runInAction(() => {
@@ -190,7 +190,7 @@ export class FavoriteStore implements IFavoriteStore {
     }
   };
 
-  moveFavoriteFolder = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
+  reOrderFavorite = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
     const initialSequence = this.favoriteMap[favoriteId].sequence;
     try {
       runInAction(() => {