diff --git a/worklenz-backend/src/controllers/projects-controller.ts b/worklenz-backend/src/controllers/projects-controller.ts
index a350675e..da204832 100644
--- a/worklenz-backend/src/controllers/projects-controller.ts
+++ b/worklenz-backend/src/controllers/projects-controller.ts
@@ -71,7 +71,7 @@ export default class ProjectsController extends WorklenzControllerBase {
         return res.status(200).send(new ServerResponse(false, [], `Sorry, the free plan cannot have more than ${projectsLimit} projects.`));
       }
     }
-    
+
     const q = `SELECT create_project($1) AS project`;
 
     req.body.team_id = req.user?.team_id || null;
@@ -317,65 +317,58 @@ export default class ProjectsController extends WorklenzControllerBase {
   @HandleExceptions()
   public static async getMembersByProjectId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const {sortField, sortOrder, size, offset} = this.toPaginationOptions(req.query, "name");
+    const search = (req.query.search || "").toString().trim();
+
+    let searchFilter = "";
+    const params = [req.params.id, req.user?.team_id ?? null, size, offset];
+    if (search) {
+      searchFilter = `
+        AND (
+          (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) ILIKE '%' || $5 || '%'
+          OR (SELECT email FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) ILIKE '%' || $5 || '%'
+        )
+      `;
+      params.push(search);
+    }
 
     const q = `
-      SELECT ROW_TO_JSON(rec) AS members
-      FROM (SELECT COUNT(*) AS total,
-                   (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(t))), '[]'::JSON)
-                    FROM (SELECT project_members.id,
-                                 team_member_id,
-                                 (SELECT name
-                                  FROM team_member_info_view
-                                  WHERE team_member_info_view.team_member_id = tm.id),
-                                 (SELECT email
-                                  FROM team_member_info_view
-                                  WHERE team_member_info_view.team_member_id = tm.id) AS email,
-                                 u.avatar_url,
-                                 (SELECT COUNT(*)
-                                  FROM tasks
-                                  WHERE archived IS FALSE
-                                    AND project_id = project_members.project_id
-                                    AND id IN (SELECT task_id
-                                               FROM tasks_assignees
-                                               WHERE tasks_assignees.project_member_id = project_members.id)) AS all_tasks_count,
-                                 (SELECT COUNT(*)
-                                  FROM tasks
-                                  WHERE archived IS FALSE
-                                    AND project_id = project_members.project_id
-                                    AND id IN (SELECT task_id
-                                               FROM tasks_assignees
-                                               WHERE tasks_assignees.project_member_id = project_members.id)
-                                    AND status_id IN (SELECT id
-                                                      FROM task_statuses
-                                                      WHERE category_id = (SELECT id
-                                                                           FROM sys_task_status_categories
-                                                                           WHERE is_done IS TRUE))) AS completed_tasks_count,
-                                 EXISTS(SELECT email
-                                        FROM email_invitations
-                                        WHERE team_member_id = project_members.team_member_id
-                                          AND email_invitations.team_id = $2) AS pending_invitation,
-                                 (SELECT project_access_levels.name
-                                  FROM project_access_levels
-                                  WHERE project_access_levels.id = project_members.project_access_level_id) AS access,
-                                 (SELECT name FROM job_titles WHERE id = tm.job_title_id) AS job_title
-                          FROM project_members
-                                 INNER JOIN team_members tm ON project_members.team_member_id = tm.id
-                                 LEFT JOIN users u ON tm.user_id = u.id
-                          WHERE project_id = $1
-                          ORDER BY ${sortField} ${sortOrder}
-                          LIMIT $3 OFFSET $4) t) AS data
-            FROM project_members
-            WHERE project_id = $1) rec;
+      WITH filtered_members AS (
+        SELECT project_members.id,
+               team_member_id,
+               (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) AS name,
+               (SELECT email FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) AS email,
+               u.avatar_url,
+               (SELECT COUNT(*) FROM tasks WHERE archived IS FALSE AND project_id = project_members.project_id AND id IN (SELECT task_id FROM tasks_assignees WHERE tasks_assignees.project_member_id = project_members.id)) AS all_tasks_count,
+               (SELECT COUNT(*) FROM tasks WHERE archived IS FALSE AND project_id = project_members.project_id AND id IN (SELECT task_id FROM tasks_assignees WHERE tasks_assignees.project_member_id = project_members.id) AND status_id IN (SELECT id FROM task_statuses WHERE category_id = (SELECT id FROM sys_task_status_categories WHERE is_done IS TRUE))) AS completed_tasks_count,
+               EXISTS(SELECT email FROM email_invitations WHERE team_member_id = project_members.team_member_id AND email_invitations.team_id = $2) AS pending_invitation,
+               (SELECT project_access_levels.name FROM project_access_levels WHERE project_access_levels.id = project_members.project_access_level_id) AS access,
+               (SELECT name FROM job_titles WHERE id = tm.job_title_id) AS job_title
+        FROM project_members
+        INNER JOIN team_members tm ON project_members.team_member_id = tm.id
+        LEFT JOIN users u ON tm.user_id = u.id
+        WHERE project_id = $1
+        ${search ? searchFilter : ""}
+      )
+      SELECT
+        (SELECT COUNT(*) FROM filtered_members) AS total,
+        (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(t))), '[]'::JSON)
+           FROM (
+             SELECT * FROM filtered_members
+             ORDER BY ${sortField} ${sortOrder}
+             LIMIT $3 OFFSET $4
+           ) t
+        ) AS data
     `;
-    const result = await db.query(q, [req.params.id, req.user?.team_id ?? null, size, offset]);
+
+    const result = await db.query(q, params);
     const [data] = result.rows;
 
-    for (const member of data?.members.data || []) {
+    for (const member of data?.data || []) {
       member.progress = member.all_tasks_count > 0
         ? ((member.completed_tasks_count / member.all_tasks_count) * 100).toFixed(0) : 0;
     }
 
-    return res.status(200).send(new ServerResponse(true, data?.members || this.paginatedDatasetDefaultStruct));
+    return res.status(200).send(new ServerResponse(true, data || this.paginatedDatasetDefaultStruct));
   }
 
   @HandleExceptions()
@@ -779,7 +772,7 @@ export default class ProjectsController extends WorklenzControllerBase {
     let groupJoin = "";
     let groupByFields = "";
     let groupOrderBy = "";
-    
+
     switch (groupBy) {
       case "client":
         groupField = "COALESCE(projects.client_id::text, 'no-client')";
@@ -888,13 +881,13 @@ export default class ProjectsController extends WorklenzControllerBase {
                                              ELSE p2.updated_at END) AS updated_at
                             FROM projects p2
                             ${groupJoin.replace("projects.", "p2.")}
-                            WHERE p2.team_id = $1 
+                            WHERE p2.team_id = $1
                               AND ${groupField.replace("projects.", "p2.")} = ${groupField}
-                              ${categories.replace("projects.", "p2.")} 
-                              ${statuses.replace("projects.", "p2.")} 
-                              ${isArchived.replace("projects.", "p2.")} 
-                              ${isFavorites.replace("projects.", "p2.")} 
-                              ${filterByMember.replace("projects.", "p2.")} 
+                              ${categories.replace("projects.", "p2.")}
+                              ${statuses.replace("projects.", "p2.")}
+                              ${isArchived.replace("projects.", "p2.")}
+                              ${isFavorites.replace("projects.", "p2.")}
+                              ${filterByMember.replace("projects.", "p2.")}
                               ${searchQuery.replace("projects.", "p2.")}
                             ORDER BY ${innerSortField} ${sortOrder}
                           ) project_data
diff --git a/worklenz-frontend/public/locales/alb/kanban-board.json b/worklenz-frontend/public/locales/alb/kanban-board.json
index def705aa..50835235 100644
--- a/worklenz-frontend/public/locales/alb/kanban-board.json
+++ b/worklenz-frontend/public/locales/alb/kanban-board.json
@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Po",
   "deleteConfirmationCancel": "Anulo",
 
+  "deleteTaskTitle": "Fshi Detyrën",
+  "deleteTaskContent": "Jeni i sigurt që doni të fshini këtë detyrë? Kjo veprim nuk mund të zhbëhet.",
+  "deleteTaskConfirm": "Fshi",
+  "deleteTaskCancel": "Anulo",
+
+  "deleteStatusTitle": "Fshi Statusin",
+  "deleteStatusContent": "Jeni i sigurt që doni të fshini këtë status? Kjo veprim nuk mund të zhbëhet.",
+
+  "deletePhaseTitle": "Fshi Fazen",
+  "deletePhaseContent": "Jeni i sigurt që doni të fshini këtë fazë? Kjo veprim nuk mund të zhbëhet.",
+
   "dueDate": "Data e përfundimit",
   "cancel": "Anulo",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Pa datë përfundimi",
   "save": "Ruaj",
   "clear": "Pastro",
-  "nextWeek": "Javën e ardhshme"
+  "nextWeek": "Javën e ardhshme",
+  "noSubtasks": "Pa nëndetyra",
+  "showSubtasks": "Shfaq nëndetyrat",
+  "hideSubtasks": "Fshih nëndetyrat",
+  
+  "errorLoadingTasks": "Gabim gjatë ngarkimit të detyrave",
+  "noTasksFound": "Nuk u gjetën detyra",
+  "loadingFilters": "Duke ngarkuar filtra...",
+  "failedToUpdateColumnOrder": "Dështoi përditësimi i rendit të kolonave",
+  "failedToUpdatePhaseOrder": "Dështoi përditësimi i rendit të fazave",
+  "pleaseTryAgain": "Ju lutemi provoni përsëri",
+  "taskNotCompleted": "Detyra nuk është përfunduar",
+  "completeTaskDependencies": "Ju lutemi përfundoni varësitë e detyrës para se të vazhdoni"
 }
diff --git a/worklenz-frontend/public/locales/alb/project-view-members.json b/worklenz-frontend/public/locales/alb/project-view-members.json
index 239b77e9..b6406344 100644
--- a/worklenz-frontend/public/locales/alb/project-view-members.json
+++ b/worklenz-frontend/public/locales/alb/project-view-members.json
@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Hiq nga projekti",
   "memberCount": "Anëtar",
   "membersCountPlural": "Anëtarë",
-  "emptyText": "Nuk ka bashkëngjitje në projekt."
+  "emptyText": "Nuk ka bashkëngjitje në projekt.",
+  "searchPlaceholder": "Kërko anëtarë"
 }
diff --git a/worklenz-frontend/public/locales/alb/project-view/project-member-drawer.json b/worklenz-frontend/public/locales/alb/project-view/project-member-drawer.json
index aa6637e1..03c891c0 100644
--- a/worklenz-frontend/public/locales/alb/project-view/project-member-drawer.json
+++ b/worklenz-frontend/public/locales/alb/project-view/project-member-drawer.json
@@ -3,5 +3,9 @@
   "searchLabel": "Shtoni anëtarë duke shkruar emrin ose email-in e tyre",
   "searchPlaceholder": "Shkruani emrin ose email-in",
   "inviteAsAMember": "Fto si anëtar",
-  "inviteNewMemberByEmail": "Fto anëtar të ri me email"
+  "inviteNewMemberByEmail": "Fto anëtar të ri me email",
+  "members": "Anëtarë",
+  "copyProjectLink": "Kopjo lidhjen e projektit",
+  "inviteMember": "Fto anëtar",
+  "alsoInviteToProject": "Fto edhe në projekt"
 }
diff --git a/worklenz-frontend/public/locales/alb/settings/team-members.json b/worklenz-frontend/public/locales/alb/settings/team-members.json
index 955954dc..935d5a0f 100644
--- a/worklenz-frontend/public/locales/alb/settings/team-members.json
+++ b/worklenz-frontend/public/locales/alb/settings/team-members.json
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Titulli i Punës",
   "jobTitlePlaceholder": "Zgjidh ose kërko titull pune (Opsionale)",
   "memberAccessLabel": "Niveli i Qasjes",
-  "addToTeamButton": "Shto Anëtar në Ekip",
+  "addToTeamButton": "Dërgo ftesën",
   "updateButton": "Ruaj Ndryshimet",
   "resendInvitationButton": "Dërgo Përsëri Email-in e Ftesës",
   "invitationSentSuccessMessage": "Ftesa për ekip u dërgua me sukses!",
@@ -43,5 +43,6 @@
   "updatedText": "Përditësuar",
   "noResultFound": "Shkruani një adresë email dhe shtypni Enter...",
   "jobTitlesFetchError": "Dështoi marrja e titujve të punës",
-  "invitationResent": "Ftesa u dërgua sërish me sukses!"
+  "invitationResent": "Ftesa u dërgua sërish me sukses!",
+  "copyTeamLink": "Kopjo lidhjen e ekipit"
 }
diff --git a/worklenz-frontend/public/locales/de/kanban-board.json b/worklenz-frontend/public/locales/de/kanban-board.json
index 70e1f6ca..10b58b95 100644
--- a/worklenz-frontend/public/locales/de/kanban-board.json
+++ b/worklenz-frontend/public/locales/de/kanban-board.json
@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Ja",
   "deleteConfirmationCancel": "Abbrechen",
 
+  "deleteTaskTitle": "Aufgabe löschen",
+  "deleteTaskContent": "Sind Sie sicher, dass Sie diese Aufgabe löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+  "deleteTaskConfirm": "Löschen",
+  "deleteTaskCancel": "Abbrechen",
+
+  "deleteStatusTitle": "Status löschen",
+  "deleteStatusContent": "Sind Sie sicher, dass Sie diesen Status löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+
+  "deletePhaseTitle": "Phase löschen",
+  "deletePhaseContent": "Sind Sie sicher, dass Sie diese Phase löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+
   "dueDate": "Fälligkeitsdatum",
   "cancel": "Abbrechen",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Kein Fälligkeitsdatum",
   "save": "Speichern",
   "clear": "Löschen",
-  "nextWeek": "Nächste Woche"
+  "nextWeek": "Nächste Woche",
+  "noSubtasks": "Keine Unteraufgaben",
+  "showSubtasks": "Unteraufgaben anzeigen",
+  "hideSubtasks": "Unteraufgaben ausblenden",
+  
+  "errorLoadingTasks": "Fehler beim Laden der Aufgaben",
+  "noTasksFound": "Keine Aufgaben gefunden",
+  "loadingFilters": "Filter werden geladen...",
+  "failedToUpdateColumnOrder": "Fehler beim Aktualisieren der Spaltenreihenfolge",
+  "failedToUpdatePhaseOrder": "Fehler beim Aktualisieren der Phasenreihenfolge",
+  "pleaseTryAgain": "Bitte versuchen Sie es erneut",
+  "taskNotCompleted": "Aufgabe ist nicht abgeschlossen",
+  "completeTaskDependencies": "Bitte schließen Sie die Aufgabenabhängigkeiten ab, bevor Sie fortfahren"
 }
diff --git a/worklenz-frontend/public/locales/de/project-view-members.json b/worklenz-frontend/public/locales/de/project-view-members.json
index eee5d0a1..4e40f757 100644
--- a/worklenz-frontend/public/locales/de/project-view-members.json
+++ b/worklenz-frontend/public/locales/de/project-view-members.json
@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Aus Projekt entfernen",
   "memberCount": "Mitglied",
   "membersCountPlural": "Mitglieder",
-  "emptyText": "Es gibt keine Anhänge in diesem Projekt."
+  "emptyText": "Es gibt keine Anhänge in diesem Projekt.",
+  "searchPlaceholder": "Mitglieder suchen"
 }
diff --git a/worklenz-frontend/public/locales/de/project-view/project-member-drawer.json b/worklenz-frontend/public/locales/de/project-view/project-member-drawer.json
index cb391b2c..b92056e8 100644
--- a/worklenz-frontend/public/locales/de/project-view/project-member-drawer.json
+++ b/worklenz-frontend/public/locales/de/project-view/project-member-drawer.json
@@ -3,5 +3,9 @@
   "searchLabel": "Mitglieder hinzufügen durch Eingabe von Name oder E-Mail",
   "searchPlaceholder": "Name oder E-Mail eingeben",
   "inviteAsAMember": "Als Mitglied einladen",
-  "inviteNewMemberByEmail": "Neues Mitglied per E-Mail einladen"
+  "inviteNewMemberByEmail": "Neues Mitglied per E-Mail einladen",
+  "members": "Mitglieder",
+  "copyProjectLink": "Projektlink kopieren",
+  "inviteMember": "Mitglied einladen",
+  "alsoInviteToProject": "Auch zum Projekt einladen"
 }
diff --git a/worklenz-frontend/public/locales/de/settings/team-members.json b/worklenz-frontend/public/locales/de/settings/team-members.json
index d223f08e..55c01713 100644
--- a/worklenz-frontend/public/locales/de/settings/team-members.json
+++ b/worklenz-frontend/public/locales/de/settings/team-members.json
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Jobtitel",
   "jobTitlePlaceholder": "Jobtitel auswählen oder suchen (optional)",
   "memberAccessLabel": "Zugriffslevel",
-  "addToTeamButton": "Mitglied zum Team hinzufügen",
+  "addToTeamButton": "Einladung senden",
   "updateButton": "Änderungen speichern",
   "resendInvitationButton": "Einladungs-E-Mail erneut senden",
   "invitationSentSuccessMessage": "Team-Einladung erfolgreich versendet!",
@@ -43,5 +43,6 @@
   "updatedText": "Aktualisiert",
   "noResultFound": "Geben Sie eine E-Mail-Adresse ein und drücken Sie Enter...",
   "jobTitlesFetchError": "Fehler beim Abrufen der Jobtitel",
-  "invitationResent": "Einladung erfolgreich erneut gesendet!"
+  "invitationResent": "Einladung erfolgreich erneut gesendet!",
+  "copyTeamLink": "Team-Link kopieren"
 }
diff --git a/worklenz-frontend/public/locales/en/kanban-board.json b/worklenz-frontend/public/locales/en/kanban-board.json
index e295a6c6..77659152 100644
--- a/worklenz-frontend/public/locales/en/kanban-board.json
+++ b/worklenz-frontend/public/locales/en/kanban-board.json
@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Yes",
   "deleteConfirmationCancel": "Cancel",
 
+  "deleteTaskTitle": "Delete Task",
+  "deleteTaskContent": "Are you sure you want to delete this task? This action cannot be undone.",
+  "deleteTaskConfirm": "Delete",
+  "deleteTaskCancel": "Cancel",
+
+  "deleteStatusTitle": "Delete Status",
+  "deleteStatusContent": "Are you sure you want to delete this status? This action cannot be undone.",
+
+  "deletePhaseTitle": "Delete Phase",
+  "deletePhaseContent": "Are you sure you want to delete this phase? This action cannot be undone.",
+
   "dueDate": "Due date",
   "cancel": "Cancel",
 
@@ -29,5 +40,14 @@
   "nextWeek": "Next week",
   "noSubtasks": "No subtasks",
   "showSubtasks": "Show subtasks",
-  "hideSubtasks": "Hide subtasks"
+  "hideSubtasks": "Hide subtasks",
+  
+  "errorLoadingTasks": "Error loading tasks",
+  "noTasksFound": "No tasks found",
+  "loadingFilters": "Loading filters...",
+  "failedToUpdateColumnOrder": "Failed to update column order",
+  "failedToUpdatePhaseOrder": "Failed to update phase order",
+  "pleaseTryAgain": "Please try again",
+  "taskNotCompleted": "Task is not completed",
+  "completeTaskDependencies": "Please complete the task dependencies before proceeding"
 }
diff --git a/worklenz-frontend/public/locales/en/project-view-members.json b/worklenz-frontend/public/locales/en/project-view-members.json
index 6ed8ddf0..fd15ca71 100644
--- a/worklenz-frontend/public/locales/en/project-view-members.json
+++ b/worklenz-frontend/public/locales/en/project-view-members.json
@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Remove from project",
   "memberCount": "Member",
   "membersCountPlural": "Members",
-  "emptyText": "There are no attachments in the project."
+  "emptyText": "There are no attachments in the project.",
+  "searchPlaceholder": "Search members"
 }
diff --git a/worklenz-frontend/public/locales/en/project-view/project-member-drawer.json b/worklenz-frontend/public/locales/en/project-view/project-member-drawer.json
index ad2d60c8..29262250 100644
--- a/worklenz-frontend/public/locales/en/project-view/project-member-drawer.json
+++ b/worklenz-frontend/public/locales/en/project-view/project-member-drawer.json
@@ -1,7 +1,11 @@
 {
-  "title": "Project Members",
+  "title": "Share Project",
   "searchLabel": "Add members by adding their name or email",
   "searchPlaceholder": "Type name or email",
   "inviteAsAMember": "Invite as a member",
-  "inviteNewMemberByEmail": "Invite new member by email"
+  "inviteNewMemberByEmail": "Invite new member by email",
+  "members": "Members",
+  "copyProjectLink": "Copy project link",
+  "inviteMember": "Invite Member",
+  "alsoInviteToProject": "Also invite to project"
 }
diff --git a/worklenz-frontend/public/locales/en/settings/team-members.json b/worklenz-frontend/public/locales/en/settings/team-members.json
index 36918b90..d59f2cf2 100644
--- a/worklenz-frontend/public/locales/en/settings/team-members.json
+++ b/worklenz-frontend/public/locales/en/settings/team-members.json
@@ -19,7 +19,7 @@
   "cancelText": "No, cancel",
   "deactivatedText": "(Currently deactivated)",
   "pendingInvitationText": "(Invitation pending)",
-  "addMemberDrawerTitle": "Add New Team Member",
+  "addMemberDrawerTitle": "Invite Team Members",
   "updateMemberDrawerTitle": "Update Team Member",
   "addMemberEmailHint": "Members will be added to the team regardless of invitation acceptance status",
   "memberEmailLabel": "Email(s)",
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Job Title",
   "jobTitlePlaceholder": "Select or search job title (Optional)",
   "memberAccessLabel": "Access Level",
-  "addToTeamButton": "Add Member to Team",
+  "addToTeamButton": "Send Invitation",
   "updateButton": "Save Changes",
   "resendInvitationButton": "Resend Invitation Email",
   "invitationSentSuccessMessage": "Team invitation sent successfully!",
@@ -43,5 +43,6 @@
   "updatedText": "Updated",
   "noResultFound": "Type an email address and hit enter...",
   "jobTitlesFetchError": "Failed to fetch job titles",
-  "invitationResent": "Invitation resent successfully!"
+  "invitationResent": "Invitation resent successfully!",
+  "copyTeamLink": "Copy team link"
 }
diff --git a/worklenz-frontend/public/locales/es/kanban-board.json b/worklenz-frontend/public/locales/es/kanban-board.json
index 6e8d5975..df4f2b1e 100644
--- a/worklenz-frontend/public/locales/es/kanban-board.json
+++ b/worklenz-frontend/public/locales/es/kanban-board.json
@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Sí",
   "deleteConfirmationCancel": "Cancelar",
 
+  "deleteTaskTitle": "Eliminar tarea",
+  "deleteTaskContent": "¿Estás seguro de que deseas eliminar esta tarea? Esta acción no se puede deshacer.",
+  "deleteTaskConfirm": "Eliminar",
+  "deleteTaskCancel": "Cancelar",
+
+  "deleteStatusTitle": "Eliminar estado",
+  "deleteStatusContent": "¿Estás seguro de que deseas eliminar este estado? Esta acción no se puede deshacer.",
+
+  "deletePhaseTitle": "Eliminar fase",
+  "deletePhaseContent": "¿Estás seguro de que deseas eliminar esta fase? Esta acción no se puede deshacer.",
+
   "dueDate": "Fecha de vencimiento",
   "cancel": "Cancelar",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Sin fecha de vencimiento",
   "save": "Guardar",
   "clear": "Limpiar",
-  "nextWeek": "Próxima semana"
+  "nextWeek": "Próxima semana",
+  "noSubtasks": "Sin subtareas",
+  "showSubtasks": "Mostrar subtareas",
+  "hideSubtasks": "Ocultar subtareas",
+  
+  "errorLoadingTasks": "Error al cargar tareas",
+  "noTasksFound": "No se encontraron tareas",
+  "loadingFilters": "Cargando filtros...",
+  "failedToUpdateColumnOrder": "Error al actualizar el orden de las columnas",
+  "failedToUpdatePhaseOrder": "Error al actualizar el orden de las fases",
+  "pleaseTryAgain": "Por favor, inténtalo de nuevo",
+  "taskNotCompleted": "La tarea no está completada",
+  "completeTaskDependencies": "Por favor, completa las dependencias de la tarea antes de continuar"
 }
diff --git a/worklenz-frontend/public/locales/es/project-view-members.json b/worklenz-frontend/public/locales/es/project-view-members.json
index 95a8d943..46f26b3f 100644
--- a/worklenz-frontend/public/locales/es/project-view-members.json
+++ b/worklenz-frontend/public/locales/es/project-view-members.json
@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Eliminar del proyecto",
   "memberCount": "Miembro",
   "membersCountPlural": "Miembros",
-  "emptyText": "No hay archivos adjuntos en el proyecto."
+  "emptyText": "No hay archivos adjuntos en el proyecto.",
+  "searchPlaceholder": "Buscar miembros"
 }
diff --git a/worklenz-frontend/public/locales/es/project-view/project-member-drawer.json b/worklenz-frontend/public/locales/es/project-view/project-member-drawer.json
index ab7570fd..2ade994e 100644
--- a/worklenz-frontend/public/locales/es/project-view/project-member-drawer.json
+++ b/worklenz-frontend/public/locales/es/project-view/project-member-drawer.json
@@ -3,5 +3,9 @@
   "searchLabel": "Agregar miembros ingresando su nombre o correo electrónico",
   "searchPlaceholder": "Escriba nombre o correo electrónico",
   "inviteAsAMember": "Invitar como miembro",
-  "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico"
+  "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico",
+  "members": "Miembros",
+  "copyProjectLink": "Copiar enlace del proyecto",
+  "inviteMember": "Invitar miembro",
+  "alsoInviteToProject": "También invitar al proyecto"
 }
diff --git a/worklenz-frontend/public/locales/es/settings/team-members.json b/worklenz-frontend/public/locales/es/settings/team-members.json
index 1000bf98..7f317fab 100644
--- a/worklenz-frontend/public/locales/es/settings/team-members.json
+++ b/worklenz-frontend/public/locales/es/settings/team-members.json
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Cargo",
   "jobTitlePlaceholder": "Seleccione o busque cargo (Opcional)",
   "memberAccessLabel": "Nivel de acceso",
-  "addToTeamButton": "Agregar miembro al equipo",
+  "addToTeamButton": "Enviar invitación",
   "updateButton": "Guardar cambios",
   "resendInvitationButton": "Reenviar correo de invitación",
   "invitationSentSuccessMessage": "¡Invitación al equipo enviada exitosamente!",
@@ -43,5 +43,6 @@
   "updatedText": "Actualizado",
   "noResultFound": "Escriba una dirección de correo electrónico y presione enter...",
   "jobTitlesFetchError": "Error al obtener los cargos",
-  "invitationResent": "¡Invitación reenviada exitosamente!"
+  "invitationResent": "¡Invitación reenviada exitosamente!",
+  "copyTeamLink": "Copiar enlace del equipo"
 }
diff --git a/worklenz-frontend/public/locales/pt/kanban-board.json b/worklenz-frontend/public/locales/pt/kanban-board.json
index a2034daa..5bac3adb 100644
--- a/worklenz-frontend/public/locales/pt/kanban-board.json
+++ b/worklenz-frontend/public/locales/pt/kanban-board.json
@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Sim",
   "deleteConfirmationCancel": "Cancelar",
 
+  "deleteTaskTitle": "Excluir Tarefa",
+  "deleteTaskContent": "Tem certeza de que deseja excluir esta tarefa? Esta ação não pode ser desfeita.",
+  "deleteTaskConfirm": "Excluir",
+  "deleteTaskCancel": "Cancelar",
+
+  "deleteStatusTitle": "Excluir Status",
+  "deleteStatusContent": "Tem certeza de que deseja excluir este status? Esta ação não pode ser desfeita.",
+
+  "deletePhaseTitle": "Excluir Fase",
+  "deletePhaseContent": "Tem certeza de que deseja excluir esta fase? Esta ação não pode ser desfeita.",
+
   "dueDate": "Data de vencimento",
   "cancel": "Cancelar",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Sem data de vencimento",
   "save": "Salvar",
   "clear": "Limpar",
-  "nextWeek": "Próxima semana"
+  "nextWeek": "Próxima semana",
+  "noSubtasks": "Sem subtarefas",
+  "showSubtasks": "Mostrar subtarefas",
+  "hideSubtasks": "Ocultar subtarefas",
+  
+  "errorLoadingTasks": "Erro ao carregar tarefas",
+  "noTasksFound": "Nenhuma tarefa encontrada",
+  "loadingFilters": "Carregando filtros...",
+  "failedToUpdateColumnOrder": "Falha ao atualizar a ordem das colunas",
+  "failedToUpdatePhaseOrder": "Falha ao atualizar a ordem das fases",
+  "pleaseTryAgain": "Por favor, tente novamente",
+  "taskNotCompleted": "Tarefa não está concluída",
+  "completeTaskDependencies": "Por favor, complete as dependências da tarefa antes de prosseguir"
 }
diff --git a/worklenz-frontend/public/locales/pt/project-view-members.json b/worklenz-frontend/public/locales/pt/project-view-members.json
index 72524807..df6eded0 100644
--- a/worklenz-frontend/public/locales/pt/project-view-members.json
+++ b/worklenz-frontend/public/locales/pt/project-view-members.json
@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Remover do projeto",
   "memberCount": "Membro",
   "membersCountPlural": "Membros",
-  "emptyText": "Não há anexos no projeto."
+  "emptyText": "Não há anexos no projeto.",
+  "searchPlaceholder": "Pesquisar membros"
 }
diff --git a/worklenz-frontend/public/locales/pt/project-view/project-member-drawer.json b/worklenz-frontend/public/locales/pt/project-view/project-member-drawer.json
index 0afe3d87..0c5c7b1a 100644
--- a/worklenz-frontend/public/locales/pt/project-view/project-member-drawer.json
+++ b/worklenz-frontend/public/locales/pt/project-view/project-member-drawer.json
@@ -3,5 +3,9 @@
   "searchLabel": "Adicionar membros inserindo nome ou e-mail",
   "searchPlaceholder": "Digite nome ou e-mail",
   "inviteAsAMember": "Convidar como membro",
-  "inviteNewMemberByEmail": "Convidar novo membro por e-mail"
+  "inviteNewMemberByEmail": "Convidar novo membro por e-mail",
+  "members": "Membros",
+  "copyProjectLink": "Copiar link do projeto",
+  "inviteMember": "Convidar membro",
+  "alsoInviteToProject": "Convidar também para o projeto"
 }
diff --git a/worklenz-frontend/public/locales/pt/settings/team-members.json b/worklenz-frontend/public/locales/pt/settings/team-members.json
index 9ace1764..9bb38de3 100644
--- a/worklenz-frontend/public/locales/pt/settings/team-members.json
+++ b/worklenz-frontend/public/locales/pt/settings/team-members.json
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Título do Emprego",
   "jobTitlePlaceholder": "Selecione ou pesquise o título do emprego (Opcional)",
   "memberAccessLabel": "Nível de Acesso",
-  "addToTeamButton": "Adicionar Membro à Equipe",
+  "addToTeamButton": "Enviar convite",
   "updateButton": "Salvar Alterações",
   "resendInvitationButton": "Redirecionar Email de Convite",
   "invitationSentSuccessMessage": "Convite para a equipe enviado com sucesso!",
@@ -43,5 +43,6 @@
   "updatedText": "Atualizado",
   "noResultFound": "Digite um endereço de email e pressione enter...",
   "jobTitlesFetchError": "Falha ao buscar cargos",
-  "invitationResent": "Convite reenviado com sucesso!"
+  "invitationResent": "Convite reenviado com sucesso!",
+  "copyTeamLink": "Copiar link da equipe"
 }
diff --git a/worklenz-frontend/public/locales/zh/kanban-board.json b/worklenz-frontend/public/locales/zh/kanban-board.json
index 7b72c5d5..20c7cb08 100644
--- a/worklenz-frontend/public/locales/zh/kanban-board.json
+++ b/worklenz-frontend/public/locales/zh/kanban-board.json
@@ -15,5 +15,32 @@
   "assignToMe": "分配给我",
   "archive": "归档",
   "newTaskNamePlaceholder": "写一个任务名称",
-  "newSubtaskNamePlaceholder": "写一个子任务名称"
+  "newSubtaskNamePlaceholder": "写一个子任务名称",
+  "deleteTaskTitle": "删除任务",
+  "deleteTaskContent": "您确定要删除此任务吗？此操作无法撤销。",
+  "deleteTaskConfirm": "删除",
+  "deleteTaskCancel": "取消",
+  "deleteStatusTitle": "删除状态",
+  "deleteStatusContent": "您确定要删除此状态吗？此操作无法撤销。",
+  "deletePhaseTitle": "删除阶段",
+  "deletePhaseContent": "您确定要删除此阶段吗？此操作无法撤销。",
+  "untitledSection": "未命名部分",
+  "unmapped": "未映射",
+  "clickToChangeDate": "点击更改日期",
+  "noDueDate": "无截止日期",
+  "save": "保存",
+  "clear": "清除",
+  "nextWeek": "下周",
+  "noSubtasks": "无子任务",
+  "showSubtasks": "显示子任务",
+  "hideSubtasks": "隐藏子任务",
+  
+  "errorLoadingTasks": "加载任务时出错",
+  "noTasksFound": "未找到任务",
+  "loadingFilters": "正在加载过滤器...",
+  "failedToUpdateColumnOrder": "更新列顺序失败",
+  "failedToUpdatePhaseOrder": "更新阶段顺序失败",
+  "pleaseTryAgain": "请重试",
+  "taskNotCompleted": "任务未完成",
+  "completeTaskDependencies": "请先完成任务依赖项，然后再继续"
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/zh/project-view/project-member-drawer.json b/worklenz-frontend/public/locales/zh/project-view/project-member-drawer.json
index f412f22b..512ab0d0 100644
--- a/worklenz-frontend/public/locales/zh/project-view/project-member-drawer.json
+++ b/worklenz-frontend/public/locales/zh/project-view/project-member-drawer.json
@@ -3,5 +3,9 @@
     "searchLabel": "通过添加名称或电子邮件添加成员",
     "searchPlaceholder": "输入名称或电子邮件",
     "inviteAsAMember": "邀请为成员",
-    "inviteNewMemberByEmail": "通过电子邮件邀请新成员"
+    "inviteNewMemberByEmail": "通过电子邮件邀请新成员",
+    "members": "成员",
+    "copyProjectLink": "复制项目链接",
+    "inviteMember": "邀请成员",
+    "alsoInviteToProject": "也邀请到项目"
 }
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/zh/settings/team-members.json b/worklenz-frontend/public/locales/zh/settings/team-members.json
index 8b39483c..8e9bcfb0 100644
--- a/worklenz-frontend/public/locales/zh/settings/team-members.json
+++ b/worklenz-frontend/public/locales/zh/settings/team-members.json
@@ -28,7 +28,7 @@
   "jobTitleLabel": "职位",
   "jobTitlePlaceholder": "选择或搜索职位（可选）",
   "memberAccessLabel": "访问级别",
-  "addToTeamButton": "将成员添加到团队",
+  "addToTeamButton": "发送邀请",
   "updateButton": "保存更改",
   "resendInvitationButton": "重新发送邀请邮件",
   "invitationSentSuccessMessage": "团队邀请已成功发送！",
@@ -43,5 +43,6 @@
   "updatedText": "已更新",
   "noResultFound": "输入电子邮件地址并按回车键...",
   "jobTitlesFetchError": "获取职位失败",
-  "invitationResent": "邀请重新发送成功！"
+  "invitationResent": "邀请重新发送成功！",
+  "copyTeamLink": "复制团队链接"
 }
\ No newline at end of file
diff --git a/worklenz-frontend/src/app/routes/main-routes.tsx b/worklenz-frontend/src/app/routes/main-routes.tsx
index 8ec8cb9a..4c96c8f9 100644
--- a/worklenz-frontend/src/app/routes/main-routes.tsx
+++ b/worklenz-frontend/src/app/routes/main-routes.tsx
@@ -17,6 +17,7 @@ const ProjectTemplateEditView = lazy(
 const LicenseExpired = lazy(() => import('@/pages/license-expired/license-expired'));
 const ProjectView = lazy(() => import('@/pages/projects/projectView/project-view'));
 const Unauthorized = lazy(() => import('@/pages/unauthorized/unauthorized'));
+const GanttDemoPage = lazy(() => import('@/pages/GanttDemoPage'));
 
 // Define AdminGuard component with defensive programming
 const AdminGuard = ({ children }: { children: React.ReactNode }) => {
@@ -106,6 +107,14 @@ const mainRoutes: RouteObject[] = [
           </Suspense>
         ),
       },
+      {
+        path: 'gantt-demo',
+        element: (
+          <Suspense fallback={<SuspenseFallback />}>
+            <GanttDemoPage />
+          </Suspense>
+        ),
+      },
       ...settingsRoutes,
       ...adminCenterRoutes,
     ],
diff --git a/worklenz-frontend/src/components/AssigneeSelector.tsx b/worklenz-frontend/src/components/AssigneeSelector.tsx
index 7a489885..3f786959 100644
--- a/worklenz-frontend/src/components/AssigneeSelector.tsx
+++ b/worklenz-frontend/src/components/AssigneeSelector.tsx
@@ -11,7 +11,7 @@ import { useAuthService } from '@/hooks/useAuth';
 import { Avatar, Button, Checkbox } from '@/components';
 import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
+import { setIsFromAssigner, toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
 import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 
 interface AssigneeSelectorProps {
@@ -206,6 +206,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
 
   const handleInviteProjectMemberDrawer = () => {
     setIsOpen(false); // Close the assignee dropdown first
+    dispatch(setIsFromAssigner(true));
     dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
   };
 
diff --git a/worklenz-frontend/src/components/advanced-gantt/AdvancedGanttChart.tsx b/worklenz-frontend/src/components/advanced-gantt/AdvancedGanttChart.tsx
new file mode 100644
index 00000000..b1858c92
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/AdvancedGanttChart.tsx
@@ -0,0 +1,612 @@
+import React, { useReducer, useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import { 
+  GanttTask, 
+  ColumnConfig, 
+  TimelineConfig, 
+  VirtualScrollConfig,
+  ZoomLevel,
+  GanttState,
+  GanttAction,
+  AdvancedGanttProps,
+  SelectionState,
+  GanttViewState,
+  DragState
+} from '../../types/advanced-gantt.types';
+import GanttGrid from './GanttGrid';
+import DraggableTaskBar from './DraggableTaskBar';
+import TimelineMarkers, { holidayPresets, workingDayPresets } from './TimelineMarkers';
+import VirtualScrollContainer, { VirtualTimeline } from './VirtualScrollContainer';
+import { 
+  usePerformanceMonitoring, 
+  useTaskCalculations, 
+  useDateCalculations,
+  useDebounce,
+  useThrottle
+} from '../../utils/gantt-performance';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+
+// Default configurations
+const defaultColumns: ColumnConfig[] = [
+  { 
+    field: 'name', 
+    title: 'Task Name', 
+    width: 250, 
+    minWidth: 150, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'text'
+  },
+  { 
+    field: 'startDate', 
+    title: 'Start Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'endDate', 
+    title: 'End Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'duration', 
+    title: 'Duration', 
+    width: 80, 
+    minWidth: 60, 
+    resizable: true, 
+    sortable: false, 
+    fixed: true 
+  },
+  { 
+    field: 'progress', 
+    title: 'Progress', 
+    width: 100, 
+    minWidth: 80, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'number'
+  },
+];
+
+const defaultTimelineConfig: TimelineConfig = {
+  topTier: { unit: 'month', format: 'MMM yyyy', height: 30 },
+  bottomTier: { unit: 'day', format: 'dd', height: 25 },
+  showWeekends: true,
+  showNonWorkingDays: true,
+  holidays: holidayPresets.US,
+  workingDays: workingDayPresets.standard,
+  workingHours: { start: 9, end: 17 },
+  dayWidth: 30,
+};
+
+const defaultVirtualScrollConfig: VirtualScrollConfig = {
+  enableRowVirtualization: true,
+  enableTimelineVirtualization: true,
+  bufferSize: 10,
+  itemHeight: 40,
+  overscan: 5,
+};
+
+const defaultZoomLevels: ZoomLevel[] = [
+  { 
+    name: 'Year', 
+    dayWidth: 2, 
+    scale: 0.1,
+    topTier: { unit: 'year', format: 'yyyy' },
+    bottomTier: { unit: 'month', format: 'MMM' }
+  },
+  { 
+    name: 'Month', 
+    dayWidth: 8, 
+    scale: 0.5,
+    topTier: { unit: 'month', format: 'MMM yyyy' },
+    bottomTier: { unit: 'week', format: 'w' }
+  },
+  { 
+    name: 'Week', 
+    dayWidth: 25, 
+    scale: 1,
+    topTier: { unit: 'week', format: 'MMM dd' },
+    bottomTier: { unit: 'day', format: 'dd' }
+  },
+  { 
+    name: 'Day', 
+    dayWidth: 50, 
+    scale: 2,
+    topTier: { unit: 'day', format: 'MMM dd' },
+    bottomTier: { unit: 'hour', format: 'HH' }
+  },
+];
+
+// Gantt state reducer
+function ganttReducer(state: GanttState, action: GanttAction): GanttState {
+  switch (action.type) {
+    case 'SET_TASKS':
+      return { ...state, tasks: action.payload };
+    
+    case 'UPDATE_TASK':
+      return {
+        ...state,
+        tasks: state.tasks.map(task =>
+          task.id === action.payload.id
+            ? { ...task, ...action.payload.updates }
+            : task
+        ),
+      };
+    
+    case 'ADD_TASK':
+      return { ...state, tasks: [...state.tasks, action.payload] };
+    
+    case 'DELETE_TASK':
+      return {
+        ...state,
+        tasks: state.tasks.filter(task => task.id !== action.payload),
+      };
+    
+    case 'SET_SELECTION':
+      return {
+        ...state,
+        selectionState: { ...state.selectionState, selectedTasks: action.payload },
+      };
+    
+    case 'SET_DRAG_STATE':
+      return { ...state, dragState: action.payload };
+    
+    case 'SET_ZOOM_LEVEL':
+      const newZoomLevel = Math.max(0, Math.min(state.zoomLevels.length - 1, action.payload));
+      return {
+        ...state,
+        viewState: { ...state.viewState, zoomLevel: newZoomLevel },
+        timelineConfig: {
+          ...state.timelineConfig,
+          dayWidth: state.zoomLevels[newZoomLevel].dayWidth,
+          topTier: state.zoomLevels[newZoomLevel].topTier,
+          bottomTier: state.zoomLevels[newZoomLevel].bottomTier,
+        },
+      };
+    
+    case 'SET_SCROLL_POSITION':
+      return {
+        ...state,
+        viewState: { ...state.viewState, scrollPosition: action.payload },
+      };
+    
+    case 'SET_SPLITTER_POSITION':
+      return {
+        ...state,
+        viewState: { ...state.viewState, splitterPosition: action.payload },
+      };
+    
+    case 'TOGGLE_TASK_EXPANSION':
+      return {
+        ...state,
+        tasks: state.tasks.map(task =>
+          task.id === action.payload
+            ? { ...task, isExpanded: !task.isExpanded }
+            : task
+        ),
+      };
+    
+    case 'SET_VIEW_STATE':
+      return {
+        ...state,
+        viewState: { ...state.viewState, ...action.payload },
+      };
+    
+    case 'UPDATE_COLUMN_WIDTH':
+      return {
+        ...state,
+        columns: state.columns.map(col =>
+          col.field === action.payload.field
+            ? { ...col, width: action.payload.width }
+            : col
+        ),
+      };
+    
+    default:
+      return state;
+  }
+}
+
+const AdvancedGanttChart: React.FC<AdvancedGanttProps> = ({
+  tasks: initialTasks,
+  columns = defaultColumns,
+  timelineConfig = {},
+  virtualScrollConfig = {},
+  zoomLevels = defaultZoomLevels,
+  initialViewState = {},
+  initialSelection = [],
+  onTaskUpdate,
+  onTaskCreate,
+  onTaskDelete,
+  onTaskMove,
+  onTaskResize,
+  onProgressChange,
+  onSelectionChange,
+  onColumnResize,
+  onDependencyCreate,
+  onDependencyDelete,
+  className = '',
+  style = {},
+  theme = 'auto',
+  enableDragDrop = true,
+  enableResize = true,
+  enableProgressEdit = true,
+  enableInlineEdit = true,
+  enableVirtualScrolling = true,
+  enableDebouncing = true,
+  debounceDelay = 300,
+  maxVisibleTasks = 1000,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const { startMeasure, endMeasure, metrics } = usePerformanceMonitoring();
+  const { getDaysBetween } = useDateCalculations();
+
+  // Initialize state
+  const initialState: GanttState = {
+    tasks: initialTasks,
+    columns,
+    timelineConfig: { ...defaultTimelineConfig, ...timelineConfig },
+    virtualScrollConfig: { ...defaultVirtualScrollConfig, ...virtualScrollConfig },
+    dragState: null,
+    selectionState: {
+      selectedTasks: initialSelection,
+      selectedRows: [],
+      focusedTask: undefined,
+    },
+    viewState: {
+      zoomLevel: 2, // Week view by default
+      scrollPosition: { x: 0, y: 0 },
+      viewportSize: { width: 0, height: 0 },
+      splitterPosition: 40, // 40% for grid, 60% for timeline
+      showCriticalPath: false,
+      showBaseline: false,
+      showProgress: true,
+      showDependencies: true,
+      autoSchedule: false,
+      readOnly: false,
+      ...initialViewState,
+    },
+    zoomLevels,
+    performanceMetrics: {
+      renderTime: 0,
+      taskCount: initialTasks.length,
+      visibleTaskCount: 0,
+    },
+  };
+
+  const [state, dispatch] = useReducer(ganttReducer, initialState);
+  const { taskMap, parentChildMap, totalTasks } = useTaskCalculations(state.tasks);
+
+  // Calculate project timeline bounds
+  const projectBounds = useMemo(() => {
+    if (state.tasks.length === 0) {
+      const today = new Date();
+      return {
+        start: new Date(today.getFullYear(), today.getMonth(), 1),
+        end: new Date(today.getFullYear(), today.getMonth() + 3, 0),
+      };
+    }
+
+    const startDates = state.tasks.map(task => task.startDate);
+    const endDates = state.tasks.map(task => task.endDate);
+    const minStart = new Date(Math.min(...startDates.map(d => d.getTime())));
+    const maxEnd = new Date(Math.max(...endDates.map(d => d.getTime())));
+
+    // Add some padding
+    minStart.setDate(minStart.getDate() - 7);
+    maxEnd.setDate(maxEnd.getDate() + 7);
+
+    return { start: minStart, end: maxEnd };
+  }, [state.tasks]);
+
+  // Debounced event handlers
+  const debouncedTaskUpdate = useDebounce(
+    useCallback((taskId: string, updates: Partial<GanttTask>) => {
+      dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates } });
+      onTaskUpdate?.(taskId, updates);
+    }, [onTaskUpdate]),
+    enableDebouncing ? debounceDelay : 0
+  );
+
+  const debouncedTaskMove = useDebounce(
+    useCallback((taskId: string, newDates: { start: Date; end: Date }) => {
+      dispatch({ type: 'UPDATE_TASK', payload: { 
+        id: taskId, 
+        updates: { startDate: newDates.start, endDate: newDates.end } 
+      }});
+      onTaskMove?.(taskId, newDates);
+    }, [onTaskMove]),
+    enableDebouncing ? debounceDelay : 0
+  );
+
+  const debouncedProgressChange = useDebounce(
+    useCallback((taskId: string, progress: number) => {
+      dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates: { progress } }});
+      onProgressChange?.(taskId, progress);
+    }, [onProgressChange]),
+    enableDebouncing ? debounceDelay : 0
+  );
+
+  // Throttled scroll handler
+  const throttledScrollHandler = useThrottle(
+    useCallback((scrollLeft: number, scrollTop: number) => {
+      dispatch({ type: 'SET_SCROLL_POSITION', payload: { x: scrollLeft, y: scrollTop } });
+    }, []),
+    16 // 60fps
+  );
+
+  // Container size observer
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        setContainerSize({ width, height });
+        dispatch({ 
+          type: 'SET_VIEW_STATE', 
+          payload: { viewportSize: { width, height } } 
+        });
+      }
+    });
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Calculate grid and timeline dimensions
+  const gridWidth = useMemo(() => {
+    return Math.floor(containerSize.width * (state.viewState.splitterPosition / 100));
+  }, [containerSize.width, state.viewState.splitterPosition]);
+
+  const timelineWidth = useMemo(() => {
+    return containerSize.width - gridWidth;
+  }, [containerSize.width, gridWidth]);
+
+  // Handle zoom changes
+  const handleZoomChange = useCallback((direction: 'in' | 'out') => {
+    const currentZoom = state.viewState.zoomLevel;
+    const newZoom = direction === 'in' 
+      ? Math.min(state.zoomLevels.length - 1, currentZoom + 1)
+      : Math.max(0, currentZoom - 1);
+    
+    dispatch({ type: 'SET_ZOOM_LEVEL', payload: newZoom });
+  }, [state.viewState.zoomLevel, state.zoomLevels.length]);
+
+  // Theme-aware colors
+  const colors = useMemo(() => ({
+    background: themeWiseColor('#ffffff', '#1f2937', themeMode),
+    border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
+    timelineBackground: themeWiseColor('#f8f9fa', '#374151', themeMode),
+  }), [themeMode]);
+
+  // Render timeline header
+  const renderTimelineHeader = () => {
+    const currentZoom = state.zoomLevels[state.viewState.zoomLevel];
+    const totalDays = getDaysBetween(projectBounds.start, projectBounds.end);
+    const totalWidth = totalDays * state.timelineConfig.dayWidth;
+
+    return (
+      <div className="timeline-header border-b" style={{ 
+        height: (currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25),
+        backgroundColor: colors.timelineBackground,
+        borderColor: colors.border,
+      }}>
+        <VirtualTimeline
+          startDate={projectBounds.start}
+          endDate={projectBounds.end}
+          dayWidth={state.timelineConfig.dayWidth}
+          containerWidth={timelineWidth}
+          containerHeight={(currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25)}
+          onScroll={throttledScrollHandler}
+        >
+          {(date, index, style) => (
+            <div className="timeline-cell flex flex-col border-r text-xs text-center" style={{
+              ...style,
+              borderColor: colors.border,
+            }}>
+              <div className="top-tier border-b px-1 py-1" style={{
+                height: currentZoom.topTier.height || 30,
+                borderColor: colors.border,
+              }}>
+                {formatDateForUnit(date, currentZoom.topTier.unit)}
+              </div>
+              <div className="bottom-tier px-1 py-1" style={{
+                height: currentZoom.bottomTier.height || 25,
+              }}>
+                {formatDateForUnit(date, currentZoom.bottomTier.unit)}
+              </div>
+            </div>
+          )}
+        </VirtualTimeline>
+      </div>
+    );
+  };
+
+  // Render timeline content
+  const renderTimelineContent = () => {
+    const headerHeight = (state.zoomLevels[state.viewState.zoomLevel].topTier.height || 30) + 
+                        (state.zoomLevels[state.viewState.zoomLevel].bottomTier.height || 25);
+    const contentHeight = containerSize.height - headerHeight;
+
+    return (
+      <div className="timeline-content relative" style={{ height: contentHeight }}>
+        {/* Timeline markers (weekends, holidays, etc.) */}
+        <TimelineMarkers
+          startDate={projectBounds.start}
+          endDate={projectBounds.end}
+          dayWidth={state.timelineConfig.dayWidth}
+          containerHeight={contentHeight}
+          timelineConfig={state.timelineConfig}
+          holidays={state.timelineConfig.holidays}
+          showWeekends={state.timelineConfig.showWeekends}
+          showHolidays={true}
+          showToday={true}
+        />
+
+        {/* Task bars */}
+        <VirtualScrollContainer
+          items={state.tasks}
+          itemHeight={state.virtualScrollConfig.itemHeight}
+          containerHeight={contentHeight}
+          containerWidth={timelineWidth}
+          overscan={state.virtualScrollConfig.overscan}
+          onScroll={throttledScrollHandler}
+        >
+          {(task, index, style) => (
+            <DraggableTaskBar
+              key={task.id}
+              task={task}
+              timelineStart={projectBounds.start}
+              dayWidth={state.timelineConfig.dayWidth}
+              rowHeight={state.virtualScrollConfig.itemHeight}
+              index={index}
+              onTaskMove={debouncedTaskMove}
+              onTaskResize={debouncedTaskMove}
+              onProgressChange={debouncedProgressChange}
+              enableDragDrop={enableDragDrop}
+              enableResize={enableResize}
+              enableProgressEdit={enableProgressEdit}
+              readOnly={state.viewState.readOnly}
+            />
+          )}
+        </VirtualScrollContainer>
+      </div>
+    );
+  };
+
+  // Render toolbar
+  const renderToolbar = () => (
+    <div className="gantt-toolbar flex items-center justify-between p-2 border-b bg-gray-50 dark:bg-gray-800" style={{
+      borderColor: colors.border,
+    }}>
+      <div className="toolbar-left flex items-center space-x-2">
+        <button
+          onClick={() => handleZoomChange('out')}
+          disabled={state.viewState.zoomLevel === 0}
+          className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+        >
+          Zoom Out
+        </button>
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          {state.zoomLevels[state.viewState.zoomLevel].name}
+        </span>
+        <button
+          onClick={() => handleZoomChange('in')}
+          disabled={state.viewState.zoomLevel === state.zoomLevels.length - 1}
+          className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+        >
+          Zoom In
+        </button>
+      </div>
+      
+      <div className="toolbar-right flex items-center space-x-2 text-xs text-gray-500">
+        <span>Tasks: {state.tasks.length}</span>
+        <span>•</span>
+        <span>Render: {Math.round(metrics.renderTime)}ms</span>
+      </div>
+    </div>
+  );
+
+  // Performance monitoring
+  useEffect(() => {
+    startMeasure('render');
+    return () => endMeasure('render');
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      className={`advanced-gantt-chart flex flex-col ${className}`}
+      style={{
+        height: '100%',
+        backgroundColor: colors.background,
+        ...style,
+      }}
+    >
+      {/* Toolbar */}
+      {renderToolbar()}
+
+      {/* Main content */}
+      <div className="gantt-content flex flex-1 overflow-hidden">
+        {/* Grid */}
+        <div className="gantt-grid-container" style={{ width: gridWidth }}>
+          <GanttGrid
+            tasks={state.tasks}
+            columns={state.columns}
+            rowHeight={state.virtualScrollConfig.itemHeight}
+            containerHeight={containerSize.height - 50} // Subtract toolbar height
+            selection={state.selectionState}
+            enableInlineEdit={enableInlineEdit}
+            onTaskClick={(task) => {
+              // Handle task selection
+              const newSelection = { ...state.selectionState, selectedTasks: [task.id] };
+              dispatch({ type: 'SET_SELECTION', payload: [task.id] });
+              onSelectionChange?.(newSelection);
+            }}
+            onTaskExpand={(taskId) => {
+              dispatch({ type: 'TOGGLE_TASK_EXPANSION', payload: taskId });
+            }}
+            onColumnResize={(field, width) => {
+              dispatch({ type: 'UPDATE_COLUMN_WIDTH', payload: { field, width } });
+              onColumnResize?.(field, width);
+            }}
+            onTaskUpdate={debouncedTaskUpdate}
+          />
+        </div>
+
+        {/* Timeline */}
+        <div className="gantt-timeline-container border-l" style={{ 
+          width: timelineWidth,
+          borderColor: colors.border,
+        }}>
+          {renderTimelineHeader()}
+          {renderTimelineContent()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Helper function to format dates based on unit
+function formatDateForUnit(date: Date, unit: string): string {
+  switch (unit) {
+    case 'year':
+      return date.getFullYear().toString();
+    case 'month':
+      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+    case 'week':
+      return `W${getWeekNumber(date)}`;
+    case 'day':
+      return date.getDate().toString();
+    case 'hour':
+      return date.getHours().toString().padStart(2, '0');
+    default:
+      return '';
+  }
+}
+
+function getWeekNumber(date: Date): number {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+}
+
+export default AdvancedGanttChart;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/advanced-gantt/AdvancedGanttDemo.tsx b/worklenz-frontend/src/components/advanced-gantt/AdvancedGanttDemo.tsx
new file mode 100644
index 00000000..64b10de8
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/AdvancedGanttDemo.tsx
@@ -0,0 +1,668 @@
+import React, { useState, useMemo } from 'react';
+import { Button, Space, message, Card } from 'antd';
+import AdvancedGanttChart from './AdvancedGanttChart';
+import { GanttTask, ColumnConfig } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { holidayPresets, workingDayPresets } from './TimelineMarkers';
+
+// Enhanced sample data with more realistic project structure
+const generateSampleTasks = (): GanttTask[] => {
+  const baseDate = new Date(2024, 11, 1); // December 1, 2024
+  
+  return [
+    // Project Phase 1: Planning & Design
+    {
+      id: 'project-1',
+      name: '🚀 Web Platform Development',
+      startDate: new Date(2024, 11, 1),
+      endDate: new Date(2025, 2, 31),
+      progress: 45,
+      type: 'project',
+      status: 'in-progress',
+      priority: 'high',
+      color: '#1890ff',
+      hasChildren: true,
+      isExpanded: true,
+      level: 0,
+    },
+    {
+      id: 'planning-phase',
+      name: '📋 Planning & Analysis Phase',
+      startDate: new Date(2024, 11, 1),
+      endDate: new Date(2024, 11, 20),
+      progress: 85,
+      type: 'project',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'project-1',
+      color: '#52c41a',
+      hasChildren: true,
+      isExpanded: true,
+      level: 1,
+    },
+    {
+      id: 'requirements-analysis',
+      name: 'Requirements Gathering & Analysis',
+      startDate: new Date(2024, 11, 1),
+      endDate: new Date(2024, 11, 8),
+      progress: 100,
+      type: 'task',
+      status: 'completed',
+      priority: 'high',
+      parent: 'planning-phase',
+      assignee: {
+        id: 'user-1',
+        name: 'Alice Johnson',
+        avatar: 'https://ui-avatars.com/api/?name=Alice+Johnson&background=1890ff&color=fff',
+      },
+      tags: ['research', 'documentation'],
+      level: 2,
+    },
+    {
+      id: 'technical-architecture',
+      name: 'Technical Architecture Design',
+      startDate: new Date(2024, 11, 8),
+      endDate: new Date(2024, 11, 18),
+      progress: 75,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'planning-phase',
+      assignee: {
+        id: 'user-2',
+        name: 'Bob Smith',
+        avatar: 'https://ui-avatars.com/api/?name=Bob+Smith&background=52c41a&color=fff',
+      },
+      dependencies: ['requirements-analysis'],
+      tags: ['architecture', 'design'],
+      level: 2,
+    },
+    {
+      id: 'ui-ux-design',
+      name: 'UI/UX Design & Prototyping',
+      startDate: new Date(2024, 11, 10),
+      endDate: new Date(2024, 11, 20),
+      progress: 60,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'medium',
+      parent: 'planning-phase',
+      assignee: {
+        id: 'user-3',
+        name: 'Carol Davis',
+        avatar: 'https://ui-avatars.com/api/?name=Carol+Davis&background=faad14&color=fff',
+      },
+      dependencies: ['requirements-analysis'],
+      tags: ['design', 'prototype'],
+      level: 2,
+    },
+    {
+      id: 'milestone-planning-complete',
+      name: '🎯 Planning Phase Complete',
+      startDate: new Date(2024, 11, 20),
+      endDate: new Date(2024, 11, 20),
+      progress: 0,
+      type: 'milestone',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'planning-phase',
+      dependencies: ['technical-architecture', 'ui-ux-design'],
+      level: 2,
+    },
+
+    // Development Phase
+    {
+      id: 'development-phase',
+      name: '⚡ Development Phase',
+      startDate: new Date(2024, 11, 21),
+      endDate: new Date(2025, 1, 28),
+      progress: 35,
+      type: 'project',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'project-1',
+      color: '#722ed1',
+      hasChildren: true,
+      isExpanded: true,
+      level: 1,
+    },
+    {
+      id: 'backend-development',
+      name: 'Backend API Development',
+      startDate: new Date(2024, 11, 21),
+      endDate: new Date(2025, 1, 15),
+      progress: 45,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'development-phase',
+      assignee: {
+        id: 'user-4',
+        name: 'David Wilson',
+        avatar: 'https://ui-avatars.com/api/?name=David+Wilson&background=722ed1&color=fff',
+      },
+      dependencies: ['milestone-planning-complete'],
+      tags: ['backend', 'api'],
+      level: 2,
+    },
+    {
+      id: 'frontend-development',
+      name: 'Frontend React Application',
+      startDate: new Date(2025, 0, 5),
+      endDate: new Date(2025, 1, 25),
+      progress: 25,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'development-phase',
+      assignee: {
+        id: 'user-5',
+        name: 'Eva Brown',
+        avatar: 'https://ui-avatars.com/api/?name=Eva+Brown&background=ff7a45&color=fff',
+      },
+      dependencies: ['backend-development'],
+      tags: ['frontend', 'react'],
+      level: 2,
+    },
+    {
+      id: 'database-setup',
+      name: 'Database Schema & Migration',
+      startDate: new Date(2024, 11, 21),
+      endDate: new Date(2025, 0, 10),
+      progress: 80,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'medium',
+      parent: 'development-phase',
+      assignee: {
+        id: 'user-6',
+        name: 'Frank Miller',
+        avatar: 'https://ui-avatars.com/api/?name=Frank+Miller&background=13c2c2&color=fff',
+      },
+      dependencies: ['milestone-planning-complete'],
+      tags: ['database', 'migration'],
+      level: 2,
+    },
+
+    // Testing Phase
+    {
+      id: 'testing-phase',
+      name: '🧪 Testing & QA Phase',
+      startDate: new Date(2025, 2, 1),
+      endDate: new Date(2025, 2, 20),
+      progress: 0,
+      type: 'project',
+      status: 'not-started',
+      priority: 'high',
+      parent: 'project-1',
+      color: '#fa8c16',
+      hasChildren: true,
+      isExpanded: false,
+      level: 1,
+    },
+    {
+      id: 'unit-testing',
+      name: 'Unit Testing Implementation',
+      startDate: new Date(2025, 2, 1),
+      endDate: new Date(2025, 2, 10),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'high',
+      parent: 'testing-phase',
+      assignee: {
+        id: 'user-7',
+        name: 'Grace Lee',
+        avatar: 'https://ui-avatars.com/api/?name=Grace+Lee&background=fa8c16&color=fff',
+      },
+      dependencies: ['frontend-development'],
+      tags: ['testing', 'unit'],
+      level: 2,
+    },
+    {
+      id: 'integration-testing',
+      name: 'Integration & E2E Testing',
+      startDate: new Date(2025, 2, 8),
+      endDate: new Date(2025, 2, 18),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'high',
+      parent: 'testing-phase',
+      assignee: {
+        id: 'user-8',
+        name: 'Henry Clark',
+        avatar: 'https://ui-avatars.com/api/?name=Henry+Clark&background=eb2f96&color=fff',
+      },
+      dependencies: ['unit-testing'],
+      tags: ['testing', 'integration'],
+      level: 2,
+    },
+    {
+      id: 'milestone-beta-ready',
+      name: '🎯 Beta Release Ready',
+      startDate: new Date(2025, 2, 20),
+      endDate: new Date(2025, 2, 20),
+      progress: 0,
+      type: 'milestone',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'testing-phase',
+      dependencies: ['integration-testing'],
+      level: 2,
+    },
+
+    // Deployment Phase
+    {
+      id: 'deployment-phase',
+      name: '🚀 Deployment & Launch',
+      startDate: new Date(2025, 2, 21),
+      endDate: new Date(2025, 2, 31),
+      progress: 0,
+      type: 'project',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'project-1',
+      color: '#f5222d',
+      hasChildren: true,
+      isExpanded: false,
+      level: 1,
+    },
+    {
+      id: 'production-deployment',
+      name: 'Production Environment Setup',
+      startDate: new Date(2025, 2, 21),
+      endDate: new Date(2025, 2, 25),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'deployment-phase',
+      assignee: {
+        id: 'user-9',
+        name: 'Ivy Taylor',
+        avatar: 'https://ui-avatars.com/api/?name=Ivy+Taylor&background=f5222d&color=fff',
+      },
+      dependencies: ['milestone-beta-ready'],
+      tags: ['deployment', 'production'],
+      level: 2,
+    },
+    {
+      id: 'go-live',
+      name: 'Go Live & Monitoring',
+      startDate: new Date(2025, 2, 26),
+      endDate: new Date(2025, 2, 31),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'deployment-phase',
+      assignee: {
+        id: 'user-10',
+        name: 'Jack Anderson',
+        avatar: 'https://ui-avatars.com/api/?name=Jack+Anderson&background=2f54eb&color=fff',
+      },
+      dependencies: ['production-deployment'],
+      tags: ['launch', 'monitoring'],
+      level: 2,
+    },
+    {
+      id: 'milestone-project-complete',
+      name: '🎉 Project Launch Complete',
+      startDate: new Date(2025, 2, 31),
+      endDate: new Date(2025, 2, 31),
+      progress: 0,
+      type: 'milestone',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'deployment-phase',
+      dependencies: ['go-live'],
+      level: 2,
+    },
+  ];
+};
+
+// Enhanced column configuration
+const sampleColumns: ColumnConfig[] = [
+  { 
+    field: 'name', 
+    title: 'Task / Phase Name', 
+    width: 300, 
+    minWidth: 200, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'text'
+  },
+  { 
+    field: 'assignee', 
+    title: 'Assignee', 
+    width: 150, 
+    minWidth: 120, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true 
+  },
+  { 
+    field: 'startDate', 
+    title: 'Start Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'endDate', 
+    title: 'End Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'duration', 
+    title: 'Duration', 
+    width: 80, 
+    minWidth: 60, 
+    resizable: true, 
+    sortable: false, 
+    fixed: true,
+    align: 'center'
+  },
+  { 
+    field: 'progress', 
+    title: 'Progress', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'number'
+  },
+  { 
+    field: 'status', 
+    title: 'Status', 
+    width: 100, 
+    minWidth: 80, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'select',
+    editorOptions: [
+      { value: 'not-started', label: 'Not Started' },
+      { value: 'in-progress', label: 'In Progress' },
+      { value: 'completed', label: 'Completed' },
+      { value: 'on-hold', label: 'On Hold' },
+      { value: 'overdue', label: 'Overdue' },
+    ]
+  },
+  { 
+    field: 'priority', 
+    title: 'Priority', 
+    width: 100, 
+    minWidth: 80, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'select',
+    editorOptions: [
+      { value: 'low', label: 'Low' },
+      { value: 'medium', label: 'Medium' },
+      { value: 'high', label: 'High' },
+      { value: 'critical', label: 'Critical' },
+    ]
+  },
+];
+
+const AdvancedGanttDemo: React.FC = () => {
+  const [tasks, setTasks] = useState<GanttTask[]>(generateSampleTasks());
+  const [selectedTasks, setSelectedTasks] = useState<string[]>([]);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId ? { ...task, ...updates } : task
+      )
+    );
+    message.success(`Task "${tasks.find(t => t.id === taskId)?.name}" updated`);
+  };
+
+  const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId 
+          ? { ...task, startDate: newDates.start, endDate: newDates.end }
+          : task
+      )
+    );
+    message.info(`Task moved: ${newDates.start.toLocaleDateString()} - ${newDates.end.toLocaleDateString()}`);
+  };
+
+  const handleProgressChange = (taskId: string, progress: number) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId ? { ...task, progress } : task
+      )
+    );
+    message.info(`Progress updated: ${Math.round(progress)}%`);
+  };
+
+  const handleSelectionChange = (selection: any) => {
+    setSelectedTasks(selection.selectedTasks);
+  };
+
+  const resetToSampleData = () => {
+    setTasks(generateSampleTasks());
+    setSelectedTasks([]);
+    message.info('Gantt chart reset to sample data');
+  };
+
+  const addSampleTask = () => {
+    const newTask: GanttTask = {
+      id: `task-${Date.now()}`,
+      name: `New Task ${tasks.length + 1}`,
+      startDate: new Date(),
+      endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // +7 days
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'medium',
+      level: 0,
+    };
+    setTasks(prev => [...prev, newTask]);
+    message.success('New task added');
+  };
+
+  const deleteSelectedTasks = () => {
+    if (selectedTasks.length === 0) {
+      message.warning('No tasks selected');
+      return;
+    }
+    
+    setTasks(prev => prev.filter(task => !selectedTasks.includes(task.id)));
+    setSelectedTasks([]);
+    message.success(`${selectedTasks.length} task(s) deleted`);
+  };
+
+  const taskStats = useMemo(() => {
+    const total = tasks.length;
+    const completed = tasks.filter(t => t.status === 'completed').length;
+    const inProgress = tasks.filter(t => t.status === 'in-progress').length;
+    const overdue = tasks.filter(t => t.status === 'overdue').length;
+    const avgProgress = tasks.reduce((sum, t) => sum + t.progress, 0) / total;
+
+    return { total, completed, inProgress, overdue, avgProgress };
+  }, [tasks]);
+
+  return (
+    <div className="advanced-gantt-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
+        <div className="p-6">
+          <div className="flex justify-between items-start mb-4">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                🚀 Advanced Gantt Chart Demo
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mb-4">
+                Professional Gantt chart with draggable tasks, virtual scrolling, holiday markers, 
+                and performance optimizations for modern project management.
+              </p>
+            </div>
+            
+            <div className="flex flex-col items-end space-y-2">
+              <Space>
+                <Button 
+                  onClick={addSampleTask}
+                  type="primary"
+                  className="dark:border-gray-600"
+                >
+                  Add Task
+                </Button>
+                <Button 
+                  onClick={deleteSelectedTasks}
+                  danger
+                  disabled={selectedTasks.length === 0}
+                  className="dark:border-gray-600"
+                >
+                  Delete Selected ({selectedTasks.length})
+                </Button>
+                <Button 
+                  onClick={resetToSampleData}
+                  className="dark:border-gray-600 dark:text-gray-300"
+                >
+                  Reset Data
+                </Button>
+              </Space>
+            </div>
+          </div>
+
+          {/* Project Statistics */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-blue-600 dark:text-blue-400 text-sm font-medium">Total Tasks</div>
+              <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">{taskStats.total}</div>
+            </div>
+            <div className="bg-green-50 dark:bg-green-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-green-600 dark:text-green-400 text-sm font-medium">Completed</div>
+              <div className="text-2xl font-bold text-green-700 dark:text-green-300">{taskStats.completed}</div>
+            </div>
+            <div className="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-yellow-600 dark:text-yellow-400 text-sm font-medium">In Progress</div>
+              <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{taskStats.inProgress}</div>
+            </div>
+            <div className="bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-purple-600 dark:text-purple-400 text-sm font-medium">Avg Progress</div>
+              <div className="text-2xl font-bold text-purple-700 dark:text-purple-300">
+                {Math.round(taskStats.avgProgress)}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Gantt Chart */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm" style={{ height: '70vh' }}>
+        <AdvancedGanttChart
+          tasks={tasks}
+          columns={sampleColumns}
+          timelineConfig={{
+            showWeekends: true,
+            showNonWorkingDays: true,
+            holidays: holidayPresets.US,
+            workingDays: workingDayPresets.standard,
+            dayWidth: 30,
+          }}
+          onTaskUpdate={handleTaskUpdate}
+          onTaskMove={handleTaskMove}
+          onProgressChange={handleProgressChange}
+          onSelectionChange={handleSelectionChange}
+          enableDragDrop={true}
+          enableResize={true}
+          enableProgressEdit={true}
+          enableInlineEdit={true}
+          enableVirtualScrolling={true}
+          className="h-full"
+        />
+      </div>
+
+      {/* Feature List */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
+            ✨ Advanced Features Demonstrated
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Performance & UX</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Virtual scrolling for 1000+ tasks</li>
+                <li>• Smooth 60fps drag & drop</li>
+                <li>• Debounced updates</li>
+                <li>• Memory-optimized rendering</li>
+                <li>• Responsive design</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Gantt Features</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Draggable task bars</li>
+                <li>• Resizable task duration</li>
+                <li>• Progress editing</li>
+                <li>• Multi-level hierarchy</li>
+                <li>• Task dependencies</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Timeline & Markers</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Weekend & holiday markers</li>
+                <li>• Working day indicators</li>
+                <li>• Today line</li>
+                <li>• Multi-tier timeline</li>
+                <li>• Zoom levels (Year/Month/Week/Day)</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Grid Features</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Fixed columns layout</li>
+                <li>• Inline editing</li>
+                <li>• Column resizing</li>
+                <li>• Multi-select</li>
+                <li>• Hierarchical tree view</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">UI/UX</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Dark/Light theme support</li>
+                <li>• Tailwind CSS styling</li>
+                <li>• Consistent with Worklenz</li>
+                <li>• Accessibility features</li>
+                <li>• Mobile responsive</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Architecture</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Modern React patterns</li>
+                <li>• TypeScript safety</li>
+                <li>• Optimized performance</li>
+                <li>• Enterprise features</li>
+                <li>• Best practices 2025</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdvancedGanttDemo;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/advanced-gantt/DraggableTaskBar.tsx b/worklenz-frontend/src/components/advanced-gantt/DraggableTaskBar.tsx
new file mode 100644
index 00000000..f8d930ca
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/DraggableTaskBar.tsx
@@ -0,0 +1,304 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { GanttTask, DragState } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import { useDateCalculations } from '../../utils/gantt-performance';
+
+interface DraggableTaskBarProps {
+  task: GanttTask;
+  timelineStart: Date;
+  dayWidth: number;
+  rowHeight: number;
+  index: number;
+  onTaskMove?: (taskId: string, newDates: { start: Date; end: Date }) => void;
+  onTaskResize?: (taskId: string, newDates: { start: Date; end: Date }) => void;
+  onProgressChange?: (taskId: string, progress: number) => void;
+  onTaskClick?: (task: GanttTask) => void;
+  onTaskDoubleClick?: (task: GanttTask) => void;
+  enableDragDrop?: boolean;
+  enableResize?: boolean;
+  enableProgressEdit?: boolean;
+  readOnly?: boolean;
+}
+
+const DraggableTaskBar: React.FC<DraggableTaskBarProps> = ({
+  task,
+  timelineStart,
+  dayWidth,
+  rowHeight,
+  index,
+  onTaskMove,
+  onTaskResize,
+  onProgressChange,
+  onTaskClick,
+  onTaskDoubleClick,
+  enableDragDrop = true,
+  enableResize = true,
+  enableProgressEdit = true,
+  readOnly = false,
+}) => {
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [hoverState, setHoverState] = useState<string | null>(null);
+  const taskBarRef = useRef<HTMLDivElement>(null);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const { getDaysBetween, addDays } = useDateCalculations();
+
+  // Calculate task position and dimensions
+  const taskPosition = useMemo(() => {
+    const startDays = getDaysBetween(timelineStart, task.startDate);
+    const duration = getDaysBetween(task.startDate, task.endDate);
+    
+    return {
+      x: startDays * dayWidth,
+      width: Math.max(dayWidth * 0.5, duration * dayWidth),
+      y: index * rowHeight + 8, // 8px padding
+      height: rowHeight - 16, // 16px total padding
+    };
+  }, [task.startDate, task.endDate, timelineStart, dayWidth, rowHeight, index, getDaysBetween]);
+
+  // Theme-aware colors
+  const colors = useMemo(() => {
+    const baseColor = task.color || getDefaultTaskColor(task.status);
+    return {
+      background: themeWiseColor(baseColor, adjustColorForDarkMode(baseColor), themeMode),
+      border: themeWiseColor(darkenColor(baseColor, 0.2), lightenColor(baseColor, 0.2), themeMode),
+      progress: themeWiseColor('#52c41a', '#34d399', themeMode),
+      text: themeWiseColor('#ffffff', '#f9fafb', themeMode),
+      hover: themeWiseColor(lightenColor(baseColor, 0.1), darkenColor(baseColor, 0.1), themeMode),
+    };
+  }, [task.color, task.status, themeMode]);
+
+  // Mouse event handlers
+  const handleMouseDown = useCallback((e: React.MouseEvent, dragType: DragState['dragType']) => {
+    if (readOnly || !enableDragDrop) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+
+    const rect = taskBarRef.current?.getBoundingClientRect();
+    if (!rect) return;
+
+    setDragState({
+      isDragging: true,
+      dragType,
+      taskId: task.id,
+      initialPosition: { x: e.clientX, y: e.clientY },
+      currentPosition: { x: e.clientX, y: e.clientY },
+      initialDates: { start: task.startDate, end: task.endDate },
+      initialProgress: task.progress,
+      snapToGrid: true,
+    });
+
+    // Add global mouse event listeners
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      handleMouseMove_Internal(moveEvent, dragType);
+    };
+
+    const handleMouseUp = () => {
+      handleMouseUp_Internal();
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [readOnly, enableDragDrop, task]);
+
+  const handleMouseMove_Internal = useCallback((e: MouseEvent, dragType: DragState['dragType']) => {
+    if (!dragState) return;
+
+    const deltaX = e.clientX - dragState.initialPosition.x;
+    const deltaDays = Math.round(deltaX / dayWidth);
+
+    let newStartDate = task.startDate;
+    let newEndDate = task.endDate;
+
+    switch (dragType) {
+      case 'move':
+        newStartDate = addDays(dragState.initialDates.start, deltaDays);
+        newEndDate = addDays(dragState.initialDates.end, deltaDays);
+        break;
+      
+      case 'resize-start':
+        newStartDate = addDays(dragState.initialDates.start, deltaDays);
+        // Ensure minimum duration
+        if (newStartDate >= newEndDate) {
+          newStartDate = addDays(newEndDate, -1);
+        }
+        break;
+      
+      case 'resize-end':
+        newEndDate = addDays(dragState.initialDates.end, deltaDays);
+        // Ensure minimum duration
+        if (newEndDate <= newStartDate) {
+          newEndDate = addDays(newStartDate, 1);
+        }
+        break;
+      
+      case 'progress':
+        if (enableProgressEdit) {
+          const progressDelta = deltaX / taskPosition.width;
+          const newProgress = Math.max(0, Math.min(100, (dragState.initialProgress || 0) + progressDelta * 100));
+          onProgressChange?.(task.id, newProgress);
+        }
+        return;
+    }
+
+    // Update drag state
+    setDragState(prev => prev ? {
+      ...prev,
+      currentPosition: { x: e.clientX, y: e.clientY },
+    } : null);
+
+    // Call appropriate handler
+    if (dragType === 'move') {
+      onTaskMove?.(task.id, { start: newStartDate, end: newEndDate });
+    } else if (dragType.startsWith('resize')) {
+      onTaskResize?.(task.id, { start: newStartDate, end: newEndDate });
+    }
+  }, [dragState, dayWidth, task, taskPosition.width, enableProgressEdit, onTaskMove, onTaskResize, onProgressChange, addDays]);
+
+  const handleMouseUp_Internal = useCallback(() => {
+    setDragState(null);
+  }, []);
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onTaskClick?.(task);
+  }, [task, onTaskClick]);
+
+  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onTaskDoubleClick?.(task);
+  }, [task, onTaskDoubleClick]);
+
+  // Render task bar with handles
+  const renderTaskBar = () => {
+    const isSelected = false; // TODO: Get from selection state
+    const isDragging = dragState?.isDragging || false;
+
+    return (
+      <div
+        ref={taskBarRef}
+        className={`task-bar relative cursor-pointer select-none transition-all duration-200 ${
+          isDragging ? 'z-10 shadow-lg' : ''
+        } ${isSelected ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}
+        style={{
+          position: 'absolute',
+          left: taskPosition.x,
+          top: taskPosition.y,
+          width: taskPosition.width,
+          height: taskPosition.height,
+          backgroundColor: dragState?.isDragging ? colors.hover : colors.background,
+          border: `1px solid ${colors.border}`,
+          borderRadius: '4px',
+          transform: isDragging ? 'translateY(-2px)' : 'none',
+          boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : '0 1px 3px rgba(0,0,0,0.1)',
+        }}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onMouseEnter={() => setHoverState('task')}
+        onMouseLeave={() => setHoverState(null)}
+        onMouseDown={(e) => handleMouseDown(e, 'move')}
+      >
+        {/* Progress bar */}
+        <div
+          className="progress-bar absolute inset-0 rounded-l"
+          style={{
+            width: `${task.progress}%`,
+            backgroundColor: colors.progress,
+            opacity: 0.7,
+            borderRadius: '3px 0 0 3px',
+          }}
+        />
+
+        {/* Task content */}
+        <div className="task-content relative z-10 h-full flex items-center px-2">
+          <span
+            className="task-name text-xs font-medium truncate"
+            style={{ color: colors.text }}
+          >
+            {task.name}
+          </span>
+          
+          {/* Duration display for smaller tasks */}
+          {taskPosition.width < 100 && (
+            <span
+              className="task-duration text-xs ml-auto"
+              style={{ color: colors.text, opacity: 0.8 }}
+            >
+              {getDaysBetween(task.startDate, task.endDate)}d
+            </span>
+          )}
+        </div>
+
+        {/* Resize handles */}
+        {enableResize && !readOnly && hoverState === 'task' && (
+          <>
+            {/* Left resize handle */}
+            <div
+              className="resize-handle-left absolute left-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
+              onMouseDown={(e) => handleMouseDown(e, 'resize-start')}
+              onMouseEnter={() => setHoverState('resize-start')}
+            />
+            
+            {/* Right resize handle */}
+            <div
+              className="resize-handle-right absolute right-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
+              onMouseDown={(e) => handleMouseDown(e, 'resize-end')}
+              onMouseEnter={() => setHoverState('resize-end')}
+            />
+          </>
+        )}
+
+        {/* Progress handle */}
+        {enableProgressEdit && !readOnly && hoverState === 'task' && (
+          <div
+            className="progress-handle absolute top-0 h-full w-1 cursor-ew-resize bg-blue-500 opacity-75"
+            style={{ left: `${task.progress}%` }}
+            onMouseDown={(e) => handleMouseDown(e, 'progress')}
+            onMouseEnter={() => setHoverState('progress')}
+          />
+        )}
+
+        {/* Task type indicator */}
+        {task.type === 'milestone' && (
+          <div
+            className="milestone-indicator absolute -top-1 -right-1 w-3 h-3 transform rotate-45"
+            style={{ backgroundColor: colors.border }}
+          />
+        )}
+      </div>
+    );
+  };
+
+  return renderTaskBar();
+};
+
+// Helper functions
+function getDefaultTaskColor(status: GanttTask['status']): string {
+  switch (status) {
+    case 'completed': return '#52c41a';
+    case 'in-progress': return '#1890ff';
+    case 'overdue': return '#ff4d4f';
+    case 'on-hold': return '#faad14';
+    default: return '#d9d9d9';
+  }
+}
+
+function darkenColor(color: string, amount: number): string {
+  // Simple color darkening - in a real app, use a proper color manipulation library
+  return color;
+}
+
+function lightenColor(color: string, amount: number): string {
+  // Simple color lightening - in a real app, use a proper color manipulation library
+  return color;
+}
+
+function adjustColorForDarkMode(color: string): string {
+  // Adjust color for dark mode - in a real app, use a proper color manipulation library
+  return color;
+}
+
+export default DraggableTaskBar;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx b/worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx
new file mode 100644
index 00000000..0d5aaed5
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx
@@ -0,0 +1,492 @@
+import React, { useMemo, useRef, useState, useCallback } from 'react';
+import { GanttTask, ColumnConfig, SelectionState } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { CalendarIcon, UserIcon, FlagIcon } from '@heroicons/react/24/solid';
+
+interface GanttGridProps {
+  tasks: GanttTask[];
+  columns: ColumnConfig[];
+  rowHeight: number;
+  containerHeight: number;
+  selection: SelectionState;
+  enableInlineEdit?: boolean;
+  enableMultiSelect?: boolean;
+  onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
+  onTaskDoubleClick?: (task: GanttTask) => void;
+  onTaskExpand?: (taskId: string) => void;
+  onSelectionChange?: (selection: SelectionState) => void;
+  onColumnResize?: (columnField: string, newWidth: number) => void;
+  onTaskUpdate?: (taskId: string, field: string, value: any) => void;
+  className?: string;
+}
+
+const GanttGrid: React.FC<GanttGridProps> = ({
+  tasks,
+  columns,
+  rowHeight,
+  containerHeight,
+  selection,
+  enableInlineEdit = true,
+  enableMultiSelect = true,
+  onTaskClick,
+  onTaskDoubleClick,
+  onTaskExpand,
+  onSelectionChange,
+  onColumnResize,
+  onTaskUpdate,
+  className = '',
+}) => {
+  const [editingCell, setEditingCell] = useState<{ taskId: string; field: string } | null>(null);
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>(
+    columns.reduce((acc, col) => ({ ...acc, [col.field]: col.width }), {})
+  );
+  const gridRef = useRef<HTMLDivElement>(null);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  // Theme-aware colors
+  const colors = useMemo(() => ({
+    background: themeWiseColor('#ffffff', '#1f2937', themeMode),
+    alternateRow: themeWiseColor('#f9fafb', '#374151', themeMode),
+    border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
+    text: themeWiseColor('#111827', '#f9fafb', themeMode),
+    textSecondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
+    selected: themeWiseColor('#eff6ff', '#1e3a8a', themeMode),
+    hover: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
+    headerBg: themeWiseColor('#f8f9fa', '#374151', themeMode),
+  }), [themeMode]);
+
+  // Calculate total grid width
+  const totalWidth = useMemo(() => {
+    return columns.reduce((sum, col) => sum + columnWidths[col.field], 0);
+  }, [columns, columnWidths]);
+
+  // Handle column resize
+  const handleColumnResize = useCallback((columnField: string, deltaX: number) => {
+    const column = columns.find(col => col.field === columnField);
+    if (!column) return;
+
+    const currentWidth = columnWidths[columnField];
+    const newWidth = Math.max(column.minWidth || 60, Math.min(column.maxWidth || 400, currentWidth + deltaX));
+    
+    setColumnWidths(prev => ({ ...prev, [columnField]: newWidth }));
+    onColumnResize?.(columnField, newWidth);
+  }, [columns, columnWidths, onColumnResize]);
+
+  // Handle task selection
+  const handleTaskSelection = useCallback((task: GanttTask, event: React.MouseEvent) => {
+    const { ctrlKey, shiftKey } = event;
+    let newSelectedTasks = [...selection.selectedTasks];
+
+    if (shiftKey && enableMultiSelect && selection.selectedTasks.length > 0) {
+      // Range selection
+      const lastSelectedIndex = tasks.findIndex(t => t.id === selection.selectedTasks[selection.selectedTasks.length - 1]);
+      const currentIndex = tasks.findIndex(t => t.id === task.id);
+      const [start, end] = [Math.min(lastSelectedIndex, currentIndex), Math.max(lastSelectedIndex, currentIndex)];
+      
+      newSelectedTasks = tasks.slice(start, end + 1).map(t => t.id);
+    } else if (ctrlKey && enableMultiSelect) {
+      // Multi selection
+      if (newSelectedTasks.includes(task.id)) {
+        newSelectedTasks = newSelectedTasks.filter(id => id !== task.id);
+      } else {
+        newSelectedTasks.push(task.id);
+      }
+    } else {
+      // Single selection
+      newSelectedTasks = [task.id];
+    }
+
+    onSelectionChange?.({
+      ...selection,
+      selectedTasks: newSelectedTasks,
+      focusedTask: task.id,
+    });
+
+    onTaskClick?.(task, event);
+  }, [tasks, selection, enableMultiSelect, onSelectionChange, onTaskClick]);
+
+  // Handle cell editing
+  const handleCellDoubleClick = useCallback((task: GanttTask, column: ColumnConfig) => {
+    if (!enableInlineEdit || !column.editor) return;
+    
+    setEditingCell({ taskId: task.id, field: column.field });
+  }, [enableInlineEdit]);
+
+  const handleCellEditComplete = useCallback((value: any) => {
+    if (!editingCell) return;
+    
+    onTaskUpdate?.(editingCell.taskId, editingCell.field, value);
+    setEditingCell(null);
+  }, [editingCell, onTaskUpdate]);
+
+  // Render cell content
+  const renderCellContent = useCallback((task: GanttTask, column: ColumnConfig) => {
+    const value = task[column.field as keyof GanttTask];
+    const isEditing = editingCell?.taskId === task.id && editingCell?.field === column.field;
+
+    if (isEditing) {
+      return renderCellEditor(value, column, handleCellEditComplete);
+    }
+
+    if (column.renderer) {
+      return column.renderer(value, task);
+    }
+
+    // Default renderers
+    switch (column.field) {
+      case 'name':
+        return (
+          <div className="flex items-center space-x-2">
+            {task.hasChildren && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTaskExpand?.(task.id);
+                }}
+                className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
+              >
+                {task.isExpanded ? (
+                  <ChevronDownIcon className="w-3 h-3" />
+                ) : (
+                  <ChevronRightIcon className="w-3 h-3" />
+                )}
+              </button>
+            )}
+            <div 
+              className="flex items-center space-x-2"
+              style={{ paddingLeft: `${(task.level || 0) * 16}px` }}
+            >
+              {getTaskTypeIcon(task.type)}
+              <span className="truncate font-medium">{task.name}</span>
+            </div>
+          </div>
+        );
+      
+      case 'startDate':
+      case 'endDate':
+        return (
+          <div className="flex items-center space-x-1">
+            <CalendarIcon className="w-3 h-3 text-gray-400" />
+            <span>{(value as Date)?.toLocaleDateString() || '-'}</span>
+          </div>
+        );
+      
+      case 'assignee':
+        return task.assignee ? (
+          <div className="flex items-center space-x-2">
+            {task.assignee.avatar ? (
+              <img 
+                src={task.assignee.avatar} 
+                alt={task.assignee.name}
+                className="w-6 h-6 rounded-full"
+              />
+            ) : (
+              <UserIcon className="w-6 h-6 text-gray-400" />
+            )}
+            <span className="truncate">{task.assignee.name}</span>
+          </div>
+        ) : (
+          <span className="text-gray-400">Unassigned</span>
+        );
+      
+      case 'progress':
+        return (
+          <div className="flex items-center space-x-2">
+            <div className="flex-1 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+              <div
+                className="bg-blue-500 h-2 rounded-full transition-all duration-300"
+                style={{ width: `${task.progress}%` }}
+              />
+            </div>
+            <span className="text-xs w-8 text-right">{task.progress}%</span>
+          </div>
+        );
+      
+      case 'status':
+        return (
+          <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
+            {task.status.replace('-', ' ')}
+          </span>
+        );
+      
+      case 'priority':
+        return (
+          <div className="flex items-center space-x-1">
+            <FlagIcon className={`w-3 h-3 ${getPriorityColor(task.priority)}`} />
+            <span className="capitalize">{task.priority}</span>
+          </div>
+        );
+      
+      case 'duration':
+        const duration = task.duration || Math.ceil((task.endDate.getTime() - task.startDate.getTime()) / (1000 * 60 * 60 * 24));
+        return <span>{duration}d</span>;
+      
+      default:
+        return <span>{String(value || '')}</span>;
+    }
+  }, [editingCell, onTaskExpand, handleCellEditComplete]);
+
+  // Render header
+  const renderHeader = () => (
+    <div 
+      className="grid-header flex border-b sticky top-0 z-10"
+      style={{ 
+        backgroundColor: colors.headerBg,
+        borderColor: colors.border,
+        height: rowHeight,
+      }}
+    >
+      {columns.map((column, index) => (
+        <div
+          key={column.field}
+          className="column-header flex items-center px-3 py-2 font-medium text-sm border-r relative group"
+          style={{
+            width: columnWidths[column.field],
+            borderColor: colors.border,
+            color: colors.text,
+          }}
+        >
+          <span className="truncate" title={column.title}>
+            {column.title}
+          </span>
+          
+          {/* Resize handle */}
+          {column.resizable && (
+            <ResizeHandle
+              onResize={(deltaX) => handleColumnResize(column.field, deltaX)}
+              className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-100"
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
+  // Render task rows
+  const renderRows = () => (
+    <div className="grid-body">
+      {tasks.map((task, rowIndex) => {
+        const isSelected = selection.selectedTasks.includes(task.id);
+        const isFocused = selection.focusedTask === task.id;
+        
+        return (
+          <div
+            key={task.id}
+            className={`grid-row flex border-b cursor-pointer hover:bg-opacity-75 ${
+              isSelected ? 'bg-blue-50 dark:bg-blue-900 bg-opacity-50' : 
+              rowIndex % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-800 bg-opacity-30'
+            }`}
+            style={{
+              height: rowHeight,
+              borderColor: colors.border,
+              backgroundColor: isSelected ? colors.selected : 
+                              rowIndex % 2 === 0 ? 'transparent' : colors.alternateRow,
+            }}
+            onClick={(e) => handleTaskSelection(task, e)}
+            onDoubleClick={() => onTaskDoubleClick?.(task)}
+          >
+            {columns.map((column) => (
+              <div
+                key={`${task.id}-${column.field}`}
+                className="grid-cell flex items-center px-3 py-1 border-r overflow-hidden"
+                style={{
+                  width: columnWidths[column.field],
+                  borderColor: colors.border,
+                  textAlign: column.align || 'left',
+                }}
+                onDoubleClick={() => handleCellDoubleClick(task, column)}
+              >
+                {renderCellContent(task, column)}
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div
+      ref={gridRef}
+      className={`gantt-grid border-r ${className}`}
+      style={{
+        width: totalWidth,
+        height: containerHeight,
+        backgroundColor: colors.background,
+        borderColor: colors.border,
+      }}
+    >
+      {renderHeader()}
+      <div 
+        className="grid-content overflow-auto"
+        style={{ height: containerHeight - rowHeight }}
+      >
+        {renderRows()}
+      </div>
+    </div>
+  );
+};
+
+// Resize handle component
+interface ResizeHandleProps {
+  onResize: (deltaX: number) => void;
+  className?: string;
+}
+
+const ResizeHandle: React.FC<ResizeHandleProps> = ({ onResize, className }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const startXRef = useRef<number>(0);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.clientX - startXRef.current;
+      onResize(deltaX);
+      startXRef.current = moveEvent.clientX;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [onResize]);
+
+  return (
+    <div
+      className={`resize-handle ${className} ${isDragging ? 'bg-blue-500' : ''}`}
+      onMouseDown={handleMouseDown}
+    />
+  );
+};
+
+// Cell editor component
+const renderCellEditor = (value: any, column: ColumnConfig, onComplete: (value: any) => void) => {
+  const [editValue, setEditValue] = useState(value);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onComplete(editValue);
+    } else if (e.key === 'Escape') {
+      onComplete(value); // Cancel editing
+    }
+  };
+
+  const handleBlur = () => {
+    onComplete(editValue);
+  };
+
+  switch (column.editor) {
+    case 'text':
+      return (
+        <input
+          type="text"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        />
+      );
+    
+    case 'date':
+      return (
+        <input
+          type="date"
+          value={editValue instanceof Date ? editValue.toISOString().split('T')[0] : editValue}
+          onChange={(e) => setEditValue(new Date(e.target.value))}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        />
+      );
+    
+    case 'number':
+      return (
+        <input
+          type="number"
+          value={editValue}
+          onChange={(e) => setEditValue(parseFloat(e.target.value))}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        />
+      );
+    
+    case 'select':
+      return (
+        <select
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        >
+          {column.editorOptions?.map((option: any) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+    
+    default:
+      return <span>{String(value)}</span>;
+  }
+};
+
+// Helper functions
+const getTaskTypeIcon = (type: GanttTask['type']) => {
+  switch (type) {
+    case 'project':
+      return <div className="w-3 h-3 bg-blue-500 rounded-sm" />;
+    case 'milestone':
+      return <div className="w-3 h-3 bg-yellow-500 rotate-45" />;
+    default:
+      return <div className="w-3 h-3 bg-gray-400 rounded-full" />;
+  }
+};
+
+const getStatusColor = (status: GanttTask['status']) => {
+  switch (status) {
+    case 'completed':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+    case 'in-progress':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+    case 'overdue':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+    case 'on-hold':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+  }
+};
+
+const getPriorityColor = (priority: GanttTask['priority']) => {
+  switch (priority) {
+    case 'critical':
+      return 'text-red-600';
+    case 'high':
+      return 'text-orange-500';
+    case 'medium':
+      return 'text-yellow-500';
+    case 'low':
+      return 'text-green-500';
+    default:
+      return 'text-gray-400';
+  }
+};
+
+export default GanttGrid;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/advanced-gantt/TimelineMarkers.tsx b/worklenz-frontend/src/components/advanced-gantt/TimelineMarkers.tsx
new file mode 100644
index 00000000..4dd3a9ad
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/TimelineMarkers.tsx
@@ -0,0 +1,295 @@
+import React, { useMemo } from 'react';
+import { Holiday, TimelineConfig } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import { useDateCalculations } from '../../utils/gantt-performance';
+
+interface TimelineMarkersProps {
+  startDate: Date;
+  endDate: Date;
+  dayWidth: number;
+  containerHeight: number;
+  timelineConfig: TimelineConfig;
+  holidays?: Holiday[];
+  showWeekends?: boolean;
+  showHolidays?: boolean;
+  showToday?: boolean;
+  className?: string;
+}
+
+const TimelineMarkers: React.FC<TimelineMarkersProps> = ({
+  startDate,
+  endDate,
+  dayWidth,
+  containerHeight,
+  timelineConfig,
+  holidays = [],
+  showWeekends = true,
+  showHolidays = true,
+  showToday = true,
+  className = '',
+}) => {
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const { getDaysBetween, isWeekend, isWorkingDay } = useDateCalculations();
+
+  // Generate all dates in the timeline
+  const timelineDates = useMemo(() => {
+    const dates: Date[] = [];
+    const totalDays = getDaysBetween(startDate, endDate);
+    
+    for (let i = 0; i <= totalDays; i++) {
+      const date = new Date(startDate);
+      date.setDate(date.getDate() + i);
+      dates.push(date);
+    }
+    
+    return dates;
+  }, [startDate, endDate, getDaysBetween]);
+
+  // Theme-aware colors
+  const colors = useMemo(() => ({
+    weekend: themeWiseColor('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)', themeMode),
+    nonWorkingDay: themeWiseColor('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)', themeMode),
+    holiday: themeWiseColor('rgba(255, 107, 107, 0.1)', 'rgba(255, 107, 107, 0.15)', themeMode),
+    today: themeWiseColor('rgba(24, 144, 255, 0.15)', 'rgba(64, 169, 255, 0.2)', themeMode),
+    todayLine: themeWiseColor('#1890ff', '#40a9ff', themeMode),
+    holidayBorder: themeWiseColor('#ff6b6b', '#ff8787', themeMode),
+  }), [themeMode]);
+
+  // Check if a date is a holiday
+  const isHoliday = (date: Date): Holiday | undefined => {
+    return holidays.find(holiday => {
+      if (holiday.recurring) {
+        return holiday.date.getMonth() === date.getMonth() && 
+               holiday.date.getDate() === date.getDate();
+      }
+      return holiday.date.toDateString() === date.toDateString();
+    });
+  };
+
+  // Check if date is today
+  const isToday = (date: Date): boolean => {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  };
+
+  // Render weekend markers
+  const renderWeekendMarkers = () => {
+    if (!showWeekends) return null;
+
+    return timelineDates.map((date, index) => {
+      if (!isWeekend(date)) return null;
+
+      return (
+        <div
+          key={`weekend-${index}`}
+          className="weekend-marker absolute top-0 pointer-events-none"
+          style={{
+            left: index * dayWidth,
+            width: dayWidth,
+            height: containerHeight,
+            backgroundColor: colors.weekend,
+            zIndex: 1,
+          }}
+        />
+      );
+    });
+  };
+
+  // Render non-working day markers
+  const renderNonWorkingDayMarkers = () => {
+    return timelineDates.map((date, index) => {
+      if (isWorkingDay(date, timelineConfig.workingDays)) return null;
+
+      return (
+        <div
+          key={`non-working-${index}`}
+          className="non-working-day-marker absolute top-0 pointer-events-none"
+          style={{
+            left: index * dayWidth,
+            width: dayWidth,
+            height: containerHeight,
+            backgroundColor: colors.nonWorkingDay,
+            zIndex: 1,
+          }}
+        />
+      );
+    });
+  };
+
+  // Render holiday markers
+  const renderHolidayMarkers = () => {
+    if (!showHolidays) return null;
+
+    return timelineDates.map((date, index) => {
+      const holiday = isHoliday(date);
+      if (!holiday) return null;
+
+      const holidayColor = holiday.color || colors.holiday;
+
+      return (
+        <div
+          key={`holiday-${index}`}
+          className="holiday-marker absolute top-0 pointer-events-none group"
+          style={{
+            left: index * dayWidth,
+            width: dayWidth,
+            height: containerHeight,
+            backgroundColor: holidayColor,
+            borderLeft: `2px solid ${colors.holidayBorder}`,
+            zIndex: 2,
+          }}
+        >
+          {/* Holiday tooltip */}
+          <div className="holiday-tooltip absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-50">
+            <div className="font-medium">{holiday.name}</div>
+            <div className="text-xs opacity-75">{date.toLocaleDateString()}</div>
+            <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
+          </div>
+
+          {/* Holiday icon */}
+          <div className="holiday-icon absolute top-1 left-1 w-3 h-3 rounded-full bg-red-500 opacity-75">
+            <div className="w-full h-full rounded-full animate-pulse"></div>
+          </div>
+        </div>
+      );
+    });
+  };
+
+  // Render today marker
+  const renderTodayMarker = () => {
+    if (!showToday) return null;
+
+    const todayIndex = timelineDates.findIndex(date => isToday(date));
+    if (todayIndex === -1) return null;
+
+    return (
+      <div
+        className="today-marker absolute top-0 pointer-events-none"
+        style={{
+          left: todayIndex * dayWidth,
+          width: dayWidth,
+          height: containerHeight,
+          backgroundColor: colors.today,
+          zIndex: 3,
+        }}
+      >
+        {/* Today line */}
+        <div
+          className="today-line absolute top-0 left-1/2 transform -translate-x-1/2"
+          style={{
+            width: '2px',
+            height: containerHeight,
+            backgroundColor: colors.todayLine,
+            zIndex: 4,
+          }}
+        />
+
+        {/* Today label */}
+        <div className="today-label absolute top-2 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs px-2 py-1 rounded shadow-sm">
+          Today
+        </div>
+      </div>
+    );
+  };
+
+  // Render time period markers (quarters, months, etc.)
+  const renderTimePeriodMarkers = () => {
+    const markers: React.ReactNode[] = [];
+    const currentDate = new Date(startDate);
+    currentDate.setDate(1); // Start of month
+
+    while (currentDate <= endDate) {
+      const daysSinceStart = getDaysBetween(startDate, currentDate);
+      const isQuarterStart = currentDate.getMonth() % 3 === 0 && currentDate.getDate() === 1;
+      const isYearStart = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
+
+      if (isYearStart) {
+        markers.push(
+          <div
+            key={`year-${currentDate.getTime()}`}
+            className="year-marker absolute top-0 border-l-2 border-blue-600 dark:border-blue-400"
+            style={{
+              left: daysSinceStart * dayWidth,
+              height: containerHeight,
+              zIndex: 5,
+            }}
+          >
+            <div className="year-label absolute top-2 left-1 bg-blue-600 dark:bg-blue-400 text-white text-xs px-1 py-0.5 rounded">
+              {currentDate.getFullYear()}
+            </div>
+          </div>
+        );
+      } else if (isQuarterStart) {
+        markers.push(
+          <div
+            key={`quarter-${currentDate.getTime()}`}
+            className="quarter-marker absolute top-0 border-l border-green-500 dark:border-green-400 opacity-60"
+            style={{
+              left: daysSinceStart * dayWidth,
+              height: containerHeight,
+              zIndex: 4,
+            }}
+          >
+            <div className="quarter-label absolute top-2 left-1 bg-green-500 dark:bg-green-400 text-white text-xs px-1 py-0.5 rounded">
+              Q{Math.floor(currentDate.getMonth() / 3) + 1}
+            </div>
+          </div>
+        );
+      }
+
+      // Move to next month
+      currentDate.setMonth(currentDate.getMonth() + 1);
+    }
+
+    return markers;
+  };
+
+  return (
+    <div className={`timeline-markers absolute inset-0 ${className}`}>
+      {renderNonWorkingDayMarkers()}
+      {renderWeekendMarkers()}
+      {renderHolidayMarkers()}
+      {renderTodayMarker()}
+      {renderTimePeriodMarkers()}
+    </div>
+  );
+};
+
+// Holiday presets for common countries
+export const holidayPresets = {
+  US: [
+    { date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 0, 15), name: "Martin Luther King Jr. Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 1, 19), name: "Presidents' Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 4, 27), name: "Memorial Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 5, 19), name: "Juneteenth", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 6, 4), name: "Independence Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 8, 2), name: "Labor Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 9, 14), name: "Columbus Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 10, 11), name: "Veterans Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 10, 28), name: "Thanksgiving", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 11, 25), name: "Christmas Day", type: 'national' as const, recurring: true },
+  ],
+  
+  UK: [
+    { date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 2, 29), name: "Good Friday", type: 'religious' as const, recurring: false },
+    { date: new Date(2024, 3, 1), name: "Easter Monday", type: 'religious' as const, recurring: false },
+    { date: new Date(2024, 4, 6), name: "Early May Bank Holiday", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 4, 27), name: "Spring Bank Holiday", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 7, 26), name: "Summer Bank Holiday", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 11, 25), name: "Christmas Day", type: 'religious' as const, recurring: true },
+    { date: new Date(2024, 11, 26), name: "Boxing Day", type: 'national' as const, recurring: true },
+  ],
+};
+
+// Working day presets
+export const workingDayPresets = {
+  standard: [1, 2, 3, 4, 5], // Monday to Friday
+  middle_east: [0, 1, 2, 3, 4], // Sunday to Thursday
+  six_day: [1, 2, 3, 4, 5, 6], // Monday to Saturday
+  four_day: [1, 2, 3, 4], // Monday to Thursday
+};
+
+export default TimelineMarkers;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/advanced-gantt/VirtualScrollContainer.tsx b/worklenz-frontend/src/components/advanced-gantt/VirtualScrollContainer.tsx
new file mode 100644
index 00000000..0e855bc3
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/VirtualScrollContainer.tsx
@@ -0,0 +1,372 @@
+import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
+import { useThrottle, usePerformanceMonitoring } from '../../utils/gantt-performance';
+import { useAppSelector } from '../../hooks/useAppSelector';
+
+interface VirtualScrollContainerProps {
+  items: any[];
+  itemHeight: number;
+  containerHeight: number;
+  containerWidth?: number;
+  overscan?: number;
+  horizontal?: boolean;
+  children: (item: any, index: number, style: React.CSSProperties) => ReactNode;
+  onScroll?: (scrollLeft: number, scrollTop: number) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const VirtualScrollContainer: React.FC<VirtualScrollContainerProps> = ({
+  items,
+  itemHeight,
+  containerHeight,
+  containerWidth = 0,
+  overscan = 5,
+  horizontal = false,
+  children,
+  onScroll,
+  className = '',
+  style = {},
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const { startMeasure, endMeasure, recordMetric } = usePerformanceMonitoring();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  // Calculate visible range
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+  );
+  const visibleItems = items.slice(startIndex, endIndex + 1);
+  const offsetY = startIndex * itemHeight;
+
+  // Throttled scroll handler
+  const throttledScrollHandler = useThrottle(
+    useCallback((event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const newScrollTop = target.scrollTop;
+      const newScrollLeft = target.scrollLeft;
+      
+      setScrollTop(newScrollTop);
+      setScrollLeft(newScrollLeft);
+      onScroll?.(newScrollLeft, newScrollTop);
+    }, [onScroll]),
+    16 // ~60fps
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
+    
+    return () => {
+      container.removeEventListener('scroll', throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
+
+  // Performance monitoring
+  useEffect(() => {
+    startMeasure('virtualScroll');
+    recordMetric('visibleTaskCount', visibleItems.length);
+    recordMetric('taskCount', items.length);
+    endMeasure('virtualScroll');
+  }, [visibleItems.length, items.length, startMeasure, endMeasure, recordMetric]);
+
+  const renderVisibleItems = () => {
+    return visibleItems.map((item, virtualIndex) => {
+      const actualIndex = startIndex + virtualIndex;
+      const itemStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: horizontal ? 0 : actualIndex * itemHeight,
+        left: horizontal ? actualIndex * itemHeight : 0,
+        height: horizontal ? '100%' : itemHeight,
+        width: horizontal ? itemHeight : '100%',
+        transform: horizontal ? 'none' : `translateY(${offsetY}px)`,
+      };
+
+      return (
+        <div key={item.id || actualIndex} style={itemStyle}>
+          {children(item, actualIndex, itemStyle)}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`virtual-scroll-container overflow-auto ${className}`}
+      style={{
+        height: containerHeight,
+        width: containerWidth || '100%',
+        position: 'relative',
+        ...style,
+      }}
+    >
+      {/* Spacer to maintain scroll height */}
+      <div
+        className="virtual-scroll-spacer"
+        style={{
+          height: horizontal ? '100%' : totalHeight,
+          width: horizontal ? totalHeight : '100%',
+          position: 'relative',
+          pointerEvents: 'none',
+        }}
+      >
+        {/* Visible items container */}
+        <div
+          className="virtual-scroll-content"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height: '100%',
+            width: '100%',
+            pointerEvents: 'auto',
+          }}
+        >
+          {renderVisibleItems()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Grid virtual scrolling component for both rows and columns
+interface VirtualGridProps {
+  data: any[][];
+  rowHeight: number;
+  columnWidth: number | number[];
+  containerHeight: number;
+  containerWidth: number;
+  overscan?: number;
+  children: (item: any, rowIndex: number, colIndex: number, style: React.CSSProperties) => ReactNode;
+  onScroll?: (scrollLeft: number, scrollTop: number) => void;
+  className?: string;
+}
+
+export const VirtualGrid: React.FC<VirtualGridProps> = ({
+  data,
+  rowHeight,
+  columnWidth,
+  containerHeight,
+  containerWidth,
+  overscan = 3,
+  children,
+  onScroll,
+  className = '',
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const rowCount = data.length;
+  const colCount = data[0]?.length || 0;
+
+  // Calculate column positions for variable width columns
+  const columnWidths = Array.isArray(columnWidth) ? columnWidth : new Array(colCount).fill(columnWidth);
+  const columnPositions = columnWidths.reduce((acc, width, index) => {
+    acc[index] = index === 0 ? 0 : acc[index - 1] + columnWidths[index - 1];
+    return acc;
+  }, {} as Record<number, number>);
+
+  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
+  const totalHeight = rowCount * rowHeight;
+
+  // Calculate visible ranges
+  const startRowIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const endRowIndex = Math.min(rowCount - 1, Math.ceil((scrollTop + containerHeight) / rowHeight) + overscan);
+
+  const startColIndex = Math.max(0, findColumnIndex(scrollLeft) - overscan);
+  const endColIndex = Math.min(colCount - 1, findColumnIndex(scrollLeft + containerWidth) + overscan);
+
+  function findColumnIndex(position: number): number {
+    for (let i = 0; i < colCount; i++) {
+      if (columnPositions[i] <= position && position < columnPositions[i] + columnWidths[i]) {
+        return i;
+      }
+    }
+    return colCount - 1;
+  }
+
+  const throttledScrollHandler = useThrottle(
+    useCallback((event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const newScrollTop = target.scrollTop;
+      const newScrollLeft = target.scrollLeft;
+      
+      setScrollTop(newScrollTop);
+      setScrollLeft(newScrollLeft);
+      onScroll?.(newScrollLeft, newScrollTop);
+    }, [onScroll]),
+    16
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
+    
+    return () => {
+      container.removeEventListener('scroll', throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
+
+  const renderVisibleCells = () => {
+    const cells: ReactNode[] = [];
+
+    for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+      for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+        const item = data[rowIndex]?.[colIndex];
+        if (!item) continue;
+
+        const cellStyle: React.CSSProperties = {
+          position: 'absolute',
+          top: rowIndex * rowHeight,
+          left: columnPositions[colIndex],
+          height: rowHeight,
+          width: columnWidths[colIndex],
+        };
+
+        cells.push(
+          <div key={`${rowIndex}-${colIndex}`} style={cellStyle}>
+            {children(item, rowIndex, colIndex, cellStyle)}
+          </div>
+        );
+      }
+    }
+
+    return cells;
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`virtual-grid overflow-auto ${className}`}
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          height: totalHeight,
+          width: totalWidth,
+          position: 'relative',
+        }}
+      >
+        {renderVisibleCells()}
+      </div>
+    </div>
+  );
+};
+
+// Timeline virtual scrolling component
+interface VirtualTimelineProps {
+  startDate: Date;
+  endDate: Date;
+  dayWidth: number;
+  containerWidth: number;
+  containerHeight: number;
+  overscan?: number;
+  children: (date: Date, index: number, style: React.CSSProperties) => ReactNode;
+  onScroll?: (scrollLeft: number) => void;
+  className?: string;
+}
+
+export const VirtualTimeline: React.FC<VirtualTimelineProps> = ({
+  startDate,
+  endDate,
+  dayWidth,
+  containerWidth,
+  containerHeight,
+  overscan = 10,
+  children,
+  onScroll,
+  className = '',
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+  const totalWidth = totalDays * dayWidth;
+
+  const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
+  const endDayIndex = Math.min(totalDays - 1, Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan);
+
+  const throttledScrollHandler = useThrottle(
+    useCallback((event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const newScrollLeft = target.scrollLeft;
+      setScrollLeft(newScrollLeft);
+      onScroll?.(newScrollLeft);
+    }, [onScroll]),
+    16
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
+    
+    return () => {
+      container.removeEventListener('scroll', throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
+
+  const renderVisibleDays = () => {
+    const days: ReactNode[] = [];
+
+    for (let dayIndex = startDayIndex; dayIndex <= endDayIndex; dayIndex++) {
+      const date = new Date(startDate);
+      date.setDate(date.getDate() + dayIndex);
+
+      const dayStyle: React.CSSProperties = {
+        position: 'absolute',
+        left: dayIndex * dayWidth,
+        top: 0,
+        width: dayWidth,
+        height: '100%',
+      };
+
+      days.push(
+        <div key={dayIndex} style={dayStyle}>
+          {children(date, dayIndex, dayStyle)}
+        </div>
+      );
+    }
+
+    return days;
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`virtual-timeline overflow-x-auto ${className}`}
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          height: '100%',
+          width: totalWidth,
+          position: 'relative',
+        }}
+      >
+        {renderVisibleDays()}
+      </div>
+    </div>
+  );
+};
+
+export default VirtualScrollContainer;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/advanced-gantt/index.ts b/worklenz-frontend/src/components/advanced-gantt/index.ts
new file mode 100644
index 00000000..7d27b5bc
--- /dev/null
+++ b/worklenz-frontend/src/components/advanced-gantt/index.ts
@@ -0,0 +1,17 @@
+// Main Components
+export { default as AdvancedGanttChart } from './AdvancedGanttChart';
+export { default as AdvancedGanttDemo } from './AdvancedGanttDemo';
+
+// Core Components
+export { default as GanttGrid } from './GanttGrid';
+export { default as DraggableTaskBar } from './DraggableTaskBar';
+export { default as TimelineMarkers, holidayPresets, workingDayPresets } from './TimelineMarkers';
+
+// Utility Components
+export { default as VirtualScrollContainer, VirtualGrid, VirtualTimeline } from './VirtualScrollContainer';
+
+// Types
+export * from '../../types/advanced-gantt.types';
+
+// Performance Utilities
+export * from '../../utils/gantt-performance';
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx b/worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx
index da36593d..ab4ff36a 100644
--- a/worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx
+++ b/worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx
@@ -1,4 +1,4 @@
-import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from '@/shared/antd-imports';
+import { AutoComplete, Button, Drawer, Flex, Form, message, Modal, Select, Spin, Typography } from '@/shared/antd-imports';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import {
@@ -11,6 +11,7 @@ import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.se
 import { IJobTitle } from '@/types/job.types';
 import { teamMembersApiService } from '@/api/team-members/teamMembers.api.service';
 import { ITeamMemberCreateRequest } from '@/types/teamMembers/team-member-create-request';
+import { LinkOutlined } from '@ant-design/icons';
 
 interface FormValues {
   email: string[];
@@ -87,23 +88,33 @@ const InviteTeamMembers = () => {
   };
 
   return (
-    <Drawer
+    <Modal
       title={
         <Typography.Text strong style={{ fontSize: 16 }}>
           {t('addMemberDrawerTitle')}
         </Typography.Text>
       }
       open={isDrawerOpen}
-      onClose={handleClose}
+      onCancel={handleClose}
       destroyOnClose
       afterOpenChange={visible => visible && handleSearch('')}
       width={400}
       loading={loading}
       footer={
-        <Flex justify="end">
-          <Button type="primary" onClick={form.submit}>
-            {t('addToTeamButton')}
-          </Button>
+        <Flex justify="space-between">
+          {/* <Button
+            style={{ width: 140, fontSize: 12 }}
+            block
+            icon={<LinkOutlined />}
+            disabled
+          >
+            {t('copyTeamLink')}
+          </Button> */}
+          <Flex justify="end">
+            <Button onClick={form.submit} style={{ fontSize: 12 }}>
+              {t('addToTeamButton')}
+            </Button>
+          </Flex>
         </Flex>
       }
     >
@@ -176,7 +187,7 @@ const InviteTeamMembers = () => {
           />
         </Form.Item>
       </Form>
-    </Drawer>
+    </Modal>
   );
 };
 
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
index ae1e3c35..ef587923 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx
@@ -8,7 +8,7 @@ import ImprovedTaskFilters from '../../task-management/improved-task-filters';
 import Card from 'antd/es/card';
 import Spin from 'antd/es/spin';
 import Empty from 'antd/es/empty';
-import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees, updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import KanbanGroup from './KanbanGroup';
@@ -21,8 +21,14 @@ import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
+import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+import { fetchPhasesByProjectId, updatePhaseListOrder } from '@/features/projects/singleProject/phase/phases.slice';
+import { useTranslation } from 'react-i18next';
+import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
 
 const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
+  const { t } = useTranslation('kanban-board');
   const dispatch = useDispatch();
   const authService = useAuthService();
   const { socket } = useSocket();
@@ -34,6 +40,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     loadingGroups,
     error,
   } = useSelector((state: RootState) => state.enhancedKanbanReducer);
+  const { phaseList, loadingPhases } = useAppSelector(state => state.phaseReducer);
   const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
   const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
   const [draggedTaskGroupId, setDraggedTaskGroupId] = useState<string | null>(null);
@@ -56,6 +63,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     if (!statusCategories.length) {
       dispatch(fetchStatusesCategories() as any);
     }
+    if (groupBy === 'phase' && !phaseList.length) {
+      dispatch(fetchPhasesByProjectId(projectId) as any);
+    }
   }, [dispatch, projectId]);
   // Reset drag state if taskGroups changes (e.g., real-time update)
   useEffect(() => {
@@ -72,6 +82,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     setDraggedGroupId(groupId);
     setDragType('group');
     e.dataTransfer.effectAllowed = 'move';
+    try {
+      e.dataTransfer.setData('text/plain', groupId);
+    } catch {}
   };
   const handleGroupDragOver = (e: React.DragEvent) => {
     if (dragType !== 'group') return;
@@ -90,19 +103,35 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     reorderedGroups.splice(toIdx, 0, moved);
     dispatch(reorderGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }));
     dispatch(reorderEnhancedKanbanGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }) as any);
-
     // API call for group order
     try {
-      const columnOrder = reorderedGroups.map(group => group.id);
-      const requestBody = { status_order: columnOrder };
-      const response = await statusApiService.updateStatusOrder(requestBody, projectId);
-      if (!response.done) {
-        // Revert the change if API call fails
-        const revertedGroups = [...reorderedGroups];
-        const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
-        revertedGroups.splice(fromIdx, 0, movedBackGroup);
-        dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
-        alertService.error('Failed to update column order', 'Please try again');
+      if (groupBy === 'status') {
+        const columnOrder = reorderedGroups.map(group => group.id);
+        const requestBody = { status_order: columnOrder };
+        const response = await statusApiService.updateStatusOrder(requestBody, projectId);
+        if (!response.done) {
+          // Revert the change if API call fails
+          const revertedGroups = [...reorderedGroups];
+          const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
+          revertedGroups.splice(fromIdx, 0, movedBackGroup);
+          dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
+          alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
+        }
+      } else if (groupBy === 'phase') {
+        const newPhaseList = [...phaseList];
+        const [movedItem] = newPhaseList.splice(fromIdx, 1);
+        newPhaseList.splice(toIdx, 0, movedItem);
+        dispatch(updatePhaseListOrder(newPhaseList));
+        const requestBody = {
+          from_index: fromIdx,
+          to_index: toIdx,
+          phases: newPhaseList,
+          project_id: projectId,
+        };
+        const response = await phasesApiService.updatePhaseOrder(projectId, requestBody);
+        if (!response.done) {
+          alertService.error(t('failedToUpdatePhaseOrder'), t('pleaseTryAgain'));
+        }
       }
     } catch (error) {
       // Revert the change if API call fails
@@ -110,7 +139,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
       revertedGroups.splice(fromIdx, 0, movedBackGroup);
       dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
-      alertService.error('Failed to update column order', 'Please try again');
+      alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
       logger.error('Failed to update column order', error);
     }
 
@@ -118,12 +147,47 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     setDragType(null);
   };
 
+  // Utility to recalculate all task orders for all groups
+  function getAllTaskUpdates(allGroups: ITaskListGroup[], groupBy: string) {
+    const taskUpdates: Array<{
+      task_id: string | undefined;
+      sort_order: number;
+      status_id?: string;
+      priority_id?: string;
+      phase_id?: string;
+    }> = [];
+    let currentSortOrder = 0;
+    for (const group of allGroups) {
+      for (const task of group.tasks) {
+        const update: {
+          task_id: string | undefined;
+          sort_order: number;
+          status_id?: string;
+          priority_id?: string;
+          phase_id?: string;
+        } = {
+          task_id: task.id,
+          sort_order: currentSortOrder,
+        };
+        if (groupBy === 'status') update.status_id = group.id;
+        else if (groupBy === 'priority') update.priority_id = group.id;
+        else if (groupBy === 'phase' && group.name !== 'Unmapped') update.phase_id = group.id;
+        taskUpdates.push(update);
+        currentSortOrder++;
+      }
+    }
+    return taskUpdates;
+  }
+
   // Task drag handlers
   const handleTaskDragStart = (e: React.DragEvent, taskId: string, groupId: string) => {
     setDraggedTaskId(taskId);
     setDraggedTaskGroupId(groupId);
     setDragType('task');
     e.dataTransfer.effectAllowed = 'move';
+    try {
+      e.dataTransfer.setData('text/plain', taskId);
+    } catch {}
   };
   const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
     if (dragType !== 'task') return;
@@ -157,8 +221,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
         if (!canContinue) {
           alertService.error(
-            'Task is not completed',
-            'Please complete the task dependencies before proceeding'
+            t('taskNotCompleted'),
+            t('completeTaskDependencies')
           );
           return;
         }
@@ -168,6 +232,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     let insertIdx = hoveredTaskIdx;
 
     // Handle same group reordering
+    let newTaskGroups = [...taskGroups];
     if (sourceGroup.id === targetGroup.id) {
       // Create a single updated array for the same group
       const updatedTasks = [...sourceGroup.tasks];
@@ -182,7 +247,6 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
 
       updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
-
       dispatch(reorderTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
@@ -201,6 +265,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         updatedSourceTasks: updatedTasks,
         updatedTargetTasks: updatedTasks,
       }) as any);
+      // Update newTaskGroups for socket emit
+      newTaskGroups = newTaskGroups.map(g => g.id === sourceGroup.id ? { ...g, tasks: updatedTasks } : g);
     } else {
       // Handle cross-group reordering
       const updatedSourceTasks = [...sourceGroup.tasks];
@@ -229,34 +295,33 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         updatedSourceTasks,
         updatedTargetTasks,
       }) as any);
+      // Update newTaskGroups for socket emit
+      newTaskGroups = newTaskGroups.map(g => {
+        if (g.id === sourceGroup.id) return { ...g, tasks: updatedSourceTasks };
+        if (g.id === targetGroup.id) return { ...g, tasks: updatedTargetTasks };
+        return g;
+      });
     }
 
-    // Socket emit for task order
+    // Socket emit for full task order
     if (socket && projectId && teamId && movedTask) {
-      let toSortOrder = -1;
-      let toLastIndex = false;
-      if (insertIdx === targetGroup.tasks.length) {
-        toSortOrder = -1;
-        toLastIndex = true;
-      } else if (targetGroup.tasks[insertIdx]) {
-        const sortOrder = targetGroup.tasks[insertIdx].sort_order;
-        toSortOrder = typeof sortOrder === 'number' ? sortOrder : 0;
-        toLastIndex = false;
-      } else if (targetGroup.tasks.length > 0) {
-        const lastSortOrder = targetGroup.tasks[targetGroup.tasks.length - 1].sort_order;
-        toSortOrder = typeof lastSortOrder === 'number' ? lastSortOrder : 0;
-        toLastIndex = false;
-      }
+      const taskUpdates = getAllTaskUpdates(newTaskGroups, groupBy);
       socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
         project_id: projectId,
-        from_index: movedTask.sort_order ?? 0,
-        to_index: toSortOrder,
-        to_last_index: toLastIndex,
+        group_by: groupBy || 'status',
+        task_updates: taskUpdates,
         from_group: sourceGroup.id,
         to_group: targetGroup.id,
-        group_by: groupBy || 'status',
-        task: movedTask,
         team_id: teamId,
+        from_index: taskIdx,
+        to_index: insertIdx,
+        to_last_index: insertIdx === (targetGroup.id === sourceGroup.id ? (newTaskGroups.find(g => g.id === targetGroup.id)?.tasks.length || 0) - 1 : targetGroup.tasks.length),
+        task: {
+          id: movedTask.id,
+          project_id: movedTask.project_id || projectId,
+          status: movedTask.status || '',
+          priority: movedTask.priority || '',
+        }
       });
 
       // Emit progress update if status changed
@@ -271,6 +336,22 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
           })
         );
       }
+      if (groupBy === 'priority' && movedTask.id) {
+        socket?.emit(
+          SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+          JSON.stringify({
+            task_id: movedTask.id,
+            priority_id: targetGroupId,
+            team_id: teamId,
+          })
+        );
+        socket?.once(
+          SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+          (data: ITaskListPriorityChangeResponse) => {
+            dispatch(updateEnhancedKanbanTaskPriority(data));
+          }
+        );
+      }
     }
 
     setDraggedTaskId(null);
@@ -291,7 +372,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
   if (error) {
     return (
       <Card>
-        <Empty description={`Error loading tasks: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        <Empty description={`${t('errorLoadingTasks')}: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
       </Card>
     );
   }
@@ -299,21 +380,21 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
   return (
     <>
       <div className="mb-4">
-        <React.Suspense fallback={<div>Loading filters...</div>}>
+        <React.Suspense fallback={<div>{t('loadingFilters')}</div>}>
           <ImprovedTaskFilters position="board" />
         </React.Suspense>
       </div>
       <div className="enhanced-kanban-board">
         {loadingGroups ? (
-            <div className="flex flex-row gap-2 h-[600px]">
-              <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>
+          <div className="flex flex-row gap-2 h-[600px]">
+            <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>
         ) : taskGroups.length === 0 ? (
           <Card>
-            <Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            <Empty description={t('noTasksFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
           </Card>
         ) : (
           <div className="kanban-groups-container">
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
index f5e443d2..9338b48b 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
@@ -25,6 +25,7 @@ import {
     IGroupBy,
 } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { createPortal } from 'react-dom';
+import { Modal } from 'antd';
 
 // Simple Portal component
 const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -218,7 +219,42 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
     };
 
     const handleDelete = () => {
-        setShowDeleteConfirm(true);
+        if (groupBy === IGroupBy.STATUS) {
+            Modal.confirm({
+                title: t('deleteStatusTitle'),
+                content: t('deleteStatusContent'),
+                okText: t('deleteTaskConfirm'),
+                okType: 'danger',
+                cancelText: t('deleteTaskCancel'),
+                centered: true,
+                onOk: async () => {
+                    await handleDeleteSection();
+                },
+            });
+        } else if (groupBy === IGroupBy.PHASE) {
+            Modal.confirm({
+                title: t('deletePhaseTitle'),
+                content: t('deletePhaseContent'),
+                okText: t('deleteTaskConfirm'),
+                okType: 'danger',
+                cancelText: t('deleteTaskCancel'),
+                centered: true,
+                onOk: async () => {
+                    await handleDeleteSection();
+                },
+            });
+        } else {
+            Modal.confirm({
+                title: t('deleteConfirmationTitle'),
+                okText: t('deleteTaskConfirm'),
+                okType: 'danger',
+                cancelText: t('deleteTaskCancel'),
+                centered: true,
+                onOk: async () => {
+                    await handleDeleteSection();
+                },
+            });
+        }
         setShowDropdown(false);
     };
 
@@ -419,56 +455,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                 </div>
 
                 {/* Simple Delete Confirmation */}
-                {showDeleteConfirm && (
-                    <Portal>
-                        <div 
-                            className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-[99999]"
-                            onClick={() => setShowDeleteConfirm(false)}
-                        >
-                            <div 
-                                className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4"
-                                onClick={e => e.stopPropagation()}
-                            >
-                                <div className="p-4">
-                                    <div className="flex items-center gap-3 mb-3">
-                                        <div className="flex-shrink-0">
-                                            <svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                                            </svg>
-                                        </div>
-                                        <div>
-                                            <h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                                                {t('deleteConfirmationTitle')}
-                                            </h3>
-                                        </div>
-                                    </div>
-                                    <div className="flex justify-end gap-2">
-                                        <button
-                                            type="button"
-                                            className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
-                                                ? 'border-gray-600 text-gray-300 hover:bg-gray-600'
-                                                : 'border-gray-300 text-gray-700 hover:bg-gray-50'
-                                                }`}
-                                            onClick={() => setShowDeleteConfirm(false)}
-                                        >
-                                            {t('deleteConfirmationCancel')}
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 transition-colors"
-                                            onClick={() => {
-                                                handleDeleteSection();
-                                                setShowDeleteConfirm(false);
-                                            }}
-                                        >
-                                            {t('deleteConfirmationOk')}
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </Portal>
-                )}
+                {/* Portal-based confirmation removed, now handled by Modal.confirm */}
                 <div className="enhanced-kanban-group-tasks">
                     {/* Create card at top */}
                     {showNewCardTop && (
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
index bf499a12..daa8793c 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
@@ -14,8 +14,11 @@ import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
 import { getUserSession } from '@/utils/session-helper';
 import { themeWiseColor } from '@/utils/themeWiseColor';
-import { toggleTaskExpansion, fetchBoardSubTasks } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { toggleTaskExpansion, fetchBoardSubTasks, deleteTask as deleteKanbanTask, updateEnhancedKanbanSubtask } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import TaskProgressCircle from './TaskProgressCircle';
+import { Button, Modal } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { tasksApiService } from '@/api/tasks/tasks.api.service';
 
 // Simple Portal component
 const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -70,6 +73,9 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         const d = selectedDate || new Date();
         return new Date(d.getFullYear(), d.getMonth(), 1);
     });
+    const [contextMenu, setContextMenu] = useState<{ visible: boolean; x: number; y: number }>({ visible: false, x: 0, y: 0 });
+    const contextMenuRef = useRef<HTMLDivElement>(null);
+    const [selectedTask, setSelectedTask] = useState<IProjectTask | null>(null);
 
     useEffect(() => {
         setSelectedDate(task.end_date ? new Date(task.end_date) : null);
@@ -102,6 +108,21 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         }
     }, [showDatePicker]);
 
+    // Hide context menu on click elsewhere
+    useEffect(() => {
+        const handleClick = (e: MouseEvent) => {
+            if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+                setContextMenu({ ...contextMenu, visible: false });
+            }
+        };
+        if (contextMenu.visible) {
+            document.addEventListener('mousedown', handleClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [contextMenu]);
+
     const handleCardClick = useCallback((e: React.MouseEvent, id: string) => {
         e.stopPropagation();
         dispatch(setSelectedTaskId(id));
@@ -178,6 +199,48 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         handleSubTaskExpand();
     }, [handleSubTaskExpand]);
 
+    // Delete logic (similar to task-drawer-header)
+    const handleDeleteTask = async (task: IProjectTask | null) => {
+        if (!task || !task.id) return;
+        Modal.confirm({
+            title: t('deleteTaskTitle'),
+            content: t('deleteTaskContent'),
+            okText: t('deleteTaskConfirm'),
+            okType: 'danger',
+            cancelText: t('deleteTaskCancel'),
+            centered: true,
+            onOk: async () => {
+                if (!task.id) return;
+                const res = await tasksApiService.deleteTask(task.id);
+                if (res.done) {
+                    dispatch(setSelectedTaskId(null));
+                    if (task.is_sub_task) {
+                        dispatch(updateEnhancedKanbanSubtask({
+                            sectionId: '',
+                            subtask: { id: task.id , parent_task_id: task.parent_task_id || '', manual_progress: false },
+                            mode: 'delete',
+                        }));
+                    } else {
+                        dispatch(deleteKanbanTask(task.id));
+                    }
+                    dispatch(setShowTaskDrawer(false));
+                    if (task.parent_task_id) {
+                        socket?.emit(
+                            SocketEvents.GET_TASK_PROGRESS.toString(),
+                            task.parent_task_id
+                        );
+                    }
+                }
+                setContextMenu({ visible: false, x: 0, y: 0 });
+                setSelectedTask(null);
+            },
+            onCancel: () => {
+                setContextMenu({ visible: false, x: 0, y: 0 });
+                setSelectedTask(null);
+            },
+        });
+    };
+
     // Calendar rendering helpers
     const year = calendarMonth.getFullYear();
     const month = calendarMonth.getMonth();
@@ -202,7 +265,37 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
 
     return (
         <>
-            <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block', position: 'relative' }} >
+            {/* Context menu for delete */}
+            {contextMenu.visible && (
+                <div
+                    ref={contextMenuRef}
+                    style={{
+                        position: 'fixed',
+                        top: contextMenu.y,
+                        left: contextMenu.x,
+                        zIndex: 9999,
+                        background: themeMode === 'dark' ? '#23272f' : '#fff',
+                        borderRadius: 8,
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
+                        padding: 0,
+                        minWidth: 120,
+                        transition: 'translateY(0)',
+                    }}
+                >
+                    <Button
+                        type="text"
+                        icon={<DeleteOutlined style={{ color: '#ef4444', fontSize: 16 }} />}
+                        style={{ color: '#ef4444', width: '100%', textAlign: 'left', padding: '8px 16px', fontWeight: 500 }}
+                        onClick={() => handleDeleteTask(selectedTask || null)}
+                    >
+                        {t('delete')}
+                    </Button>
+                </div>
+            )}
+            <div
+                className="enhanced-kanban-task-card"
+                style={{ background, color, display: 'block', position: 'relative' }}
+            >
                 {/* Progress circle at top right */}
                 <div style={{ position: 'absolute', top: 6, right: 6, zIndex: 2 }}>
                     <TaskProgressCircle task={task} size={20} />
@@ -221,6 +314,11 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                     onDrop={e => onTaskDrop(e, groupId, idx)}
                     onDragEnd={onDragEnd} // <-- add this
                     onClick={e => handleCardClick(e, task.id!)}
+                    onContextMenu={e => {
+                        e.preventDefault();
+                        setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+                        setSelectedTask(task);
+                    }}
                 >
                     <div className="task-content">
                         <div className="task_labels" style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
@@ -447,7 +545,14 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                         {!task.sub_tasks_loading && Array.isArray(task.sub_tasks) && task.sub_tasks.length > 0 && (
                             <ul className="space-y-1">
                                 {task.sub_tasks.map(sub => (
-                                    <li key={sub.id} onClick={e => handleCardClick(e, sub.id!)} className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800">
+                                    <li key={sub.id} 
+                                    onClick={e => handleCardClick(e, sub.id!)} 
+                                    className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800"
+                                    onContextMenu={e => {
+                                        e.preventDefault();
+                                        setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+                                        setSelectedTask(sub);
+                                    }}>
                                         {sub.priority_color || sub.priority_color_dark ? (
                                             <span
                                                 className="w-2 h-2 rounded-full inline-block"
diff --git a/worklenz-frontend/src/components/project-roadmap-gantt/PhaseModal.tsx b/worklenz-frontend/src/components/project-roadmap-gantt/PhaseModal.tsx
new file mode 100644
index 00000000..c921d2f6
--- /dev/null
+++ b/worklenz-frontend/src/components/project-roadmap-gantt/PhaseModal.tsx
@@ -0,0 +1,406 @@
+import React, { useState } from 'react';
+import { 
+  Modal, 
+  Tabs, 
+  Progress, 
+  Tag, 
+  List, 
+  Avatar, 
+  Badge, 
+  Space, 
+  Button,
+  Statistic,
+  Row,
+  Col,
+  Timeline,
+  Input,
+  Form,
+  DatePicker,
+  Select
+} from 'antd';
+import { 
+  CalendarOutlined, 
+  TeamOutlined, 
+  CheckCircleOutlined, 
+  ClockCircleOutlined,
+  FlagOutlined,
+  ExclamationCircleOutlined,
+  EditOutlined,
+  SaveOutlined,
+  CloseOutlined
+} from '@ant-design/icons';
+import { PhaseModalData, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import dayjs from 'dayjs';
+
+const { TabPane } = Tabs;
+const { TextArea } = Input;
+
+interface PhaseModalProps {
+  visible: boolean;
+  phase: PhaseModalData | null;
+  onClose: () => void;
+  onUpdate?: (updates: Partial<ProjectPhase>) => void;
+}
+
+const PhaseModal: React.FC<PhaseModalProps> = ({
+  visible,
+  phase,
+  onClose,
+  onUpdate,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [form] = Form.useForm();
+  
+  // Theme support
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const isDarkMode = themeMode === 'dark';
+
+  if (!phase) return null;
+
+  const handleEdit = () => {
+    setIsEditing(true);
+    form.setFieldsValue({
+      name: phase.name,
+      description: phase.description,
+      startDate: dayjs(phase.startDate),
+      endDate: dayjs(phase.endDate),
+      status: phase.status,
+    });
+  };
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      const updates: Partial<ProjectPhase> = {
+        name: values.name,
+        description: values.description,
+        startDate: values.startDate.toDate(),
+        endDate: values.endDate.toDate(),
+        status: values.status,
+      };
+      
+      onUpdate?.(updates);
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Validation failed:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    form.resetFields();
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return 'success';
+      case 'in-progress': return 'processing';
+      case 'on-hold': return 'warning';
+      default: return 'default';
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'high': return 'red';
+      case 'medium': return 'orange';
+      case 'low': return 'green';
+      default: return 'default';
+    }
+  };
+
+  const getTaskStatusIcon = (status: string) => {
+    switch (status) {
+      case 'done': return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
+      case 'in-progress': return <ClockCircleOutlined style={{ color: '#1890ff' }} />;
+      default: return <ExclamationCircleOutlined style={{ color: '#d9d9d9' }} />;
+    }
+  };
+
+  return (
+    <Modal
+      title={
+        <div className="flex justify-between items-center">
+          <Space>
+            <Badge status={getStatusColor(phase.status)} />
+            {isEditing ? (
+              <Form.Item name="name" className="mb-0">
+                <Input className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" />
+              </Form.Item>
+            ) : (
+              <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-0">
+                {phase.name}
+              </h4>
+            )}
+          </Space>
+          <Space>
+            {isEditing ? (
+              <>
+                <Button 
+                  type="primary" 
+                  icon={<SaveOutlined />} 
+                  onClick={handleSave}
+                  size="small"
+                >
+                  Save
+                </Button>
+                <Button 
+                  icon={<CloseOutlined />} 
+                  onClick={handleCancel}
+                  size="small"
+                  className="dark:border-gray-600 dark:text-gray-300"
+                >
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <Button 
+                type="text" 
+                icon={<EditOutlined />} 
+                onClick={handleEdit}
+                size="small"
+                className="dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Edit
+              </Button>
+            )}
+          </Space>
+        </div>
+      }
+      open={visible}
+      onCancel={onClose}
+      width={800}
+      footer={null}
+      className="dark:bg-gray-800"
+    >
+      <Form form={form} layout="vertical">
+        <div className="mb-4">
+          {isEditing ? (
+            <Form.Item name="description" label={<span className="text-gray-700 dark:text-gray-300">Description</span>}>
+              <TextArea 
+                rows={2} 
+                className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" 
+              />
+            </Form.Item>
+          ) : (
+            <p className="text-gray-600 dark:text-gray-400">{phase.description}</p>
+          )}
+        </div>
+
+        {/* Phase Statistics */}
+        <Row gutter={16} className="mb-6">
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Progress</span>}
+                value={phase.progress} 
+                suffix="%" 
+                valueStyle={{ color: themeWiseColor('#1890ff', '#40a9ff', themeMode) }}
+              />
+              <Progress 
+                percent={phase.progress} 
+                showInfo={false} 
+                size="small" 
+                strokeColor={themeWiseColor('#1890ff', '#40a9ff', themeMode)}
+                trailColor={themeWiseColor('#f0f0f0', '#4b5563', themeMode)}
+              />
+            </div>
+          </Col>
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Tasks</span>}
+                value={phase.completedTaskCount} 
+                suffix={`/ ${phase.taskCount}`}
+                valueStyle={{ color: themeWiseColor('#52c41a', '#34d399', themeMode) }}
+              />
+            </div>
+          </Col>
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Milestones</span>}
+                value={phase.completedMilestoneCount} 
+                suffix={`/ ${phase.milestoneCount}`}
+                valueStyle={{ color: themeWiseColor('#722ed1', '#9f7aea', themeMode) }}
+              />
+            </div>
+          </Col>
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Team</span>}
+                value={phase.teamMembers.length} 
+                suffix="members"
+                valueStyle={{ color: themeWiseColor('#fa8c16', '#fbbf24', themeMode) }}
+              />
+            </div>
+          </Col>
+        </Row>
+
+        {/* Timeline */}
+        <Row gutter={16} className="mb-6">
+          <Col span={12}>
+            {isEditing ? (
+              <Form.Item name="startDate" label={<span className="text-gray-700 dark:text-gray-300">Start Date</span>}>
+                <DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
+              </Form.Item>
+            ) : (
+              <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+                <div className="flex items-center gap-2">
+                  <CalendarOutlined className="text-gray-600 dark:text-gray-400" />
+                  <span className="font-medium text-gray-900 dark:text-gray-100">Start:</span>
+                  <span className="text-gray-600 dark:text-gray-400">{phase.startDate.toLocaleDateString()}</span>
+                </div>
+              </div>
+            )}
+          </Col>
+          <Col span={12}>
+            {isEditing ? (
+              <Form.Item name="endDate" label={<span className="text-gray-700 dark:text-gray-300">End Date</span>}>
+                <DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
+              </Form.Item>
+            ) : (
+              <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+                <div className="flex items-center gap-2">
+                  <CalendarOutlined className="text-gray-600 dark:text-gray-400" />
+                  <span className="font-medium text-gray-900 dark:text-gray-100">End:</span>
+                  <span className="text-gray-600 dark:text-gray-400">{phase.endDate.toLocaleDateString()}</span>
+                </div>
+              </div>
+            )}
+          </Col>
+        </Row>
+
+        {isEditing && (
+          <Row gutter={16} className="mb-6">
+            <Col span={12}>
+              <Form.Item name="status" label={<span className="text-gray-700 dark:text-gray-300">Status</span>}>
+                <Select className="dark:bg-gray-700 dark:border-gray-600">
+                  <Select.Option value="not-started">Not Started</Select.Option>
+                  <Select.Option value="in-progress">In Progress</Select.Option>
+                  <Select.Option value="completed">Completed</Select.Option>
+                  <Select.Option value="on-hold">On Hold</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+        )}
+
+        <Tabs 
+          defaultActiveKey="tasks"
+          className="dark:bg-gray-800"
+          tabBarStyle={{ 
+            borderBottom: `1px solid ${themeWiseColor('#f0f0f0', '#4b5563', themeMode)}`
+          }}
+        >
+          <TabPane tab={`Tasks (${phase.taskCount})`} key="tasks">
+            <List
+              dataSource={phase.tasks}
+              renderItem={(task: PhaseTask) => (
+                <List.Item>
+                  <List.Item.Meta
+                    avatar={getTaskStatusIcon(task.status)}
+                    title={
+                      <div className="flex justify-between items-center">
+                        <Text strong>{task.name}</Text>
+                        <Space>
+                          <Tag color={getPriorityColor(task.priority)}>
+                            {task.priority}
+                          </Tag>
+                          <Progress 
+                            percent={task.progress} 
+                            size="small" 
+                            style={{ width: 100 }}
+                          />
+                        </Space>
+                      </div>
+                    }
+                    description={
+                      <div>
+                        <Text type="secondary">{task.description}</Text>
+                        <div className="mt-2 flex justify-between items-center">
+                          <Space>
+                            <CalendarOutlined />
+                            <Text type="secondary">
+                              {task.startDate.toLocaleDateString()} - {task.endDate.toLocaleDateString()}
+                            </Text>
+                          </Space>
+                          {task.assigneeName && (
+                            <Space>
+                              <TeamOutlined />
+                              <Text type="secondary">{task.assigneeName}</Text>
+                            </Space>
+                          )}
+                        </div>
+                      </div>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </TabPane>
+
+          <TabPane tab={`Milestones (${phase.milestoneCount})`} key="milestones">
+            <Timeline>
+              {phase.milestones.map((milestone: PhaseMilestone) => (
+                <Timeline.Item
+                  key={milestone.id}
+                  color={milestone.isCompleted ? 'green' : milestone.criticalPath ? 'red' : 'blue'}
+                  dot={milestone.isCompleted ? <CheckCircleOutlined /> : <FlagOutlined />}
+                >
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <Text strong>{milestone.name}</Text>
+                      {milestone.criticalPath && (
+                        <Tag color="red" className="ml-2">Critical Path</Tag>
+                      )}
+                      {milestone.description && (
+                        <div className="mt-1">
+                          <Text type="secondary">{milestone.description}</Text>
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-right">
+                      <div>
+                        <CalendarOutlined />
+                        <span className="ml-1">{milestone.dueDate.toLocaleDateString()}</span>
+                      </div>
+                      <Badge 
+                        status={milestone.isCompleted ? 'success' : 'processing'} 
+                        text={milestone.isCompleted ? 'Completed' : 'Pending'}
+                      />
+                    </div>
+                  </div>
+                </Timeline.Item>
+              ))}
+            </Timeline>
+          </TabPane>
+
+          <TabPane tab={`Team (${phase.teamMembers.length})`} key="team">
+            <List
+              dataSource={phase.teamMembers}
+              renderItem={(member: string) => (
+                <List.Item>
+                  <List.Item.Meta
+                    avatar={<Avatar>{member.charAt(0).toUpperCase()}</Avatar>}
+                    title={member}
+                    description={
+                      <Text type="secondary">
+                        {phase.tasks.filter(task => task.assigneeName === member).length} tasks assigned
+                      </Text>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </TabPane>
+        </Tabs>
+      </Form>
+    </Modal>
+  );
+};
+
+export default PhaseModal;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/project-roadmap-gantt/ProjectRoadmapGantt.tsx b/worklenz-frontend/src/components/project-roadmap-gantt/ProjectRoadmapGantt.tsx
new file mode 100644
index 00000000..be640bc3
--- /dev/null
+++ b/worklenz-frontend/src/components/project-roadmap-gantt/ProjectRoadmapGantt.tsx
@@ -0,0 +1,333 @@
+import React, { useState, useMemo } from 'react';
+import { Gantt, Task, ViewMode } from 'gantt-task-react';
+import { Button, Space, Badge } from 'antd';
+import { CalendarOutlined, TeamOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { ProjectPhase, ProjectRoadmap, GanttViewOptions, PhaseModalData } from '../../types/project-roadmap.types';
+import PhaseModal from './PhaseModal';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import 'gantt-task-react/dist/index.css';
+import './gantt-theme.css';
+
+interface ProjectRoadmapGanttProps {
+  roadmap: ProjectRoadmap;
+  viewOptions?: Partial<GanttViewOptions>;
+  onPhaseUpdate?: (phaseId: string, updates: Partial<ProjectPhase>) => void;
+  onTaskUpdate?: (phaseId: string, taskId: string, updates: any) => void;
+}
+
+const ProjectRoadmapGantt: React.FC<ProjectRoadmapGanttProps> = ({
+  roadmap,
+  viewOptions = {},
+  onPhaseUpdate,
+  onTaskUpdate,
+}) => {
+  const [selectedPhase, setSelectedPhase] = useState<PhaseModalData | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Month);
+  
+  // Theme support
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const isDarkMode = themeMode === 'dark';
+
+  const defaultViewOptions: GanttViewOptions = {
+    viewMode: 'month',
+    showTasks: true,
+    showMilestones: true,
+    groupByPhase: true,
+    ...viewOptions,
+  };
+
+  // Theme-aware colors
+  const ganttColors = useMemo(() => {
+    return {
+      background: themeWiseColor('#ffffff', '#1f2937', themeMode),
+      surface: themeWiseColor('#f8f9fa', '#374151', themeMode),
+      border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
+      taskBar: themeWiseColor('#3b82f6', '#60a5fa', themeMode),
+      taskBarHover: themeWiseColor('#2563eb', '#93c5fd', themeMode),
+      progressBar: themeWiseColor('#10b981', '#34d399', themeMode),
+      milestone: themeWiseColor('#f59e0b', '#fbbf24', themeMode),
+      criticalPath: themeWiseColor('#ef4444', '#f87171', themeMode),
+      text: {
+        primary: themeWiseColor('#111827', '#f9fafb', themeMode),
+        secondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
+      },
+      grid: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
+      today: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
+    };
+  }, [themeMode]);
+
+  // Convert phases to Gantt tasks
+  const ganttTasks = useMemo(() => {
+    const tasks: Task[] = [];
+
+    roadmap.phases.forEach((phase, phaseIndex) => {
+      // Add phase as main task with theme-aware colors
+      const phaseTask: Task = {
+        id: phase.id,
+        name: phase.name,
+        start: phase.startDate,
+        end: phase.endDate,
+        progress: phase.progress,
+        type: 'project',
+        styles: {
+          progressColor: themeWiseColor(phase.color, phase.color, themeMode),
+          progressSelectedColor: themeWiseColor(phase.color, phase.color, themeMode),
+          backgroundColor: themeWiseColor(`${phase.color}20`, `${phase.color}30`, themeMode),
+        },
+      };
+      tasks.push(phaseTask);
+
+      // Add phase tasks if enabled
+      if (defaultViewOptions.showTasks) {
+        phase.tasks.forEach((task) => {
+          const ganttTask: Task = {
+            id: task.id,
+            name: task.name,
+            start: task.startDate,
+            end: task.endDate,
+            progress: task.progress,
+            type: 'task',
+            project: phase.id,
+            dependencies: task.dependencies,
+            styles: {
+              progressColor: ganttColors.taskBar,
+              progressSelectedColor: ganttColors.taskBarHover,
+              backgroundColor: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
+            },
+          };
+          tasks.push(ganttTask);
+        });
+      }
+
+      // Add milestones if enabled
+      if (defaultViewOptions.showMilestones) {
+        phase.milestones.forEach((milestone) => {
+          const milestoneTask: Task = {
+            id: milestone.id,
+            name: milestone.name,
+            start: milestone.dueDate,
+            end: milestone.dueDate,
+            progress: milestone.isCompleted ? 100 : 0,
+            type: 'milestone',
+            project: phase.id,
+            styles: {
+              progressColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
+              progressSelectedColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
+              backgroundColor: milestone.criticalPath ? 
+                themeWiseColor('rgba(239, 68, 68, 0.1)', 'rgba(248, 113, 113, 0.2)', themeMode) :
+                themeWiseColor('rgba(16, 185, 129, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode),
+            },
+          };
+          tasks.push(milestoneTask);
+        });
+      }
+    });
+
+    return tasks;
+  }, [roadmap.phases, defaultViewOptions, ganttColors, themeMode]);
+
+  const handlePhaseClick = (phase: ProjectPhase) => {
+    const taskCount = phase.tasks.length;
+    const completedTaskCount = phase.tasks.filter(task => task.status === 'done').length;
+    const milestoneCount = phase.milestones.length;
+    const completedMilestoneCount = phase.milestones.filter(m => m.isCompleted).length;
+    const teamMembers = [...new Set(phase.tasks.map(task => task.assigneeName).filter(Boolean))];
+
+    const phaseModalData: PhaseModalData = {
+      ...phase,
+      taskCount,
+      completedTaskCount,
+      milestoneCount,
+      completedMilestoneCount,
+      teamMembers,
+    };
+
+    setSelectedPhase(phaseModalData);
+    setIsModalVisible(true);
+  };
+
+  const handleTaskClick = (task: Task) => {
+    // Find the phase this task belongs to
+    const phase = roadmap.phases.find(p => 
+      p.tasks.some(t => t.id === task.id) || p.milestones.some(m => m.id === task.id)
+    );
+    
+    if (phase) {
+      handlePhaseClick(phase);
+    }
+  };
+
+  const handleDateChange = (task: Task) => {
+    const phase = roadmap.phases.find(p => p.id === task.id);
+    if (phase && onPhaseUpdate) {
+      onPhaseUpdate(phase.id, {
+        startDate: task.start,
+        endDate: task.end,
+      });
+    } else if (onTaskUpdate) {
+      const parentPhase = roadmap.phases.find(p => 
+        p.tasks.some(t => t.id === task.id)
+      );
+      if (parentPhase) {
+        onTaskUpdate(parentPhase.id, task.id, {
+          startDate: task.start,
+          endDate: task.end,
+        });
+      }
+    }
+  };
+
+  const handleProgressChange = (task: Task) => {
+    const phase = roadmap.phases.find(p => p.id === task.id);
+    if (phase && onPhaseUpdate) {
+      onPhaseUpdate(phase.id, { progress: task.progress });
+    } else if (onTaskUpdate) {
+      const parentPhase = roadmap.phases.find(p => 
+        p.tasks.some(t => t.id === task.id)
+      );
+      if (parentPhase) {
+        onTaskUpdate(parentPhase.id, task.id, { progress: task.progress });
+      }
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return '#52c41a';
+      case 'in-progress': return '#1890ff';
+      case 'on-hold': return '#faad14';
+      default: return '#d9d9d9';
+    }
+  };
+
+  const columnWidth = viewMode === ViewMode.Year ? 350 : 
+                    viewMode === ViewMode.Month ? 300 : 
+                    viewMode === ViewMode.Week ? 250 : 60;
+
+  return (
+    <div className="project-roadmap-gantt w-full">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-4">
+            <div>
+              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+                {roadmap.name}
+              </h3>
+              {roadmap.description && (
+                <p className="text-gray-600 dark:text-gray-400 mb-0">
+                  {roadmap.description}
+                </p>
+              )}
+            </div>
+            <Space>
+              <Button 
+                type={viewMode === ViewMode.Week ? 'primary' : 'default'}
+                onClick={() => setViewMode(ViewMode.Week)}
+                className="dark:border-gray-600 dark:text-gray-300"
+              >
+                Week
+              </Button>
+              <Button 
+                type={viewMode === ViewMode.Month ? 'primary' : 'default'}
+                onClick={() => setViewMode(ViewMode.Month)}
+                className="dark:border-gray-600 dark:text-gray-300"
+              >
+                Month
+              </Button>
+              <Button 
+                type={viewMode === ViewMode.Year ? 'primary' : 'default'}
+                onClick={() => setViewMode(ViewMode.Year)}
+                className="dark:border-gray-600 dark:text-gray-300"
+              >
+                Year
+              </Button>
+            </Space>
+          </div>
+
+          {/* Phase Overview */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+            {roadmap.phases.map((phase) => (
+              <div 
+                key={phase.id}
+                className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200"
+                onClick={() => handlePhaseClick(phase)}
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <Badge 
+                    color={getStatusColor(phase.status)} 
+                    text={
+                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                        {phase.name}
+                      </span>
+                    }
+                  />
+                </div>
+                <div className="space-y-2 text-sm">
+                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                    <CalendarOutlined className="w-4 h-4" />
+                    <span>{phase.startDate.toLocaleDateString()} - {phase.endDate.toLocaleDateString()}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                    <TeamOutlined className="w-4 h-4" />
+                    <span>{phase.tasks.length} tasks</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                    <CheckCircleOutlined className="w-4 h-4" />
+                    <span>{phase.progress}% complete</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Gantt Chart */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+        <div className="p-4">
+          <div className="w-full overflow-x-auto">
+            <div 
+              className="gantt-container"
+              style={{ 
+                '--gantt-background': ganttColors.background,
+                '--gantt-grid': ganttColors.grid,
+                '--gantt-text': ganttColors.text.primary,
+                '--gantt-border': ganttColors.border,
+              } as React.CSSProperties}
+            >
+              <Gantt
+                tasks={ganttTasks}
+                viewMode={viewMode}
+                onDateChange={handleDateChange}
+                onProgressChange={handleProgressChange}
+                onDoubleClick={handleTaskClick}
+                listCellWidth=""
+                columnWidth={columnWidth}
+                todayColor={ganttColors.today}
+                projectProgressColor={ganttColors.progressBar}
+                projectBackgroundColor={themeWiseColor('rgba(82, 196, 26, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Phase Modal */}
+      <PhaseModal
+        visible={isModalVisible}
+        phase={selectedPhase}
+        onClose={() => setIsModalVisible(false)}
+        onUpdate={(updates) => {
+          if (selectedPhase && onPhaseUpdate) {
+            onPhaseUpdate(selectedPhase.id, updates);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default ProjectRoadmapGantt;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/project-roadmap-gantt/RoadmapDemo.tsx b/worklenz-frontend/src/components/project-roadmap-gantt/RoadmapDemo.tsx
new file mode 100644
index 00000000..7d5d31e3
--- /dev/null
+++ b/worklenz-frontend/src/components/project-roadmap-gantt/RoadmapDemo.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { Button, Space, message } from 'antd';
+import ProjectRoadmapGantt from './ProjectRoadmapGantt';
+import { sampleProjectRoadmap } from './sample-data';
+import { ProjectPhase, ProjectRoadmap } from '../../types/project-roadmap.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+
+const RoadmapDemo: React.FC = () => {
+  const [roadmap, setRoadmap] = useState<ProjectRoadmap>(sampleProjectRoadmap);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  const handlePhaseUpdate = (phaseId: string, updates: Partial<ProjectPhase>) => {
+    setRoadmap(prevRoadmap => ({
+      ...prevRoadmap,
+      phases: prevRoadmap.phases.map(phase => 
+        phase.id === phaseId 
+          ? { ...phase, ...updates }
+          : phase
+      )
+    }));
+    
+    message.success('Phase updated successfully!');
+  };
+
+  const handleTaskUpdate = (phaseId: string, taskId: string, updates: any) => {
+    setRoadmap(prevRoadmap => ({
+      ...prevRoadmap,
+      phases: prevRoadmap.phases.map(phase => 
+        phase.id === phaseId 
+          ? {
+              ...phase,
+              tasks: phase.tasks.map(task => 
+                task.id === taskId 
+                  ? { ...task, ...updates }
+                  : task
+              )
+            }
+          : phase
+      )
+    }));
+    
+    message.success('Task updated successfully!');
+  };
+
+  const resetToSampleData = () => {
+    setRoadmap(sampleProjectRoadmap);
+    message.info('Roadmap reset to sample data');
+  };
+
+  return (
+    <div className="roadmap-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
+        <div className="p-6">
+          <div className="flex justify-between items-center">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                Project Roadmap Gantt Chart Demo
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400 mb-0">
+                Interactive Gantt chart showing project phases as milestones/epics. 
+                Click on any phase card or Gantt bar to view detailed information in a modal.
+              </p>
+            </div>
+            <Space>
+              <Button 
+                onClick={resetToSampleData}
+                className="dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Reset to Sample Data
+              </Button>
+            </Space>
+          </div>
+        </div>
+      </div>
+
+      <ProjectRoadmapGantt
+        roadmap={roadmap}
+        viewOptions={{
+          viewMode: 'month',
+          showTasks: true,
+          showMilestones: true,
+          groupByPhase: true,
+        }}
+        onPhaseUpdate={handlePhaseUpdate}
+        onTaskUpdate={handleTaskUpdate}
+      />
+
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
+            Features Demonstrated:
+          </h3>
+          <ul className="space-y-2 text-gray-700 dark:text-gray-300">
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Phase-based Grouping:</strong> Projects organized by phases (Planning, Development, Testing, Deployment)</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Interactive Phase Cards:</strong> Click on phase cards for detailed view</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Gantt Chart Visualization:</strong> Timeline view with tasks, milestones, and dependencies</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Modal Details:</strong> Comprehensive phase information with tasks, milestones, and team members</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Progress Tracking:</strong> Visual progress indicators and completion statistics</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Multiple View Modes:</strong> Week, Month, and Year timeline views</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Task Management:</strong> Task assignments, priorities, and status tracking</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Milestone Tracking:</strong> Critical path milestones and completion status</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Team Overview:</strong> Team member assignments and workload distribution</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Editable Fields:</strong> In-modal editing for phase attributes (name, description, dates, status)</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Theme Support:</strong> Automatic light/dark theme adaptation with consistent styling</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoadmapDemo;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/project-roadmap-gantt/gantt-theme.css b/worklenz-frontend/src/components/project-roadmap-gantt/gantt-theme.css
new file mode 100644
index 00000000..86b85428
--- /dev/null
+++ b/worklenz-frontend/src/components/project-roadmap-gantt/gantt-theme.css
@@ -0,0 +1,221 @@
+/* Custom Gantt Chart Theme Overrides */
+
+/* Light theme styles */
+.gantt-container {
+  font-family: inherit;
+}
+
+.gantt-container .gantt-header {
+  background-color: var(--gantt-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-border, #e5e7eb);
+  color: var(--gantt-text, #111827);
+}
+
+.gantt-container .gantt-task-list-wrapper {
+  background-color: var(--gantt-background, #ffffff);
+  border-right: 1px solid var(--gantt-border, #e5e7eb);
+}
+
+.gantt-container .gantt-task-list-table {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-task-list-table-row {
+  color: var(--gantt-text, #111827);
+  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-task-list-table-row:hover {
+  background-color: var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-gantt {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-vertical-container {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-horizontal-container {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-calendar {
+  background-color: var(--gantt-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-border, #e5e7eb);
+}
+
+.gantt-container .gantt-calendar-row {
+  color: var(--gantt-text, #111827);
+  background-color: var(--gantt-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-grid-body {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-grid-row {
+  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-grid-row-line {
+  border-left: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+/* Dark theme overrides */
+html.dark .gantt-container .gantt-header {
+  background-color: #1f2937;
+  border-bottom-color: #4b5563;
+  color: #f9fafb;
+}
+
+html.dark .gantt-container .gantt-task-list-wrapper {
+  background-color: #1f2937;
+  border-right-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-task-list-table {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-task-list-table-row {
+  color: #f9fafb;
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-task-list-table-row:hover {
+  background-color: #374151;
+}
+
+html.dark .gantt-container .gantt-gantt {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-vertical-container {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-horizontal-container {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-calendar {
+  background-color: #1f2937;
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-calendar-row {
+  color: #f9fafb;
+  background-color: #1f2937;
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-grid-body {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-grid-row {
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-grid-row-line {
+  border-left-color: #4b5563;
+}
+
+/* Tooltip theming */
+.gantt-container .gantt-tooltip {
+  background-color: var(--gantt-background, #ffffff);
+  border: 1px solid var(--gantt-border, #e5e7eb);
+  color: var(--gantt-text, #111827);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+html.dark .gantt-container .gantt-tooltip {
+  background-color: #374151;
+  border-color: #4b5563;
+  color: #f9fafb;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+/* Task bar styling improvements */
+.gantt-container .gantt-task-progress {
+  border-radius: 2px;
+}
+
+.gantt-container .gantt-task-background {
+  border-radius: 4px;
+  border: 1px solid var(--gantt-border, #e5e7eb);
+}
+
+html.dark .gantt-container .gantt-task-background {
+  border-color: #4b5563;
+}
+
+/* Milestone styling */
+.gantt-container .gantt-milestone {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+html.dark .gantt-container .gantt-milestone {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+/* Selection and hover states */
+.gantt-container .gantt-task:hover .gantt-task-background {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  transition: all 0.2s ease;
+}
+
+.gantt-container .gantt-task-selected .gantt-task-background {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
+html.dark .gantt-container .gantt-task-selected .gantt-task-background {
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  .gantt-container {
+    font-size: 14px;
+  }
+  
+  .gantt-container .gantt-task-list-wrapper {
+    min-width: 200px;
+  }
+}
+
+/* Scrollbar theming */
+.gantt-container ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gantt-container ::-webkit-scrollbar-track {
+  background: var(--gantt-grid, #f3f4f6);
+  border-radius: 4px;
+}
+
+.gantt-container ::-webkit-scrollbar-thumb {
+  background: var(--gantt-border, #e5e7eb);
+  border-radius: 4px;
+}
+
+.gantt-container ::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+html.dark .gantt-container ::-webkit-scrollbar-track {
+  background: #4b5563;
+}
+
+html.dark .gantt-container ::-webkit-scrollbar-thumb {
+  background: #6b7280;
+}
+
+html.dark .gantt-container ::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/project-roadmap-gantt/index.ts b/worklenz-frontend/src/components/project-roadmap-gantt/index.ts
new file mode 100644
index 00000000..05cd1886
--- /dev/null
+++ b/worklenz-frontend/src/components/project-roadmap-gantt/index.ts
@@ -0,0 +1,5 @@
+export { default as ProjectRoadmapGantt } from './ProjectRoadmapGantt';
+export { default as PhaseModal } from './PhaseModal';
+export { default as RoadmapDemo } from './RoadmapDemo';
+export { sampleProjectRoadmap } from './sample-data';
+export * from '../../types/project-roadmap.types';
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/project-roadmap-gantt/sample-data.ts b/worklenz-frontend/src/components/project-roadmap-gantt/sample-data.ts
new file mode 100644
index 00000000..f3c7b91f
--- /dev/null
+++ b/worklenz-frontend/src/components/project-roadmap-gantt/sample-data.ts
@@ -0,0 +1,317 @@
+import { ProjectRoadmap, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
+
+// Sample tasks for Planning Phase
+const planningTasks: PhaseTask[] = [
+  {
+    id: 'task-planning-1',
+    name: 'Project Requirements Analysis',
+    description: 'Gather and analyze project requirements from stakeholders',
+    startDate: new Date(2024, 11, 1), // December 1, 2024
+    endDate: new Date(2024, 11, 5),
+    progress: 100,
+    assigneeId: 'user-1',
+    assigneeName: 'Alice Johnson',
+    priority: 'high',
+    status: 'done',
+  },
+  {
+    id: 'task-planning-2',
+    name: 'Technical Architecture Design',
+    description: 'Design the technical architecture and system components',
+    startDate: new Date(2024, 11, 6),
+    endDate: new Date(2024, 11, 12),
+    progress: 75,
+    assigneeId: 'user-2',
+    assigneeName: 'Bob Smith',
+    priority: 'high',
+    status: 'in-progress',
+  },
+  {
+    id: 'task-planning-3',
+    name: 'Resource Allocation Planning',
+    description: 'Plan and allocate team resources for the project',
+    startDate: new Date(2024, 11, 8),
+    endDate: new Date(2024, 11, 15),
+    progress: 50,
+    assigneeId: 'user-3',
+    assigneeName: 'Carol Davis',
+    priority: 'medium',
+    status: 'in-progress',
+    dependencies: ['task-planning-1'],
+  }
+];
+
+// Sample milestones for Planning Phase
+const planningMilestones: PhaseMilestone[] = [
+  {
+    id: 'milestone-planning-1',
+    name: 'Requirements Approved',
+    description: 'All project requirements have been reviewed and approved by stakeholders',
+    dueDate: new Date(2024, 11, 5),
+    isCompleted: true,
+    criticalPath: true,
+  },
+  {
+    id: 'milestone-planning-2',
+    name: 'Architecture Review Complete',
+    description: 'Technical architecture has been reviewed and approved',
+    dueDate: new Date(2024, 11, 15),
+    isCompleted: false,
+    criticalPath: true,
+  }
+];
+
+// Sample tasks for Development Phase
+const developmentTasks: PhaseTask[] = [
+  {
+    id: 'task-dev-1',
+    name: 'Frontend Component Development',
+    description: 'Develop core frontend components using React',
+    startDate: new Date(2024, 11, 16),
+    endDate: new Date(2025, 0, 31), // January 31, 2025
+    progress: 30,
+    assigneeId: 'user-4',
+    assigneeName: 'David Wilson',
+    priority: 'high',
+    status: 'in-progress',
+    dependencies: ['task-planning-2'],
+  },
+  {
+    id: 'task-dev-2',
+    name: 'Backend API Development',
+    description: 'Develop REST APIs and database models',
+    startDate: new Date(2024, 11, 16),
+    endDate: new Date(2025, 0, 25),
+    progress: 45,
+    assigneeId: 'user-5',
+    assigneeName: 'Eva Brown',
+    priority: 'high',
+    status: 'in-progress',
+    dependencies: ['task-planning-2'],
+  },
+  {
+    id: 'task-dev-3',
+    name: 'Database Setup and Migration',
+    description: 'Set up production database and create migration scripts',
+    startDate: new Date(2024, 11, 20),
+    endDate: new Date(2025, 0, 15),
+    progress: 80,
+    assigneeId: 'user-6',
+    assigneeName: 'Frank Miller',
+    priority: 'medium',
+    status: 'in-progress',
+  }
+];
+
+// Sample milestones for Development Phase
+const developmentMilestones: PhaseMilestone[] = [
+  {
+    id: 'milestone-dev-1',
+    name: 'Core Components Complete',
+    description: 'All core frontend components have been developed and tested',
+    dueDate: new Date(2025, 0, 20),
+    isCompleted: false,
+    criticalPath: false,
+  },
+  {
+    id: 'milestone-dev-2',
+    name: 'API Development Complete',
+    description: 'All backend APIs are developed and documented',
+    dueDate: new Date(2025, 0, 25),
+    isCompleted: false,
+    criticalPath: true,
+  }
+];
+
+// Sample tasks for Testing Phase
+const testingTasks: PhaseTask[] = [
+  {
+    id: 'task-test-1',
+    name: 'Unit Testing Implementation',
+    description: 'Write and execute comprehensive unit tests',
+    startDate: new Date(2025, 1, 1), // February 1, 2025
+    endDate: new Date(2025, 1, 15),
+    progress: 0,
+    assigneeId: 'user-7',
+    assigneeName: 'Grace Lee',
+    priority: 'high',
+    status: 'todo',
+    dependencies: ['task-dev-1', 'task-dev-2'],
+  },
+  {
+    id: 'task-test-2',
+    name: 'Integration Testing',
+    description: 'Perform integration testing between frontend and backend',
+    startDate: new Date(2025, 1, 10),
+    endDate: new Date(2025, 1, 25),
+    progress: 0,
+    assigneeId: 'user-8',
+    assigneeName: 'Henry Clark',
+    priority: 'high',
+    status: 'todo',
+    dependencies: ['task-test-1'],
+  },
+  {
+    id: 'task-test-3',
+    name: 'User Acceptance Testing',
+    description: 'Conduct user acceptance testing with stakeholders',
+    startDate: new Date(2025, 1, 20),
+    endDate: new Date(2025, 2, 5), // March 5, 2025
+    progress: 0,
+    assigneeId: 'user-9',
+    assigneeName: 'Ivy Taylor',
+    priority: 'medium',
+    status: 'todo',
+    dependencies: ['task-test-2'],
+  }
+];
+
+// Sample milestones for Testing Phase
+const testingMilestones: PhaseMilestone[] = [
+  {
+    id: 'milestone-test-1',
+    name: 'All Tests Passing',
+    description: 'All unit and integration tests are passing',
+    dueDate: new Date(2025, 1, 25),
+    isCompleted: false,
+    criticalPath: true,
+  },
+  {
+    id: 'milestone-test-2',
+    name: 'UAT Sign-off',
+    description: 'User acceptance testing completed and signed off',
+    dueDate: new Date(2025, 2, 5),
+    isCompleted: false,
+    criticalPath: true,
+  }
+];
+
+// Sample tasks for Deployment Phase
+const deploymentTasks: PhaseTask[] = [
+  {
+    id: 'task-deploy-1',
+    name: 'Production Environment Setup',
+    description: 'Configure and set up production environment',
+    startDate: new Date(2025, 2, 6), // March 6, 2025
+    endDate: new Date(2025, 2, 12),
+    progress: 0,
+    assigneeId: 'user-10',
+    assigneeName: 'Jack Anderson',
+    priority: 'high',
+    status: 'todo',
+    dependencies: ['task-test-3'],
+  },
+  {
+    id: 'task-deploy-2',
+    name: 'Application Deployment',
+    description: 'Deploy application to production environment',
+    startDate: new Date(2025, 2, 13),
+    endDate: new Date(2025, 2, 15),
+    progress: 0,
+    assigneeId: 'user-11',
+    assigneeName: 'Kelly White',
+    priority: 'high',
+    status: 'todo',
+    dependencies: ['task-deploy-1'],
+  },
+  {
+    id: 'task-deploy-3',
+    name: 'Post-Deployment Monitoring',
+    description: 'Monitor application performance post-deployment',
+    startDate: new Date(2025, 2, 16),
+    endDate: new Date(2025, 2, 20),
+    progress: 0,
+    assigneeId: 'user-12',
+    assigneeName: 'Liam Garcia',
+    priority: 'medium',
+    status: 'todo',
+    dependencies: ['task-deploy-2'],
+  }
+];
+
+// Sample milestones for Deployment Phase
+const deploymentMilestones: PhaseMilestone[] = [
+  {
+    id: 'milestone-deploy-1',
+    name: 'Production Go-Live',
+    description: 'Application is live in production environment',
+    dueDate: new Date(2025, 2, 15),
+    isCompleted: false,
+    criticalPath: true,
+  },
+  {
+    id: 'milestone-deploy-2',
+    name: 'Project Handover',
+    description: 'Project handed over to maintenance team',
+    dueDate: new Date(2025, 2, 20),
+    isCompleted: false,
+    criticalPath: false,
+  }
+];
+
+// Sample project phases
+const samplePhases: ProjectPhase[] = [
+  {
+    id: 'phase-planning',
+    name: 'Planning & Analysis',
+    description: 'Initial project planning, requirements gathering, and technical analysis',
+    startDate: new Date(2024, 11, 1),
+    endDate: new Date(2024, 11, 15),
+    progress: 75,
+    color: '#1890ff',
+    status: 'in-progress',
+    tasks: planningTasks,
+    milestones: planningMilestones,
+  },
+  {
+    id: 'phase-development',
+    name: 'Development',
+    description: 'Core development of frontend, backend, and database components',
+    startDate: new Date(2024, 11, 16),
+    endDate: new Date(2025, 0, 31),
+    progress: 40,
+    color: '#52c41a',
+    status: 'in-progress',
+    tasks: developmentTasks,
+    milestones: developmentMilestones,
+  },
+  {
+    id: 'phase-testing',
+    name: 'Testing & QA',
+    description: 'Comprehensive testing including unit, integration, and user acceptance testing',
+    startDate: new Date(2025, 1, 1),
+    endDate: new Date(2025, 2, 5),
+    progress: 0,
+    color: '#faad14',
+    status: 'not-started',
+    tasks: testingTasks,
+    milestones: testingMilestones,
+  },
+  {
+    id: 'phase-deployment',
+    name: 'Deployment & Launch',
+    description: 'Production deployment and project launch activities',
+    startDate: new Date(2025, 2, 6),
+    endDate: new Date(2025, 2, 20),
+    progress: 0,
+    color: '#722ed1',
+    status: 'not-started',
+    tasks: deploymentTasks,
+    milestones: deploymentMilestones,
+  }
+];
+
+// Sample project roadmap
+export const sampleProjectRoadmap: ProjectRoadmap = {
+  id: 'roadmap-sample-project',
+  projectId: 'project-web-platform',
+  name: 'Web Platform Development Roadmap',
+  description: 'Comprehensive roadmap for developing a new web-based platform with modern technologies and agile methodologies',
+  startDate: new Date(2024, 11, 1),
+  endDate: new Date(2025, 2, 20),
+  phases: samplePhases,
+  createdAt: new Date(2024, 10, 15),
+  updatedAt: new Date(2024, 11, 1),
+};
+
+export default sampleProjectRoadmap;
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/projects/project-member-invite-drawer/project-member-invite-drawer.tsx b/worklenz-frontend/src/components/projects/project-member-invite-drawer/project-member-invite-drawer.tsx
index 92f05b50..00c01d93 100644
--- a/worklenz-frontend/src/components/projects/project-member-invite-drawer/project-member-invite-drawer.tsx
+++ b/worklenz-frontend/src/components/projects/project-member-invite-drawer/project-member-invite-drawer.tsx
@@ -1,4 +1,4 @@
-import { Drawer, Flex, Form, Select, Typography, List, Button } from 'antd/es';
+import { Drawer, Flex, Form, Select, Typography, List, Button, Modal, Divider } from 'antd/es';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
 
@@ -21,7 +21,7 @@ import { teamMembersApiService } from '@/api/team-members/teamMembers.api.servic
 
 const ProjectMemberDrawer = () => {
   const { t } = useTranslation('project-view/project-member-drawer');
-  const { isDrawerOpen, currentMembersList, isLoading } = useAppSelector(
+  const { isDrawerOpen, currentMembersList, isLoading, isFromAssigner } = useAppSelector(
     state => state.projectMemberReducer
   );
   const { projectId } = useAppSelector(state => state.projectReducer);
@@ -175,8 +175,9 @@ const ProjectMemberDrawer = () => {
   );
 
   const renderNotFoundContent = () => (
-    <Flex>
+    <Flex style={{ display: 'block'}}>
       <Button
+        className='mb-2'
         block
         type="primary"
         onClick={sendInviteToProject}
@@ -188,60 +189,74 @@ const ProjectMemberDrawer = () => {
           {validateEmail(searchTerm) ? t('inviteAsAMember') : t('inviteNewMemberByEmail')}
         </span>
       </Button>
+      {/* {isFromAssigner && <Flex>
+          <input className='mr-2' type="checkbox" checked={true} name={t('alsoInviteToProject')} id="AlsoInviteToProject" />
+          <label htmlFor={t('alsoInviteToProject')}>{t('alsoInviteToProject')}</label>
+        </Flex>} */}
     </Flex>
   );
 
   return (
-    <Drawer
-      title={
-        <Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>{t('title')}</Typography.Text>
-      }
-      open={isDrawerOpen}
-      onClose={() => dispatch(toggleProjectMemberDrawer())}
-      afterOpenChange={handleOpenChange}
-    >
-      <Form form={form} layout="vertical" onFinish={handleSelectChange}>
-        <Form.Item name="memberName" label={t('searchLabel')}>
-          <Select
-            loading={teamMembersLoading}
-            placeholder={t('searchPlaceholder')}
-            showSearch
-            onSearch={handleSearch}
-            onChange={handleSelectChange}
-            onKeyDown={handleKeyDown}
-            options={members?.data?.map(member => ({
-              key: member.id,
-              value: member.id,
-              name: member.name,
-              label: renderMemberOption(member),
-            }))}
-            filterOption={false}
-            notFoundContent={renderNotFoundContent()}
-            optionLabelProp="name"
+      <Modal
+        title={
+          <Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>{isFromAssigner ? t('inviteMember') : t('title')}</Typography.Text>
+        }
+        open={isDrawerOpen}
+        onCancel={() => dispatch(toggleProjectMemberDrawer())}
+        afterOpenChange={handleOpenChange}
+        footer={
+          <>
+          {/* {!isFromAssigner && <Button
+            style={{ width: 140, fontSize: 12 }}
+            block
+            icon={<LinkOutlined />}
+            disabled
+          >
+            {t('copyProjectLink')}
+          </Button>} */}
+          </>
+        }
+      >
+        <Form form={form} layout="vertical" onFinish={handleSelectChange}>
+          <Form.Item name="memberName" label={t('searchLabel')}>
+            <Select
+              loading={teamMembersLoading}
+              placeholder={t('searchPlaceholder')}
+              showSearch
+              onSearch={handleSearch}
+              onChange={handleSelectChange}
+              onKeyDown={handleKeyDown}
+              options={members?.data?.map(member => ({
+                key: member.id,
+                value: member.id,
+                name: member.name,
+                label: renderMemberOption(member),
+              }))}
+              filterOption={false}
+              notFoundContent={renderNotFoundContent()}
+              optionLabelProp="name"
+            />
+          </Form.Item>
+        </Form>
+        {!isFromAssigner && <><div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>{t('members')}</div>
+        <div style={{ maxHeight: 360, minHeight: 120, overflowY: 'auto', marginBottom: 16 }}>
+          <List
+            loading={isLoading}
+            bordered
+            size="small"
+            itemLayout="horizontal"
+            dataSource={currentMembersList}
+            renderItem={member => (
+              <List.Item key={member.id} >
+                <Flex gap={4} align="center" justify="space-between" style={{ width: '100%' }}>
+                  {renderMemberOption(member)}
+                </Flex>
+              </List.Item>
+            )}
           />
-        </Form.Item>
-      </Form>
-
-      <List
-        loading={isLoading}
-        bordered
-        size="small"
-        itemLayout="horizontal"
-        dataSource={currentMembersList}
-        renderItem={member => (
-          <List.Item key={member.id}>
-            <Flex gap={4} align="center" justify="space-between" style={{ width: '100%' }}>
-              {renderMemberOption(member)}
-              <Button
-                onClick={() => handleDeleteMember(member.id)}
-                size="small"
-                icon={<DeleteOutlined />}
-              />
-            </Flex>
-          </List.Item>
-        )}
-      />
-    </Drawer>
+        </div></>
+        }
+      </Modal>
   );
 };
 
diff --git a/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts b/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts
index 3ccac5d2..9bbf5694 100644
--- a/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts
+++ b/worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts
@@ -575,7 +575,6 @@ const enhancedKanbanSlice = createSlice({
       action: PayloadAction<ITaskListPriorityChangeResponse>
     ) => {
       const { id, priority_id, color_code, color_code_dark } = action.payload;
-
       // Find the task in any group
       const taskInfo = findTaskInAllGroups(state.taskGroups, id);
       if (!taskInfo || !priority_id) return;
@@ -603,7 +602,6 @@ const enhancedKanbanSlice = createSlice({
       // Update cache
       state.taskCache[id] = task;
     },
-
     // Enhanced Kanban assignee update (for use in task drawer dropdown)
     updateEnhancedKanbanTaskAssignees: (
       state,
diff --git a/worklenz-frontend/src/features/projects/singleProject/members/projectMembersSlice.ts b/worklenz-frontend/src/features/projects/singleProject/members/projectMembersSlice.ts
index 26a4ab12..fb6ed6b4 100644
--- a/worklenz-frontend/src/features/projects/singleProject/members/projectMembersSlice.ts
+++ b/worklenz-frontend/src/features/projects/singleProject/members/projectMembersSlice.ts
@@ -8,6 +8,7 @@ interface ProjectMembersState {
   currentMembersList: IMentionMemberViewModel[];
   isDrawerOpen: boolean;
   isLoading: boolean;
+  isFromAssigner: boolean;
   error: string | null;
 }
 
@@ -16,6 +17,7 @@ const initialState: ProjectMembersState = {
   currentMembersList: [],
   isDrawerOpen: false,
   isLoading: false,
+  isFromAssigner: false,
   error: null,
 };
 
@@ -89,6 +91,12 @@ const projectMembersSlice = createSlice({
   reducers: {
     toggleProjectMemberDrawer: state => {
       state.isDrawerOpen = !state.isDrawerOpen;
+      if (state.isDrawerOpen === false) {
+        state.isFromAssigner = false;
+      }
+    },
+    setIsFromAssigner: (state, action: PayloadAction<boolean>) => {
+      state.isFromAssigner = action.payload;
     },
   },
   extraReducers: builder => {
@@ -139,7 +147,7 @@ const projectMembersSlice = createSlice({
   },
 });
 
-export const { toggleProjectMemberDrawer } = projectMembersSlice.actions;
+export const { toggleProjectMemberDrawer, setIsFromAssigner } = projectMembersSlice.actions;
 export {
   getProjectMembers,
   getAllProjectMembers,
diff --git a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
index 0c70e38d..42001f8a 100644
--- a/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
+++ b/worklenz-frontend/src/hooks/useTaskSocketHandlers.ts
@@ -285,23 +285,7 @@ export const useTaskSocketHandlers = () => {
             );
           }
 
-          console.log('🔄 Status change group movement debug:', {
-            taskId: response.id,
-            newStatusValue,
-            currentGroupId: currentGroup?.id,
-            currentGroupValue: currentGroup?.groupValue,
-            currentGroupTitle: currentGroup?.title,
-            targetGroupId: targetGroup?.id,
-            targetGroupValue: targetGroup?.groupValue,
-            targetGroupTitle: targetGroup?.title,
-            allGroups: groups.map(g => ({ id: g.id, title: g.title, groupValue: g.groupValue }))
-          });
-
           if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
-            console.log('✅ Moving task between groups:', {
-              from: currentGroup.title,
-              to: targetGroup.title
-            });
             // Use the action to move task between groups
             dispatch(
               moveTaskBetweenGroups({
@@ -448,12 +432,6 @@ export const useTaskSocketHandlers = () => {
           }
 
           if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
-            console.log('🔄 Moving task between priority groups:', {
-              taskId: response.id,
-              from: currentGroup.title,
-              to: targetGroup.title,
-              newPriorityValue
-            });
             dispatch(
               moveTaskBetweenGroups({
                 taskId: response.id,
@@ -603,12 +581,6 @@ export const useTaskSocketHandlers = () => {
             }
 
             if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
-              console.log('🔄 Moving task between phase groups:', {
-                taskId,
-                from: currentGroup.title,
-                to: targetGroup.title,
-                newPhaseValue
-              });
               dispatch(
                 moveTaskBetweenGroups({
                   taskId: taskId,
@@ -926,10 +898,6 @@ export const useTaskSocketHandlers = () => {
   // Handler for TASK_ASSIGNEES_CHANGE (fallback event with limited data)
   const handleTaskAssigneesChange = useCallback((data: { assigneeIds: string[] }) => {
     if (!data || !data.assigneeIds) return;
-
-    // This event only provides assignee IDs, so we update what we can
-    // The full assignee data will come from QUICK_ASSIGNEES_UPDATE
-    // console.log('🔄 Task assignees change (limited data):', data);
   }, []);
 
   // Handler for timer start events
@@ -995,9 +963,6 @@ export const useTaskSocketHandlers = () => {
     try {
       if (!Array.isArray(data) || data.length === 0) return;
 
-      // DEBUG: Log the data received from the backend
-      console.log('[TASK_SORT_ORDER_CHANGE] Received data:', data);
-
       // Get canonical lists from Redux
       const state = store.getState();
       const priorityList = state.priorityReducer?.priorities || [];
diff --git a/worklenz-frontend/src/pages/GanttDemoPage.tsx b/worklenz-frontend/src/pages/GanttDemoPage.tsx
new file mode 100644
index 00000000..28cadf70
--- /dev/null
+++ b/worklenz-frontend/src/pages/GanttDemoPage.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { AdvancedGanttDemo } from '../components/advanced-gantt';
+
+const GanttDemoPage: React.FC = () => {
+  return <AdvancedGanttDemo />;
+};
+
+export default GanttDemoPage;
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/projects/ProjectGanttView.tsx b/worklenz-frontend/src/pages/projects/ProjectGanttView.tsx
new file mode 100644
index 00000000..0835c2f9
--- /dev/null
+++ b/worklenz-frontend/src/pages/projects/ProjectGanttView.tsx
@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { AdvancedGanttChart } from '../../components/advanced-gantt';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { GanttTask } from '../../types/advanced-gantt.types';
+
+const ProjectGanttView: React.FC = () => {
+  const { projectId } = useParams<{ projectId: string }>();
+  
+  // Get tasks from your Redux store (adjust based on your actual state structure)
+  const tasks = useAppSelector(state => state.tasksReducer?.tasks || []);
+  
+  // Transform your tasks to GanttTask format
+  const ganttTasks = useMemo((): GanttTask[] => {
+    return tasks.map(task => ({
+      id: task.id,
+      name: task.name,
+      startDate: task.start_date ? new Date(task.start_date) : new Date(),
+      endDate: task.end_date ? new Date(task.end_date) : new Date(),
+      progress: task.progress || 0,
+      type: 'task',
+      status: task.status || 'not-started',
+      priority: task.priority || 'medium',
+      assignee: task.assignee ? {
+        id: task.assignee.id,
+        name: task.assignee.name,
+        avatar: task.assignee.avatar,
+      } : undefined,
+      parent: task.parent_task_id,
+      level: task.level || 0,
+      // Map other fields as needed
+    }));
+  }, [tasks]);
+
+  const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
+    // Implement your task update logic here
+    console.log('Update task:', taskId, updates);
+    // Dispatch Redux action to update task
+  };
+
+  const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
+    // Implement your task move logic here
+    console.log('Move task:', taskId, newDates);
+    // Dispatch Redux action to update task dates
+  };
+
+  return (
+    <div className="project-gantt-view h-full">
+      <AdvancedGanttChart
+        tasks={ganttTasks}
+        onTaskUpdate={handleTaskUpdate}
+        onTaskMove={handleTaskMove}
+        enableDragDrop={true}
+        enableResize={true}
+        enableProgressEdit={true}
+        enableInlineEdit={true}
+        className="h-full"
+      />
+    </div>
+  );
+};
+
+export default ProjectGanttView;
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx b/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx
new file mode 100644
index 00000000..4bea53db
--- /dev/null
+++ b/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx
@@ -0,0 +1,583 @@
+import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { useAppSelector } from '@/hooks/useAppSelector';
+
+import TaskListFilters from '../taskList/task-list-filters/task-list-filters';
+import { Flex, Skeleton } from 'antd';
+import BoardSectionCardContainer from './board-section/board-section-container';
+import {
+  fetchBoardTaskGroups,
+  reorderTaskGroups,
+  moveTaskBetweenGroups,
+  IGroupBy,
+  updateTaskProgress,
+} from '@features/board/board-slice';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+  closestCenter,
+  DragOverlay,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  getFirstCollision,
+  pointerWithin,
+  rectIntersection,
+  UniqueIdentifier,
+} from '@dnd-kit/core';
+import BoardViewTaskCard from './board-section/board-task-card/board-view-task-card';
+import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
+import useTabSearchParam from '@/hooks/useTabSearchParam';
+import { useSocket } from '@/socket/socketContext';
+import { useAuthService } from '@/hooks/useAuth';
+import { SocketEvents } from '@/shared/socket-events';
+import alertService from '@/services/alerts/alertService';
+import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
+import { evt_project_board_visit, evt_project_task_list_drag_and_move } from '@/shared/worklenz-analytics-events';
+import { ITaskStatusCreateRequest } from '@/types/tasks/task-status-create-request';
+import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
+import logger from '@/utils/errorLogger';
+import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
+import { debounce } from 'lodash';
+import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
+import { updateTaskPriority as updateBoardTaskPriority } from '@/features/board/board-slice';
+
+interface DroppableContainer {
+  id: UniqueIdentifier;
+  data: {
+    current?: {
+      type?: string;
+    };
+  };
+}
+
+const ProjectViewBoard = () => {
+  const dispatch = useAppDispatch();
+  const { projectView } = useTabSearchParam();
+  const { socket } = useSocket();
+  const authService = useAuthService();
+  const currentSession = authService.getCurrentSession();
+  const { trackMixpanelEvent } = useMixpanelTracking();
+  const [currentTaskIndex, setCurrentTaskIndex] = useState(-1);
+  // Add local loading state to immediately show skeleton
+  const [isLoading, setIsLoading] = useState(true);
+
+  const { projectId } = useAppSelector(state => state.projectReducer);
+  const { taskGroups, groupBy, loadingGroups, search, archived } = useAppSelector(state => state.boardReducer);
+  const { statusCategories, loading: loadingStatusCategories } = useAppSelector(
+    state => state.taskStatusReducer
+  );
+  const [activeItem, setActiveItem] = useState<any>(null);
+
+  // Store the original source group ID when drag starts
+  const originalSourceGroupIdRef = useRef<string | null>(null);
+  const lastOverId = useRef<UniqueIdentifier | null>(null);
+  const recentlyMovedToNewContainer = useRef(false);
+  const [clonedItems, setClonedItems] = useState<any>(null);
+  const isDraggingRef = useRef(false);
+
+  // Update loading state based on all loading conditions
+  useEffect(() => {
+    setIsLoading(loadingGroups || loadingStatusCategories);
+  }, [loadingGroups, loadingStatusCategories]);
+
+  // Load data efficiently with async/await and Promise.all
+  useEffect(() => {
+    const loadData = async () => {
+      if (projectId && groupBy && projectView === 'kanban') {
+        const promises = [];
+
+        if (!loadingGroups) {
+          promises.push(dispatch(fetchBoardTaskGroups(projectId)));
+        }
+
+        if (!statusCategories.length) {
+          promises.push(dispatch(fetchStatusesCategories()));
+        }
+
+        // Wait for all data to load
+        await Promise.all(promises);
+      }
+    };
+
+    loadData();
+  }, [dispatch, projectId, groupBy, projectView, search, archived]);
+
+  // Create sensors with memoization to prevent unnecessary re-renders
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 10,
+        delay: 100,
+        tolerance: 5,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 5,
+      },
+    })
+  );
+
+  const collisionDetectionStrategy = useCallback(
+    (args: {
+      active: { id: UniqueIdentifier; data: { current?: { type?: string } } };
+      droppableContainers: DroppableContainer[];
+    }) => {
+      if (activeItem?.type === 'section') {
+        return closestCenter({
+          ...args,
+          droppableContainers: args.droppableContainers.filter(
+            (container: DroppableContainer) => container.data.current?.type === 'section'
+          ),
+        });
+      }
+
+      // Start by finding any intersecting droppable
+      const pointerIntersections = pointerWithin(args);
+      const intersections =
+        pointerIntersections.length > 0
+          ? pointerIntersections
+          : rectIntersection(args);
+      let overId = getFirstCollision(intersections, 'id');
+
+      if (overId !== null) {
+        const overContainer = args.droppableContainers.find(
+          (container: DroppableContainer) => container.id === overId
+        );
+
+        if (overContainer?.data.current?.type === 'section') {
+          const containerItems = taskGroups.find(
+            (group) => group.id === overId
+          )?.tasks || [];
+
+          if (containerItems.length > 0) {
+            overId = closestCenter({
+              ...args,
+              droppableContainers: args.droppableContainers.filter(
+                (container: DroppableContainer) =>
+                  container.id !== overId &&
+                  container.data.current?.type === 'task'
+              ),
+            })[0]?.id;
+          }
+        }
+
+        lastOverId.current = overId;
+        return [{ id: overId }];
+      }
+
+      if (recentlyMovedToNewContainer.current) {
+        lastOverId.current = activeItem?.id;
+      }
+
+      return lastOverId.current ? [{ id: lastOverId.current }] : [];
+    },
+    [activeItem, taskGroups]
+  );
+
+  const handleTaskProgress = (data: {
+    id: string;
+    status: string;
+    complete_ratio: number;
+    completed_count: number;
+    total_tasks_count: number;
+    parent_task: string;
+  }) => {
+    dispatch(updateTaskProgress(data));
+  };
+
+  // Debounced move task function to prevent rapid updates
+  const debouncedMoveTask = useCallback(
+    debounce((taskId: string, sourceGroupId: string, targetGroupId: string, targetIndex: number) => {
+      dispatch(
+        moveTaskBetweenGroups({
+          taskId,
+          sourceGroupId,
+          targetGroupId,
+          targetIndex,
+        })
+      );
+    }, 100),
+    [dispatch]
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    isDraggingRef.current = true;
+    setActiveItem(active.data.current);
+    setCurrentTaskIndex(active.data.current?.sortable.index);
+    if (active.data.current?.type === 'task') {
+      originalSourceGroupIdRef.current = active.data.current.sectionId;
+    }
+    setClonedItems(taskGroups);
+  };
+
+  const findGroupForId = (id: string) => {
+    // If id is a sectionId
+    if (taskGroups.some(group => group.id === id)) return id;
+    // If id is a taskId, find the group containing it
+    const group = taskGroups.find(g => g.tasks.some(t => t.id === id));
+    return group?.id;
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    try {
+      if (!isDraggingRef.current) return;
+
+      const { active, over } = event;
+      if (!over) return;
+
+      // Get the ids
+      const activeId = active.id;
+      const overId = over.id;
+
+      // Find the group (section) for each
+      const activeGroupId = findGroupForId(activeId as string);
+      const overGroupId = findGroupForId(overId as string);
+
+      // Only move if both groups exist and are different, and the active is a task
+      if (
+        activeGroupId &&
+        overGroupId &&
+        active.data.current?.type === 'task'
+      ) {
+        // Find the target index in the over group
+        const targetGroup = taskGroups.find(g => g.id === overGroupId);
+        let targetIndex = 0;
+        if (targetGroup) {
+          // If over is a task, insert before it; if over is a section, append to end
+          if (over.data.current?.type === 'task') {
+            targetIndex = targetGroup.tasks.findIndex(t => t.id === overId);
+            if (targetIndex === -1) targetIndex = targetGroup.tasks.length;
+          } else {
+            targetIndex = targetGroup.tasks.length;
+          }
+        }
+        // Use debounced move task to prevent rapid updates
+        debouncedMoveTask(
+          activeId as string,
+          activeGroupId,
+          overGroupId,
+          targetIndex
+        );
+      }
+    } catch (error) {
+      console.error('handleDragOver error:', error);
+    }
+  };
+
+  const handlePriorityChange = (taskId: string, priorityId: string) => {
+    if (!taskId || !priorityId || !socket) return;
+
+    const payload = {
+      task_id: taskId,
+      priority_id: priorityId,
+      team_id: currentSession?.team_id,
+    };
+
+    socket.emit(SocketEvents.TASK_PRIORITY_CHANGE.toString(), JSON.stringify(payload));
+    socket.once(SocketEvents.TASK_PRIORITY_CHANGE.toString(), (data: ITaskListPriorityChangeResponse) => {
+      dispatch(updateBoardTaskPriority(data));
+    });
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    isDraggingRef.current = false;
+    const { active, over } = event;
+
+    if (!over || !projectId) {
+      setActiveItem(null);
+      originalSourceGroupIdRef.current = null;
+      setClonedItems(null);
+      return;
+    }
+
+    const isActiveTask = active.data.current?.type === 'task';
+    const isActiveSection = active.data.current?.type === 'section';
+
+    // Handle task dragging between columns
+    if (isActiveTask) {
+      const task = active.data.current?.task;
+
+      // Use the original source group ID from ref instead of the potentially modified one
+      const sourceGroupId = originalSourceGroupIdRef.current || active.data.current?.sectionId;
+
+      // Fix: Ensure we correctly identify the target group ID
+      let targetGroupId;
+      if (over.data.current?.type === 'task') {
+        // If dropping on a task, get its section ID
+        targetGroupId = over.data.current?.sectionId;
+      } else if (over.data.current?.type === 'section') {
+        // If dropping directly on a section
+        targetGroupId = over.id;
+      } else {
+        // Fallback to the over ID if type is not specified
+        targetGroupId = over.id;
+      }
+
+      // Find source and target groups
+      const sourceGroup = taskGroups.find(group => group.id === sourceGroupId);
+      const targetGroup = taskGroups.find(group => group.id === targetGroupId);
+
+      if (!sourceGroup || !targetGroup || !task) {
+        logger.error('Could not find source or target group, or task is undefined');
+        setActiveItem(null);
+        originalSourceGroupIdRef.current = null; // Reset the ref
+        return;
+      }
+
+      if (targetGroupId !== sourceGroupId) {
+        const canContinue = await checkTaskDependencyStatus(task.id, targetGroupId);
+        if (!canContinue) {
+          alertService.error(
+            'Task is not completed',
+            'Please complete the task dependencies before proceeding'
+          );
+          dispatch(
+            moveTaskBetweenGroups({
+              taskId: task.id,
+              sourceGroupId: targetGroupId, // Current group (where it was moved optimistically)
+              targetGroupId: sourceGroupId, // Move it back to the original source group
+              targetIndex: currentTaskIndex !== -1 ? currentTaskIndex : 0, // Original position or append to end
+            })
+          );
+
+          setActiveItem(null);
+          originalSourceGroupIdRef.current = null;
+          return;
+        }
+      }
+
+      // Find indices
+      let fromIndex = sourceGroup.tasks.findIndex(t => t.id === task.id);
+      // Handle case where task is not found in source group (might have been moved already in UI)
+      if (fromIndex === -1) {
+        logger.info('Task not found in source group. Using task sort_order from task object.');
+
+        // Use the sort_order from the task object itself
+        const fromSortOrder = task.sort_order;
+
+        // Calculate target index and position
+        let toIndex = -1;
+        if (over.data.current?.type === 'task') {
+          const overTaskId = over.data.current?.task.id;
+          toIndex = targetGroup.tasks.findIndex(t => t.id === overTaskId);
+        } else {
+          // If dropping on a section, append to the end
+          toIndex = targetGroup.tasks.length;
+        }
+
+        // Calculate toPos similar to Angular implementation
+        const toPos = targetGroup.tasks[toIndex]?.sort_order ||
+          targetGroup.tasks[targetGroup.tasks.length - 1]?.sort_order ||
+          -1;
+
+        // Prepare socket event payload
+        const body = {
+          project_id: projectId,
+          from_index: fromSortOrder,
+          to_index: toPos,
+          to_last_index: !toPos,
+          from_group: sourceGroupId,
+          to_group: targetGroupId,
+          group_by: groupBy || 'status',
+          task,
+          team_id: currentSession?.team_id
+        };
+
+        // Emit socket event
+        if (socket) {
+          socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), body);
+
+          // Set up listener for task progress update
+          socket.once(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), () => {
+            if (task.is_sub_task) {
+              socket.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.parent_task_id);
+            } else {
+              socket.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
+            }
+          });
+
+          // Handle priority change if groupBy is priority
+          if (groupBy === IGroupBy.PRIORITY) {
+            handlePriorityChange(task.id, targetGroupId);
+          }
+        }
+
+        // Track analytics event
+        trackMixpanelEvent(evt_project_task_list_drag_and_move);
+
+        setActiveItem(null);
+        originalSourceGroupIdRef.current = null; // Reset the ref
+        return;
+      }
+
+      // Calculate target index and position
+      let toIndex = -1;
+      if (over.data.current?.type === 'task') {
+        const overTaskId = over.data.current?.task.id;
+        toIndex = targetGroup.tasks.findIndex(t => t.id === overTaskId);
+      } else {
+        // If dropping on a section, append to the end
+        toIndex = targetGroup.tasks.length;
+      }
+
+      // Calculate toPos similar to Angular implementation
+      const toPos = targetGroup.tasks[toIndex]?.sort_order ||
+        targetGroup.tasks[targetGroup.tasks.length - 1]?.sort_order ||
+        -1;
+      // Prepare socket event payload
+      const body = {
+        project_id: projectId,
+        from_index: sourceGroup.tasks[fromIndex].sort_order,
+        to_index: toPos,
+        to_last_index: !toPos,
+        from_group: sourceGroupId, // Use the direct IDs instead of group objects
+        to_group: targetGroupId,   // Use the direct IDs instead of group objects
+        group_by: groupBy || 'status', // Use the current groupBy value
+        task,
+        team_id: currentSession?.team_id
+      };
+      // Emit socket event
+      if (socket) {
+        socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), body);
+
+        // Set up listener for task progress update
+        socket.once(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), () => {
+          if (task.is_sub_task) {
+            socket.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.parent_task_id);
+          } else {
+            socket.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.id);
+          }
+        });
+      }
+      // Track analytics event
+      trackMixpanelEvent(evt_project_task_list_drag_and_move);
+    }
+    // Handle column reordering
+    else if (isActiveSection) {
+      // Don't allow reordering if groupBy is phases
+      if (groupBy === IGroupBy.PHASE) {
+        setActiveItem(null);
+        originalSourceGroupIdRef.current = null;
+        return;
+      }
+
+      const sectionId = active.id;
+      const fromIndex = taskGroups.findIndex(group => group.id === sectionId);
+      const toIndex = taskGroups.findIndex(group => group.id === over.id);
+
+      if (fromIndex !== -1 && toIndex !== -1) {
+        // Create a new array with the reordered groups
+        const reorderedGroups = [...taskGroups];
+        const [movedGroup] = reorderedGroups.splice(fromIndex, 1);
+        reorderedGroups.splice(toIndex, 0, movedGroup);
+
+        // Dispatch action to reorder columns with the new array
+        dispatch(reorderTaskGroups(reorderedGroups));
+
+        // Prepare column order for API
+        const columnOrder = reorderedGroups.map(group => group.id);
+
+        // Call API to update status order
+        try {
+          // Use the correct API endpoint based on the Angular code
+          const requestBody: ITaskStatusCreateRequest = {
+            status_order: columnOrder
+          };
+
+          const response = await statusApiService.updateStatusOrder(requestBody, projectId);
+          if (!response.done) {
+            const revertedGroups = [...reorderedGroups];
+            const [movedBackGroup] = revertedGroups.splice(toIndex, 1);
+            revertedGroups.splice(fromIndex, 0, movedBackGroup);
+            dispatch(reorderTaskGroups(revertedGroups));
+            alertService.error('Failed to update column order', 'Please try again');
+          }
+        } catch (error) {
+          // Revert the change if API call fails
+          const revertedGroups = [...reorderedGroups];
+          const [movedBackGroup] = revertedGroups.splice(toIndex, 1);
+          revertedGroups.splice(fromIndex, 0, movedBackGroup);
+          dispatch(reorderTaskGroups(revertedGroups));
+          alertService.error('Failed to update column order', 'Please try again');
+        }
+      }
+    }
+
+    setActiveItem(null);
+    originalSourceGroupIdRef.current = null; // Reset the ref
+  };
+
+  const handleDragCancel = () => {
+    isDraggingRef.current = false;
+    if (clonedItems) {
+      dispatch(reorderTaskGroups(clonedItems));
+    }
+    setActiveItem(null);
+    setClonedItems(null);
+    originalSourceGroupIdRef.current = null;
+  };
+
+  // Reset the recently moved flag after animation frame
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      recentlyMovedToNewContainer.current = false;
+    });
+  }, [taskGroups]);
+
+  useEffect(() => {
+    if (socket) {
+      socket.on(SocketEvents.GET_TASK_PROGRESS.toString(), handleTaskProgress);
+    }
+
+    return () => {
+      socket?.off(SocketEvents.GET_TASK_PROGRESS.toString(), handleTaskProgress);
+    };
+  }, [socket]);
+
+  // Track analytics event on component mount
+  useEffect(() => {
+    trackMixpanelEvent(evt_project_board_visit);
+  }, []);
+
+  // Cleanup debounced function on unmount
+  useEffect(() => {
+    return () => {
+      debouncedMoveTask.cancel();
+    };
+  }, [debouncedMoveTask]);
+
+  return (
+    <Flex vertical gap={16}>
+      <TaskListFilters position={'board'} />
+      <Skeleton active loading={isLoading} className='mt-4 p-4'>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={collisionDetectionStrategy}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          onDragCancel={handleDragCancel}
+        >
+          <BoardSectionCardContainer
+            datasource={taskGroups}
+            group={groupBy as 'status' | 'priority' | 'phases'}
+          />
+          <DragOverlay>
+            {activeItem?.type === 'task' && (
+              <BoardViewTaskCard task={activeItem.task} sectionId={activeItem.sectionId} />
+            )}
+          </DragOverlay>
+        </DndContext>
+      </Skeleton>
+    </Flex>
+  );
+};
+
+export default ProjectViewBoard;
\ No newline at end of file
diff --git a/worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx b/worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx
index e66ec582..2208ab24 100644
--- a/worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx
@@ -11,6 +11,7 @@ import {
   TableProps,
   Tooltip,
   Typography,
+  Input
 } from '@/shared/antd-imports';
 
 // Icons
@@ -70,26 +71,29 @@ const ProjectViewMembers = () => {
     field: 'name',
     order: 'ascend',
     total: 0,
-    pageSizeOptions: ['5', '10', '15', '20', '50', '100'],
+    pageSizeOptions: ['10', '20', '50', '100'],
     size: 'small',
   });
+  const [searchQuery, setSearchQuery] = useState(''); // <-- Add search state
 
   // API Functions
-  const getProjectMembers = async () => {
+  const getProjectMembers = async (search: string = searchQuery) => {
     if (!projectId) return;
 
     setIsLoading(true);
     try {
+      const offset = (pagination.current - 1) * pagination.pageSize;
       const res = await projectsApiService.getMembers(
         projectId,
-        pagination.current,
-        pagination.pageSize,
+        pagination.current, // index
+        pagination.pageSize, // size             // offset
         pagination.field,
         pagination.order,
-        null
+        search
       );
       if (res.done) {
         setMembers(res.body);
+        setPagination(p => ({ ...p, total: res.body.total ?? 0 })); // update total from backend, default to 0
       }
     } catch (error) {
       logger.error('Error fetching members:', error);
@@ -123,16 +127,14 @@ const ProjectViewMembers = () => {
     return Math.floor((completed / total) * 100);
   };
 
-  const handleTableChange = (pagination: any, filters: any, sorter: any) => {
-    setPagination({
-      current: pagination.current,
-      pageSize: pagination.pageSize,
-      field: sorter.field || pagination.field,
-      order: sorter.order || pagination.order,
-      total: pagination.total,
-      pageSizeOptions: pagination.pageSizeOptions,
-      size: pagination.size,
-    });
+  const handleTableChange = (tablePagination: any, filters: any, sorter: any) => {
+    setPagination(prev => ({
+      ...prev,
+      current: tablePagination.current,
+      pageSize: tablePagination.pageSize,
+      field: sorter.field || prev.field,
+      order: sorter.order || prev.order,
+    }));
   };
 
   // Effects
@@ -145,6 +147,7 @@ const ProjectViewMembers = () => {
     pagination.pageSize,
     pagination.field,
     pagination.order,
+    // searchQuery, // <-- Do NOT include here, search is triggered manually
   ]);
 
   useEffect(() => {
@@ -269,18 +272,33 @@ const ProjectViewMembers = () => {
     <Card
       style={{ width: '100%' }}
       title={
-        <Flex justify="space-between">
+        <Flex justify="space-between" align="center">
           <Typography.Text style={{ fontSize: 16, fontWeight: 500 }}>
             {members?.total} {members?.total !== 1 ? t('membersCountPlural') : t('memberCount')}
           </Typography.Text>
 
-          <Tooltip title={t('refreshButtonTooltip')}>
-            <Button
-              shape="circle"
-              icon={<SyncOutlined />}
-              onClick={() => void getProjectMembers()}
+          <Flex gap={8} align="center">
+            <Input.Search
+              allowClear
+              placeholder={t('searchPlaceholder')}
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+              onSearch={value => {
+                setPagination(p => ({ ...p, current: 1 })); // Reset to first page
+                void getProjectMembers(value);
+              }}
+              style={{ width: 220 }}
+              enterButton
+              size="middle"
             />
-          </Tooltip>
+            <Tooltip title={t('refreshButtonTooltip')}>
+              <Button
+                shape="circle"
+                icon={<SyncOutlined />}
+                onClick={() => void getProjectMembers()}
+              />
+            </Tooltip>
+          </Flex>
         </Flex>
       }
     >
@@ -299,8 +317,12 @@ const ProjectViewMembers = () => {
           columns={columns}
           rowKey={record => record.id}
           pagination={{
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
             showSizeChanger: true,
-            defaultPageSize: 20,
+            pageSizeOptions: pagination.pageSizeOptions,
+            size: pagination.size,
           }}
           onChange={handleTableChange}
           onRow={record => ({
diff --git a/worklenz-frontend/src/types/advanced-gantt.types.ts b/worklenz-frontend/src/types/advanced-gantt.types.ts
new file mode 100644
index 00000000..e080df40
--- /dev/null
+++ b/worklenz-frontend/src/types/advanced-gantt.types.ts
@@ -0,0 +1,307 @@
+import { ReactNode } from 'react';
+
+// Core Task Interface
+export interface GanttTask {
+  id: string;
+  name: string;
+  startDate: Date;
+  endDate: Date;
+  progress: number;
+  duration?: number; // in days
+  parent?: string;
+  type: 'task' | 'milestone' | 'project';
+  status: 'not-started' | 'in-progress' | 'completed' | 'on-hold' | 'overdue';
+  priority: 'low' | 'medium' | 'high' | 'critical';
+  assignee?: {
+    id: string;
+    name: string;
+    avatar?: string;
+  };
+  dependencies?: string[];
+  description?: string;
+  tags?: string[];
+  color?: string;
+  isCollapsed?: boolean;
+  level?: number; // for hierarchical display
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+}
+
+// Column Configuration
+export interface ColumnConfig {
+  field: keyof GanttTask | string;
+  title: string;
+  width: number;
+  minWidth?: number;
+  maxWidth?: number;
+  resizable: boolean;
+  sortable: boolean;
+  fixed: boolean;
+  align?: 'left' | 'center' | 'right';
+  renderer?: (value: any, task: GanttTask) => ReactNode;
+  editor?: 'text' | 'date' | 'select' | 'number' | 'progress';
+  editorOptions?: any;
+}
+
+// Timeline Configuration
+export interface TimelineConfig {
+  topTier: {
+    unit: 'year' | 'month' | 'week' | 'day';
+    format: string;
+    height?: number;
+  };
+  bottomTier: {
+    unit: 'month' | 'week' | 'day' | 'hour';
+    format: string;
+    height?: number;
+  };
+  showWeekends: boolean;
+  showNonWorkingDays: boolean;
+  holidays: Holiday[];
+  workingDays: number[]; // 0-6, Sunday-Saturday
+  workingHours: {
+    start: number; // 0-23
+    end: number; // 0-23
+  };
+  minDate?: Date;
+  maxDate?: Date;
+  dayWidth: number; // pixels per day
+}
+
+// Holiday Interface
+export interface Holiday {
+  date: Date;
+  name: string;
+  type: 'national' | 'company' | 'religious' | 'custom';
+  recurring?: boolean;
+  color?: string;
+}
+
+// Virtual Scrolling Configuration
+export interface VirtualScrollConfig {
+  enableRowVirtualization: boolean;
+  enableTimelineVirtualization: boolean;
+  bufferSize: number;
+  itemHeight: number;
+  overscan?: number;
+}
+
+// Drag and Drop State
+export interface DragState {
+  isDragging: boolean;
+  dragType: 'move' | 'resize-start' | 'resize-end' | 'progress' | 'link';
+  taskId: string;
+  initialPosition: { x: number; y: number };
+  currentPosition?: { x: number; y: number };
+  initialDates: { start: Date; end: Date };
+  initialProgress?: number;
+  snapToGrid?: boolean;
+  constraints?: {
+    minDate?: Date;
+    maxDate?: Date;
+    minDuration?: number;
+    maxDuration?: number;
+  };
+}
+
+// Zoom Levels
+export interface ZoomLevel {
+  name: string;
+  dayWidth: number;
+  topTier: TimelineConfig['topTier'];
+  bottomTier: TimelineConfig['bottomTier'];
+  scale: number;
+}
+
+// Selection State
+export interface SelectionState {
+  selectedTasks: string[];
+  selectedRows: number[];
+  selectionRange?: {
+    start: { row: number; col: number };
+    end: { row: number; col: number };
+  };
+  focusedTask?: string;
+}
+
+// Gantt View State
+export interface GanttViewState {
+  zoomLevel: number;
+  scrollPosition: { x: number; y: number };
+  viewportSize: { width: number; height: number };
+  splitterPosition: number; // percentage for grid/timeline split
+  showCriticalPath: boolean;
+  showBaseline: boolean;
+  showProgress: boolean;
+  showDependencies: boolean;
+  autoSchedule: boolean;
+  readOnly: boolean;
+}
+
+// Performance Metrics
+export interface PerformanceMetrics {
+  renderTime: number;
+  taskCount: number;
+  visibleTaskCount: number;
+  memoryUsage?: number;
+  fps?: number;
+}
+
+// Event Handlers
+export type TaskEventHandler<T = void> = (task: GanttTask, event: MouseEvent | TouchEvent) => T;
+export type DragEventHandler = (taskId: string, newDates: { start: Date; end: Date }) => void;
+export type ResizeEventHandler = (taskId: string, newDates: { start: Date; end: Date }) => void;
+export type ProgressEventHandler = (taskId: string, progress: number) => void;
+export type SelectionEventHandler = (selectedTasks: string[]) => void;
+export type ColumnResizeHandler = (columnField: string, newWidth: number) => void;
+
+// Gantt Actions (for useReducer)
+export type GanttAction =
+  | { type: 'SET_TASKS'; payload: GanttTask[] }
+  | { type: 'UPDATE_TASK'; payload: { id: string; updates: Partial<GanttTask> } }
+  | { type: 'ADD_TASK'; payload: GanttTask }
+  | { type: 'DELETE_TASK'; payload: string }
+  | { type: 'SET_SELECTION'; payload: string[] }
+  | { type: 'SET_DRAG_STATE'; payload: DragState | null }
+  | { type: 'SET_ZOOM_LEVEL'; payload: number }
+  | { type: 'SET_SCROLL_POSITION'; payload: { x: number; y: number } }
+  | { type: 'SET_SPLITTER_POSITION'; payload: number }
+  | { type: 'TOGGLE_TASK_EXPANSION'; payload: string }
+  | { type: 'SET_VIEW_STATE'; payload: Partial<GanttViewState> }
+  | { type: 'UPDATE_COLUMN_WIDTH'; payload: { field: string; width: number } };
+
+// Main Gantt State
+export interface GanttState {
+  tasks: GanttTask[];
+  columns: ColumnConfig[];
+  timelineConfig: TimelineConfig;
+  virtualScrollConfig: VirtualScrollConfig;
+  dragState: DragState | null;
+  selectionState: SelectionState;
+  viewState: GanttViewState;
+  zoomLevels: ZoomLevel[];
+  performanceMetrics: PerformanceMetrics;
+}
+
+// Gantt Chart Props
+export interface AdvancedGanttProps {
+  // Data
+  tasks: GanttTask[];
+  columns?: ColumnConfig[];
+  
+  // Configuration
+  timelineConfig?: Partial<TimelineConfig>;
+  virtualScrollConfig?: Partial<VirtualScrollConfig>;
+  zoomLevels?: ZoomLevel[];
+  
+  // Initial State
+  initialViewState?: Partial<GanttViewState>;
+  initialSelection?: string[];
+  
+  // Event Handlers
+  onTaskUpdate?: (taskId: string, updates: Partial<GanttTask>) => void;
+  onTaskCreate?: (task: Omit<GanttTask, 'id'>) => void;
+  onTaskDelete?: (taskId: string) => void;
+  onTaskMove?: DragEventHandler;
+  onTaskResize?: ResizeEventHandler;
+  onProgressChange?: ProgressEventHandler;
+  onSelectionChange?: SelectionEventHandler;
+  onColumnResize?: ColumnResizeHandler;
+  onDependencyCreate?: (fromTaskId: string, toTaskId: string) => void;
+  onDependencyDelete?: (fromTaskId: string, toTaskId: string) => void;
+  
+  // UI Customization
+  className?: string;
+  style?: React.CSSProperties;
+  theme?: 'light' | 'dark' | 'auto';
+  locale?: string;
+  
+  // Feature Flags
+  enableDragDrop?: boolean;
+  enableResize?: boolean;
+  enableProgressEdit?: boolean;
+  enableInlineEdit?: boolean;
+  enableContextMenu?: boolean;
+  enableTooltips?: boolean;
+  enableExport?: boolean;
+  enablePrint?: boolean;
+  
+  // Performance Options
+  enableVirtualScrolling?: boolean;
+  enableDebouncing?: boolean;
+  debounceDelay?: number;
+  maxVisibleTasks?: number;
+}
+
+// Context Menu Options
+export interface ContextMenuOption {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  separator?: boolean;
+  children?: ContextMenuOption[];
+  onClick?: (task?: GanttTask) => void;
+}
+
+// Export Options
+export interface ExportOptions {
+  format: 'png' | 'pdf' | 'svg' | 'json' | 'csv' | 'xlsx';
+  includeColumns?: string[];
+  dateRange?: { start: Date; end: Date };
+  filename?: string;
+  paperSize?: 'A4' | 'A3' | 'Letter' | 'Legal';
+  orientation?: 'portrait' | 'landscape';
+  scale?: number;
+}
+
+// Filter and Search
+export interface FilterConfig {
+  field: string;
+  operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'between';
+  value: any;
+  logic?: 'and' | 'or';
+}
+
+export interface SearchConfig {
+  query: string;
+  fields: string[];
+  caseSensitive?: boolean;
+  wholeWord?: boolean;
+  regex?: boolean;
+}
+
+// Baseline and Critical Path
+export interface TaskBaseline {
+  taskId: string;
+  baselineStart: Date;
+  baselineEnd: Date;
+  baselineDuration: number;
+  baselineProgress: number;
+  variance?: number; // days
+}
+
+export interface CriticalPath {
+  taskIds: string[];
+  totalDuration: number;
+  slack: number; // days of buffer
+}
+
+// Undo/Redo
+export interface HistoryState {
+  past: GanttState[];
+  present: GanttState;
+  future: GanttState[];
+  maxHistorySize: number;
+}
+
+// Keyboard Shortcuts
+export interface KeyboardShortcut {
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  action: string;
+  description: string;
+  handler: (event: KeyboardEvent) => void;
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/types/project-roadmap.types.ts b/worklenz-frontend/src/types/project-roadmap.types.ts
new file mode 100644
index 00000000..a444942b
--- /dev/null
+++ b/worklenz-frontend/src/types/project-roadmap.types.ts
@@ -0,0 +1,62 @@
+export interface ProjectPhase {
+  id: string;
+  name: string;
+  description: string;
+  startDate: Date;
+  endDate: Date;
+  progress: number;
+  color: string;
+  status: 'not-started' | 'in-progress' | 'completed' | 'on-hold';
+  tasks: PhaseTask[];
+  milestones: PhaseMilestone[];
+}
+
+export interface PhaseTask {
+  id: string;
+  name: string;
+  description?: string;
+  startDate: Date;
+  endDate: Date;
+  progress: number;
+  assigneeId?: string;
+  assigneeName?: string;
+  priority: 'low' | 'medium' | 'high';
+  status: 'todo' | 'in-progress' | 'done';
+  dependencies?: string[];
+}
+
+export interface PhaseMilestone {
+  id: string;
+  name: string;
+  description?: string;
+  dueDate: Date;
+  isCompleted: boolean;
+  criticalPath: boolean;
+}
+
+export interface ProjectRoadmap {
+  id: string;
+  projectId: string;
+  name: string;
+  description?: string;
+  startDate: Date;
+  endDate: Date;
+  phases: ProjectPhase[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface GanttViewOptions {
+  viewMode: 'day' | 'week' | 'month' | 'year';
+  showTasks: boolean;
+  showMilestones: boolean;
+  groupByPhase: boolean;
+}
+
+export interface PhaseModalData extends ProjectPhase {
+  taskCount: number;
+  completedTaskCount: number;
+  milestoneCount: number;
+  completedMilestoneCount: number;
+  teamMembers: string[];
+}
\ No newline at end of file
diff --git a/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts b/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts
index 9e50424e..c30d189f 100644
--- a/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts
+++ b/worklenz-frontend/src/utils/enhanced-performance-monitoring.ts
@@ -86,7 +86,7 @@ export class EnhancedPerformanceMonitor {
     this.collectInitialMetrics();
     this.startPeriodicCollection();
     
-    console.log('🚀 Enhanced performance monitoring started');
+    // console.log('🚀 Enhanced performance monitoring started');
   }
 
   // Stop monitoring and cleanup
@@ -97,7 +97,7 @@ export class EnhancedPerformanceMonitor {
     this.cleanupObservers();
     this.clearIntervals();
     
-    console.log('🛑 Enhanced performance monitoring stopped');
+    // console.log('🛑 Enhanced performance monitoring stopped');
   }
 
   // Setup performance observers
@@ -357,7 +357,7 @@ export class EnhancedPerformanceMonitor {
     const recent = this.metrics.slice(-10); // Last 10 metrics
     const report = this.analyzeMetrics(recent);
     
-    console.log('📊 Performance Report:', report);
+    // console.log('📊 Performance Report:', report);
 
     // Check for performance issues
     this.checkPerformanceIssues(report);
diff --git a/worklenz-frontend/src/utils/gantt-performance.ts b/worklenz-frontend/src/utils/gantt-performance.ts
new file mode 100644
index 00000000..5116c186
--- /dev/null
+++ b/worklenz-frontend/src/utils/gantt-performance.ts
@@ -0,0 +1,408 @@
+import { useMemo, useCallback, useRef, useEffect } from 'react';
+import { GanttTask, PerformanceMetrics } from '../types/advanced-gantt.types';
+
+// Debounce utility for drag operations
+export function useDebounce<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  
+  return useCallback((...args: Parameters<T>) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    timeoutRef.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, [callback, delay]) as T;
+}
+
+// Throttle utility for scroll events
+export function useThrottle<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const lastCall = useRef<number>(0);
+  
+  return useCallback((...args: Parameters<T>) => {
+    const now = Date.now();
+    if (now - lastCall.current >= delay) {
+      lastCall.current = now;
+      callback(...args);
+    }
+  }, [callback, delay]) as T;
+}
+
+// Memoized task calculations
+export const useTaskCalculations = (tasks: GanttTask[]) => {
+  return useMemo(() => {
+    const taskMap = new Map<string, GanttTask>();
+    const parentChildMap = new Map<string, string[]>();
+    const dependencyMap = new Map<string, string[]>();
+    
+    // Build maps for efficient lookups
+    tasks.forEach(task => {
+      taskMap.set(task.id, task);
+      
+      if (task.parent) {
+        if (!parentChildMap.has(task.parent)) {
+          parentChildMap.set(task.parent, []);
+        }
+        parentChildMap.get(task.parent)!.push(task.id);
+      }
+      
+      if (task.dependencies) {
+        dependencyMap.set(task.id, task.dependencies);
+      }
+    });
+    
+    return {
+      taskMap,
+      parentChildMap,
+      dependencyMap,
+      totalTasks: tasks.length,
+      projectTasks: tasks.filter(t => t.type === 'project'),
+      milestones: tasks.filter(t => t.type === 'milestone'),
+      regularTasks: tasks.filter(t => t.type === 'task'),
+    };
+  }, [tasks]);
+};
+
+// Virtual scrolling calculations
+export interface VirtualScrollData {
+  startIndex: number;
+  endIndex: number;
+  visibleItems: GanttTask[];
+  totalHeight: number;
+  offsetY: number;
+}
+
+export const useVirtualScrolling = (
+  tasks: GanttTask[],
+  containerHeight: number,
+  itemHeight: number,
+  scrollTop: number,
+  overscan: number = 5
+): VirtualScrollData => {
+  return useMemo(() => {
+    const totalHeight = tasks.length * itemHeight;
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const endIndex = Math.min(
+      tasks.length - 1,
+      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+    );
+    const visibleItems = tasks.slice(startIndex, endIndex + 1);
+    const offsetY = startIndex * itemHeight;
+    
+    return {
+      startIndex,
+      endIndex,
+      visibleItems,
+      totalHeight,
+      offsetY,
+    };
+  }, [tasks, containerHeight, itemHeight, scrollTop, overscan]);
+};
+
+// Timeline virtual scrolling
+export interface TimelineVirtualData {
+  startDate: Date;
+  endDate: Date;
+  visibleDays: Date[];
+  totalWidth: number;
+  offsetX: number;
+}
+
+export const useTimelineVirtualScrolling = (
+  projectStartDate: Date,
+  projectEndDate: Date,
+  dayWidth: number,
+  containerWidth: number,
+  scrollLeft: number,
+  overscan: number = 10
+): TimelineVirtualData => {
+  return useMemo(() => {
+    const totalDays = Math.ceil((projectEndDate.getTime() - projectStartDate.getTime()) / (1000 * 60 * 60 * 24));
+    const totalWidth = totalDays * dayWidth;
+    
+    const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
+    const endDayIndex = Math.min(
+      totalDays - 1,
+      Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan
+    );
+    
+    const visibleDays: Date[] = [];
+    for (let i = startDayIndex; i <= endDayIndex; i++) {
+      const date = new Date(projectStartDate);
+      date.setDate(date.getDate() + i);
+      visibleDays.push(date);
+    }
+    
+    const offsetX = startDayIndex * dayWidth;
+    const startDate = new Date(projectStartDate);
+    startDate.setDate(startDate.getDate() + startDayIndex);
+    
+    const endDate = new Date(projectStartDate);
+    endDate.setDate(endDate.getDate() + endDayIndex);
+    
+    return {
+      startDate,
+      endDate,
+      visibleDays,
+      totalWidth,
+      offsetX,
+    };
+  }, [projectStartDate, projectEndDate, dayWidth, containerWidth, scrollLeft, overscan]);
+};
+
+// Performance monitoring hook
+export const usePerformanceMonitoring = (): {
+  metrics: PerformanceMetrics;
+  startMeasure: (name: string) => void;
+  endMeasure: (name: string) => void;
+  recordMetric: (name: string, value: number) => void;
+} => {
+  const metricsRef = useRef<PerformanceMetrics>({
+    renderTime: 0,
+    taskCount: 0,
+    visibleTaskCount: 0,
+  });
+  
+  const measurementsRef = useRef<Map<string, number>>(new Map());
+  
+  const startMeasure = useCallback((name: string) => {
+    measurementsRef.current.set(name, performance.now());
+  }, []);
+  
+  const endMeasure = useCallback((name: string) => {
+    const startTime = measurementsRef.current.get(name);
+    if (startTime) {
+      const duration = performance.now() - startTime;
+      measurementsRef.current.delete(name);
+      
+      if (name === 'render') {
+        metricsRef.current.renderTime = duration;
+      }
+    }
+  }, []);
+  
+  const recordMetric = useCallback((name: string, value: number) => {
+    switch (name) {
+      case 'taskCount':
+        metricsRef.current.taskCount = value;
+        break;
+      case 'visibleTaskCount':
+        metricsRef.current.visibleTaskCount = value;
+        break;
+      case 'memoryUsage':
+        metricsRef.current.memoryUsage = value;
+        break;
+      case 'fps':
+        metricsRef.current.fps = value;
+        break;
+    }
+  }, []);
+  
+  return {
+    metrics: metricsRef.current,
+    startMeasure,
+    endMeasure,
+    recordMetric,
+  };
+};
+
+// Intersection Observer for lazy loading
+export const useIntersectionObserver = (
+  callback: (entries: IntersectionObserverEntry[]) => void,
+  options?: IntersectionObserverInit
+) => {
+  const targetRef = useRef<HTMLElement>(null);
+  const observerRef = useRef<IntersectionObserver>();
+  
+  useEffect(() => {
+    if (!targetRef.current) return;
+    
+    observerRef.current = new IntersectionObserver(callback, {
+      root: null,
+      rootMargin: '100px',
+      threshold: 0.1,
+      ...options,
+    });
+    
+    observerRef.current.observe(targetRef.current);
+    
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [callback, options]);
+  
+  return targetRef;
+};
+
+// Date calculations optimization
+export const useDateCalculations = () => {
+  return useMemo(() => {
+    const cache = new Map<string, number>();
+    
+    const getDaysBetween = (start: Date, end: Date): number => {
+      const key = `${start.getTime()}-${end.getTime()}`;
+      if (cache.has(key)) {
+        return cache.get(key)!;
+      }
+      
+      const days = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+      cache.set(key, days);
+      return days;
+    };
+    
+    const addDays = (date: Date, days: number): Date => {
+      const result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result;
+    };
+    
+    const isWeekend = (date: Date): boolean => {
+      const day = date.getDay();
+      return day === 0 || day === 6; // Sunday or Saturday
+    };
+    
+    const isWorkingDay = (date: Date, workingDays: number[]): boolean => {
+      return workingDays.includes(date.getDay());
+    };
+    
+    const getWorkingDaysBetween = (start: Date, end: Date, workingDays: number[]): number => {
+      let count = 0;
+      const current = new Date(start);
+      
+      while (current <= end) {
+        if (isWorkingDay(current, workingDays)) {
+          count++;
+        }
+        current.setDate(current.getDate() + 1);
+      }
+      
+      return count;
+    };
+    
+    return {
+      getDaysBetween,
+      addDays,
+      isWeekend,
+      isWorkingDay,
+      getWorkingDaysBetween,
+      clearCache: () => cache.clear(),
+    };
+  }, []);
+};
+
+// Task position calculations
+export const useTaskPositions = (
+  tasks: GanttTask[],
+  timelineStart: Date,
+  dayWidth: number
+) => {
+  return useMemo(() => {
+    const positions = new Map<string, { x: number; width: number; y: number }>();
+    
+    tasks.forEach((task, index) => {
+      const startDays = Math.floor((task.startDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24));
+      const endDays = Math.floor((task.endDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24));
+      
+      positions.set(task.id, {
+        x: startDays * dayWidth,
+        width: Math.max(1, (endDays - startDays) * dayWidth),
+        y: index * 40, // Assuming 40px row height
+      });
+    });
+    
+    return positions;
+  }, [tasks, timelineStart, dayWidth]);
+};
+
+// Memory management utilities
+export const useMemoryManagement = () => {
+  const cleanupFunctions = useRef<Array<() => void>>([]);
+  
+  const addCleanup = useCallback((cleanup: () => void) => {
+    cleanupFunctions.current.push(cleanup);
+  }, []);
+  
+  const runCleanup = useCallback(() => {
+    cleanupFunctions.current.forEach(cleanup => cleanup());
+    cleanupFunctions.current = [];
+  }, []);
+  
+  useEffect(() => {
+    return runCleanup;
+  }, [runCleanup]);
+  
+  return { addCleanup, runCleanup };
+};
+
+// Batch update utility for multiple task changes
+export const useBatchUpdates = <T>(
+  updateFunction: (updates: T[]) => void,
+  delay: number = 100
+) => {
+  const batchRef = useRef<T[]>([]);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  
+  const addUpdate = useCallback((update: T) => {
+    batchRef.current.push(update);
+    
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    timeoutRef.current = setTimeout(() => {
+      if (batchRef.current.length > 0) {
+        updateFunction([...batchRef.current]);
+        batchRef.current = [];
+      }
+    }, delay);
+  }, [updateFunction, delay]);
+  
+  const flushUpdates = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    if (batchRef.current.length > 0) {
+      updateFunction([...batchRef.current]);
+      batchRef.current = [];
+    }
+  }, [updateFunction]);
+  
+  return { addUpdate, flushUpdates };
+};
+
+// FPS monitoring
+export const useFPSMonitoring = () => {
+  const fpsRef = useRef<number>(0);
+  const frameCountRef = useRef<number>(0);
+  const lastTimeRef = useRef<number>(performance.now());
+  
+  const measureFPS = useCallback(() => {
+    frameCountRef.current++;
+    const now = performance.now();
+    
+    if (now - lastTimeRef.current >= 1000) {
+      fpsRef.current = Math.round((frameCountRef.current * 1000) / (now - lastTimeRef.current));
+      frameCountRef.current = 0;
+      lastTimeRef.current = now;
+    }
+    
+    requestAnimationFrame(measureFPS);
+  }, []);
+  
+  useEffect(() => {
+    const rafId = requestAnimationFrame(measureFPS);
+    return () => cancelAnimationFrame(rafId);
+  }, [measureFPS]);
+  
+  return fpsRef.current;
+};
\ No newline at end of file