diff --git a/worklenz-frontend/public/locales/de/tasks/task-table-bulk-actions.json b/worklenz-frontend/public/locales/de/tasks/task-table-bulk-actions.json
index 3c2d7132..297987c5 100644
--- a/worklenz-frontend/public/locales/de/tasks/task-table-bulk-actions.json
+++ b/worklenz-frontend/public/locales/de/tasks/task-table-bulk-actions.json
@@ -20,5 +20,20 @@
   "hitEnterToCreate": "Enter drücken zum Erstellen",
   "pendingInvitation": "Einladung ausstehend",
   "noMatchingLabels": "Keine passenden Labels",
-  "noLabels": "Keine Labels"
+  "noLabels": "Keine Labels",
+  "CHANGE_STATUS": "Status ändern",
+  "CHANGE_PRIORITY": "Priorität ändern",
+  "CHANGE_PHASE": "Phase ändern",
+  "ADD_LABELS": "Labels hinzufügen",
+  "ASSIGN_TO_ME": "Mir zuweisen",
+  "ASSIGN_MEMBERS": "Mitglieder zuweisen",
+  "ARCHIVE": "Archivieren",
+  "DELETE": "Löschen",
+  "CANCEL": "Abbrechen",
+  "CLEAR_SELECTION": "Auswahl löschen",
+  "TASKS_SELECTED": "{{count}} Aufgabe ausgewählt",
+  "TASKS_SELECTED_plural": "{{count}} Aufgaben ausgewählt",
+  "DELETE_TASKS_CONFIRM": "{{count}} Aufgabe löschen?",
+  "DELETE_TASKS_CONFIRM_plural": "{{count}} Aufgaben löschen?",
+  "DELETE_TASKS_WARNING": "Diese Aktion kann nicht rückgängig gemacht werden."
 }
diff --git a/worklenz-frontend/public/locales/en/tasks/task-table-bulk-actions.json b/worklenz-frontend/public/locales/en/tasks/task-table-bulk-actions.json
index 2434aea4..4beab4f6 100644
--- a/worklenz-frontend/public/locales/en/tasks/task-table-bulk-actions.json
+++ b/worklenz-frontend/public/locales/en/tasks/task-table-bulk-actions.json
@@ -20,5 +20,20 @@
     "hitEnterToCreate": "Press Enter to create",
     "pendingInvitation": "Pending Invitation",
     "noMatchingLabels": "No matching labels",
-    "noLabels": "No labels"
+    "noLabels": "No labels",
+    "CHANGE_STATUS": "Change Status",
+    "CHANGE_PRIORITY": "Change Priority", 
+    "CHANGE_PHASE": "Change Phase",
+    "ADD_LABELS": "Add Labels",
+    "ASSIGN_TO_ME": "Assign to Me",
+    "ASSIGN_MEMBERS": "Assign Members",
+    "ARCHIVE": "Archive",
+    "DELETE": "Delete",
+    "CANCEL": "Cancel",
+    "CLEAR_SELECTION": "Clear Selection",
+    "TASKS_SELECTED": "{{count}} task selected",
+    "TASKS_SELECTED_plural": "{{count}} tasks selected",
+    "DELETE_TASKS_CONFIRM": "Delete {{count}} task?",
+    "DELETE_TASKS_CONFIRM_plural": "Delete {{count}} tasks?",
+    "DELETE_TASKS_WARNING": "This action cannot be undone."
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/es/tasks/task-table-bulk-actions.json b/worklenz-frontend/public/locales/es/tasks/task-table-bulk-actions.json
index 0040c407..94963c91 100644
--- a/worklenz-frontend/public/locales/es/tasks/task-table-bulk-actions.json
+++ b/worklenz-frontend/public/locales/es/tasks/task-table-bulk-actions.json
@@ -20,5 +20,20 @@
     "hitEnterToCreate": "Presione Enter para crear",
     "pendingInvitation": "Invitación Pendiente",
     "noMatchingLabels": "No hay etiquetas coincidentes",
-    "noLabels": "Sin etiquetas"
+    "noLabels": "Sin etiquetas",
+    "CHANGE_STATUS": "Cambiar Estado",
+    "CHANGE_PRIORITY": "Cambiar Prioridad",
+    "CHANGE_PHASE": "Cambiar Fase",
+    "ADD_LABELS": "Agregar Etiquetas",
+    "ASSIGN_TO_ME": "Asignar a Mí",
+    "ASSIGN_MEMBERS": "Asignar Miembros",
+    "ARCHIVE": "Archivar",
+    "DELETE": "Eliminar",
+    "CANCEL": "Cancelar",
+    "CLEAR_SELECTION": "Limpiar Selección",
+    "TASKS_SELECTED": "{{count}} tarea seleccionada",
+    "TASKS_SELECTED_plural": "{{count}} tareas seleccionadas",
+    "DELETE_TASKS_CONFIRM": "¿Eliminar {{count}} tarea?",
+    "DELETE_TASKS_CONFIRM_plural": "¿Eliminar {{count}} tareas?",
+    "DELETE_TASKS_WARNING": "Esta acción no se puede deshacer."
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/pt/tasks/task-table-bulk-actions.json b/worklenz-frontend/public/locales/pt/tasks/task-table-bulk-actions.json
index 40147210..6581803a 100644
--- a/worklenz-frontend/public/locales/pt/tasks/task-table-bulk-actions.json
+++ b/worklenz-frontend/public/locales/pt/tasks/task-table-bulk-actions.json
@@ -20,5 +20,20 @@
     "hitEnterToCreate": "Pressione Enter para criar",
     "pendingInvitation": "Convite Pendente",
     "noMatchingLabels": "Nenhuma etiqueta correspondente",
-    "noLabels": "Sem etiquetas"
+    "noLabels": "Sem etiquetas",
+    "CHANGE_STATUS": "Alterar Status",
+    "CHANGE_PRIORITY": "Alterar Prioridade",
+    "CHANGE_PHASE": "Alterar Fase",
+    "ADD_LABELS": "Adicionar Etiquetas",
+    "ASSIGN_TO_ME": "Atribuir a Mim",
+    "ASSIGN_MEMBERS": "Atribuir Membros",
+    "ARCHIVE": "Arquivar",
+    "DELETE": "Deletar",
+    "CANCEL": "Cancelar",
+    "CLEAR_SELECTION": "Limpar Seleção",
+    "TASKS_SELECTED": "{{count}} tarefa selecionada",
+    "TASKS_SELECTED_plural": "{{count}} tarefas selecionadas",
+    "DELETE_TASKS_CONFIRM": "Deletar {{count}} tarefa?",
+    "DELETE_TASKS_CONFIRM_plural": "Deletar {{count}} tarefas?",
+    "DELETE_TASKS_WARNING": "Esta ação não pode ser desfeita."
 }
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx b/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
index 4f346af0..63ef5a56 100644
--- a/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
+++ b/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
-import { Spin } from 'antd';
+import { Skeleton } from 'antd';
 
-// Lightweight loading component - removed heavy theme calculations
+// Lightweight loading component with skeleton animation
 export const SuspenseFallback = memo(() => {
   return (
     <div 
@@ -16,9 +16,16 @@ export const SuspenseFallback = memo(() => {
         justifyContent: 'center',
         background: 'transparent',
         zIndex: 9999,
+        padding: '20px',
       }}
     >
-      <Spin size="large" />
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <Skeleton 
+          active 
+          paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
+          title={{ width: '70%' }}
+        />
+      </div>
     </div>
   );
 });
@@ -35,7 +42,13 @@ export const InlineSuspenseFallback = memo(() => {
         minHeight: '200px',
       }}
     >
-      <Spin size="large" />
+      <div style={{ width: '100%', maxWidth: '300px' }}>
+        <Skeleton 
+          active 
+          paragraph={{ rows: 2, width: ['100%', '70%'] }}
+          title={{ width: '60%' }}
+        />
+      </div>
     </div>
   );
 });
diff --git a/worklenz-frontend/src/components/task-management/optimized-bulk-action-bar.tsx b/worklenz-frontend/src/components/task-management/optimized-bulk-action-bar.tsx
index cb1d3d0a..8320c6a2 100644
--- a/worklenz-frontend/src/components/task-management/optimized-bulk-action-bar.tsx
+++ b/worklenz-frontend/src/components/task-management/optimized-bulk-action-bar.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { 
   Button, 
@@ -8,70 +8,23 @@ import {
   Tooltip, 
   Space,
   Badge,
-  Divider,
-  type InputRef,
-  message
-} from '@/shared/antd-imports';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+  Divider
+} from 'antd';
 import {
   DeleteOutlined,
   CloseOutlined,
-  MoreOutlined,
-  SyncOutlined,
-  UserOutlined,
-  BellOutlined,
-  TagOutlined,
+  RetweetOutlined,
+  UserAddOutlined,
+  InboxOutlined,
+  TagsOutlined,
   UsergroupAddOutlined,
-  CheckOutlined,
-  EditOutlined,
-  FileOutlined,
-  ImportOutlined,
-  CalendarOutlined,
-  BarChartOutlined,
-  SettingOutlined
-} from '@/shared/antd-imports';
+  FlagOutlined,
+  BulbOutlined
+} from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/app/store';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useAppSelector } from '@/hooks/useAppSelector';
-import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
-import { clearSelection } from '@/features/task-management/selection.slice';
-import { fetchTasksV3 } from '@/features/task-management/task-management.slice';
-import { taskListBulkActionsApiService } from '@/api/tasks/task-list-bulk-actions.api.service';
-import {
-  evt_project_task_list_bulk_archive,
-  evt_project_task_list_bulk_assign_me,
-  evt_project_task_list_bulk_assign_members,
-  evt_project_task_list_bulk_change_phase,
-  evt_project_task_list_bulk_change_priority,
-  evt_project_task_list_bulk_change_status,
-  evt_project_task_list_bulk_delete,
-  evt_project_task_list_bulk_update_labels,
-} from '@/shared/worklenz-analytics-events';
-import {
-  IBulkTasksLabelsRequest,
-  IBulkTasksPhaseChangeRequest,
-  IBulkTasksPriorityChangeRequest,
-  IBulkTasksStatusChangeRequest,
-} from '@/types/tasks/bulk-action-bar.types';
-import { ITaskStatus } from '@/types/tasks/taskStatus.types';
-import { ITaskPriority } from '@/types/tasks/taskPriority.types';
-import { ITaskPhase } from '@/types/tasks/taskPhase.types';
-import { ITaskLabel } from '@/types/tasks/taskLabel.types';
-import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
-import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';
-import { ITaskAssignee } from '@/types/tasks/task.types';
-import { createPortal as createReactPortal } from 'react-dom';
-import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
-import AssigneesDropdown from '@/components/taskListCommon/task-list-bulk-actions-bar/components/AssigneesDropdown';
-import LabelsDropdown from '@/components/taskListCommon/task-list-bulk-actions-bar/components/LabelsDropdown';
-import { sortTeamMembers } from '@/utils/sort-team-members';
-import { fetchLabels } from '@/features/taskAttributes/taskLabelSlice';
-import { useAuthService } from '@/hooks/useAuth';
-import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
-import alertService from '@/services/alerts/alertService';
-import logger from '@/utils/errorLogger';
 
 const { Text } = Typography;
 
@@ -80,6 +33,17 @@ interface OptimizedBulkActionBarProps {
   totalSelected: number;
   projectId: string;
   onClearSelection?: () => void;
+  onBulkStatusChange?: (statusId: string) => void;
+  onBulkPriorityChange?: (priorityId: string) => void;
+  onBulkPhaseChange?: (phaseId: string) => void;
+  onBulkAssignToMe?: () => void;
+  onBulkAssignMembers?: (memberIds: string[]) => void;
+  onBulkAddLabels?: (labelIds: string[]) => void;
+  onBulkArchive?: () => void;
+  onBulkDelete?: () => void;
+  onBulkDuplicate?: () => void;
+  onBulkExport?: () => void;
+  onBulkSetDueDate?: (date: string) => void;
 }
 
 // Performance-optimized memoized action button component
@@ -93,44 +57,51 @@ const ActionButton = React.memo<{
   isDarkMode: boolean;
   badge?: number;
 }>(({ icon, tooltip, onClick, loading = false, danger = false, disabled = false, isDarkMode, badge }) => {
-  const buttonClasses = useMemo(() => {
-    const baseClasses = [
-      'flex items-center justify-center',
-      'h-8 w-8 p-1.5',
-      'text-sm rounded-md',
-      'transition-all duration-150 ease-out',
-      'border-none bg-transparent',
-      'hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2',
-      disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
-    ];
+  const buttonStyle = useMemo(() => ({
+    background: 'transparent',
+    color: isDarkMode ? '#e5e7eb' : '#374151',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '6px',
+    height: '32px',
+    width: '32px',
+    fontSize: '14px',
+    borderRadius: '6px',
+    transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+    ...(danger && {
+      color: '#ef4444',
+    }),
+  }), [isDarkMode, danger, disabled]);
 
-    if (danger) {
-      baseClasses.push(
-        isDarkMode 
-          ? 'text-red-400 hover:bg-red-400/10 focus:ring-red-400/20' 
-          : 'text-red-500 hover:bg-red-500/10 focus:ring-red-500/20'
-      );
-    } else {
-      baseClasses.push(
-        isDarkMode 
-          ? 'text-gray-300 hover:bg-white/10 focus:ring-gray-400/20' 
-          : 'text-gray-600 hover:bg-black/5 focus:ring-gray-400/20'
-      );
-    }
+  const hoverStyle = useMemo(() => ({
+    backgroundColor: isDarkMode 
+      ? (danger ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 255, 255, 0.1)')
+      : (danger ? 'rgba(239, 68, 68, 0.1)' : 'rgba(0, 0, 0, 0.05)'),
+    transform: 'scale(1.05)',
+  }), [isDarkMode, danger]);
 
-    return baseClasses.join(' ');
-  }, [isDarkMode, danger, disabled]);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const combinedStyle = useMemo(() => ({
+    ...buttonStyle,
+    ...(isHovered && !disabled ? hoverStyle : {}),
+  }), [buttonStyle, hoverStyle, isHovered, disabled]);
 
   const ButtonComponent = (
     <Button
       icon={icon}
-      className={buttonClasses}
+      style={combinedStyle}
       size="small"
       loading={loading}
       disabled={disabled}
       onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       type="text"
-      style={{ background: 'transparent', border: 'none' }}
     />
   );
 
@@ -155,44 +126,46 @@ const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = Rea
   totalSelected,
   projectId,
   onClearSelection,
+  onBulkStatusChange,
+  onBulkPriorityChange,
+  onBulkPhaseChange,
+  onBulkAssignToMe,
+  onBulkAssignMembers,
+  onBulkAddLabels,
+  onBulkArchive,
+  onBulkDelete,
+  onBulkDuplicate,
+  onBulkExport,
+  onBulkSetDueDate,
 }) => {
-  const dispatch = useAppDispatch();
   const { t } = useTranslation('tasks/task-table-bulk-actions');
-  const { trackMixpanelEvent } = useMixpanelTracking();
-  const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
+  const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
   
-  // Performance state management
-  const [isVisible, setIsVisible] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [updatingLabels, setUpdatingLabels] = useState(false);
-  const [updatingAssignToMe, setUpdatingAssignToMe] = useState(false);
-  const [updatingAssignees, setUpdatingAssignees] = useState(false);
-  const [updatingArchive, setUpdatingArchive] = useState(false);
-  const [updatingDelete, setUpdatingDelete] = useState(false);
-
-  // Selectors
+  // Get data from Redux store
   const statusList = useAppSelector(state => state.taskStatusReducer.status);
   const priorityList = useAppSelector(state => state.priorityReducer.priorities);
   const phaseList = useAppSelector(state => state.phaseReducer.phaseList);
-  const labelsList = useAppSelector(state => state.taskLabelsReducer.labels);
-  const members = useAppSelector(state => state.teamMembersReducer.teamMembers);
-  const archived = useAppSelector(state => state.taskReducer.archived);
-  const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
-
-  // Local state for dropdowns
-  const labelsInputRef = useRef<InputRef>(null);
-  const [createLabelText, setCreateLabelText] = useState<string>('');
-  const [teamMembersSorted, setTeamMembersSorted] = useState<ITeamMembersViewModel>({
-    data: [],
-    total: 0,
+  
+  // Performance state management
+  const [isVisible, setIsVisible] = useState(false);
+  const [loadingStates, setLoadingStates] = useState({
+    status: false,
+    priority: false,
+    phase: false,
+    assignToMe: false,
+    assignMembers: false,
+    labels: false,
+    archive: false,
+    delete: false,
+    duplicate: false,
+    export: false,
+    dueDate: false,
   });
-  const [assigneeDropdownOpen, setAssigneeDropdownOpen] = useState(false);
-  const [showDrawer, setShowDrawer] = useState(false);
-  const [selectedLabels, setSelectedLabels] = useState<ITaskLabel[]>([]);
 
   // Smooth entrance animation
   useEffect(() => {
     if (totalSelected > 0) {
+      // Micro-delay for smoother animation
       const timer = setTimeout(() => setIsVisible(true), 50);
       return () => clearTimeout(timer);
     } else {
@@ -200,312 +173,118 @@ const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = Rea
     }
   }, [totalSelected]);
 
-  // Update team members when dropdown opens
-  useEffect(() => {
-    if (members?.data && assigneeDropdownOpen) {
-      let sortedMembers = sortTeamMembers(members.data);
-      setTeamMembersSorted({ data: sortedMembers, total: members.total });
-    }
-  }, [assigneeDropdownOpen, members?.data]);
+  // Optimized loading state updater
+  const updateLoadingState = useCallback((action: keyof typeof loadingStates, loading: boolean) => {
+    setLoadingStates(prev => ({ ...prev, [action]: loading }));
+  }, []);
 
-  // Handlers
-  const handleChangeStatus = useCallback(async (status: ITaskStatus) => {
-    if (!status.id || !projectId) return;
+  // Create dropdown menus
+  const statusMenuItems = useMemo(() => 
+    statusList.map(status => ({
+      key: status.id || '',
+      label: <Badge color={status.color_code} text={status.name} />,
+    })), [statusList]
+  );
+
+  const priorityMenuItems = useMemo(() => 
+    priorityList.map(priority => ({
+      key: priority.id || '',
+      label: <Badge color={priority.color_code} text={priority.name} />,
+    })), [priorityList]
+  );
+
+  const phaseMenuItems = useMemo(() => 
+    phaseList.map(phase => ({
+      key: phase.id || '',
+      label: <Badge color={phase.color_code} text={phase.name} />,
+    })), [phaseList]
+  );
+
+  // Menu click handlers
+  const handleStatusMenuClick = useCallback((e: any) => {
+    onBulkStatusChange?.(e.key);
+  }, [onBulkStatusChange]);
+
+  const handlePriorityMenuClick = useCallback((e: any) => {
+    onBulkPriorityChange?.(e.key);
+  }, [onBulkPriorityChange]);
+
+  const handlePhaseMenuClick = useCallback((e: any) => {
+    onBulkPhaseChange?.(e.key);
+  }, [onBulkPhaseChange]);
+
+  // Memoized handlers with loading states
+  const handleStatusChange = useCallback(async () => {
+    updateLoadingState('status', true);
     try {
-      setLoading(true);
-
-      const body: IBulkTasksStatusChangeRequest = {
-        tasks: selectedTaskIds,
-        status_id: status.id,
-      };
-      
-      // Check task dependencies first
-      for (const taskId of selectedTaskIds) {
-        const canContinue = await checkTaskDependencyStatus(taskId, status.id);
-        if (!canContinue) {
-          if (selectedTaskIds.length > 1) {
-            alertService.warning(
-              'Incomplete Dependencies!',
-              'Some tasks were not updated. Please ensure all dependent tasks are completed before proceeding.'
-            );
-          } else {
-            alertService.error(
-              'Task is not completed',
-              'Please complete the task dependencies before proceeding'
-            );
-          }
-          return;
-        }
-      }
-
-      const res = await taskListBulkActionsApiService.changeStatus(body, projectId);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_change_status);
-        dispatch(clearSelection());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`Status updated for ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error changing status:', error);
+      await onBulkStatusChange?.('new-status-id');
     } finally {
-      setLoading(false);
+      updateLoadingState('status', false);
     }
-  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkStatusChange, updateLoadingState]);
 
-  const handleChangePriority = useCallback(async (priority: ITaskPriority) => {
-    if (!priority.id || !projectId) return;
+  const handlePriorityChange = useCallback(async () => {
+    updateLoadingState('priority', true);
     try {
-      setLoading(true);
-      const body: IBulkTasksPriorityChangeRequest = {
-        tasks: selectedTaskIds,
-        priority_id: priority.id,
-      };
-      const res = await taskListBulkActionsApiService.changePriority(body, projectId);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_change_priority);
-        dispatch(clearSelection());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`Priority updated for ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error changing priority:', error);
+      await onBulkPriorityChange?.('new-priority-id');
     } finally {
-      setLoading(false);
+      updateLoadingState('priority', false);
     }
-  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkPriorityChange, updateLoadingState]);
 
-  const handleChangePhase = useCallback(async (phase: ITaskPhase) => {
-    if (!phase.id || !projectId) return;
+  const handlePhaseChange = useCallback(async () => {
+    updateLoadingState('phase', true);
     try {
-      setLoading(true);
-      const body: IBulkTasksPhaseChangeRequest = {
-        tasks: selectedTaskIds,
-        phase_id: phase.id,
-      };
-      const res = await taskListBulkActionsApiService.changePhase(body, projectId);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_change_phase);
-        dispatch(clearSelection());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`Phase updated for ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error changing phase:', error);
+      await onBulkPhaseChange?.('new-phase-id');
     } finally {
-      setLoading(false);
+      updateLoadingState('phase', false);
     }
-  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkPhaseChange, updateLoadingState]);
 
   const handleAssignToMe = useCallback(async () => {
-    if (!projectId) return;
+    updateLoadingState('assignToMe', true);
     try {
-      setUpdatingAssignToMe(true);
-      const body = {
-        tasks: selectedTaskIds,
-        project_id: projectId,
-      };
-      const res = await taskListBulkActionsApiService.assignToMe(body);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_assign_me);
-        dispatch(clearSelection());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`Assigned ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''} to you`);
-      }
-    } catch (error) {
-      logger.error('Error assigning to me:', error);
+      await onBulkAssignToMe?.();
     } finally {
-      setUpdatingAssignToMe(false);
+      updateLoadingState('assignToMe', false);
     }
-  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
-
-  const handleChangeAssignees = useCallback(async (selectedAssignees: ITeamMemberViewModel[]) => {
-    if (!projectId) return;
-    try {
-      setUpdatingAssignees(true);
-      const body = {
-        tasks: selectedTaskIds,
-        project_id: projectId,
-        members: selectedAssignees.map(member => ({
-          id: member.id || '',
-          name: member.name || '',
-          email: member.email || '',
-          avatar_url: member.avatar_url || '',
-          team_member_id: member.id || '',
-          project_member_id: member.id || '',
-        })) as ITaskAssignee[],
-      };
-      const res = await taskListBulkActionsApiService.assignTasks(body);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_assign_members);
-        dispatch(clearSelection());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`Assigned ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''} to ${selectedAssignees.length} member${selectedAssignees.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error assigning tasks:', error);
-    } finally {
-      setUpdatingAssignees(false);
-    }
-  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkAssignToMe, updateLoadingState]);
 
   const handleArchive = useCallback(async () => {
-    if (!projectId) return;
+    updateLoadingState('archive', true);
     try {
-      setUpdatingArchive(true);
-      const body = {
-        tasks: selectedTaskIds,
-        project_id: projectId,
-      };
-      const res = await taskListBulkActionsApiService.archiveTasks(body, archived);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_archive);
-        dispatch(clearSelection());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`${archived ? 'Unarchived' : 'Archived'} ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error archiving tasks:', error);
+      await onBulkArchive?.();
     } finally {
-      setUpdatingArchive(false);
+      updateLoadingState('archive', false);
     }
-  }, [selectedTaskIds, projectId, archived, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkArchive, updateLoadingState]);
 
   const handleDelete = useCallback(async () => {
-    if (!projectId) return;
+    updateLoadingState('delete', true);
     try {
-      setUpdatingDelete(true);
-      const body = {
-        tasks: selectedTaskIds,
-        project_id: projectId,
-      };
-      const res = await taskListBulkActionsApiService.deleteTasks(body, projectId);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_delete);
-        dispatch(deselectAll());
-        dispatch(fetchTasksV3(projectId));
-        onClearSelection?.();
-        message.success(`Deleted ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error deleting tasks:', error);
+      await onBulkDelete?.();
     } finally {
-      setUpdatingDelete(false);
+      updateLoadingState('delete', false);
     }
-  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkDelete, updateLoadingState]);
 
-  const handleLabelChange = useCallback((e: CheckboxChangeEvent, label: ITaskLabel) => {
-    if (e.target.checked) {
-      setSelectedLabels(prev => [...prev, label]);
-    } else {
-      setSelectedLabels(prev => prev.filter(l => l.id !== label.id));
-    }
-  }, []);
-
-  const applyLabels = useCallback(async () => {
-    if (!projectId) return;
+  const handleDuplicate = useCallback(async () => {
+    updateLoadingState('duplicate', true);
     try {
-      setUpdatingLabels(true);
-      const body: IBulkTasksLabelsRequest = {
-        tasks: selectedTaskIds,
-        labels: selectedLabels,
-        text:
-          selectedLabels.length > 0
-            ? null
-            : createLabelText.trim() !== ''
-              ? createLabelText.trim()
-              : null,
-      };
-      const res = await taskListBulkActionsApiService.assignLabels(body, projectId);
-      if (res.done) {
-        trackMixpanelEvent(evt_project_task_list_bulk_update_labels);
-        dispatch(deselectAll());
-        dispatch(fetchTasksV3(projectId));
-        dispatch(fetchLabels());
-        setCreateLabelText('');
-        setSelectedLabels([]);
-        onClearSelection?.();
-        const labelCount = selectedLabels.length > 0 ? selectedLabels.length : 1;
-        const action = selectedLabels.length > 0 ? 'Labels updated' : 'Label created';
-        message.success(`${action} for ${selectedTaskIds.length} task${selectedTaskIds.length > 1 ? 's' : ''}`);
-      }
-    } catch (error) {
-      logger.error('Error updating labels:', error);
+      await onBulkDuplicate?.();
     } finally {
-      setUpdatingLabels(false);
+      updateLoadingState('duplicate', false);
     }
-  }, [selectedTaskIds, selectedLabels, createLabelText, projectId, trackMixpanelEvent, dispatch, onClearSelection]);
+  }, [onBulkDuplicate, updateLoadingState]);
 
-  // Menu Generators
-  const getChangeOptionsMenu = useMemo(() => [
-    {
-      key: '1',
-      label: t('status'),
-      children: statusList.map(status => ({
-        key: status.id,
-        onClick: () => handleChangeStatus(status),
-        label: <Badge color={status.color_code} text={status.name} />,
-      })),
-    },
-    {
-      key: '2',
-      label: t('priority'),
-      children: priorityList.map(priority => ({
-        key: priority.id,
-        onClick: () => handleChangePriority(priority),
-        label: <Badge color={priority.color_code} text={priority.name} />,
-      })),
-    },
-    {
-      key: '3',
-      label: t('phase'),
-      children: phaseList.map(phase => ({
-        key: phase.id,
-        onClick: () => handleChangePhase(phase),
-        label: <Badge color={phase.color_code} text={phase.name} />,
-      })),
-    },
-  ], [statusList, priorityList, phaseList, handleChangeStatus, handleChangePriority, handleChangePhase, t]);
-
-  const getAssigneesMenu = useCallback(() => {
-    return (
-      <AssigneesDropdown
-        members={teamMembersSorted?.data || []}
-        themeMode={isDarkMode ? 'dark' : 'light'}
-        onApply={handleChangeAssignees}
-        onClose={() => setAssigneeDropdownOpen(false)}
-        t={t}
-      />
-    );
-  }, [teamMembersSorted?.data, isDarkMode, handleChangeAssignees, t]);
-
-  const labelsDropdownContent = useMemo(() => (
-    <LabelsDropdown
-      labelsList={labelsList}
-      themeMode={isDarkMode ? 'dark' : 'light'}
-      createLabelText={createLabelText}
-      selectedLabels={selectedLabels}
-      labelsInputRef={labelsInputRef as React.RefObject<InputRef>}
-      onLabelChange={handleLabelChange}
-      onCreateLabelTextChange={value => setCreateLabelText(value)}
-      onApply={applyLabels}
-      t={t}
-      loading={updatingLabels}
-    />
-  ), [labelsList, isDarkMode, createLabelText, selectedLabels, handleLabelChange, applyLabels, t, updatingLabels]);
-
-  const onAssigneeDropdownOpenChange = useCallback((open: boolean) => {
-    if (!open) {
-      setAssigneeDropdownOpen(false);
-    } else {
-      setAssigneeDropdownOpen(true);
+  const handleExport = useCallback(async () => {
+    updateLoadingState('export', true);
+    try {
+      await onBulkExport?.();
+    } finally {
+      updateLoadingState('export', false);
     }
-  }, []);
+  }, [onBulkExport, updateLoadingState]);
 
   // Memoized styles for better performance
   const containerStyle = useMemo((): React.CSSProperties => ({
@@ -537,206 +316,223 @@ const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = Rea
       : '1px solid rgba(229, 231, 235, 0.8)',
   }), [isDarkMode, isVisible]);
 
+  const textStyle = useMemo(() => ({
+    color: isDarkMode ? '#f3f4f6' : '#374151',
+    fontSize: '14px',
+    fontWeight: 500,
+    marginRight: '12px',
+    whiteSpace: 'nowrap' as const,
+  }), [isDarkMode]);
 
-
-  const getLabel = useMemo(() => {
-    const word = totalSelected < 2 ? t('taskSelected') : t('tasksSelected');
-    return `${totalSelected} ${word}`;
-  }, [totalSelected, t]);
-
-  // Don't render if no tasks selected
-  if (totalSelected === 0) {
+  if (!totalSelected || Number(totalSelected) < 1) {
     return null;
   }
 
   return (
-    <>
-      <div 
-        className={`
-          fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50
-          flex items-center gap-1 px-5 py-3
-          min-w-fit max-w-[90vw]
-          rounded-2xl backdrop-blur-xl
-          transition-all duration-300 ease-out
-          ${isVisible ? 'translate-y-0 opacity-100 visible' : 'translate-y-5 opacity-0 invisible'}
-          ${isDarkMode 
-            ? 'bg-gray-800/95 border border-gray-600/30 shadow-2xl shadow-black/40' 
-            : 'bg-white/95 border border-gray-200/80 shadow-xl shadow-black/10'
-          }
-        `}
-      >
-        {/* Selection Count */}
-        <div className={`
-          flex items-center gap-2 mr-3
-          ${isDarkMode ? 'text-gray-100' : 'text-gray-700'}
-        `}>
-          <Badge 
-            count={totalSelected} 
-            className={`
-              ${isDarkMode ? 'bg-blue-500' : 'bg-blue-600'}
-              text-white text-xs font-medium
-              h-4.5 min-w-[18px] leading-[18px]
-            `}
-          />
-          <span className="text-sm font-medium whitespace-nowrap">
-            {getLabel}
-          </span>
-        </div>
-
-        <div className={`
-          w-px h-5 mx-2
-          ${isDarkMode ? 'bg-gray-600/50' : 'bg-gray-300/80'}
-        `} />
-
-        {/* Actions */}
-        <div className="flex items-center gap-0.5">
-          {/* Change Status/Priority/Phase */}
-          <Tooltip title={t('changeStatus')} placement="top">
-            <Dropdown 
-              menu={{ items: getChangeOptionsMenu }} 
-              trigger={['click']}
-              placement="bottom"
-              arrow
-            >
-              <ActionButton
-                icon={<SyncOutlined />}
-                tooltip={t('changeStatus')}
-                loading={loading}
-                isDarkMode={isDarkMode}
-              />
-            </Dropdown>
-          </Tooltip>
-
-          {/* Change Labels */}
-          <Tooltip title={t('changeLabel')} placement="top">
-            <Dropdown
-              dropdownRender={() => labelsDropdownContent}
-              placement="top"
-              arrow
-              trigger={['click']}
-              onOpenChange={value => {
-                if (!value) {
-                  setSelectedLabels([]);
-                }
-              }}
-            >
-              <ActionButton
-                icon={<TagOutlined />}
-                tooltip={t('changeLabel')}
-                loading={updatingLabels}
-                isDarkMode={isDarkMode}
-              />
-            </Dropdown>
-          </Tooltip>
-
-          {/* Assign to Me */}
-          <ActionButton
-            icon={<UserOutlined />}
-            tooltip={t('assignToMe')}
-            onClick={handleAssignToMe}
-            loading={updatingAssignToMe}
-            isDarkMode={isDarkMode}
-          />
-
-          {/* Change Assignees */}
-          <Tooltip title={t('changeAssignees')} placement="top">
-            <Dropdown
-              dropdownRender={getAssigneesMenu}
-              open={assigneeDropdownOpen}
-              onOpenChange={onAssigneeDropdownOpenChange}
-              placement="top"
-              arrow
-              trigger={['click']}
-            >
-              <ActionButton
-                icon={<UsergroupAddOutlined />}
-                tooltip={t('changeAssignees')}
-                loading={updatingAssignees}
-                isDarkMode={isDarkMode}
-              />
-            </Dropdown>
-          </Tooltip>
-
-          {/* Archive */}
-          <ActionButton
-            icon={<BellOutlined />}
-            tooltip={archived ? t('unarchive') : t('archive')}
-            onClick={handleArchive}
-            loading={updatingArchive}
-            isDarkMode={isDarkMode}
-          />
-
-          {/* Delete */}
-          <Popconfirm
-            title={`${t('delete')} ${totalSelected} ${totalSelected === 1 ? t('task') : t('tasks')}?`}
-            description={t('deleteConfirmation')}
-            onConfirm={handleDelete}
-            okText={t('delete')}
-            cancelText={t('cancel')}
-            okType="danger"
-            placement="top"
-          >
-            <ActionButton
-              icon={<DeleteOutlined />}
-              tooltip={t('delete')}
-              loading={updatingDelete}
-              danger
-              isDarkMode={isDarkMode}
-            />
-          </Popconfirm>
-
-          {isOwnerOrAdmin && (
-            <Tooltip title={t('moreOptions')} placement="top">
-              <Dropdown
-                trigger={['click']}
-                menu={{
-                  items: [
-                    {
-                      key: '1',
-                      label: t('createTaskTemplate'),
-                      onClick: () => setShowDrawer(true),
-                    },
-                  ],
-                }}
-              >
-                <ActionButton
-                  icon={<MoreOutlined />}
-                  tooltip={t('moreOptions')}
-                  isDarkMode={isDarkMode}
-                />
-              </Dropdown>
-            </Tooltip>
-          )}
-
-          <div className={`
-            w-px h-5 mx-1
-            ${isDarkMode ? 'bg-gray-600/50' : 'bg-gray-300/80'}
-          `} />
-
-          {/* Clear Selection */}
-          <ActionButton
-            icon={<CloseOutlined />}
-            tooltip={t('deselectAll')}
-            onClick={onClearSelection}
-            isDarkMode={isDarkMode}
-          />
-        </div>
-      </div>
-
-      {/* Portals for modals */}
-      {createReactPortal(
-        <TaskTemplateDrawer
-          showDrawer={showDrawer}
-          selectedTemplateId={null}
-          onClose={() => {
-            setShowDrawer(false);
-            dispatch(deselectAll());
+    <div style={containerStyle}>
+      {/* Selection Count */}
+      <Text style={textStyle}>
+        <Badge 
+          count={totalSelected} 
+          style={{ 
+            backgroundColor: isDarkMode ? '#3b82f6' : '#2563eb',
+            color: 'white',
+            fontSize: '11px',
+            height: '18px',
+            lineHeight: '18px',
+            minWidth: '18px',
+            marginRight: '6px'
           }}
-        />,
-        document.body,
-        'create-task-template'
-      )}
-    </>
+        />
+{t('TASKS_SELECTED', { count: totalSelected })}
+      </Text>
+
+      <Divider 
+        type="vertical" 
+        style={{ 
+          height: '20px', 
+          margin: '0 8px',
+          borderColor: isDarkMode ? 'rgba(55, 65, 81, 0.5)' : 'rgba(229, 231, 235, 0.8)'
+        }} 
+      />
+
+      {/* Actions in same order as original component */}
+      <Space size={2}>
+        {/* Change Status */}
+        <Tooltip title={t('CHANGE_STATUS')} placement="top">
+          <Dropdown 
+            menu={{ 
+              items: statusMenuItems,
+              onClick: handleStatusMenuClick
+            }}
+            trigger={['click']}
+            placement="top"
+            arrow
+          >
+            <Button
+              icon={<RetweetOutlined />}
+              style={{
+                background: 'transparent',
+                color: isDarkMode ? '#e5e7eb' : '#374151',
+                border: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '6px',
+                height: '32px',
+                width: '32px',
+                fontSize: '14px',
+                borderRadius: '6px',
+                transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              size="small"
+              type="text"
+              loading={loadingStates.status}
+            />
+          </Dropdown>
+        </Tooltip>
+
+        {/* Change Priority */}
+        <Tooltip title={t('CHANGE_PRIORITY')} placement="top">
+          <Dropdown 
+            menu={{ 
+              items: priorityMenuItems,
+              onClick: handlePriorityMenuClick
+            }}
+            trigger={['click']}
+            placement="top"
+            arrow
+          >
+            <Button
+              icon={<FlagOutlined />}
+              style={{
+                background: 'transparent',
+                color: isDarkMode ? '#e5e7eb' : '#374151',
+                border: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '6px',
+                height: '32px',
+                width: '32px',
+                fontSize: '14px',
+                borderRadius: '6px',
+                transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              size="small"
+              type="text"
+              loading={loadingStates.priority}
+            />
+          </Dropdown>
+        </Tooltip>
+
+        {/* Change Phase */}
+        <Tooltip title={t('CHANGE_PHASE')} placement="top">
+          <Dropdown 
+            menu={{ 
+              items: phaseMenuItems,
+              onClick: handlePhaseMenuClick
+            }}
+            trigger={['click']}
+            placement="top"
+            arrow
+          >
+            <Button
+              icon={<BulbOutlined />}
+              style={{
+                background: 'transparent',
+                color: isDarkMode ? '#e5e7eb' : '#374151',
+                border: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '6px',
+                height: '32px',
+                width: '32px',
+                fontSize: '14px',
+                borderRadius: '6px',
+                transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
+              }}
+              size="small"
+              type="text"
+              loading={loadingStates.phase}
+            />
+          </Dropdown>
+        </Tooltip>
+
+        {/* Change Labels */}
+        <ActionButton
+          icon={<TagsOutlined />}
+          tooltip={t('ADD_LABELS')}
+          onClick={() => onBulkAddLabels?.([])}
+          loading={loadingStates.labels}
+          isDarkMode={isDarkMode}
+        />
+
+        {/* Assign to Me */}
+        <ActionButton
+          icon={<UserAddOutlined />}
+          tooltip={t('ASSIGN_TO_ME')}
+          onClick={handleAssignToMe}
+          loading={loadingStates.assignToMe}
+          isDarkMode={isDarkMode}
+        />
+
+        {/* Change Assignees */}
+        <ActionButton
+          icon={<UsergroupAddOutlined />}
+          tooltip={t('ASSIGN_MEMBERS')}
+          onClick={() => onBulkAssignMembers?.([])}
+          loading={loadingStates.assignMembers}
+          isDarkMode={isDarkMode}
+        />
+
+        {/* Archive */}
+        <ActionButton
+          icon={<InboxOutlined />}
+          tooltip={t('ARCHIVE')}
+          onClick={handleArchive}
+          loading={loadingStates.archive}
+          isDarkMode={isDarkMode}
+        />
+
+        {/* Delete */}
+        <Popconfirm
+          title={t('DELETE_TASKS_CONFIRM', { count: totalSelected })}
+          description={t('DELETE_TASKS_WARNING')}
+          onConfirm={handleDelete}
+          okText={t('DELETE')}
+          cancelText={t('CANCEL')}
+          okType="danger"
+          placement="top"
+        >
+          <ActionButton
+            icon={<DeleteOutlined />}
+            tooltip={t('DELETE')}
+            loading={loadingStates.delete}
+            danger
+            isDarkMode={isDarkMode}
+          />
+        </Popconfirm>
+
+        <Divider 
+          type="vertical" 
+          style={{ 
+            height: '20px', 
+            margin: '0 4px',
+            borderColor: isDarkMode ? 'rgba(55, 65, 81, 0.5)' : 'rgba(229, 231, 235, 0.8)'
+          }} 
+        />
+
+        {/* Clear Selection */}
+        <ActionButton
+          icon={<CloseOutlined />}
+          tooltip={t('CLEAR_SELECTION')}
+          onClick={onClearSelection}
+          isDarkMode={isDarkMode}
+        />
+      </Space>
+    </div>
   );
 });
 
@@ -744,8 +540,8 @@ OptimizedBulkActionBarContent.displayName = 'OptimizedBulkActionBarContent';
 
 // Portal wrapper for performance isolation
 const OptimizedBulkActionBar: React.FC<OptimizedBulkActionBarProps> = React.memo((props) => {
-  // Only render portal if tasks are selected for better performance
-  if (props.totalSelected === 0) {
+  console.log('BulkActionBar totalSelected:', props.totalSelected, typeof props.totalSelected);
+  if (!props.totalSelected || Number(props.totalSelected) < 1) {
     return null;
   }
 
diff --git a/worklenz-frontend/src/components/task-management/task-list-board.tsx b/worklenz-frontend/src/components/task-management/task-list-board.tsx
index ba4e0cf5..0a1809f4 100644
--- a/worklenz-frontend/src/components/task-management/task-list-board.tsx
+++ b/worklenz-frontend/src/components/task-management/task-list-board.tsx
@@ -35,16 +35,45 @@ import {
 import {
   selectSelectedTaskIds,
   toggleTaskSelection,
+  clearSelection,
 } from '@/features/task-management/selection.slice';
 import { Task } from '@/types/task-management.types';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
 import TaskRow from './task-row';
 // import BulkActionBar from './bulk-action-bar';
 import OptimizedBulkActionBar from './optimized-bulk-action-bar';
+// import OptimizedBulkActionBar from './optimized-bulk-action-bar';
 import VirtualizedTaskList from './virtualized-task-list';
 import { AppDispatch } from '@/app/store';
 import { shallowEqual } from 'react-redux';
-import { clearSelection } from '@/features/task-management/selection.slice';
+import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
+import { taskListBulkActionsApiService } from '@/api/tasks/task-list-bulk-actions.api.service';
+import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
+import {
+  evt_project_task_list_bulk_archive,
+  evt_project_task_list_bulk_assign_me,
+  evt_project_task_list_bulk_assign_members,
+  evt_project_task_list_bulk_change_phase,
+  evt_project_task_list_bulk_change_priority,
+  evt_project_task_list_bulk_change_status,
+  evt_project_task_list_bulk_delete,
+  evt_project_task_list_bulk_update_labels,
+} from '@/shared/worklenz-analytics-events';
+import {
+  IBulkTasksLabelsRequest,
+  IBulkTasksPhaseChangeRequest,
+  IBulkTasksPriorityChangeRequest,
+  IBulkTasksStatusChangeRequest,
+} from '@/types/tasks/bulk-action-bar.types';
+import { ITaskStatus } from '@/types/tasks/taskStatus.types';
+import { ITaskPriority } from '@/types/tasks/taskPriority.types';
+import { ITaskPhase } from '@/types/tasks/taskPhase.types';
+import { ITaskLabel } from '@/types/tasks/taskLabel.types';
+import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
+import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
+import alertService from '@/services/alerts/alertService';
+import logger from '@/utils/errorLogger';
+import { fetchLabels } from '@/features/taskAttributes/taskLabelSlice';
 import { performanceMonitor } from '@/utils/performance-monitor';
 import debugPerformance from '@/utils/debug-performance';
 
@@ -93,6 +122,7 @@ const throttle = <T extends (...args: any[]) => void>(func: T, delay: number): T
 const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = '' }) => {
   const dispatch = useDispatch<AppDispatch>();
   const { t } = useTranslation('task-management');
+  const { trackMixpanelEvent } = useMixpanelTracking();
   const [dragState, setDragState] = useState<DragState>({
     activeTask: null,
     activeGroupId: null,
@@ -122,7 +152,13 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
   const loading = useSelector((state: RootState) => state.taskManagement.loading, shallowEqual);
   const error = useSelector((state: RootState) => state.taskManagement.error);
   
-
+  // Bulk action selectors
+  const statusList = useSelector((state: RootState) => state.taskStatusReducer.status);
+  const priorityList = useSelector((state: RootState) => state.priorityReducer.priorities);
+  const phaseList = useSelector((state: RootState) => state.phaseReducer.phaseList);
+  const labelsList = useSelector((state: RootState) => state.taskLabelsReducer.labels);
+  const members = useSelector((state: RootState) => state.teamMembersReducer.teamMembers);
+  const archived = useSelector((state: RootState) => state.taskReducer.archived);
 
   // Get theme from Redux store
   const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
@@ -405,11 +441,230 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
     );
   }, [dragState.activeTask, dragState.activeGroupId, projectId, currentGrouping]);
 
-  // Bulk action handler
+  // Bulk action handlers - implementing real functionality from task-list-bulk-actions-bar
   const handleClearSelection = useCallback(() => {
+    dispatch(deselectAll());
     dispatch(clearSelection());
   }, [dispatch]);
 
+  const handleBulkStatusChange = useCallback(async (statusId: string) => {
+    if (!statusId || !projectId) return;
+    try {
+      // Find the status object
+      const status = statusList.find(s => s.id === statusId);
+      if (!status || !status.id) return;
+
+      const body: IBulkTasksStatusChangeRequest = {
+        tasks: selectedTaskIds,
+        status_id: status.id,
+      };
+      
+      // Check task dependencies first
+      for (const taskId of selectedTaskIds) {
+        const canContinue = await checkTaskDependencyStatus(taskId, status.id);
+        if (!canContinue) {
+          if (selectedTaskIds.length > 1) {
+            alertService.warning(
+              'Incomplete Dependencies!',
+              'Some tasks were not updated. Please ensure all dependent tasks are completed before proceeding.'
+            );
+          } else {
+            alertService.error(
+              'Task is not completed',
+              'Please complete the task dependencies before proceeding'
+            );
+          }
+          return;
+        }
+      }
+
+      const res = await taskListBulkActionsApiService.changeStatus(body, projectId);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_change_status);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error changing status:', error);
+    }
+  }, [selectedTaskIds, statusList, projectId, trackMixpanelEvent, dispatch]);
+
+  const handleBulkPriorityChange = useCallback(async (priorityId: string) => {
+    if (!priorityId || !projectId) return;
+    try {
+      const priority = priorityList.find(p => p.id === priorityId);
+      if (!priority || !priority.id) return;
+
+      const body: IBulkTasksPriorityChangeRequest = {
+        tasks: selectedTaskIds,
+        priority_id: priority.id,
+      };
+      const res = await taskListBulkActionsApiService.changePriority(body, projectId);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_change_priority);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error changing priority:', error);
+    }
+  }, [selectedTaskIds, priorityList, projectId, trackMixpanelEvent, dispatch]);
+
+  const handleBulkPhaseChange = useCallback(async (phaseId: string) => {
+    if (!phaseId || !projectId) return;
+    try {
+      const phase = phaseList.find(p => p.id === phaseId);
+      if (!phase || !phase.id) return;
+
+      const body: IBulkTasksPhaseChangeRequest = {
+        tasks: selectedTaskIds,
+        phase_id: phase.id,
+      };
+      const res = await taskListBulkActionsApiService.changePhase(body, projectId);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_change_phase);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error changing phase:', error);
+    }
+  }, [selectedTaskIds, phaseList, projectId, trackMixpanelEvent, dispatch]);
+
+  const handleBulkAssignToMe = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const body = {
+        tasks: selectedTaskIds,
+        project_id: projectId,
+      };
+      const res = await taskListBulkActionsApiService.assignToMe(body);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_assign_me);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error assigning to me:', error);
+    }
+  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch]);
+
+  const handleBulkAssignMembers = useCallback(async (memberIds: string[]) => {
+    if (!projectId || !members?.data) return;
+    try {
+      // Convert memberIds to member objects with proper type checking
+      const selectedMembers = members.data.filter(member => 
+        member.id && memberIds.includes(member.id)
+      );
+      
+      const body = {
+        tasks: selectedTaskIds,
+        project_id: projectId,
+        members: selectedMembers.map(member => ({
+          id: member.id!,
+          name: member.name || '',
+          email: member.email || '',
+          avatar_url: member.avatar_url || '',
+          team_member_id: member.id!,
+          project_member_id: member.id!,
+        })),
+      };
+      const res = await taskListBulkActionsApiService.assignTasks(body);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_assign_members);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error assigning tasks:', error);
+    }
+  }, [selectedTaskIds, projectId, members, trackMixpanelEvent, dispatch]);
+
+  const handleBulkAddLabels = useCallback(async (labelIds: string[]) => {
+    if (!projectId) return;
+    try {
+      // Convert labelIds to label objects with proper type checking
+      const selectedLabels = labelsList.filter(label => 
+        label.id && labelIds.includes(label.id)
+      );
+      
+      const body: IBulkTasksLabelsRequest = {
+        tasks: selectedTaskIds,
+        labels: selectedLabels,
+        text: null,
+      };
+      const res = await taskListBulkActionsApiService.assignLabels(body, projectId);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_update_labels);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+        dispatch(fetchLabels());
+      }
+    } catch (error) {
+      logger.error('Error updating labels:', error);
+    }
+  }, [selectedTaskIds, projectId, labelsList, trackMixpanelEvent, dispatch]);
+
+  const handleBulkArchive = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const body = {
+        tasks: selectedTaskIds,
+        project_id: projectId,
+      };
+      const res = await taskListBulkActionsApiService.archiveTasks(body, archived);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_archive);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error archiving tasks:', error);
+    }
+  }, [selectedTaskIds, projectId, archived, trackMixpanelEvent, dispatch]);
+
+  const handleBulkDelete = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const body = {
+        tasks: selectedTaskIds,
+        project_id: projectId,
+      };
+      const res = await taskListBulkActionsApiService.deleteTasks(body, projectId);
+      if (res.done) {
+        trackMixpanelEvent(evt_project_task_list_bulk_delete);
+        dispatch(deselectAll());
+        dispatch(clearSelection());
+        dispatch(fetchTasksV3(projectId));
+      }
+    } catch (error) {
+      logger.error('Error deleting tasks:', error);
+    }
+  }, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch]);
+
+  // Additional handlers for new actions
+  const handleBulkDuplicate = useCallback(async () => {
+    // This would need to be implemented in the API service
+    console.log('Bulk duplicate not yet implemented in API:', selectedTaskIds);
+  }, [selectedTaskIds]);
+
+  const handleBulkExport = useCallback(async () => {
+    // This would need to be implemented in the API service
+    console.log('Bulk export not yet implemented in API:', selectedTaskIds);
+  }, [selectedTaskIds]);
+
+  const handleBulkSetDueDate = useCallback(async (date: string) => {
+    // This would need to be implemented in the API service
+    console.log('Bulk set due date not yet implemented in API:', date, selectedTaskIds);
+  }, [selectedTaskIds]);
+
   // Cleanup effect
   useEffect(() => {
     return () => {
@@ -540,6 +795,17 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
         totalSelected={selectedTaskIds.length}
         projectId={projectId}
         onClearSelection={handleClearSelection}
+        onBulkStatusChange={handleBulkStatusChange}
+        onBulkPriorityChange={handleBulkPriorityChange}
+        onBulkPhaseChange={handleBulkPhaseChange}
+        onBulkAssignToMe={handleBulkAssignToMe}
+        onBulkAssignMembers={handleBulkAssignMembers}
+        onBulkAddLabels={handleBulkAddLabels}
+        onBulkArchive={handleBulkArchive}
+        onBulkDelete={handleBulkDelete}
+        onBulkDuplicate={handleBulkDuplicate}
+        onBulkExport={handleBulkExport}
+        onBulkSetDueDate={handleBulkSetDueDate}
       />
 
       <style>{`
@@ -1018,4 +1284,4 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
   );
 };
 
-export default TaskListBoard;
+export default TaskListBoard;
\ No newline at end of file