diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..bd0f5b1
Binary files /dev/null and b/bun.lockb differ
diff --git a/package.json b/package.json
index d5824c1..999ee22 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,10 @@
     "@blocknote/mantine": "^0.33.0",
     "@blocknote/react": "^0.33.0",
     "@blocknote/shadcn": "^0.33.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.10.0",
     "@next/swc-linux-x64-gnu": "^15.3.1",
     "@radix-ui/react-alert-dialog": "^1.1.11",
diff --git a/src/components/elements/taskManagement/sort.tsx b/src/components/elements/taskManagement/sort.tsx
index 5b83325..29e8d5a 100644
--- a/src/components/elements/taskManagement/sort.tsx
+++ b/src/components/elements/taskManagement/sort.tsx
@@ -20,7 +20,7 @@ export const Sort = ({ showTasks, setShowTasks }: SortProps) => {
   const sortItem = [
     {
       value: 'Date created',
-      label: 'Date created',
+      label: 'Default',
     },
     {
       value: 'StartDate123',
@@ -93,7 +93,7 @@ export const Sort = ({ showTasks, setShowTasks }: SortProps) => {
   return (
     <Select onValueChange={(value) => handleSort(value)}>
       <SelectTrigger className="w-[180px] border-brown text-brown font-BaiJamjuree font-normal focus:outline-none focus:ring-0 focus:ring-offset-0">
-        <SelectValue placeholder="Sort by: Date created" />
+        <SelectValue placeholder="Sort by: Default" />
       </SelectTrigger>
       <SelectContent>
         {sortItem.map(({ value, label }) => (
diff --git a/src/components/elements/taskManagement/task.tsx b/src/components/elements/taskManagement/task.tsx
index 1f8906f..3aff1ef 100644
--- a/src/components/elements/taskManagement/task.tsx
+++ b/src/components/elements/taskManagement/task.tsx
@@ -1,18 +1,28 @@
-import { useState, useEffect } from 'react';
+'use client';
+import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { TaskTitle, Money, TaskDate, Assigned, Tag, TaskActionsMenu } from './index';
 import type { TaskProps } from '@/app/types/types';
 
-// Helper functions for localStorage handling
-const loadExpandedState = (): Set<string> => {
-  if (typeof window === 'undefined') return new Set();
-  const saved = localStorage.getItem('expandedTaskIds');
-  return saved ? new Set(JSON.parse(saved)) : new Set();
-};
+export const SortableTaskItem = ({ id, children }: { id: string; children: React.ReactNode }) => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    position: 'relative' as const,
+    zIndex: isDragging ? 9999 : 0,
+    touchAction: 'none',
+  };
 
-const saveExpandedState = (ids: Set<string>) => {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem('expandedTaskIds', JSON.stringify(Array.from(ids)));
-  }
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      {children}
+    </div>
+  );
 };
 
 export const Task = ({
@@ -23,85 +33,65 @@ export const Task = ({
   onToggle,
   showActionsMenu = true,
   onTaskDelete,
+  activeId,
+  forceCollapse = false,
 }: {
   item: TaskProps;
   depth?: number;
   hiddenDate: boolean;
   expandedIds: Set<string>;
   onToggle: (taskId: string) => void;
-  showActionsMenu?: boolean; // new optional prop
+  showActionsMenu?: boolean;
   onTaskDelete?: (taskId: string) => void;
+  activeId?: string;
+  forceCollapse?: boolean;
 }) => {
   const hasChildren = item.subtasks && item.subtasks.length > 0;
+  const isExpanded = forceCollapse ? false : expandedIds.has(item.id);
+  const hasActiveChild = item.subtasks?.some((child) => child.id === activeId) ?? false;
 
   return (
     <>
-      <div
+      <SortableTaskItem id={item.id}>
+        <div
         className="flex items-center w-full h-fit py-1.5 hover:bg-gray-50 justify-between"
         style={{ paddingLeft: `${depth * 24}px` }}>
-        <TaskTitle
-          item={item}
-          isExpanded={expandedIds.has(item.id)}
-          onToggle={() => onToggle(item.id)}
-        />
+          <TaskTitle item={item} isExpanded={isExpanded} onToggle={() => onToggle(item.id)} />
 
-        <div className="w-fit flex items-center justify-end gap-2">
-          <Tag item={item} />
-          <Money item={item} />
-          <TaskDate item={item} hiddenDate={hiddenDate} />
-          <Assigned item={item} />
-          {showActionsMenu && (
-            <TaskActionsMenu task={item} onTaskDelete={() => onTaskDelete?.(item.id)} />
-          )}
+          <div className="w-fit flex items-center justify-end gap-2">
+            <Tag item={item} />
+            <Money item={item} />
+            <TaskDate item={item} hiddenDate={hiddenDate} />
+            <Assigned item={item} />
+            {showActionsMenu && (
+              <TaskActionsMenu task={item} onTaskDelete={() => onTaskDelete?.(item.id)} />
+            )}
+          </div>
         </div>
-      </div>
+      </SortableTaskItem>
 
-      {hasChildren && expandedIds.has(item.id) && (
-        <div>
-          {item.subtasks?.map((child) => (
-            <Task
-              key={child.id}
-              item={child}
-              depth={depth + 1}
-              hiddenDate={hiddenDate}
-              expandedIds={expandedIds}
-              onToggle={onToggle}
-              showActionsMenu={showActionsMenu} // pass down the same value
-              onTaskDelete={onTaskDelete}
-            />
-          ))}
+      {hasChildren && isExpanded && activeId !== item.id && (
+        <div className="w-full">
+          <SortableContext
+            items={item.subtasks!.map((c) => c.id)}
+            strategy={verticalListSortingStrategy}>
+            {item.subtasks?.map((child) => (
+              <Task
+                key={child.id}
+                item={child}
+                depth={depth + 1}
+                hiddenDate={hiddenDate}
+                expandedIds={expandedIds}
+                onToggle={onToggle}
+                showActionsMenu={showActionsMenu}
+                onTaskDelete={onTaskDelete}
+                activeId={activeId}
+                forceCollapse={hasActiveChild}
+              />
+            ))}
+          </SortableContext>
         </div>
       )}
     </>
   );
 };
-
-// Parent component that manages the expanded state
-export const TaskList = ({ tasks }: { tasks: TaskProps[] }) => {
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(loadExpandedState);
-
-  useEffect(() => {
-    saveExpandedState(expandedIds);
-  }, [expandedIds]);
-
-  const handleToggle = (taskId: string) => {
-    const newIds = new Set(expandedIds);
-    newIds.has(taskId) ? newIds.delete(taskId) : newIds.add(taskId);
-    setExpandedIds(new Set(newIds));
-  };
-
-  return (
-    <div>
-      {tasks.map((task) => (
-        <Task
-          key={task.id}
-          item={task}
-          depth={0}
-          hiddenDate={false}
-          expandedIds={expandedIds}
-          onToggle={handleToggle}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/src/components/elements/taskmanager.tsx b/src/components/elements/taskmanager.tsx
index 1f9a737..e371cc0 100644
--- a/src/components/elements/taskmanager.tsx
+++ b/src/components/elements/taskmanager.tsx
@@ -2,14 +2,33 @@
 import { useEffect, useState } from 'react';
 import { getCookie } from 'cookies-next';
 import BASE_URL, { type TaskManageMentOverviewProp, type Project } from '@/lib/shared';
-import type { TagProps, TaskProps } from '@/app/types/types';
-import { Task, ExportDialog, Filter, Sort, CreateTask } from './taskManagement';
+import type { TaskProps } from '@/app/types/types';
+import { ExportDialog, Filter, Sort, CreateTask, Task } from '@/components/elements/taskManagement';
 import { groupingStatus, parseJsonValues, statusSections, statusToInt } from '@/lib/taskUtils';
 import { toast } from '@/hooks/use-toast';
+import {
+  DndContext,
+  pointerWithin,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+  DragOverlay,
+  MeasuringStrategy,
+  type Modifier,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+
 const cookie = getCookie('auth');
 const auth = cookie?.toString() ?? '';
 
-// Helper functions for localStorage
 const loadExpandedState = (): Set<string> => {
   if (typeof window === 'undefined') return new Set();
   const saved = localStorage.getItem('expandedTaskIds');
@@ -23,47 +42,72 @@ const saveExpandedState = (ids: Set<string>) => {
   }
 };
 
+const reorderTasks = (tasks: TaskProps[], activeId: string, overId: string): TaskProps[] => {
+  const activeIdx = tasks.findIndex((t) => t.id === activeId);
+  const overIdx = tasks.findIndex((t) => t.id === overId);
+
+  if (activeIdx !== -1 && overIdx !== -1) {
+    return arrayMove(tasks, activeIdx, overIdx);
+  }
+
+  return tasks.map((task) => {
+    if (!task.subtasks || task.subtasks.length === 0) return task;
+
+    const newSubtasks = reorderTasks(task.subtasks, activeId, overId);
+
+    if (newSubtasks === task.subtasks) return task;
+
+    return { ...task, subtasks: newSubtasks };
+  });
+};
+
 export const TaskManager = ({ project_id }: TaskManageMentOverviewProp) => {
   const [tasks, setTasks] = useState<TaskProps[]>([]);
   const [showTasks, setShowTasks] = useState<TaskProps[]>([]);
   const [projectName, setProjectName] = useState<string>('');
   const [project, setProject] = useState<Project | null>(null);
   const [expandedIds, setExpandedIds] = useState<Set<string>>(loadExpandedState);
+  const [activeTask, setActiveTask] = useState<TaskProps | null>(null);
+  const [isLayoutCollapsed, setIsLayoutCollapsed] = useState(false);
 
-  // Save expanded state to localStorage when it changes
   useEffect(() => {
     saveExpandedState(expandedIds);
   }, [expandedIds]);
 
   const handleToggle = (taskId: string) => {
-    const newIds = new Set(expandedIds);
-    newIds.has(taskId) ? newIds.delete(taskId) : newIds.add(taskId);
-    setExpandedIds(new Set(newIds));
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      next.has(taskId) ? next.delete(taskId) : next.add(taskId);
+      return next;
+    });
   };
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await fetch(`${BASE_URL}/v2/projects/${project_id}`, {
-          headers: {
-            Authorization: auth,
-          },
+          headers: { Authorization: auth },
         });
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
 
-        const project = await response.json();
-        setProject(project);
-        setProjectName(project.title);
+        const projectData = await response.json();
+        console.log(projectData);
+        setProject(projectData);
+        setProjectName(projectData.title);
 
-        const parsedData = parseJsonValues(project.tasks);
+        const parsedData = parseJsonValues(projectData.tasks);
         setTasks(parsedData);
         setShowTasks(parsedData);
 
         if (!loadExpandedState().size) {
-          expandAllTasks(parsedData);
+          const newIds = new Set<string>();
+          const traverse = (t: TaskProps) => {
+            newIds.add(t.id);
+            t.subtasks?.forEach(traverse);
+          };
+          parsedData.forEach(traverse);
+          setExpandedIds(newIds);
         }
       } catch (error) {
         console.error(error);
@@ -72,81 +116,202 @@ export const TaskManager = ({ project_id }: TaskManageMentOverviewProp) => {
     fetchData();
   }, [project_id]);
 
-  const expandAllTasks = (tasks: TaskProps[]) => {
-    const newIds = new Set(expandedIds);
+  const TaskDragOverlay = ({ task }: { task: TaskProps }) => {
+    return (
+      <div className="flex items-center w-[300px] py-3 px-4 bg-white border border-blue-400 shadow-xl rounded-md cursor-grabbing ">
+        <span className="text-blue-700 font-medium font-BaiJamjuree truncate">{task.title}</span>
+      </div>
+    );
+  };
 
-    const traverse = (task: TaskProps) => {
-      newIds.add(task.id);
-      task.subtasks?.forEach(traverse);
-    };
+  const updatePositions = async (taskId: string, position: number) => {
+    console.log(`Updating position for task ${taskId} to ${position}`);
+    try {
+      const response = await fetch(`${BASE_URL}/v2/tasks/position/${taskId}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: auth,
+        },
+        body: JSON.stringify({ newPosition: position }),
+      });
+
+      if (!response.ok) throw new Error('Batch update failed');
+    } catch (error) {
+      console.error('Batch Update Error:', error);
+      toast({ title: 'Error', description: 'Failed to save order', variant: 'destructive' });
+    }
+  };
+
+  const customSnapToCursor: Modifier = ({ activatorEvent, draggingNodeRect, transform }) => {
+    if (activatorEvent && draggingNodeRect) {
+      const event =
+        'touches' in activatorEvent ? activatorEvent.touches[0] : (activatorEvent as MouseEvent);
+      const mouseX = event.clientX;
+      const mouseY = event.clientY;
+
+      const overlayWidth = draggingNodeRect.width || 300;
+      const overlayHeight = draggingNodeRect.height || 50;
 
-    tasks.forEach(traverse);
-    setExpandedIds(newIds);
+      const offsetX = mouseX - draggingNodeRect.left;
+      const offsetY = mouseY - draggingNodeRect.top;
+
+      return {
+        ...transform,
+        x: transform.x + offsetX - overlayWidth / 2,
+        y: transform.y + offsetY - overlayHeight / 2,
+      };
+    }
+    return transform;
   };
 
   const removeTaskFromState = (taskId: string) => {
-    const removeTaskRecursive = (taskList: TaskProps[]): TaskProps[] => {
-      return taskList
-        .filter((task) => task.id !== taskId)
-        .map((task) => ({
-          ...task,
-          subtasks: task.subtasks ? removeTaskRecursive(task.subtasks) : undefined,
+    const removeRecursive = (list: TaskProps[]): TaskProps[] => {
+      return list
+        .filter((t) => t.id !== taskId)
+        .map((t) => ({
+          ...t,
+          subtasks: t.subtasks ? removeRecursive(t.subtasks) : undefined,
         }));
     };
+    const updated = removeRecursive(tasks);
+    setTasks(updated);
+    setShowTasks(updated);
+    toast({ title: 'Task deleted', description: 'Success' });
+  };
 
-    const updatedTasks = removeTaskRecursive(tasks);
-    setTasks(updatedTasks);
-    setShowTasks(updatedTasks);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  
+  const findTaskById = (list: TaskProps[], id: string): TaskProps | null => {
+    for (const t of list) {
+      if (t.id === id) return t;
+      if (t.subtasks) {
+        const found = findTaskById(t.subtasks, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
 
-    // Remove from expanded state if it was expanded
-    const newExpandedIds = new Set(expandedIds);
-    newExpandedIds.delete(taskId);
-    setExpandedIds(newExpandedIds);
 
-    toast({
-      title: 'Task deleted',
-      description: 'The task has been successfully deleted.',
-    });
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = findTaskById(tasks, event.active.id as string);
+
+    setActiveTask(task ?? null);
+    setTimeout(() => {
+      setIsLayoutCollapsed(true);
+    }, 0);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setIsLayoutCollapsed(false);
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      setActiveTask(null);
+      return;
+    }
+
+    const newIndex = over.data.current?.sortable?.index;
+    if (newIndex === undefined) {
+      setActiveTask(null);
+      return;
+    }
+
+    const newTasks = reorderTasks(tasks, active.id as string, over.id as string);
+    setTasks(newTasks);
+    setShowTasks(newTasks);
+    updatePositions(active.id as string, newIndex);
+    setActiveTask(null);
   };
 
   return (
-    <div className="h-auto w-full p-11 font-BaiJamjuree bg-white rounded-md border border-brown flex flex-col">
-      <header className="text-black text-3xl font-Anuphan font-semibold leading-9 mb-6 break-words whitespace-normal">
-        {projectName}
-      </header>
-      <div className="flex items-center justify-between w-full mb-3">
-        <div className="flex items-center gap-4">
-          <Filter tasks={tasks} setShowTasks={setShowTasks} />
-          <ExportDialog tasks={tasks} />
-        </div>
-        <div className="flex items-center gap-4">
-          <Sort showTasks={showTasks} setShowTasks={setShowTasks} />
-          {project && <CreateTask project={project} />}
-        </div>
-      </div>
-      {statusSections.map(({ status, displayName, icon }) => (
-        <div key={status} className="w-full">
-          <div className="flex items-center gap-2 border-b border-gray-300 py-3">
-            <img src={icon} alt={`${status} Icon`} className="w-6 h-6" />
-            <span className="text-black text-sm font-medium font-BaiJamjuree">{displayName}</span>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={pointerWithin}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      measuring={{
+        droppable: {
+          strategy: MeasuringStrategy.Always,
+        },
+      }}>
+      <div className="h-auto w-full p-11 font-BaiJamjuree bg-white rounded-md border border-brown flex flex-col">
+        <header className="text-black text-3xl font-Anuphan font-semibold leading-9 mb-6 break-words whitespace-normal">
+          {projectName}
+        </header>
+
+        <div className="flex items-center justify-between w-full mb-3">
+          <div className="flex items-center gap-4">
+            <Filter tasks={tasks} setShowTasks={setShowTasks} />
+            <ExportDialog tasks={tasks} />
           </div>
-          <div className="w-full block overflow-x-auto">
-            {showTasks
-              .filter((item) => groupingStatus(item, 99) === statusToInt(status))
-              .map((item) => (
-                <Task
-                  key={item.id}
-                  item={item}
-                  depth={0}
-                  hiddenDate={false}
-                  expandedIds={expandedIds}
-                  onToggle={handleToggle}
-                  onTaskDelete={removeTaskFromState}
-                />
-              ))}
+          <div className="flex items-center gap-4">
+            <Sort showTasks={showTasks} setShowTasks={setShowTasks} />
+            {project && <CreateTask project={project} />}
           </div>
         </div>
-      ))}
-    </div>
+
+        {statusSections.map(({ status, displayName, icon }) => {
+          const tasksInStatus = showTasks.filter(
+            (item) => groupingStatus(item, 99) === statusToInt(status),
+          );
+          const isRootDragged = tasksInStatus.some((t) => t.id === activeTask?.id);
+
+          return (
+            <div key={status} className="w-full">
+              <div className="flex items-center gap-2 border-b border-gray-300 py-3">
+                <img src={icon} alt={`${status} Icon`} className="w-6 h-6" />
+                <span className="text-black text-sm font-medium font-BaiJamjuree">
+                  {displayName}
+                </span>
+              </div>
+
+              <div className="w-full block overflow-x-auto min-h-[50px]">
+                <SortableContext
+                  items={tasksInStatus.map((t) => t.id)}
+                  strategy={verticalListSortingStrategy}>
+                  {tasksInStatus.map((item) => {
+                    const isRootDragged =
+                      isLayoutCollapsed && tasksInStatus.some((t) => t.id === activeTask?.id);
+
+                    return (
+                      <Task
+                        key={item.id}
+                        item={item}
+                        depth={0}
+                        hiddenDate={false}
+                        expandedIds={expandedIds}
+                        onToggle={handleToggle}
+                        onTaskDelete={removeTaskFromState}
+                        activeId={activeTask?.id}
+                        forceCollapse={isRootDragged}
+                      />
+                    );
+                  })}
+                </SortableContext>
+
+                {tasksInStatus.length === 0 && (
+                  <div className="text-gray-400 text-sm py-4 italic">No tasks</div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <DragOverlay
+        dropAnimation={{ duration: 250, easing: 'ease' }}
+        modifiers={[customSnapToCursor]}>
+        {activeTask ? <TaskDragOverlay task={activeTask} /> : null}
+      </DragOverlay>
+    </DndContext>
   );
 };
diff --git a/src/lib/shared.ts b/src/lib/shared.ts
index faec126..4c8b179 100644
--- a/src/lib/shared.ts
+++ b/src/lib/shared.ts
@@ -55,6 +55,7 @@ export type Task = {
   description: string;
   status: Status;
   parentTaskId: string | null;
+  position: number;
   projectId: string;
   startDate: Date | null;
   endDate: Date | null;