diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index 1b81906e..460fb056 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
@@ -127,9 +127,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     if (draggedTaskId) {
       setHoveredGroupId(groupId);
     }
-    if(taskIdx === null) {
+    if (taskIdx === null) {
       setHoveredTaskIdx(0);
-    }else{
+    } else {
       setHoveredTaskIdx(taskIdx);
     };
   };
@@ -137,16 +137,16 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     if (dragType !== 'task') return;
     e.preventDefault();
     if (!draggedTaskId || !draggedTaskGroupId || hoveredGroupId === null || hoveredTaskIdx === null) return;
-    
+
     // Calculate new order and dispatch
     const sourceGroup = taskGroups.find(g => g.id === draggedTaskGroupId);
     const targetGroup = taskGroups.find(g => g.id === targetGroupId);
     if (!sourceGroup || !targetGroup) return;
-    
-    
+
+
     const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
     if (taskIdx === -1) return;
-    
+
     const movedTask = sourceGroup.tasks[taskIdx];
     if (groupBy === 'status' && movedTask.id) {
       if (sourceGroup.id !== targetGroup.id) {
@@ -161,23 +161,23 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       }
     }
     let insertIdx = hoveredTaskIdx;
-    
+
     // Handle same group reordering
     if (sourceGroup.id === targetGroup.id) {
       // Create a single updated array for the same group
       const updatedTasks = [...sourceGroup.tasks];
       updatedTasks.splice(taskIdx, 1); // Remove from original position
-      
+
       // Adjust insert index if moving forward in the same array
       if (taskIdx < insertIdx) {
         insertIdx--;
       }
-      
+
       if (insertIdx < 0) insertIdx = 0;
       if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
-      
+
       updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
-      
+
       dispatch(reorderTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
@@ -200,12 +200,12 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       // Handle cross-group reordering
       const updatedSourceTasks = [...sourceGroup.tasks];
       updatedSourceTasks.splice(taskIdx, 1);
-      
+
       const updatedTargetTasks = [...targetGroup.tasks];
       if (insertIdx < 0) insertIdx = 0;
       if (insertIdx > updatedTargetTasks.length) insertIdx = updatedTargetTasks.length;
       updatedTargetTasks.splice(insertIdx, 0, movedTask);
-      
+
       dispatch(reorderTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
@@ -317,8 +317,11 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       <div className="enhanced-kanban-board">
         {loadingGroups ? (
           <Card>
-            <div className="flex justify-center items-center py-8">
-              <Skeleton active />
+            <div className="flex flex-row gap-2 h-[600px] py-2">
+              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
+              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
+              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
+              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
             </div>
           </Card>
         ) : taskGroups.length === 0 ? (
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index fb03fb0b..236d9245 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -437,7 +437,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                     <div className="mt-2 border-t border-gray-100 dark:border-gray-700 pt-2">
                         {/* Loading state */}
                         {task.sub_tasks_loading && (
-                            <div className="py-2 text-xs text-gray-400 dark:text-gray-500">Loading...</div>
+                            <div className="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse" />
                         )}
                         {/* Loaded subtasks */}
                         {!task.sub_tasks_loading && Array.isArray(task.sub_tasks) && task.sub_tasks.length > 0 && (